@galaxy-io/dls 1.2.6 → 1.3.0

package/dist/table/useTableKeyboardNavigation.d.ts

@@ -0,0 +1,25 @@
+/** Body rows carry this attribute so focus can be moved without a ref per row. */
+export declare const ROW_INDEX_ATTRIBUTE = "data-row-index";
+interface UseTableKeyboardNavigationOptions {
+    /** The element containing the body rows. */
+    bodyRef: React.RefObject<HTMLElement | null>;
+    rowCount: number;
+    enabled?: boolean;
+    onActivate?: (rowIndex: number, event: React.KeyboardEvent) => void;
+    onToggleSelect?: (rowIndex: number, event: React.KeyboardEvent) => void;
+    /** Lets a virtualized host bring an off-screen row into the DOM first. */
+    scrollToIndex?: (rowIndex: number) => void;
+}
+export interface TableKeyboardNavigation {
+    focusedRowIndex: number;
+    /** Roving tabindex: exactly one body row is in the tab order. */
+    getRowTabIndex: (rowIndex: number) => number | undefined;
+    onRowKeyDown: (rowIndex: number, event: React.KeyboardEvent) => void;
+    onRowFocus: (rowIndex: number) => void;
+}
+/**
+ * Roving-tabindex keyboard navigation over table rows: one Tab stop for the
+ * whole body, arrows to move between rows, Enter to activate, Space to select.
+ */
+export declare function useTableKeyboardNavigation({ bodyRef, rowCount, enabled, onActivate, onToggleSelect, scrollToIndex, }: UseTableKeyboardNavigationOptions): TableKeyboardNavigation;
+export {};

package/dist/table/useTableKeyboardNavigation.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/table/useTableKeyboardNavigation.ts
+/** Body rows carry this attribute so focus can be moved without a ref per row. */
+var ROW_INDEX_ATTRIBUTE = "data-row-index";
+/**
+* Roving-tabindex keyboard navigation over table rows: one Tab stop for the
+* whole body, arrows to move between rows, Enter to activate, Space to select.
+*/
+function useTableKeyboardNavigation({ bodyRef, rowCount, enabled = false, onActivate, onToggleSelect, scrollToIndex }) {
+	const [focusedRowIndex, setFocusedRowIndex] = useState(0);
+	const shouldMoveFocusRef = useRef(false);
+	const onActivateRef = useRef(onActivate);
+	const onToggleSelectRef = useRef(onToggleSelect);
+	const scrollToIndexRef = useRef(scrollToIndex);
+	useEffect(() => {
+		onActivateRef.current = onActivate;
+		onToggleSelectRef.current = onToggleSelect;
+		scrollToIndexRef.current = scrollToIndex;
+	});
+	const clampedFocusedRowIndex = rowCount === 0 ? 0 : Math.min(focusedRowIndex, Math.max(0, rowCount - 1));
+	useEffect(() => {
+		if (!shouldMoveFocusRef.current) return;
+		shouldMoveFocusRef.current = false;
+		const body = bodyRef.current;
+		if (!body) return;
+		body.querySelector(`[${ROW_INDEX_ATTRIBUTE}="${clampedFocusedRowIndex}"]`)?.focus();
+	}, [bodyRef, clampedFocusedRowIndex]);
+	const moveFocusTo = useCallback((rowIndex) => {
+		shouldMoveFocusRef.current = true;
+		scrollToIndexRef.current?.(rowIndex);
+		setFocusedRowIndex(rowIndex);
+	}, []);
+	const onRowKeyDown = useCallback((rowIndex, event) => {
+		if (!enabled || rowCount === 0) return;
+		if (event.target !== event.currentTarget) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				moveFocusTo(Math.min(rowCount - 1, rowIndex + 1));
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				moveFocusTo(Math.max(0, rowIndex - 1));
+				return;
+			case "Home":
+				event.preventDefault();
+				moveFocusTo(0);
+				return;
+			case "End":
+				event.preventDefault();
+				moveFocusTo(rowCount - 1);
+				return;
+			case "Enter":
+				event.preventDefault();
+				onActivateRef.current?.(rowIndex, event);
+				return;
+			case " ":
+			case "Spacebar":
+				event.preventDefault();
+				onToggleSelectRef.current?.(rowIndex, event);
+				return;
+			default:
+		}
+	}, [
+		enabled,
+		rowCount,
+		moveFocusTo
+	]);
+	const onRowFocus = useCallback((rowIndex) => {
+		setFocusedRowIndex(rowIndex);
+	}, []);
+	return {
+		focusedRowIndex: clampedFocusedRowIndex,
+		getRowTabIndex: useCallback((rowIndex) => {
+			if (!enabled) return void 0;
+			return rowIndex === clampedFocusedRowIndex ? 0 : -1;
+		}, [enabled, clampedFocusedRowIndex]),
+		onRowKeyDown,
+		onRowFocus
+	};
+}
+//#endregion
+export { ROW_INDEX_ATTRIBUTE, useTableKeyboardNavigation };

