@galaxy-io/dls 1.1.2 → 1.2.0

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,10 +1,10 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import TextShimmer from "../text/TextShimmer.js";
-import Ellipsis from "../text/Ellipsis.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";
 /* empty css               */
 import { styled } from "@linaria/react";

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,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
-import RequiredMarker from "../text/RequiredMarker.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";
 import { match } from "ts-pattern";

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,9 +2,9 @@ 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 RequiredMarker from "../text/RequiredMarker.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";
 /* empty css                */

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/RadioInput.js

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import Text, { TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
-import RequiredMarker from "../text/RequiredMarker.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
+import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
 import HelpIcon from "../icons/HelpIcon.js";
 /* empty css                     */

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

@@ -1,8 +1,8 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import TextShimmer from "../text/TextShimmer.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
+import TextShimmer from "../text/TextShimmer.js";
 import { InputLabel } from "./Input.js";
 /* empty css                        */
 import { styled } from "@linaria/react";

package/dist/spreadsheet/InfiniteSpreadsheet.js

@@ -12,8 +12,8 @@ import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import { PlusIcon } from "@phosphor-icons/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/spreadsheet/InfiniteSpreadsheet.tsx
 var _exp = () => ({ $width, $fillWidth }) => {
 	if ($fillWidth) return "100%";

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;}}
@@ -208,5 +208,7 @@
 .s10h6trl{margin:10px 0 4px 0;}.s10h6trl:first-child{margin-top:0;}
 .sts1mtj{color:var(--sts1mtj-0);font-family:var(--sts1mtj-1);font-size:var(--sts1mtj-2);font-weight:var(--sts1mtj-3);line-height:var(--sts1mtj-4);letter-spacing:var(--sts1mtj-5);text-align:var(--sts1mtj-6);cursor:var(--sts1mtj-7);-webkit-user-select:var(--sts1mtj-8);-moz-user-select:var(--sts1mtj-8);-ms-user-select:var(--sts1mtj-8);user-select:var(--sts1mtj-8);-webkit-user-select:var(--sts1mtj-8);-moz-user-select:var(--sts1mtj-8);-ms-user-select:var(--sts1mtj-8);display:var(--sts1mtj-9);-webkit-line-clamp:var(--sts1mtj-10);-webkit-box-orient:var(--sts1mtj-11);overflow:var(--sts1mtj-12);width:var(--sts1mtj-13);min-height:var(--sts1mtj-14);overscroll-behavior:auto;-webkit-transition:color 0.075s ease-in-out;transition:color 0.075s ease-in-out;}
 .sfziwh{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;}
+.sgmrm4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:8px;padding:var(--sgmrm4-0);min-width:360px;max-width:420px;background-color:var(--sgmrm4-1);border:0.5px solid var(--sgmrm4-2);border-radius:5px;}
+.stlie57{position:fixed;z-index:11000;top:var(--stlie57-0);right:var(--stlie57-1);bottom:var(--stlie57-2);left:var(--stlie57-3);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;gap:8px;pointer-events:none;}.stlie57 >*{pointer-events:auto;}
 .sx1o0cd{background:var(--sx1o0cd-0);border:0.5px solid var(--sx1o0cd-1);border-radius:5px;padding:var(--sx1o0cd-2);box-shadow:0 1px 10px 0 var(--sx1o0cd-3),0 1px 1px 0 var(--sx1o0cd-4);width:var(--sx1o0cd-5);height:var(--sx1o0cd-6);min-width:var(--sx1o0cd-7);max-width:var(--sx1o0cd-8);min-height:var(--sx1o0cd-9);max-height:var(--sx1o0cd-10);cursor:var(--sx1o0cd-11);}.sx1o0cd:hover{border-color:var(--sx1o0cd-12);}
 /*$vite$:1*/

package/dist/toast/Toast.d.ts

