@galaxy-io/dls 1.5.6 → 1.5.8

package/dist/buttons/Button.d.ts

@@ -1,4 +1,4 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 export interface ButtonProps {
     /** Button text. Omit for an icon-only button and set `ariaLabel` instead. */
     label?: string;
@@ -23,6 +23,16 @@ export interface ButtonProps {
     /** Stretch to the parent's width. */
     fillWidth?: boolean;
     cursor?: React.CSSProperties["cursor"];
+    /**
+     * Renders a split button: the button plus a caret segment that opens an
+     * anchored dropdown of advanced actions. Pass a render function to receive
+     * `close` for dismissing the panel from a menu item.
+     */
+    contentWhenDropdown?: React.ReactNode | ((args: {
+        close: () => void;
+    }) => React.ReactNode);
+    /** Accessible name for the caret segment. @default "More actions" */
+    dropdownAriaLabel?: string;
     /** Accessible name — required when the button renders an icon with no label. */
     ariaLabel?: string;
     ariaExpanded?: boolean;
@@ -50,6 +60,9 @@ export declare enum ButtonSize {
  * `isLoading` and `isDisabled` behave identically at the DOM level — both set
  * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
  * a spinner; render your own indicator alongside if you need one.
+ *
+ * With `contentWhenDropdown`, renders as a split button: a caret segment after
+ * a hairline divider opens an anchored dropdown of advanced actions.
  */
-declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
+declare const Button: ({ label, icon, variant, size, onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup, }: ButtonProps) => import("react").JSX.Element;
 export default Button;

package/dist/buttons/Button.js

@@ -1,13 +1,16 @@
 import { GalaxyTheme } from "../theme/types.js";
 import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
+import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CaretDownIcon } from "@phosphor-icons/react";
 //#region src/buttons/Button.tsx
 /** Visual weight. One PRIMARY per view; TERTIARY is the transparent variant. */
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
@@ -28,30 +31,36 @@ var ButtonSize = /* @__PURE__ */ function(ButtonSize) {
 }({});
 var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
 var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
-var _exp4 = () => ({ $size }) => {
+var _exp3 = () => ({ $splitSide, $fillWidth }) => $splitSide === "MAIN" && $fillWidth ? "1 1 auto" : "0 1 auto";
+var _exp4 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
+var _exp5 = () => ({ $size }) => {
 	return match($size).with("SMALL", () => "4px").with("MEDIUM", () => "6px").with("LARGE", () => "6px").exhaustive();
 };
-var _exp5 = () => ({ $size, $noLabel }) => {
+var _exp6 = () => ({ $size, $noLabel }) => {
 	return match($size).with("SMALL", () => $noLabel ? "0 6px" : "0 6px").with("MEDIUM", () => $noLabel ? "0 6px" : "0 8px").with("LARGE", () => $noLabel ? "0 8px" : "0 12px").exhaustive();
 };
-var _exp6 = () => ({ $size }) => {
+var _exp7 = () => ({ $size }) => {
 	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
 };
-var _exp7 = () => ({ theme, $variant }) => {
+var _exp8 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("PRIMARY_ALT", () => theme.color.background.primaryAlt).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
 };
-var _exp8 = () => ({ theme, $variant }) => {
+var _exp9 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
 };
-var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
-var _exp0 = () => ({ theme, $variant }) => {
+var _exp0 = () => ({ $splitSide }) => $splitSide === "MAIN" ? "0" : "0.5px";
+var _exp1 = () => ({ $splitSide }) => $splitSide === "CARET" ? "0" : "0.5px";
+var _exp10 = () => ({ $splitSide }) => {
+	return match($splitSide).with("MAIN", () => "5px 0 0 5px").with("CARET", () => "0 5px 5px 0").otherwise(() => "5px");
+};
+var _exp11 = () => ({ $cursor }) => $cursor ?? "pointer";
+var _exp12 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
-var _exp1 = () => ({ theme, $variant }) => {
+var _exp13 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.tertiary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
 };
-var _exp10 = () => ({ theme, $variant }) => {
+var _exp14 = () => ({ theme, $variant }) => {
 	return match($variant).with("PRIMARY", () => theme.color.background.disabled).with("PRIMARY_ALT", () => theme.color.background.disabled).with("SECONDARY", () => theme.color.background.disabled).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
 var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
@@ -70,20 +79,41 @@ var StyledButton = withTheme(/*#__PURE__*/ styled("button")({
 		"s99zquh-8": [_exp9()],
 		"s99zquh-9": [_exp0()],
 		"s99zquh-10": [_exp1()],
-		"s99zquh-11": [_exp10()]
+		"s99zquh-11": [_exp10()],
+		"s99zquh-12": [_exp11()],
+		"s99zquh-13": [_exp12()],
+		"s99zquh-14": [_exp13()],
+		"s99zquh-15": [_exp14()]
 	}
 }));
-var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
-var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
+var _exp15 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
+var _exp16 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
 var LabelWrapper = /*#__PURE__*/ styled("span")({
 	name: "LabelWrapper",
 	class: "l9yox33",
 	propsAsIs: false,
 	vars: {
-		"l9yox33-0": [_exp11()],
-		"l9yox33-1": [_exp12()]
+		"l9yox33-0": [_exp15()],
+		"l9yox33-1": [_exp16()]
 	}
 });
+var _exp17 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "fit-content";
+var SplitWrapper = /*#__PURE__*/ styled("div")({
+	name: "SplitWrapper",
+	class: "s1bhvbb9",
+	propsAsIs: false,
+	vars: { "s1bhvbb9-0": [_exp17()] }
+});
+var _exp18 = () => ({ theme, $variant, $isDisabled }) => {
+	if ($isDisabled) return theme.color.border.disabled;
+	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.success).with("ERROR", () => theme.color.border.error).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.secondary).with("TERTIARY", () => "transparent").exhaustive();
+};
+var SplitDivider = withTheme(/*#__PURE__*/ styled("div")({
+	name: "SplitDivider",
+	class: "s2x7iw5",
+	propsAsIs: false,
+	vars: { "s2x7iw5-0": [_exp18()] }
+}));
 function getTextVariant(variant, activeTheme) {
 	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("ERROR", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).exhaustive();
 }
@@ -106,9 +136,13 @@ var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
 * `isLoading` and `isDisabled` behave identically at the DOM level — both set
 * `disabled` on the `<button>` and swallow `onClick`. Loading is a lockout, not
 * a spinner; render your own indicator alongside if you need one.
+*
+* With `contentWhenDropdown`, renders as a split button: a caret segment after
+* a hairline divider opens an anchored dropdown of advanced actions.
 */
-var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
+var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMouseEnter, onMouseLeave, fillWidth, isLoading, isDisabled, isIconTrailing, isIconFilled, isEllipsis, cursor, contentWhenDropdown, dropdownAriaLabel, ariaLabel, ariaExpanded, ariaControls, ariaHasPopup }) => {
 	const { activeTheme } = useGalaxyTheme();
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 	const handleClick = useCallback((e) => {
 		if (isDisabled || isLoading) return;
 		onClick(e);
@@ -117,6 +151,14 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 		isLoading,
 		onClick
 	]);
+	const closeDropdown = useCallback(() => {
+		setIsDropdownOpen(false);
+	}, []);
+	const handleCaretClick = useCallback((e) => {
+		e.stopPropagation();
+		setIsDropdownOpen((prev) => !prev);
+	}, []);
+	if ((isDisabled || isLoading) && isDropdownOpen) setIsDropdownOpen(false);
 	const renderIcon = useCallback(() => {
 		if (!icon) return null;
 		return /* @__PURE__ */ jsx(FlexItem, {
@@ -159,13 +201,14 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 		cursor,
 		activeTheme
 	]);
-	return /* @__PURE__ */ jsxs(StyledButton, {
+	const mainButton = /* @__PURE__ */ jsxs(StyledButton, {
 		$variant: variant,
 		$size: size,
 		$fillWidth: fillWidth,
 		$noLabel: !label,
 		$isEllipsis: isEllipsis,
 		$cursor: cursor,
+		$splitSide: contentWhenDropdown !== void 0 ? "MAIN" : void 0,
 		onClick: handleClick,
 		disabled: isDisabled || isLoading,
 		onMouseEnter,
@@ -180,6 +223,51 @@ var Button = ({ label, icon, variant = "PRIMARY", size = "MEDIUM", onClick, onMo
 			isIconTrailing && renderIcon()
 		]
 	});
+	if (contentWhenDropdown === void 0) return mainButton;
+	const dropdownBody = typeof contentWhenDropdown === "function" ? contentWhenDropdown({ close: closeDropdown }) : contentWhenDropdown;
+	return /* @__PURE__ */ jsxs(SplitWrapper, {
+		$fillWidth: fillWidth,
+		children: [
+			mainButton,
+			/* @__PURE__ */ jsx(SplitDivider, {
+				$variant: variant,
+				$activeTheme: activeTheme,
+				$isDisabled: isDisabled || isLoading
+			}),
+			/* @__PURE__ */ jsx(FlexItem, {
+				shrink: 0,
+				grow: 0,
+				children: /* @__PURE__ */ jsx(Dropdown, {
+					body: dropdownBody,
+					isOpen: isDropdownOpen,
+					onClose: closeDropdown,
+					position: DropdownPosition.BOTTOM_END,
+					children: /* @__PURE__ */ jsx(StyledButton, {
+						$variant: variant,
+						$size: size,
+						$noLabel: true,
+						$splitSide: "CARET",
+						type: "button",
+						disabled: isDisabled || isLoading,
+						onClick: handleCaretClick,
+						"aria-label": dropdownAriaLabel ?? "More actions",
+						"aria-haspopup": true,
+						"aria-expanded": isDropdownOpen,
+						children: /* @__PURE__ */ jsx(Rotate, {
+							isRotated: isDropdownOpen,
+							deg: -180,
+							children: /* @__PURE__ */ jsx(Icon, {
+								component: CaretDownIcon,
+								variant: getIconVariant(variant, activeTheme),
+								size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size],
+								weight: IconWeight.BOLD
+							})
+						})
+					})
+				})
+			})
+		]
+	});
 };
 //#endregion
 export { ButtonSize, ButtonVariant, Button as default };

package/dist/charts/ChartPrimitives.js

@@ -374,21 +374,21 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 * series to the next. Trailing only, so the first entry stays flush with the
 * plot's left edge (or the column's top).
 */
-var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
+var _exp46 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
 	class: "ccpczg",
 	propsAsIs: false,
-	vars: { "ccpczg-0": [_exp45()] }
+	vars: { "ccpczg-0": [_exp46()] }
 });
 /** The same row, when the legend is inert — no button semantics to announce.
 * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
-var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
+var _exp48 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
 	class: "c2re25h",
 	propsAsIs: false,
-	vars: { "c2re25h-0": [_exp47()] }
+	vars: { "c2re25h-0": [_exp48()] }
 });
 //#endregion
 export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

package/dist/charts/ChartTooltip.js

@@ -37,6 +37,7 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 			fillWidth: true,
 			children: [
 				/* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
 					variant: TextVariant.SECONDARY,
 					isEllipsis: true,
 					children: displayed.label

package/dist/charts/constants.d.ts

@@ -192,7 +192,7 @@ export declare const CHART_MARK_OPACITY_DIMMED = 0.4;
 /** Distance in px between the tooltip and its anchor. */
 export declare const CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
-export declare const CHART_TOOLTIP_MIN_WIDTH = 168;
+export declare const CHART_TOOLTIP_MIN_WIDTH = 200;
 /** Maximum width of the tooltip, in px. */
 export declare const CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
@@ -218,6 +218,12 @@ export declare const CHART_LEGEND_VERTICAL_GAP = 8;
  * the caller's `legendMaxItems`; this one only bounds the overflow list itself.
  */
 export declare const CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
+/**
+ * Floor on the collapsed-legend popover's width, in px, measured as the full
+ * popover box — the list inside subtracts the Tooltip's 8px inset per side.
+ * Without one, a couple of short labels shrink-wrap into a scrunched box.
+ */
+export declare const CHART_LEGEND_OVERFLOW_MIN_WIDTH = 160;
 /**
  * Approximate width of one CAPTION-size character.
  *

package/dist/charts/constants.js

@@ -202,7 +202,7 @@ var CHART_MARK_OPACITY_DIMMED = .4;
 /** Distance in px between the tooltip and its anchor. */
 var CHART_TOOLTIP_OFFSET = 10;
 /** Minimum width of the tooltip, in px. */
-var CHART_TOOLTIP_MIN_WIDTH = 168;
+var CHART_TOOLTIP_MIN_WIDTH = 200;
 /** Maximum width of the tooltip, in px. */
 var CHART_TOOLTIP_MAX_WIDTH = 320;
 /** Gap in px between the plot box and a side-placed legend. */
@@ -229,6 +229,12 @@ var CHART_LEGEND_VERTICAL_GAP = 8;
 */
 var CHART_LEGEND_OVERFLOW_MAX_HEIGHT = 208;
 /**
+* Floor on the collapsed-legend popover's width, in px, measured as the full
+* popover box — the list inside subtracts the Tooltip's 8px inset per side.
+* Without one, a couple of short labels shrink-wrap into a scrunched box.
+*/
+var CHART_LEGEND_OVERFLOW_MIN_WIDTH = 160;
+/**
 * Approximate width of one CAPTION-size character.
 *
 * Axis sizing estimates label widths arithmetically rather than measuring the
@@ -276,4 +282,4 @@ var CHART_PALETTE_ORDER = [
 	ChartPalette.RED
 ];
 //#endregion
-export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };
+export { AGGREGATED_SLICE_KEY, AUTO_MARGIN_LEFT_STEP, AXIS_TITLE_BAND, AXIS_TITLE_GAP, BAR_GAP_COMFORTABLE, BAR_GAP_MEDIUM, BAR_GAP_TIGHT, BAR_RADIUS, BAR_RADIUS_NARROW, BAR_WIDTH_RATIO, CAPTION_CHAR_WIDTH_PX, CATEGORY_AXIS_LABEL_GAP, CATEGORY_AXIS_LABEL_HEIGHT, CHART_LEGEND_COLUMN_GAP, CHART_LEGEND_OVERFLOW_MAX_HEIGHT, CHART_LEGEND_OVERFLOW_MIN_WIDTH, CHART_LEGEND_SIDE_GAP, CHART_LEGEND_VERTICAL_GAP, CHART_MARK_OPACITY_ACTIVE, CHART_MARK_OPACITY_DIMMED, CHART_MARK_OPACITY_MUTED, CHART_PALETTE_ORDER, CHART_TOOLTIP_MAX_WIDTH, CHART_TOOLTIP_MIN_WIDTH, CHART_TOOLTIP_OFFSET, CHART_TRANSITION_MS, DEFAULT_CHART_MARGIN, DEFAULT_LINE_STROKE_WIDTH, DEFAULT_VALUE_TICK_COUNT, GRID_LINE_BLEED, GROUP_GAP_COMFORTABLE, GROUP_GAP_MEDIUM, GROUP_GAP_TIGHT, LINE_AREA_OPACITY, LINE_POINT_RADIUS, MAX_AUTO_MARGIN_LEFT, MAX_BAR_WIDTH, MAX_GAP_SHARE, MIN_AUTO_MARGIN_LEFT, MIN_BARS_FOR_TIGHT_SPACING, MIN_BAR_LENGTH, MIN_CATEGORY_LABEL_GAP, NARROW_BAR_WIDTH, PIE_CHART_MARGIN, PIE_CORNER_RADIUS, PIE_DONUT_INNER_RATIO, PIE_MAX_AUTO_INNER_RATIO, PIE_MAX_INSET_SHARE, PIE_MIN_SLICE_SHARE, PIE_PAD_ANGLE, PIE_TOOLTIP_ANCHOR_INSET, STACK_SEGMENT_GAP, VALUE_AXIS_LABEL_HEIGHT, VALUE_AXIS_TICK_GAP, WIDTH_FOR_MEDIUM_SPACING, WIDTH_FOR_TIGHT_SPACING };

package/dist/inputs/ColorInput.js

@@ -2,11 +2,11 @@ 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 Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
 /* empty css                     */
 import { styled } from "@linaria/react";

package/dist/inputs/DateInput.js

@@ -1,11 +1,11 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
 import SelectInput from "./SelectInput.js";
 /* empty css                    */

package/dist/inputs/MultiSelectInput.js

@@ -3,11 +3,11 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
+import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputControlSize, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import CheckboxInput from "./CheckboxInput.js";
-import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";

package/dist/inputs/SelectInput.js

@@ -3,11 +3,11 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import Rotate from "../transform/Rotate.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
+import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
 import Spacing from "../containers/Spacing.js";
 import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";

package/dist/styles.css

@@ -19,8 +19,12 @@
 .bjccs5e{position:relative;width:var(--bjccs5e-0);height:var(--bjccs5e-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 .barhcbn{position:absolute;inset:0;border-radius:50%;-webkit-animation:ping-barhcbn var(--barhcbn-0) cubic-bezier(0, 0, 0.1, 0.1) infinite;animation:ping-barhcbn var(--barhcbn-0) cubic-bezier(0, 0, 0.1, 0.1) infinite;opacity:0.5;background-color:var(--barhcbn-1);}@-webkit-keyframes ping-barhcbn{75%,100%{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}@keyframes ping-barhcbn{75%,100%{-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);transform:scale(2);opacity:0;}}
 .bv9nmr4{z-index:1;width:70%;height:70%;border-radius:50%;background-color:var(--bv9nmr4-0);}
-.s99zquh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--s99zquh-0);min-width:var(--s99zquh-1);overflow:var(--s99zquh-2);gap:var(--s99zquh-3);padding:var(--s99zquh-4);height:var(--s99zquh-5);background-color:var(--s99zquh-6);border:var(--s99zquh-7);border-radius:5px;cursor:var(--s99zquh-8);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.s99zquh:hover:not(:disabled){background-color:var(--s99zquh-9);border-color:var(--s99zquh-10);}.s99zquh:disabled{background-color:var(--s99zquh-11);cursor:not-allowed;opacity:0.65;}
+.s99zquh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:var(--s99zquh-0);min-width:var(--s99zquh-1);-webkit-flex:var(--s99zquh-2);-ms-flex:var(--s99zquh-2);flex:var(--s99zquh-2);overflow:var(--s99zquh-3);gap:var(--s99zquh-4);padding:var(--s99zquh-5);height:var(--s99zquh-6);background-color:var(--s99zquh-7);border:var(--s99zquh-8);border-right-width:var(--s99zquh-9);border-left-width:var(--s99zquh-10);border-radius:var(--s99zquh-11);cursor:var(--s99zquh-12);-webkit-transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;transition:background-color 0.075s ease-in-out,border 0.075s ease-in-out;}.s99zquh:hover:not(:disabled){background-color:var(--s99zquh-13);border-color:var(--s99zquh-14);}.s99zquh:disabled{background-color:var(--s99zquh-15);cursor:not-allowed;opacity:0.65;}
 .l9yox33{-webkit-flex:var(--l9yox33-0);-ms-flex:var(--l9yox33-0);flex:var(--l9yox33-0);min-width:var(--l9yox33-1);overflow:hidden;}
+.s1bhvbb9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:var(--s1bhvbb9-0);}
+.s2x7iw5{width:0.5px;min-width:0.5px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background-color:var(--s2x7iw5-0);}
+.d1bgy4cf{display:inline-block;position:relative;width:var(--d1bgy4cf-0);min-width:var(--d1bgy4cf-1);max-width:var(--d1bgy4cf-2);overflow:var(--d1bgy4cf-3);padding:var(--d1bgy4cf-4);background-color:var(--d1bgy4cf-5);border:var(--d1bgy4cf-6);border-radius:5px;}
+.dfdzgmt{position:relative;z-index:var(--dfdzgmt-0);display:var(--dfdzgmt-1);width:var(--dfdzgmt-2);}
 .c1hcga6s{position:relative;display:var(--c1hcga6s-0);-webkit-flex-direction:var(--c1hcga6s-1);-ms-flex-direction:var(--c1hcga6s-1);flex-direction:var(--c1hcga6s-1);-webkit-align-items:var(--c1hcga6s-2);-webkit-box-align:var(--c1hcga6s-2);-ms-flex-align:var(--c1hcga6s-2);align-items:var(--c1hcga6s-2);-webkit-box-pack:var(--c1hcga6s-3);-ms-flex-pack:var(--c1hcga6s-3);-webkit-justify-content:var(--c1hcga6s-3);justify-content:var(--c1hcga6s-3);width:var(--c1hcga6s-4);min-width:0;height:var(--c1hcga6s-5);min-height:0;}
 .c1fvbgkp{position:relative;width:var(--c1fvbgkp-0);min-width:0;aspect-ratio:var(--c1fvbgkp-1);height:var(--c1fvbgkp-2);-webkit-flex:var(--c1fvbgkp-3);-ms-flex:var(--c1fvbgkp-3);flex:var(--c1fvbgkp-3);min-height:var(--c1fvbgkp-4);}
 .c10uj5yt{display:block;overflow:visible;}
@@ -35,7 +39,7 @@
 .cblgiyf{stroke:var(--cblgiyf-0);pointer-events:none;}
 .c1lr03cc{fill:var(--c1lr03cc-0);pointer-events:none;}
 .cizy1s8{overflow:visible;pointer-events:none;}
-.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:168px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
+.c1ukq11d{position:absolute;z-index:10;pointer-events:none;left:var(--c1ukq11d-0);top:var(--c1ukq11d-1);min-width:200px;max-width:320px;padding:10px 12px;border:0.5px solid var(--c1ukq11d-2);border-radius:6px;background-color:var(--c1ukq11d-3);opacity:var(--c1ukq11d-4);-webkit-transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;transition:opacity 100ms ease-in-out,left 100ms ease-out,top 100ms ease-out;}@media (prefers-reduced-motion: reduce){.c1ukq11d{-webkit-transition:none;transition:none;}}
 .cwcko2m{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0, 1fr) auto;grid-template-columns:minmax(0, 1fr) auto;-webkit-column-gap:16px;column-gap:16px;row-gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;}
 .cqwhvyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;min-width:0;}
 .c1iaray{text-align:right;white-space:nowrap;}
@@ -44,7 +48,7 @@
 .cjirv6a{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cjirv6a-0);-ms-flex-direction:var(--cjirv6a-0);flex-direction:var(--cjirv6a-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cjirv6a-1);-webkit-box-align:var(--cjirv6a-1);-ms-flex-align:var(--cjirv6a-1);align-items:var(--cjirv6a-1);-webkit-box-pack:var(--cjirv6a-2);-ms-flex-pack:var(--cjirv6a-2);-webkit-justify-content:var(--cjirv6a-2);justify-content:var(--cjirv6a-2);width:var(--cjirv6a-3);min-width:var(--cjirv6a-4);height:var(--cjirv6a-5);-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding-top:var(--cjirv6a-6);padding-left:var(--cjirv6a-7);}
 .c1armna5{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;}
 .cgd77rv{position:absolute;visibility:hidden;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:var(--cgd77rv-0);-ms-flex-direction:var(--cgd77rv-0);flex-direction:var(--cgd77rv-0);-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:var(--cgd77rv-1);-webkit-box-align:var(--cgd77rv-1);-ms-flex-align:var(--cgd77rv-1);align-items:var(--cgd77rv-1);width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;white-space:nowrap;}