package/dist/table/useTableRowExpansion.d.ts

@@ -0,0 +1,24 @@
+import type { ExpandedState as TanstackExpandedState, OnChangeFn as TanstackOnChangeFn } from "@tanstack/react-table";
+interface UseTableRowExpansionOptions {
+    expandedRowIds?: string[];
+    defaultExpandedRowIds?: string[];
+    onExpandedChange?: (expandedRowIds: string[]) => void;
+    enableMultiRowExpansion?: boolean;
+}
+export interface TableRowExpansion {
+    /** Always defined, so it can be fed to TanStack's `state.expanded`. */
+    expanded: TanstackExpandedState;
+    expandedRowIds: string[];
+    onExpandedChange: TanstackOnChangeFn<TanstackExpandedState>;
+    /** Drops ids for rows that no longer exist, e.g. after a refetch. */
+    pruneMissingRowIds: (rowIds: string[]) => void;
+}
+/**
+ * Owns row-expansion state, controlled or uncontrolled, and translates between
+ * the `string[]` public shape and TanStack's `ExpandedState` record.
+ *
+ * Expansion lives in table state rather than in the column definitions, so
+ * toggling a row no longer rebuilds every column def.
+ */
+export declare function useTableRowExpansion({ expandedRowIds, defaultExpandedRowIds, onExpandedChange, enableMultiRowExpansion, }: UseTableRowExpansionOptions): TableRowExpansion;
+export {};

package/dist/table/useTableRowExpansion.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/table/useTableRowExpansion.ts
+function toExpandedState(expandedRowIds) {
+	return Object.fromEntries(expandedRowIds.map((rowId) => [rowId, true]));
+}
+function toExpandedRowIds(expanded) {
+	if (expanded === true) return [];
+	return Object.entries(expanded).filter(([, isExpanded]) => isExpanded).map(([rowId]) => rowId);
+}
+/**
+* Owns row-expansion state, controlled or uncontrolled, and translates between
+* the `string[]` public shape and TanStack's `ExpandedState` record.
+*
+* Expansion lives in table state rather than in the column definitions, so
+* toggling a row no longer rebuilds every column def.
+*/
+function useTableRowExpansion({ expandedRowIds, defaultExpandedRowIds, onExpandedChange, enableMultiRowExpansion = true }) {
+	const [internalRowIds, setInternalRowIds] = useState(defaultExpandedRowIds ?? []);
+	const isControlled = expandedRowIds !== void 0;
+	const resolvedRowIds = isControlled ? expandedRowIds : internalRowIds;
+	const rowIdsRef = useRef(resolvedRowIds);
+	const onChangeRef = useRef(onExpandedChange);
+	useEffect(() => {
+		rowIdsRef.current = resolvedRowIds;
+		onChangeRef.current = onExpandedChange;
+	});
+	const applyRowIds = useCallback((nextRowIds) => {
+		rowIdsRef.current = nextRowIds;
+		if (!isControlled) setInternalRowIds(nextRowIds);
+		onChangeRef.current?.(nextRowIds);
+	}, [isControlled]);
+	const handleExpandedChange = useCallback((updater) => {
+		const current = toExpandedState(rowIdsRef.current);
+		const nextRowIds = toExpandedRowIds(typeof updater === "function" ? updater(current) : updater);
+		if (!enableMultiRowExpansion && nextRowIds.length > 1) {
+			const opened = nextRowIds.filter((rowId) => !rowIdsRef.current.includes(rowId));
+			applyRowIds(opened.length > 0 ? [opened[opened.length - 1]] : []);
+			return;
+		}
+		applyRowIds(nextRowIds);
+	}, [applyRowIds, enableMultiRowExpansion]);
+	const pruneMissingRowIds = useCallback((rowIds) => {
+		const present = new Set(rowIds);
+		const nextRowIds = rowIdsRef.current.filter((rowId) => present.has(rowId));
+		if (nextRowIds.length === rowIdsRef.current.length) return;
+		applyRowIds(nextRowIds);
+	}, [applyRowIds]);
+	const expanded = useMemo(() => toExpandedState(resolvedRowIds), [resolvedRowIds]);
+	return useMemo(() => ({
+		expanded,
+		expandedRowIds: resolvedRowIds,
+		onExpandedChange: handleExpandedChange,
+		pruneMissingRowIds
+	}), [
+		expanded,
+		resolvedRowIds,
+		handleExpandedChange,
+		pruneMissingRowIds
+	]);
+}
+//#endregion
+export { useTableRowExpansion };