@@ -0,0 +1,18 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { ButtonProps } from "../buttons/Button";
+export declare enum ToastVariant {
+    PRIMARY = "PRIMARY",
+    SUCCESS = "SUCCESS",
+    WARNING = "WARNING",
+    ERROR = "ERROR"
+}
+export interface ToastProps {
+    variant?: ToastVariant;
+    icon?: PhosphorIcon;
+    header: string | React.ReactNode;
+    subheader: string | React.ReactNode;
+    actions?: ButtonProps[];
+    onClose?: () => void;
+}
+declare const Toast: ({ variant, icon, header, subheader, actions, onClose, }: ToastProps) => import("react").JSX.Element;
+export default Toast;

package/dist/toast/Toast.js

@@ -0,0 +1,103 @@
+import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextVariant } from "../text/Text.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";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, SpinnerGapIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+//#region src/toast/Toast.tsx
+var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
+	ToastVariant["PRIMARY"] = "PRIMARY";
+	ToastVariant["SUCCESS"] = "SUCCESS";
+	ToastVariant["WARNING"] = "WARNING";
+	ToastVariant["ERROR"] = "ERROR";
+	return 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.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",
+	propsAsIs: false,
+	vars: {
+		"sgmrm4-0": [_exp()],
+		"sgmrm4-1": [_exp2()],
+		"sgmrm4-2": [_exp3()]
+	}
+}));
+var Toast = ({ variant = "PRIMARY", icon, header, subheader, actions, onClose }) => {
+	const renderIcon = () => {
+		if (icon) return /* @__PURE__ */ jsx(Icon, {
+			component: icon,
+			size: 16
+		});
+		return match(variant).with("PRIMARY", () => /* @__PURE__ */ jsx(Icon, {
+			component: SpinnerGapIcon,
+			size: 16
+		})).with("SUCCESS", () => /* @__PURE__ */ jsx(Icon, {
+			component: CheckCircleIcon,
+			variant: IconVariant.SUCCESS,
+			size: 16,
+			weight: IconWeight.FILL
+		})).with("WARNING", () => /* @__PURE__ */ jsx(Icon, {
+			component: WarningIcon,
+			variant: IconVariant.WARNING,
+			size: 16,
+			weight: IconWeight.FILL
+		})).with("ERROR", () => /* @__PURE__ */ jsx(Icon, {
+			component: WarningIcon,
+			variant: IconVariant.ERROR,
+			size: 16,
+			weight: IconWeight.FILL
+		})).exhaustive();
+	};
+	const hasActions = (actions && actions.length > 0) ?? false;
+	return /* @__PURE__ */ jsxs(StyledToast, {
+		$variant: variant,
+		$hasActions: hasActions,
+		children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+			alignItems: AlignItems.START,
+			gap: 8,
+			children: [
+				/* @__PURE__ */ jsx(FlexWrapper, {
+					width: 20,
+					height: 20,
+					children: renderIcon()
+				}),
+				/* @__PURE__ */ jsx(FlexItem, {
+					grow: 1,
+					children: /* @__PURE__ */ jsxs(FlexWrapper, {
+						direction: FlexDirection.COLUMN,
+						gap: 4,
+						children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, { children: header }) : header, typeof subheader === "string" ? /* @__PURE__ */ jsx(Text, {
+							variant: TextVariant.TERTIARY,
+							children: subheader
+						}) : subheader]
+					})
+				}),
+				onClose && /* @__PURE__ */ jsx(Button, {
+					icon: XIcon,
+					variant: ButtonVariant.TERTIARY,
+					size: ButtonSize.SMALL,
+					onClick: onClose
+				})
+			]
+		}), hasActions && /* @__PURE__ */ jsx(FlexWrapper, {
+			alignItems: AlignItems.CENTER,
+			gap: 8,
+			children: actions?.map((action, index) => /* @__PURE__ */ jsx(Button, {
+				label: action.label,
+				variant: action.variant ?? ButtonVariant.TERTIARY,
+				size: ButtonSize.SMALL,
+				onClick: action.onClick
+			}, index))
+		})]
+	});
+};
+//#endregion
+export { ToastVariant, Toast as default };