-.cutidpi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;}
+.cutidpi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;max-height:208px;overflow-y:auto;min-width:144px;}.cutidpi>:last-child{padding-bottom:0;}
 .ccpczg{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:none;border:0;padding:var(--ccpczg-0);margin:0;font:inherit;color:inherit;cursor:default;border-radius:2px;opacity:1;}.ccpczg[data-state="muted"]{opacity:0.1;}.ccpczg[data-state="dimmed"]{opacity:0.4;}.ccpczg:focus-visible{outline:1.5px solid currentColor;outline-offset:2px;}
 .c2re25h{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;padding:var(--c2re25h-0);opacity:1;}.c2re25h[data-state="muted"]{opacity:0.1;}.c2re25h[data-state="dimmed"]{opacity:0.4;}
 .cmbdg2q{width:var(--cmbdg2q-0);height:var(--cmbdg2q-0);border-radius:50%;background-color:var(--cmbdg2q-1);}
@@ -70,8 +74,6 @@
 .d19reibl{position:absolute;top:8px;right:8px;bottom:8px;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;pointer-events:none;}
 .d410s14{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:var(--d410s14-0);height:100%;background-color:var(--d410s14-1);border:0.5px solid var(--d410s14-2);border-radius:6px;pointer-events:auto;}
 .s1hpu3t7{position:fixed;inset:0;background-color:var(--s1hpu3t7-0);-webkit-backdrop-filter:var(--s1hpu3t7-1);backdrop-filter:var(--s1hpu3t7-1);opacity:var(--s1hpu3t7-2);visibility:var(--s1hpu3t7-3);-webkit-transition:var(--s1hpu3t7-4);transition:var(--s1hpu3t7-4);z-index:var(--s1hpu3t7-5);pointer-events:var(--s1hpu3t7-6);}