package/dist/table/useTableRowSelection.d.ts

@@ -0,0 +1,27 @@
+import type { OnChangeFn as TanstackOnChangeFn, Row as TanstackRow, RowSelectionState as TanstackRowSelectionState } from "@tanstack/react-table";
+interface UseTableRowSelectionOptions<TData> {
+    rowSelection?: TanstackRowSelectionState;
+    defaultRowSelection?: TanstackRowSelectionState;
+    onRowSelectionChange?: TanstackOnChangeFn<TanstackRowSelectionState>;
+    enableMultiRowSelection?: boolean;
+    enableSelectionRange?: boolean;
+    onSelectedRowsChange?: (rows: TanstackRow<TData>[]) => void;
+}
+export interface TableRowSelection<TData> {
+    /** Always defined, so it can be fed to TanStack's `state.rowSelection`. */
+    rowSelection: TanstackRowSelectionState;
+    onRowSelectionChange: TanstackOnChangeFn<TanstackRowSelectionState>;
+    toggleRow: (row: TanstackRow<TData>, rows: TanstackRow<TData>[], isShiftKey: boolean) => void;
+    toggleAll: (rows: TanstackRow<TData>[], isSelected: boolean) => void;
+    notifySelectedRows: (rows: TanstackRow<TData>[]) => void;
+}
+/**
+ * Owns row-selection state so it works whether the consumer controls it or not.
+ *
+ * TanStack replaces its default updater as soon as `onRowSelectionChange` is
+ * supplied, so passing that callback without also passing `state.rowSelection`
+ * silently freezes selection. Holding the state here means there is one code
+ * path and selection always sticks.
+ */
+export declare function useTableRowSelection<TData>({ rowSelection, defaultRowSelection, onRowSelectionChange, enableMultiRowSelection, enableSelectionRange, onSelectedRowsChange, }: UseTableRowSelectionOptions<TData>): TableRowSelection<TData>;
+export {};