package/dist/toast/ToastContainer.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+interface ToastContainerProps {
+    children: ReactNode;
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+}
+declare const ToastContainer: ({ children, top, right, bottom, left }: ToastContainerProps) => import("react").JSX.Element;
+export default ToastContainer;

package/dist/toast/ToastContainer.js

@@ -0,0 +1,31 @@
+import { getCssSizeValue } from "../utils/linaria.js";
+/* empty css                         */
+import { styled } from "@linaria/react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toast/ToastContainer.tsx
+var _exp2 = () => ({ $top, $bottom }) => $top !== void 0 ? getCssSizeValue($top) : $bottom !== void 0 ? "auto" : "auto";
+var _exp3 = () => ({ $right, $left }) => $right !== void 0 ? getCssSizeValue($right) : $left !== void 0 ? "auto" : getCssSizeValue(24);
+var _exp4 = () => ({ $bottom, $top }) => $bottom !== void 0 ? getCssSizeValue($bottom) : $top !== void 0 ? "auto" : getCssSizeValue(24);
+var _exp5 = () => ({ $left }) => $left !== void 0 ? getCssSizeValue($left) : "auto";
+var StyledToastContainer = /*#__PURE__*/ styled("div")({
+	name: "StyledToastContainer",
+	class: "stlie57",
+	propsAsIs: false,
+	vars: {
+		"stlie57-0": [_exp2()],
+		"stlie57-1": [_exp3()],
+		"stlie57-2": [_exp4()],
+		"stlie57-3": [_exp5()]
+	}
+});
+var ToastContainer = ({ children, top, right, bottom, left }) => {
+	return /* @__PURE__ */ jsx(StyledToastContainer, {
+		$top: top,
+		$right: right,
+		$bottom: bottom,
+		$left: left,
+		children
+	});
+};
+//#endregion
+export { ToastContainer as default };

