@galaxy-io/dls 1.1.3 → 1.2.1

package/dist/accordion/Accordion.js

@@ -1,9 +1,9 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import RotateWithTransition from "../animations/RotateWithTransition.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 /* empty css                    */

package/dist/chips/Chip.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper from "../containers/FlexWrapper.js";
 import TextShimmer from "../text/TextShimmer.js";
 import Ellipsis from "../text/Ellipsis.js";
 import AvatarShimmer from "../avatar/AvatarShimmer.js";

package/dist/containers/FlexItem.d.ts

@@ -2,8 +2,19 @@ import { type CSSProperties } from "react";
 import { AlignItems, JustifyContent } from "./FlexWrapper";
 interface FlexItemProps {
     position?: CSSProperties["position"];
+    /**
+     * flex-grow of this item within its parent flex container.
+     * Defaults to 0 (content-sized), matching the CSS default.
+     */
     grow?: number;
+    /**
+     * flex-shrink of this item within its parent flex container.
+     * Defaults to 1, matching the CSS default.
+     */
     shrink?: number;
+    /**
+     * flex-basis of this item. Defaults to auto.
+     */
     basis?: number | string;
     overflow?: CSSProperties["overflow"];
     whiteSpace?: CSSProperties["whiteSpace"];
@@ -12,9 +23,18 @@ interface FlexItemProps {
     height?: number | string;
     fillWidth?: boolean;
     fillHeight?: boolean;
+    /**
+     * Defaults to "flex" (not "block"): a FlexItem is itself a flex container,
+     * which sidesteps inline-baseline gaps around svg/icon children and makes
+     * alignItems/justifyContent work without extra props.
+     */
     display?: CSSProperties["display"];
     alignItems?: AlignItems;
     justifyContent?: JustifyContent;
+    /**
+     * Accepts 0 explicitly - `minWidth={0}` is the standard way to let a flex
+     * child shrink below its content size so nested text can ellipsize.
+     */
     minWidth?: number | string;
     minHeight?: number | string;
     maxWidth?: number | string;

package/dist/containers/FlexItem.js

@@ -1,36 +1,30 @@
 import { getCssSizeValue } from "../utils/linaria.js";
-import { AlignItems, JustifyContent } from "./FlexWrapper.js";
 /* empty css                   */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/containers/FlexItem.tsx
 var _exp = () => ({ $position }) => $position ?? "static";
 var _exp2 = () => ({ $display }) => $display ?? "flex";
-var _exp3 = () => ({ $alignItems }) => {
-	return match($alignItems).with(AlignItems.START, () => "flex-start").with(AlignItems.CENTER, () => "center").with(AlignItems.END, () => "flex-end").with(AlignItems.BASELINE, () => "baseline").with(AlignItems.STRETCH, () => "stretch").otherwise(() => "inherit");
-};
-var _exp4 = () => ({ $justifyContent }) => {
-	return match($justifyContent).with(JustifyContent.START, () => "flex-start").with(JustifyContent.CENTER, () => "center").with(JustifyContent.END, () => "flex-end").otherwise(() => "flex-start");
-};
-var _exp5 = () => ({ $grow }) => $grow ?? 1;
+var _exp3 = () => ({ $alignItems }) => $alignItems ?? "inherit";
+var _exp4 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
+var _exp5 = () => ({ $grow }) => $grow ?? 0;
 var _exp6 = () => ({ $shrink }) => $shrink ?? 1;
-var _exp7 = () => ({ $basis }) => $basis ?? "auto";
+var _exp7 = () => ({ $basis }) => $basis != null ? getCssSizeValue($basis) : "auto";
 var _exp8 = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";
-	if ($width) return getCssSizeValue($width, "0");
+	if ($width != null) return getCssSizeValue($width, "0");
 	return "auto";
 };
 var _exp9 = () => ({ $height, $fillHeight }) => {
 	if ($fillHeight) return "100%";
-	if ($height) return getCssSizeValue($height);
+	if ($height != null) return getCssSizeValue($height);
 	return "auto";
 };
-var _exp0 = () => ({ $minWidth }) => $minWidth ? getCssSizeValue($minWidth) : "auto";
-var _exp1 = () => ({ $maxWidth }) => $maxWidth ? getCssSizeValue($maxWidth) : "none";
-var _exp10 = () => ({ $minHeight }) => $minHeight ? getCssSizeValue($minHeight) : "auto";
-var _exp11 = () => ({ $maxHeight }) => $maxHeight ? getCssSizeValue($maxHeight) : "none";
+var _exp0 = () => ({ $minWidth }) => $minWidth != null ? getCssSizeValue($minWidth) : "auto";
+var _exp1 = () => ({ $maxWidth }) => $maxWidth != null ? getCssSizeValue($maxWidth) : "none";
+var _exp10 = () => ({ $minHeight }) => $minHeight != null ? getCssSizeValue($minHeight) : "auto";
+var _exp11 = () => ({ $maxHeight }) => $maxHeight != null ? getCssSizeValue($maxHeight) : "none";
 var _exp12 = () => ({ $overflow }) => $overflow ?? "visible";
 var _exp13 = () => ({ $whiteSpace }) => $whiteSpace ?? "normal";
 var _exp14 = () => ({ $textOverflow }) => $textOverflow ?? "clip";

package/dist/containers/FlexWrapper.d.ts

@@ -73,6 +73,22 @@ interface FlexWrapperProps {
      * Sets the gap between flex items in pixels or string (for other units)
      */
     gap?: number | string;
+    /**
+     * flex-grow of this wrapper when it is itself a child of a flex container.
+     * Defaults to the CSS initial value (0). Saves wrapping in a FlexItem just
+     * to control how the wrapper flexes.
+     */
+    grow?: number;
+    /**
+     * flex-shrink of this wrapper when it is itself a child of a flex container.
+     * Defaults to the CSS initial value (1).
+     */
+    shrink?: number;
+    /**
+     * flex-basis of this wrapper when it is itself a child of a flex container.
+     * Defaults to the CSS initial value (auto).
+     */
+    basis?: number | string;
     /**
      * Sets the width of the flex container in pixels
      */

package/dist/containers/FlexWrapper.js

@@ -50,24 +50,27 @@ var _exp2 = () => ({ alignItems = "start" }) => alignItems;
 var _exp3 = () => ({ justifyContent = "start" }) => justifyContent;
 var _exp4 = () => ({ gap }) => getCssSizeValue(gap);
 var _exp5 = () => ({ wrap = "nowrap" }) => wrap;
-var _exp6 = () => ({ width, fillWidth }) => {
+var _exp6 = () => ({ grow }) => grow ?? "initial";
+var _exp7 = () => ({ shrink }) => shrink ?? "initial";
+var _exp8 = () => ({ basis }) => basis != null ? getCssSizeValue(basis) : "initial";
+var _exp9 = () => ({ width, fillWidth }) => {
 	if (fillWidth) return "100%";
-	if (width) return getCssSizeValue(width, "0");
+	if (width != null) return getCssSizeValue(width, "0");
 	return "auto";
 };
-var _exp7 = () => ({ height, fillHeight }) => {
+var _exp0 = () => ({ height, fillHeight }) => {
 	if (fillHeight) return "100%";
-	if (height) return getCssSizeValue(height);
+	if (height != null) return getCssSizeValue(height);
 	return "auto";
 };
-var _exp8 = () => ({ minWidth }) => minWidth ? getCssSizeValue(minWidth) : "auto";
-var _exp9 = () => ({ maxWidth }) => maxWidth ? getCssSizeValue(maxWidth) : "none";
-var _exp0 = () => ({ minHeight }) => minHeight ? getCssSizeValue(minHeight) : "auto";
-var _exp1 = () => ({ maxHeight }) => maxHeight ? getCssSizeValue(maxHeight) : "none";
-var _exp10 = () => ({ overflow = "visible" }) => overflow;
-var _exp11 = () => ({ padding = "0" }) => padding;
-var _exp12 = () => ({ margin = "0" }) => margin;
-var _exp13 = () => ({ onClick }) => onClick ? "pointer" : "inherit";
+var _exp1 = () => ({ minWidth }) => minWidth != null ? getCssSizeValue(minWidth) : "auto";
+var _exp10 = () => ({ maxWidth }) => maxWidth != null ? getCssSizeValue(maxWidth) : "none";
+var _exp11 = () => ({ minHeight }) => minHeight != null ? getCssSizeValue(minHeight) : "auto";
+var _exp12 = () => ({ maxHeight }) => maxHeight != null ? getCssSizeValue(maxHeight) : "none";
+var _exp13 = () => ({ overflow = "visible" }) => overflow;
+var _exp14 = () => ({ padding = "0" }) => padding;
+var _exp15 = () => ({ margin = "0" }) => margin;
+var _exp16 = () => ({ onClick }) => onClick ? "pointer" : "inherit";
 var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
 	name: "StyledFlexWrapper",
 	class: "s12krdms",
@@ -87,10 +90,13 @@ var StyledFlexWrapper = /*#__PURE__*/ styled("div")({
 		"s12krdms-11": [_exp10()],
 		"s12krdms-12": [_exp11()],
 		"s12krdms-13": [_exp12()],
-		"s12krdms-14": [_exp13()]
+		"s12krdms-14": [_exp13()],
+		"s12krdms-15": [_exp14()],
+		"s12krdms-16": [_exp15()],
+		"s12krdms-17": [_exp16()]
 	}
 });
-var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
+var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent, wrap, gap, grow, shrink, basis, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, fillHeight = false, overflow, padding, margin, onClick, onMouseDown, onMouseEnter, onMouseLeave, onScroll }, ref) => {
 	return /* @__PURE__ */ jsx(StyledFlexWrapper, {
 		ref,
 		direction,
@@ -98,6 +104,9 @@ var FlexWrapper = forwardRef(({ children, direction, alignItems, justifyContent,
 		justifyContent,
 		wrap,
 		gap,
+		grow,
+		shrink,
+		basis,
 		width,
 		height,
 		minWidth,

package/dist/inputs/CheckboxInput.js

@@ -1,7 +1,7 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.js";
 /* empty css                        */
 import { styled } from "@linaria/react";

package/dist/inputs/ColorInput.js

@@ -2,8 +2,8 @@ import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import { hexToHsva, hsvaToHex } from "../utils/colors.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
 import Spacing from "../containers/Spacing.js";

package/dist/inputs/CopyInput.js

@@ -1,5 +1,5 @@
-import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import { InputSize } from "./Input.js";
 import TextInput from "./TextInput.js";
 import { useCallback, useState } from "react";

package/dist/inputs/DateInput.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
 import Spacing from "../containers/Spacing.js";

package/dist/inputs/Input.js

@@ -2,8 +2,8 @@ import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
 import HelpIcon from "../icons/HelpIcon.js";

package/dist/inputs/MultiSelectInput.js

@@ -1,9 +1,9 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
 import { InputLabel } from "./Input.js";
 import RotateWithTransition from "../animations/RotateWithTransition.js";

package/dist/inputs/SelectInput.js

@@ -1,9 +1,9 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel } from "./Input.js";

package/dist/spreadsheet/SpreadsheetHeaderCell.js

@@ -1,7 +1,7 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import { ColumnAlign, ColumnPin } from "../table/InfiniteTable.js";
 import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import DropdownItem from "../dropdown/DropdownItem.js";

package/dist/spreadsheet/SpreadsheetRowActionCell.js

@@ -1,6 +1,6 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
-import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import DropdownItem from "../dropdown/DropdownItem.js";
 /* empty css                                   */

package/dist/styles.css

@@ -4,7 +4,7 @@
 .a1f5gwwu{overflow:hidden;overscroll-behavior:auto;}
 .r94gjni{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-transition:rotate var(--r94gjni-0) ease-in-out;transition:rotate var(--r94gjni-0) ease-in-out;rotate:var(--r94gjni-1);}
 .s1he36jx{position:var(--s1he36jx-0);display:var(--s1he36jx-1);-webkit-align-items:var(--s1he36jx-2);-webkit-box-align:var(--s1he36jx-2);-ms-flex-align:var(--s1he36jx-2);align-items:var(--s1he36jx-2);-webkit-box-pack:var(--s1he36jx-3);-ms-flex-pack:var(--s1he36jx-3);-webkit-justify-content:var(--s1he36jx-3);justify-content:var(--s1he36jx-3);-webkit-box-flex:var(--s1he36jx-4);-webkit-flex-grow:var(--s1he36jx-4);-ms-flex-positive:var(--s1he36jx-4);flex-grow:var(--s1he36jx-4);-webkit-flex-shrink:var(--s1he36jx-5);-ms-flex-negative:var(--s1he36jx-5);flex-shrink:var(--s1he36jx-5);-webkit-flex-basis:var(--s1he36jx-6);-ms-flex-preferred-size:var(--s1he36jx-6);flex-basis:var(--s1he36jx-6);width:var(--s1he36jx-7);height:var(--s1he36jx-8);min-width:var(--s1he36jx-9);max-width:var(--s1he36jx-10);min-height:var(--s1he36jx-11);max-height:var(--s1he36jx-12);overflow:var(--s1he36jx-13);white-space:var(--s1he36jx-14);text-overflow:var(--s1he36jx-15);padding:var(--s1he36jx-16);overscroll-behavior:auto;cursor:var(--s1he36jx-17);}
-.s12krdms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-flex-direction:var(--s12krdms-0);-ms-flex-direction:var(--s12krdms-0);flex-direction:var(--s12krdms-0);-webkit-align-items:var(--s12krdms-1);-webkit-box-align:var(--s12krdms-1);-ms-flex-align:var(--s12krdms-1);align-items:var(--s12krdms-1);-webkit-box-pack:var(--s12krdms-2);-ms-flex-pack:var(--s12krdms-2);-webkit-justify-content:var(--s12krdms-2);justify-content:var(--s12krdms-2);gap:var(--s12krdms-3);-webkit-box-flex-wrap:var(--s12krdms-4);-webkit-flex-wrap:var(--s12krdms-4);-ms-flex-wrap:var(--s12krdms-4);flex-wrap:var(--s12krdms-4);width:var(--s12krdms-5);height:var(--s12krdms-6);min-width:var(--s12krdms-7);max-width:var(--s12krdms-8);min-height:var(--s12krdms-9);max-height:var(--s12krdms-10);overflow:var(--s12krdms-11);padding:var(--s12krdms-12);margin:var(--s12krdms-13);overscroll-behavior:auto;cursor:var(--s12krdms-14);}
+.s12krdms{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;-webkit-flex-direction:var(--s12krdms-0);-ms-flex-direction:var(--s12krdms-0);flex-direction:var(--s12krdms-0);-webkit-align-items:var(--s12krdms-1);-webkit-box-align:var(--s12krdms-1);-ms-flex-align:var(--s12krdms-1);align-items:var(--s12krdms-1);-webkit-box-pack:var(--s12krdms-2);-ms-flex-pack:var(--s12krdms-2);-webkit-justify-content:var(--s12krdms-2);justify-content:var(--s12krdms-2);gap:var(--s12krdms-3);-webkit-box-flex-wrap:var(--s12krdms-4);-webkit-flex-wrap:var(--s12krdms-4);-ms-flex-wrap:var(--s12krdms-4);flex-wrap:var(--s12krdms-4);-webkit-box-flex:var(--s12krdms-5);-webkit-flex-grow:var(--s12krdms-5);-ms-flex-positive:var(--s12krdms-5);flex-grow:var(--s12krdms-5);-webkit-flex-shrink:var(--s12krdms-6);-ms-flex-negative:var(--s12krdms-6);flex-shrink:var(--s12krdms-6);-webkit-flex-basis:var(--s12krdms-7);-ms-flex-preferred-size:var(--s12krdms-7);flex-basis:var(--s12krdms-7);width:var(--s12krdms-8);height:var(--s12krdms-9);min-width:var(--s12krdms-10);max-width:var(--s12krdms-11);min-height:var(--s12krdms-12);max-height:var(--s12krdms-13);overflow:var(--s12krdms-14);padding:var(--s12krdms-15);margin:var(--s12krdms-16);overscroll-behavior:auto;cursor:var(--s12krdms-17);}
 .h1sww5hz{width:100%;height:0.5px;background-color:var(--h1sww5hz-0);}
 .shbcgkd{color:var(--shbcgkd-0);font-family:var(--shbcgkd-1);font-size:var(--shbcgkd-2);font-weight:var(--shbcgkd-3);line-height:var(--shbcgkd-4);letter-spacing:var(--shbcgkd-5);text-align:var(--shbcgkd-6);-webkit-text-decoration:var(--shbcgkd-7);text-decoration:var(--shbcgkd-7);cursor:var(--shbcgkd-8);-webkit-user-select:var(--shbcgkd-9);-moz-user-select:var(--shbcgkd-9);-ms-user-select:var(--shbcgkd-9);user-select:var(--shbcgkd-9);-webkit-user-select:var(--shbcgkd-9);-moz-user-select:var(--shbcgkd-9);-ms-user-select:var(--shbcgkd-9);overflow:var(--shbcgkd-10);text-overflow:var(--shbcgkd-11);white-space:var(--shbcgkd-12);width:var(--shbcgkd-13);overscroll-behavior:auto;-webkit-transition:color 0.075s ease-in-out;transition:color 0.075s ease-in-out;}
 .s1v6noph{-webkit-animation:flash-s1v6noph 1s ease-in-out infinite;animation:flash-s1v6noph 1s ease-in-out infinite;}@-webkit-keyframes flash-s1v6noph{0%,100%{opacity:1;}50%{opacity:0.4;}}@keyframes flash-s1v6noph{0%,100%{opacity:1;}50%{opacity:0.4;}}

package/dist/table/InfiniteTable.d.ts

@@ -1,5 +1,11 @@
 import React, { type ReactNode } from "react";
 import { type OnChangeFn as TanstackOnChangeFn, type Row as TanstackRow, type RowSelectionState as TanstackRowSelectionState, type SortingState as TanstackSortingState, type Table as TanstackTable } from "@tanstack/react-table";
+export declare enum TableVariant {
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
 export declare enum TableDensity {
     SMALL = "SMALL",
     MEDIUM = "MEDIUM",
@@ -53,6 +59,7 @@ export interface InfiniteTableProps<TData> {
     fillWidth?: boolean;
     fillHeight?: boolean;
     density?: TableDensity;
+    variant?: TableVariant;
     hasNextPage?: boolean;
     isFetchingNextPage?: boolean;
     fetchNextPage?: () => void;

package/dist/table/InfiniteTable.js

@@ -11,6 +11,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon, CaretRightIcon, CaretUpDownIcon, SortAscendingIcon, SortDescendingIcon } from "@phosphor-icons/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/table/InfiniteTable.tsx
+var TableVariant = /* @__PURE__ */ function(TableVariant) {
+	TableVariant["BASE"] = "BASE";
+	TableVariant["PRIMARY"] = "PRIMARY";
+	TableVariant["SECONDARY"] = "SECONDARY";
+	TableVariant["TERTIARY"] = "TERTIARY";
+	return TableVariant;
+}({});
 var TableDensity = /* @__PURE__ */ function(TableDensity) {
 	TableDensity["SMALL"] = "SMALL";
 	TableDensity["MEDIUM"] = "MEDIUM";
@@ -46,6 +53,15 @@ var TABLE_DENSITY_TO_BUTTON_SIZE_MAP = {
 	["MEDIUM"]: ButtonSize.SMALL,
 	["LARGE"]: ButtonSize.MEDIUM
 };
+function getVariantBackgroundColor(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(void 0, () => theme.color.background.primary).exhaustive();
+}
+function getVariantHoverBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.tertiary).with("PRIMARY", () => theme.color.background.tertiary).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with(void 0, () => theme.color.background.tertiary).exhaustive();
+}
+function getVariantSelectedBackgroundColor(theme, variant) {
+	return match(variant).with("BASE", () => theme.color.background.secondary).with("PRIMARY", () => theme.color.background.secondary).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => theme.color.background.primary).with(void 0, () => theme.color.background.secondary).exhaustive();
+}
 var _exp = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";
 	if ($width) return getCssSizeValue($width);
@@ -89,15 +105,15 @@ var TableBody = /*#__PURE__*/ styled("tbody")({
 });
 var _exp4 = () => ({ $isClickable }) => $isClickable ? "pointer" : "default";
 var _exp5 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
-var _exp6 = () => ({ $isSelected, theme }) => $isSelected ? theme.color.background.secondary : theme.color.background.primary;
+var _exp6 = () => ({ $isSelected, $variant, theme }) => $isSelected ? getVariantSelectedBackgroundColor(theme, $variant) : getVariantBackgroundColor(theme, $variant);
 var _exp7 = () => ({ $isExpanded, $isLastRow, theme }) => {
 	if ($isExpanded || $isLastRow) return "none";
 	return `0.5px solid ${theme.color.border.primary}`;
 };
-var _exp8 = () => ({ $isClickable, $isSelected, theme }) => {
-	if ($isSelected) return theme.color.background.secondary;
-	if ($isClickable) return theme.color.background.tertiary;
-	return theme.color.background.primary;
+var _exp8 = () => ({ $isClickable, $isSelected, $variant, theme }) => {
+	if ($isSelected) return getVariantSelectedBackgroundColor(theme, $variant);
+	if ($isClickable) return getVariantHoverBackgroundColor(theme, $variant);
+	return getVariantBackgroundColor(theme, $variant);
 };
 var TableRow = withTheme(/*#__PURE__*/ styled("tr")({
 	name: "TableRow",
@@ -134,7 +150,7 @@ var _exp10 = () => ({ $maxWidth }) => {
 };
 var _exp11 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp12 = () => ({ theme }) => theme.color.border.primary;
-var _exp13 = () => ({ theme }) => theme.color.background.primary;
+var _exp13 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp14 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
 var _exp15 = () => ({ $isSortable }) => {
 	if ($isSortable) return "pointer";
@@ -200,8 +216,8 @@ var _exp25 = () => ({ $maxWidth }) => {
 };
 var _exp26 = () => ({ $align }) => match($align).with("LEFT", () => "left").with("CENTER", () => "center").with("RIGHT", () => "right").with(void 0, () => "left").exhaustive();
 var _exp27 = () => ({ $align }) => match($align).with("LEFT", () => "flex-start").with("CENTER", () => "center").with("RIGHT", () => "flex-end").with(void 0, () => "flex-start").exhaustive();
-var _exp28 = () => ({ $pin, theme }) => {
-	if ($pin) return theme.color.background.primary;
+var _exp28 = () => ({ $pin, $variant, theme }) => {
+	if ($pin) return getVariantBackgroundColor(theme, $variant);
 	return "transparent";
 };
 var _exp29 = () => ({ $pin }) => {
@@ -266,7 +282,7 @@ var EmptyContentWrapper = /*#__PURE__*/ styled("div")({
 });
 var _exp35 = () => ({ $density }) => match($density).with("SMALL", () => "32px").with("MEDIUM", () => "48px").with("LARGE", () => "56px").with(void 0, () => "48px").exhaustive();
 var _exp36 = () => ({ theme }) => theme.color.border.primary;
-var _exp37 = () => ({ theme }) => theme.color.background.primary;
+var _exp37 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var LoadingRowWrapper = withTheme(/*#__PURE__*/ styled("tr")({
 	name: "LoadingRowWrapper",
 	class: "l1pcw3m6",
@@ -297,7 +313,7 @@ var ExpandedOverlayLayer = /*#__PURE__*/ styled("div")({
 var _exp39 = () => ({ $top }) => `${$top}px`;
 var _exp40 = () => ({ $left }) => `${$left}px`;
 var _exp41 = () => ({ $width }) => `${$width}px`;
-var _exp43 = () => ({ theme }) => theme.color.background.primary;
+var _exp43 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp44 = () => ({ $isLastRow, theme }) => $isLastRow ? "none" : `0.5px solid ${theme.color.border.primary}`;
 var ExpandedOverlay = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedOverlay",
@@ -311,7 +327,7 @@ var ExpandedOverlay = withTheme(/*#__PURE__*/ styled("div")({
 		"e1birhg7-4": [_exp44()]
 	}
 }));
-var _exp45 = () => ({ theme }) => theme.color.background.primary;
+var _exp45 = () => ({ $variant, theme }) => getVariantBackgroundColor(theme, $variant);
 var _exp46 = () => ({ theme }) => theme.color.border.primary;
 var ExpandedGutter = withTheme(/*#__PURE__*/ styled("div")({
 	name: "ExpandedGutter",
@@ -335,7 +351,7 @@ var ExpandedContent = /*#__PURE__*/ styled("div")({
 	propsAsIs: false
 });
 function InfiniteTable(props) {
-	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
+	const { columns, data, getRowId, height, width, fillWidth, fillHeight, density = "MEDIUM", variant = "PRIMARY", hasNextPage, isFetchingNextPage, fetchNextPage, enableRowSelection, enableMultiRowSelection, rowSelection, onRowSelectionChange, enableSorting = false, enableMultiSort = false, sorting, onSortingChange, manualSorting = false, isLoading = false, isError = false, loadingRowCount = 5, contentWhenEmpty, contentWhenError, noHeader = false, noLastRowBorder = false, noLastRowPadding = false, onRowClick, onRowDoubleClick, onRowExpand, onTableReady } = props;
 	const outerContainerRef = useRef(null);
 	const scrollContainerRef = useRef(null);
 	const expandedOverlayRef = useRef(null);
@@ -601,6 +617,7 @@ function InfiniteTable(props) {
 	const renderLoadingRows = () => {
 		return Array.from({ length: loadingRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx(LoadingRowWrapper, {
 			$density: density,
+			$variant: variant,
 			children: resolvedColumns.map((col) => /* @__PURE__ */ jsx(TableDataCell, {
 				$width: col.size,
 				$minWidth: col.minSize,
@@ -609,6 +626,7 @@ function InfiniteTable(props) {
 				$pinnedOffset: pinnedOffsets.get(col.id),
 				$align: col.align,
 				$density: density,
+				$variant: variant,
 				children: col.cellLoading ? col.cellLoading() : null
 			}, col.id))
 		}, `loading-${rowIndex}`));
@@ -638,6 +656,7 @@ function InfiniteTable(props) {
 						$align: columnMeta?.align,
 						$isSortable: canSort,
 						$density: density,
+						$variant: variant,
 						$isExpandCell: header.column.id === EXPAND_COLUMN_ID,
 						onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
 						children: /* @__PURE__ */ jsxs(HeaderContentWrapper, { children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && /* @__PURE__ */ jsx(SortIconWrapper, { children: header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(Icon, {
@@ -669,6 +688,7 @@ function InfiniteTable(props) {
 						$isClickable: !!onRowClick,
 						$isSelected: isSelected,
 						$density: density,
+						$variant: variant,
 						$isExpanded: isExpanded,
 						$isLastRow: noLastRowBorder && isLastRow && !isExpanded,
 						onClick: onRowClick ? (e) => onRowClick(row, e) : void 0,
@@ -683,6 +703,7 @@ function InfiniteTable(props) {
 								$pinnedOffset: pinnedOffsets.get(cell.column.id),
 								$align: columnMeta?.align,
 								$density: density,
+								$variant: variant,
 								$isExpandCell: cell.column.id === EXPAND_COLUMN_ID,
 								children: flexRender(cell.column.columnDef.cell, cell.getContext())
 							}, cell.id);
@@ -699,13 +720,14 @@ function InfiniteTable(props) {
 				$left: expandedOverlayLayout?.left ?? 0,
 				$top: expandedOverlayLayout?.top ?? 0,
 				$width: expandedOverlayLayout?.width ?? scrollContainerRef.current?.clientWidth ?? 0,
+				$variant: variant,
 				onWheel: handleExpandedOverlayWheel,
 				style: { visibility: expandedOverlayLayout ? "visible" : "hidden" },
-				children: [/* @__PURE__ */ jsx(ExpandedGutter, {}), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
+				children: [/* @__PURE__ */ jsx(ExpandedGutter, { $variant: variant }), /* @__PURE__ */ jsx(ExpandedBody, { children: /* @__PURE__ */ jsx(ExpandedContent, { children: onRowExpand(expandedRow) }) })]
 			}) }),
 			isEmpty && contentWhenEmpty && /* @__PURE__ */ jsx(EmptyContentWrapper, { children: contentWhenEmpty })
 		]
 	});
 }
 //#endregion
-export { ColumnAlign, ColumnPin, TableDensity, InfiniteTable as default, estimateColumnWidth };
+export { ColumnAlign, ColumnPin, TableDensity, TableVariant, InfiniteTable as default, estimateColumnWidth };

package/dist/toast/Toast.js

@@ -1,9 +1,9 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 /* empty css                */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
@@ -19,7 +19,7 @@ var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
 }({});
 var _exp = () => ({ $hasActions }) => $hasActions ? "12px 12px 8px 12px" : "12px";
 var _exp2 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.tertiary).with("WARNING", () => theme.color.background.tertiary).with("ERROR", () => theme.color.background.tertiary).exhaustive();
-var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.primary).with("ERROR", () => theme.color.border.error).exhaustive();
+var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.secondary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).exhaustive();
 var StyledToast = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledToast",
 	class: "sgmrm4",

package/package.json

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