package/dist/table/useTableRowSelection.js

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/table/useTableRowSelection.ts
+/**
+* Owns row-selection state so it works whether the consumer controls it or not.
+*
+* TanStack replaces its default updater as soon as `onRowSelectionChange` is
+* supplied, so passing that callback without also passing `state.rowSelection`
+* silently freezes selection. Holding the state here means there is one code
+* path and selection always sticks.
+*/
+function useTableRowSelection({ rowSelection, defaultRowSelection, onRowSelectionChange, enableMultiRowSelection = true, enableSelectionRange = true, onSelectedRowsChange }) {
+	const [internalSelection, setInternalSelection] = useState(defaultRowSelection ?? {});
+	const isControlled = rowSelection !== void 0;
+	const resolvedSelection = isControlled ? rowSelection : internalSelection;
+	const selectionRef = useRef(resolvedSelection);
+	const onChangeRef = useRef(onRowSelectionChange);
+	const onSelectedRowsChangeRef = useRef(onSelectedRowsChange);
+	useEffect(() => {
+		selectionRef.current = resolvedSelection;
+		onChangeRef.current = onRowSelectionChange;
+		onSelectedRowsChangeRef.current = onSelectedRowsChange;
+	});
+	/** Anchor for shift-click ranges — the row of the last plain click. */
+	const anchorRowIdRef = useRef(null);
+	const applySelection = useCallback((next) => {
+		selectionRef.current = next;
+		if (!isControlled) setInternalSelection(next);
+		onChangeRef.current?.(next);
+	}, [isControlled]);
+	const handleRowSelectionChange = useCallback((updater) => {
+		applySelection(typeof updater === "function" ? updater(selectionRef.current) : updater);
+	}, [applySelection]);
+	const toggleRow = useCallback((row, rows, isShiftKey) => {
+		if (!row.getCanSelect()) return;
+		const isSelected = !selectionRef.current[row.id];
+		if (!enableMultiRowSelection) {
+			applySelection(isSelected ? { [row.id]: true } : {});
+			anchorRowIdRef.current = row.id;
+			return;
+		}
+		const anchorRowId = anchorRowIdRef.current;
+		if (!(isShiftKey && enableSelectionRange && anchorRowId !== null)) {
+			const next = { ...selectionRef.current };
+			if (isSelected) next[row.id] = true;
+			else delete next[row.id];
+			applySelection(next);
+			anchorRowIdRef.current = row.id;
+			return;
+		}
+		const anchorIndex = rows.findIndex((candidate) => candidate.id === anchorRowId);
+		const targetIndex = rows.findIndex((candidate) => candidate.id === row.id);
+		if (anchorIndex === -1 || targetIndex === -1) return;
+		const [from, to] = anchorIndex <= targetIndex ? [anchorIndex, targetIndex] : [targetIndex, anchorIndex];
+		const next = { ...selectionRef.current };
+		rows.slice(from, to + 1).forEach((candidate) => {
+			if (candidate.getCanSelect()) next[candidate.id] = true;
+		});
+		applySelection(next);
+	}, [
+		applySelection,
+		enableMultiRowSelection,
+		enableSelectionRange
+	]);
+	const toggleAll = useCallback((rows, isSelected) => {
+		if (!isSelected) {
+			applySelection({});
+			anchorRowIdRef.current = null;
+			return;
+		}
+		const next = { ...selectionRef.current };
+		rows.forEach((row) => {
+			if (row.getCanSelect()) next[row.id] = true;
+		});
+		applySelection(next);
+	}, [applySelection]);
+	const notifySelectedRows = useCallback((rows) => {
+		onSelectedRowsChangeRef.current?.(rows);
+	}, []);
+	return useMemo(() => ({
+		rowSelection: resolvedSelection,
+		onRowSelectionChange: handleRowSelectionChange,
+		toggleRow,
+		toggleAll,
+		notifySelectedRows
+	}), [
+		resolvedSelection,
+		handleRowSelectionChange,
+		toggleRow,
+		toggleAll,
+		notifySelectedRows
+	]);
+}
+//#endregion
+export { useTableRowSelection };

package/dist/table/utils.d.ts

@@ -0,0 +1,50 @@
+import type { Theme } from "../theme/types";
+import { EstimateColumnWidthOptions, Row, TableDensity, TableVariant } from "./types";
+/**
+ * Density and variant tokens for every table surface.
+ *
+ * This module is evaluated by Linaria at build time (its constants are
+ * interpolated statically into styled templates), so it must stay free of
+ * component imports — pulling in React, framer-motion or Phosphor here would
+ * drag them into build-time evaluation.
+ */
+/** Synthetic column injected in front of the consumer's columns. */
+export declare const SELECT_COLUMN_ID = "__select__";
+export declare const SELECT_COLUMN_WIDTH = 44;
+export declare const EXPAND_COLUMN_ID = "__expand__";
+export declare const EXPAND_COLUMN_WIDTH = 44;
+/** Width assumed for a pinned column that declares no explicit `size`. */
+export declare const DEFAULT_COLUMN_WIDTH = 150;
+/** Bounds applied when a resized column declares no `minSize`/`maxSize`. */
+export declare const DEFAULT_MIN_COLUMN_WIDTH = 60;
+export declare const DEFAULT_MAX_COLUMN_WIDTH = 800;
+/** How far past the last row the infinite-scroll sentinel reaches. */
+export declare const INFINITE_SCROLL_ROOT_MARGIN_PX = 500;
+/** Spreadsheet: trailing sticky column holding row actions and add-column. */
+export declare const ROW_ACTION_COLUMN_WIDTH = 48;
+/** Spreadsheet: diameter of the per-cell enrichment status dot. */
+export declare const CELL_STATUS_DOT_SIZE = 6;
+/**
+ * Builds a stand-in row for surfaces with no TanStack table instance — the
+ * virtualized table and the spreadsheet both render straight from an index.
+ *
+ * Only `original` and `index` exist at runtime. Every other member of
+ * TanStack's `Row` — `id`, `getIsSelected()`, `subRows`, `getValue()` — is
+ * typed as present but absent, so calling one throws. Cell renderers on those
+ * surfaces should read `original` and `index` and nothing else.
+ */
+export declare function createVirtualRow<TData>(original: TData, index: number): Row<TData>;
+/** Vertical padding is constant across densities; only the horizontal changes. */
+export declare const CELL_PADDING_Y = "8px";
+export declare function getDensityRowHeightPx(density?: TableDensity): number;
+export declare function getDensityRowHeight(density?: TableDensity): string;
+export declare function getDensityCellPaddingX(density?: TableDensity): string;
+export declare function getDensityCellPadding(density?: TableDensity): string;
+export declare function getVariantBackgroundColor(theme: Theme, variant?: TableVariant): string;
+export declare function getVariantHoverBackgroundColor(theme: Theme, variant?: TableVariant): string;
+export declare function getVariantSelectedBackgroundColor(theme: Theme, variant?: TableVariant): string;
+/**
+ * Estimate column width based on header name and sample data values.
+ * Useful for auto-sizing table columns based on content.
+ */
+export declare const estimateColumnWidth: (columnName: string, sampleValues: string[], options?: EstimateColumnWidthOptions) => number;