package/dist/toast/ToastProvider.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from "react";
+import { ToastVariant, type ToastProps } from "./Toast";
+export type ShowToastProps = Omit<ToastProps, "onClose"> & {
+    timeout?: number;
+    top?: number | string;
+    left?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+};
+export interface ToastContextProps {
+    showToast: (options: ShowToastProps) => string;
+    hideToast: (id?: string) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextProps | undefined>;
+export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
+export { ToastVariant };

package/dist/toast/ToastProvider.js

@@ -0,0 +1,111 @@
+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 { createPortal } from "react-dom";
+import { AnimatePresence } from "framer-motion";
+//#region src/toast/ToastProvider.tsx
+var ToastContext = createContext(void 0);
+var DEFAULT_TIMEOUT = 3e3;
+var toastCounter = 0;
+var nextToastId = () => `toast-${++toastCounter}`;
+var positionKey = (toast) => JSON.stringify([
+	toast.top,
+	toast.right,
+	toast.bottom,
+	toast.left
+]);
+var ToastProvider = ({ children }) => {
+	const [toasts, setToasts] = useState([]);
+	const timeoutRefs = useRef(/* @__PURE__ */ new Map());
+	const showToast = useCallback((options) => {
+		const id = nextToastId();
+		const { timeout, top, right, bottom, left, ...props } = options;
+		const finalTimeout = timeout === void 0 ? DEFAULT_TIMEOUT : timeout;
+		setToasts((prev) => [...prev, {
+			id,
+			props,
+			timeout: finalTimeout,
+			top,
+			right,
+			bottom,
+			left
+		}]);
+		return id;
+	}, []);
+	const hideToast = useCallback((id) => {
+		if (id) {
+			const timeoutId = timeoutRefs.current.get(id);
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutRefs.current.delete(id);
+			}
+			setToasts((prev) => prev.filter((toast) => toast.id !== id));
+		} else setToasts((prev) => {
+			const firstToast = prev[0];
+			if (firstToast) {
+				const timeoutId = timeoutRefs.current.get(firstToast.id);
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+					timeoutRefs.current.delete(firstToast.id);
+				}
+			}
+			return prev.slice(1);
+		});
+	}, []);
+	useEffect(() => {
+		const currentToastIds = new Set(toasts.map((toast) => toast.id));
+		toasts.forEach((toast) => {
+			if (timeoutRefs.current.has(toast.id)) return;
+			if (toast.timeout > 0) {
+				const timeoutId = setTimeout(() => {
+					setToasts((prev) => prev.filter((t) => t.id !== toast.id));
+					timeoutRefs.current.delete(toast.id);
+				}, toast.timeout);
+				timeoutRefs.current.set(toast.id, timeoutId);
+			}
+		});
+		timeoutRefs.current.forEach((timeoutId, toastId) => {
+			if (!currentToastIds.has(toastId)) {
+				clearTimeout(timeoutId);
+				timeoutRefs.current.delete(toastId);
+			}
+		});
+	}, [toasts]);
+	useEffect(() => {
+		const refs = timeoutRefs.current;
+		return () => {
+			refs.forEach((timeoutId) => {
+				clearTimeout(timeoutId);
+			});
+			refs.clear();
+		};
+	}, []);
+	const positionGroups = /* @__PURE__ */ new Map();
+	toasts.forEach((toast) => {
+		const key = positionKey(toast);
+		const group = positionGroups.get(key);
+		if (group) group.push(toast);
+		else positionGroups.set(key, [toast]);
+	});
+	const toastContent = /* @__PURE__ */ jsx(Fragment, { children: [...positionGroups.entries()].map(([key, group]) => /* @__PURE__ */ jsx(ToastContainer, {
+		top: group[0].top,
+		right: group[0].right,
+		bottom: group[0].bottom,
+		left: group[0].left,
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: group.map((toast) => /* @__PURE__ */ jsx(ToastWrapper, { children: /* @__PURE__ */ jsx(Toast, {
+			...toast.props,
+			onClose: () => hideToast(toast.id)
+		}) }, toast.id)) })
+	}, key)) });
+	return /* @__PURE__ */ jsxs(ToastContext.Provider, {
+		value: {
+			showToast,
+			hideToast
+		},
+		children: [children, typeof document !== "undefined" && createPortal(toastContent, document.body)]
+	});
+};
+//#endregion
+export { ToastContext, ToastProvider, ToastVariant };

package/dist/toast/ToastWrapper.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+interface ToastWrapperProps {
+    children: ReactNode;
+}
+declare const ToastWrapper: ({ children }: ToastWrapperProps) => import("react").JSX.Element;
+export default ToastWrapper;

package/dist/toast/ToastWrapper.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+//#region src/toast/ToastWrapper.tsx
+var ToastWrapper = ({ children }) => {
+	return /* @__PURE__ */ jsx(motion.div, {
+		initial: {
+			opacity: 0,
+			x: 50
+		},
+		animate: {
+			opacity: 1,
+			x: 0
+		},
+		exit: {
+			opacity: 0,
+			x: 50
+		},
+		transition: {
+			type: "tween",
+			duration: .15,
+			ease: "easeOut"
+		},
+		children
+	});
+};
+//#endregion
+export { ToastWrapper as default };

package/dist/toast/useToast.d.ts

@@ -0,0 +1 @@
+export declare const useToast: () => import("./ToastProvider").ToastContextProps;

package/dist/toast/useToast.js

@@ -0,0 +1,10 @@
+import { ToastContext } from "./ToastProvider.js";
+import { useContext } from "react";
+//#region src/toast/useToast.ts
+var useToast = () => {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToast must be used within a ToastProvider");
+	return context;
+};
+//#endregion
+export { useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",
@@ -143,6 +143,10 @@
       "types": "./dist/theme/*.d.ts",
       "import": "./dist/theme/*.js"
     },
+    "./toast/*": {
+      "types": "./dist/toast/*.d.ts",
+      "import": "./dist/toast/*.js"
+    },
     "./tooltip/*": {
       "types": "./dist/tooltip/*.d.ts",
       "import": "./dist/tooltip/*.js"