-.d1bgy4cf{display:inline-block;position:relative;width:var(--d1bgy4cf-0);min-width:var(--d1bgy4cf-1);max-width:var(--d1bgy4cf-2);overflow:var(--d1bgy4cf-3);padding:var(--d1bgy4cf-4);background-color:var(--d1bgy4cf-5);border:var(--d1bgy4cf-6);border-radius:5px;}
-.dfdzgmt{position:relative;z-index:var(--dfdzgmt-0);display:var(--dfdzgmt-1);width:var(--dfdzgmt-2);}
 .cwfaerb{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;border:var(--cwfaerb-0);border-radius:var(--cwfaerb-1);}.cwfaerb>div{-webkit-flex:1;-ms-flex:1;flex:1;min-height:0;}.cwfaerb .cm-editor{width:100%!important;max-width:100%!important;height:100%!important;}.cwfaerb .cm-scroller{overflow:auto!important;width:100%!important;max-width:100%!important;}.cwfaerb .cm-content{max-width:100%!important;}.cwfaerb .cm-content,.cwfaerb .cm-gutter{line-height:1.8;}
 .c17zkoob{width:var(--c17zkoob-0);height:var(--c17zkoob-0);}
 .gm80o9u{width:var(--gm80o9u-0);height:var(--gm80o9u-0);}.gm80o9u >div{width:100%;height:100%;}.gm80o9u svg{display:block;}.gm80o9u svg>g path{fill:var(--gm80o9u-1);}

package/dist/table/SpreadsheetHeaderCell.js

@@ -1,8 +1,8 @@
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
 import { TableHeaderCell } from "./TablePrimitives.js";
 import TableHeaderCellContent from "./TableHeaderCellContent.js";
-import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import SpreadsheetMenuItem from "./SpreadsheetMenuItem.js";
 import { HeaderMenuTrigger } from "./SpreadsheetPrimitives.js";
 import React, { useState } from "react";

package/dist/table/SpreadsheetRowActionCell.js

@@ -1,6 +1,6 @@
+import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import Dropdown, { DropdownPosition } from "../dropdown/Dropdown.js";
 import SpreadsheetMenuItem from "./SpreadsheetMenuItem.js";
 import { ActionColumnCell } from "./SpreadsheetPrimitives.js";
 import React, { useState } from "react";

package/package.json

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