package/dist/table/utils.js

@@ -0,0 +1,78 @@
+import { TableDensity, TableVariant } from "./types.js";
+import { match } from "ts-pattern";
+//#region src/table/utils.ts
+/**
+* Density and variant tokens for every table surface.
+*
+* This module is evaluated by Linaria at build time (its constants are
+* interpolated statically into styled templates), so it must stay free of
+* component imports — pulling in React, framer-motion or Phosphor here would
+* drag them into build-time evaluation.
+*/
+/** Synthetic column injected in front of the consumer's columns. */
+var SELECT_COLUMN_ID = "__select__";
+var SELECT_COLUMN_WIDTH = 44;
+var EXPAND_COLUMN_ID = "__expand__";
+var EXPAND_COLUMN_WIDTH = 44;
+/** Width assumed for a pinned column that declares no explicit `size`. */
+var DEFAULT_COLUMN_WIDTH = 150;
+/** Bounds applied when a resized column declares no `minSize`/`maxSize`. */
+var DEFAULT_MIN_COLUMN_WIDTH = 60;
+var DEFAULT_MAX_COLUMN_WIDTH = 800;
+/** How far past the last row the infinite-scroll sentinel reaches. */
+var INFINITE_SCROLL_ROOT_MARGIN_PX = 500;
+/** Spreadsheet: trailing sticky column holding row actions and add-column. */
+var ROW_ACTION_COLUMN_WIDTH = 48;
+/** Spreadsheet: diameter of the per-cell enrichment status dot. */
+var CELL_STATUS_DOT_SIZE = 6;
+/**
+* Builds a stand-in row for surfaces with no TanStack table instance — the
+* virtualized table and the spreadsheet both render straight from an index.
+*
+* Only `original` and `index` exist at runtime. Every other member of
+* TanStack's `Row` — `id`, `getIsSelected()`, `subRows`, `getValue()` — is
+* typed as present but absent, so calling one throws. Cell renderers on those
+* surfaces should read `original` and `index` and nothing else.
+*/
+function createVirtualRow(original, index) {
+	return {
+		original,
+		index
+	};
+}
+/** Vertical padding is constant across densities; only the horizontal changes. */
+var CELL_PADDING_Y = "8px";
+function getDensityRowHeightPx(density) {
+	return match(density).with(TableDensity.SMALL, () => 32).with(TableDensity.MEDIUM, () => 48).with(TableDensity.LARGE, () => 56).with(void 0, () => 48).exhaustive();
+}
+function getDensityRowHeight(density) {
+	return `${getDensityRowHeightPx(density)}px`;
+}
+function getDensityCellPaddingX(density) {
+	return match(density).with(TableDensity.SMALL, () => "12px").with(TableDensity.MEDIUM, () => "16px").with(TableDensity.LARGE, () => "20px").with(void 0, () => "16px").exhaustive();
+}
+function getDensityCellPadding(density) {
+	return `8px ${getDensityCellPaddingX(density)}`;
+}
+function getVariantBackgroundColor(theme, variant) {
+	return match(variant).with(TableVariant.BASE, () => theme.color.background.base).with(TableVariant.PRIMARY, () => theme.color.background.primary).with(TableVariant.SECONDARY, () => theme.color.background.secondary).with(TableVariant.TERTIARY, () => theme.color.background.tertiary).with(void 0, () => theme.color.background.primary).exhaustive();
+}
+function getVariantHoverBackgroundColor(theme, variant) {
+	return match(variant).with(TableVariant.BASE, () => theme.color.background.tertiary).with(TableVariant.PRIMARY, () => theme.color.background.tertiary).with(TableVariant.SECONDARY, () => theme.color.background.tertiary).with(TableVariant.TERTIARY, () => theme.color.background.secondary).with(void 0, () => theme.color.background.tertiary).exhaustive();
+}
+function getVariantSelectedBackgroundColor(theme, variant) {
+	return match(variant).with(TableVariant.BASE, () => theme.color.background.secondary).with(TableVariant.PRIMARY, () => theme.color.background.secondary).with(TableVariant.SECONDARY, () => theme.color.background.primary).with(TableVariant.TERTIARY, () => theme.color.background.primary).with(void 0, () => theme.color.background.secondary).exhaustive();
+}
+/**
+* Estimate column width based on header name and sample data values.
+* Useful for auto-sizing table columns based on content.
+*/
+var estimateColumnWidth = (columnName, sampleValues, options = {}) => {
+	const { minWidth = 80, maxWidth = 400, charWidth = 8, padding = 32 } = options;
+	const headerLength = columnName.length;
+	const maxValueLength = sampleValues.reduce((max, val) => Math.max(max, String(val).length), 0);
+	const estimatedWidth = Math.max(headerLength, maxValueLength) * charWidth + padding;
+	return Math.max(minWidth, Math.min(maxWidth, estimatedWidth));
+};
+//#endregion
+export { CELL_PADDING_Y, CELL_STATUS_DOT_SIZE, DEFAULT_COLUMN_WIDTH, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, EXPAND_COLUMN_ID, EXPAND_COLUMN_WIDTH, INFINITE_SCROLL_ROOT_MARGIN_PX, ROW_ACTION_COLUMN_WIDTH, SELECT_COLUMN_ID, SELECT_COLUMN_WIDTH, createVirtualRow, estimateColumnWidth, getDensityCellPadding, getDensityCellPaddingX, getDensityRowHeight, getDensityRowHeightPx, getVariantBackgroundColor, getVariantHoverBackgroundColor, getVariantSelectedBackgroundColor };

package/dist/text/MarkdownText.js

@@ -22,7 +22,7 @@ var StyledParagraph = withTheme(/*#__PURE__*/ styled("p")({
 		"sgj79p2-3": [_exp4()]
 	}
 }));
-var _exp5 = () => ({ theme }) => theme.color.background.secondary;
+var _exp5 = () => ({ theme }) => theme.color.background.tertiary;
 var _exp6 = () => ({ theme }) => theme.color.border.tertiary;
 var _exp7 = () => ({ theme }) => theme.font.mono.family;
 var _exp8 = () => ({ theme }) => theme.font.mono.size.body_md;
@@ -41,7 +41,7 @@ var StyledPre = withTheme(/*#__PURE__*/ styled("pre")({
 		"s17hp2a6-5": [_exp0()]
 	}
 }));
-var _exp1 = () => ({ theme }) => theme.color.background.secondary;
+var _exp1 = () => ({ theme }) => theme.color.background.tertiary;
 var _exp10 = () => ({ theme }) => theme.color.border.tertiary;
 var _exp11 = () => ({ theme }) => theme.font.mono.family;
 var _exp12 = () => ({ theme }) => theme.font.mono.size.body_sm;
@@ -60,7 +60,7 @@ var StyledInlineCode = withTheme(/*#__PURE__*/ styled("code")({
 		"s1l8k0vu-5": [_exp14()]
 	}
 }));
-var _exp15 = () => ({ theme }) => theme.color.border.secondary;
+var _exp15 = () => ({ theme }) => theme.color.border.tertiary;
 var _exp16 = () => ({ theme }) => theme.font.sans.family;
 var _exp17 = () => ({ theme }) => theme.font.sans.size.body_md;
 var _exp18 = () => ({ theme }) => theme.font.sans.height.body_lg;
@@ -131,56 +131,67 @@ var StyledEm = withTheme(/*#__PURE__*/ styled("em")({
 	propsAsIs: false,
 	vars: { "s1s7p3od-0": [_exp33()] }
 }));
-var _exp34 = () => ({ theme }) => theme.color.border.tertiary;
+var _exp35 = () => ({ theme }) => theme.color.text.tertiary;
+var _exp36 = () => ({ theme }) => theme.color.text.primary;
+var StyledAnchor = withTheme(/*#__PURE__*/ styled("a")({
+	name: "StyledAnchor",
+	class: "s1ll404u",
+	propsAsIs: false,
+	vars: {
+		"s1ll404u-0": [_exp36()],
+		"s1ll404u-1": [_exp35()]
+	}
+}));
+var _exp37 = () => ({ theme }) => theme.color.border.tertiary;
 var StyledTableWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledTableWrapper",
-	class: "s1ll404u",
+	class: "scwvhie",
 	propsAsIs: false,
-	vars: { "s1ll404u-0": [_exp34()] }
+	vars: { "scwvhie-0": [_exp37()] }
 }));
-var _exp35 = () => ({ theme }) => theme.font.sans.family;
-var _exp36 = () => ({ theme }) => theme.font.sans.size.body_md;
-var _exp37 = () => ({ theme }) => theme.font.sans.height.heading_sm;
-var _exp38 = () => ({ theme }) => theme.color.text.primary;
+var _exp38 = () => ({ theme }) => theme.font.sans.family;
+var _exp39 = () => ({ theme }) => theme.font.sans.size.body_md;
+var _exp40 = () => ({ theme }) => theme.font.sans.height.heading_sm;
+var _exp41 = () => ({ theme }) => theme.color.text.primary;
 var StyledTable = withTheme(/*#__PURE__*/ styled("table")({
 	name: "StyledTable",
-	class: "scwvhie",
+	class: "svk1lh",
 	propsAsIs: false,
 	vars: {
-		"scwvhie-0": [_exp35()],
-		"scwvhie-1": [_exp36()],
-		"scwvhie-2": [_exp37()],
-		"scwvhie-3": [_exp38()]
+		"svk1lh-0": [_exp38()],
+		"svk1lh-1": [_exp39()],
+		"svk1lh-2": [_exp40()],
+		"svk1lh-3": [_exp41()]
 	}
 }));
-var _exp39 = () => ({ theme }) => theme.color.border.secondary;
+var _exp42 = () => ({ theme }) => theme.color.border.secondary;
 var StyledThead = withTheme(/*#__PURE__*/ styled("thead")({
 	name: "StyledThead",
-	class: "svk1lh",
+	class: "ss1iwpz",
 	propsAsIs: false,
-	vars: { "svk1lh-0": [_exp39()] }
+	vars: { "ss1iwpz-0": [_exp42()] }
 }));
-var _exp40 = () => ({ theme }) => theme.font.sans.weight.medium;
-var _exp41 = () => ({ theme }) => theme.color.text.secondary;
+var _exp43 = () => ({ theme }) => theme.font.sans.weight.medium;
+var _exp44 = () => ({ theme }) => theme.color.text.secondary;
 var StyledTh = withTheme(/*#__PURE__*/ styled("th")({
 	name: "StyledTh",
-	class: "ss1iwpz",
+	class: "shi85us",
 	propsAsIs: false,
 	vars: {
-		"ss1iwpz-0": [_exp40()],
-		"ss1iwpz-1": [_exp41()]
+		"shi85us-0": [_exp43()],
+		"shi85us-1": [_exp44()]
 	}
 }));
-var _exp42 = () => ({ theme }) => theme.color.border.tertiary;
+var _exp45 = () => ({ theme }) => theme.color.border.tertiary;
 var StyledTd = withTheme(/*#__PURE__*/ styled("td")({
 	name: "StyledTd",
-	class: "shi85us",
+	class: "s10h6trl",
 	propsAsIs: false,
-	vars: { "shi85us-0": [_exp42()] }
+	vars: { "s10h6trl-0": [_exp45()] }
 }));
 var StyledHeadingWrapper = /*#__PURE__*/ styled("div")({
 	name: "StyledHeadingWrapper",
-	class: "s10h6trl",
+	class: "s1sfwhg3",
 	propsAsIs: false
 });
 var markdownComponents = {
@@ -254,6 +265,13 @@ var markdownComponents = {
 		...props,
 		children
 	}),
+	a: ({ children, href, ...props }) => /* @__PURE__ */ jsx(StyledAnchor, {
+		...props,
+		href,
+		target: "_blank",
+		rel: "noreferrer",
+		children
+	}),
 	strong: ({ children, ...props }) => /* @__PURE__ */ jsx(StyledStrong, {
 		...props,
 		children

package/dist/theme/variants/dark.js

@@ -27,7 +27,7 @@ var GALAXY_DARK_COLOR = {
 		baseAlt: "#ffffff",
 		primary: "#161616",
 		primaryAlt: "#fafafa",
-		secondary: "#242424",
+		secondary: "#1e1e1e",
 		secondaryAlt: "#f0f0f0",
 		tertiary: "#1B1B1B",
 		tertiaryAlt: "#f5f5f5",

package/dist/widget/Widget.d.ts

@@ -4,6 +4,8 @@ export declare enum WidgetVariant {
     PRIMARY = "PRIMARY",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY",
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING",
     ERROR = "ERROR",
     DISABLED = "DISABLED"
 }

package/dist/widget/Widget.js

@@ -10,17 +10,19 @@ var WidgetVariant = /* @__PURE__ */ function(WidgetVariant) {
 	WidgetVariant["PRIMARY"] = "PRIMARY";
 	WidgetVariant["SECONDARY"] = "SECONDARY";
 	WidgetVariant["TERTIARY"] = "TERTIARY";
+	WidgetVariant["SUCCESS"] = "SUCCESS";
+	WidgetVariant["WARNING"] = "WARNING";
 	WidgetVariant["ERROR"] = "ERROR";
 	WidgetVariant["DISABLED"] = "DISABLED";
 	return WidgetVariant;
 }({});
 var _exp = () => ({ theme, $variant }) => {
-	return match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("ERROR", () => theme.color.background.primary).with("DISABLED", () => theme.color.background.disabled).exhaustive();
+	return match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).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("DISABLED", () => theme.color.background.primary).exhaustive();
 };
 var _exp2 = () => ({ theme, $noBorder, $isSelected, $variant }) => {
 	if ($noBorder) return "transparent";
 	if ($isSelected) return theme.color.border.selected;
-	return match($variant).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).exhaustive();
+	return match($variant).with("BASE", () => theme.color.border.primary).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.primary).exhaustive();
 };
 var _exp3 = () => ({ $padding, $noPadding }) => $padding ?? ($noPadding ? "0" : "12px");
 var _exp4 = () => ({ theme }) => theme.color.opacity.bw16;
@@ -43,14 +45,18 @@ var _exp1 = () => ({ $maxHeight }) => {
 	if ($maxHeight === void 0) return "auto";
 	return getCssSizeValue($maxHeight);
 };
-var _exp10 = () => ({ $isClickable, $variant }) => {
+var _exp10 = () => ({ $variant }) => {
+	if ($variant === "DISABLED") return .5;
+	return 1;
+};
+var _exp11 = () => ({ $isClickable, $variant }) => {
 	if ($variant === "ERROR") return "not-allowed";
 	if ($isClickable) return "pointer";
 	return "inherit";
 };
-var _exp11 = () => ({ theme, $noHover, $isSelected, $isClickable, $variant }) => {
-	if (!$isClickable) return match($variant).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).otherwise(() => theme.color.border.primary);
-	return match($variant).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).otherwise(() => {
+var _exp12 = () => ({ theme, $noHover, $isSelected, $isClickable, $variant }) => {
+	if (!$isClickable) return match($variant).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).otherwise(() => theme.color.border.primary);
+	return match($variant).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).with("DISABLED", () => theme.color.border.disabled).otherwise(() => {
 		if ($isSelected) return theme.color.border.selected;
 		if ($noHover) return theme.color.border.primary;
 		return theme.color.border.secondary;
@@ -73,7 +79,8 @@ var StyledWidget = withTheme(/*#__PURE__*/ styled("div")({
 		"sx1o0cd-9": [_exp0()],
 		"sx1o0cd-10": [_exp1()],
 		"sx1o0cd-11": [_exp10()],
-		"sx1o0cd-12": [_exp11()]
+		"sx1o0cd-12": [_exp11()],
+		"sx1o0cd-13": [_exp12()]
 	}
 }));
 var Widget = ({ children, minHeight, maxHeight, minWidth, maxWidth, fillWidth, fillHeight, padding, noPadding, noHover, noBorder, isSelected, variant = "PRIMARY", onClick }) => {