@galaxy-io/dls 1.2.2 → 1.2.4

package/dist/buttons/Button.d.ts

@@ -16,6 +16,7 @@ export interface ButtonProps {
 }
 export declare enum ButtonVariant {
     PRIMARY = "PRIMARY",
+    PRIMARY_ALT = "PRIMARY_ALT",
     SECONDARY = "SECONDARY",
     TERTIARY = "TERTIARY",
     SUCCESS = "SUCCESS",

package/dist/buttons/Button.js

@@ -11,6 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/buttons/Button.tsx
 var ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 	ButtonVariant["PRIMARY"] = "PRIMARY";
+	ButtonVariant["PRIMARY_ALT"] = "PRIMARY_ALT";
 	ButtonVariant["SECONDARY"] = "SECONDARY";
 	ButtonVariant["TERTIARY"] = "TERTIARY";
 	ButtonVariant["SUCCESS"] = "SUCCESS";
@@ -36,20 +37,20 @@ var _exp6 = () => ({ $size }) => {
 	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
 };
 var _exp7 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxy).with("SECONDARY", () => theme.color.background.primary).with("TERTIARY", () => "transparent").with("SUCCESS", () => theme.color.icon.success).with("ERROR", () => theme.color.icon.error).exhaustive();
+	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 }) => {
-	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).with("TERTIARY", () => "0.5px solid transparent").with("SUCCESS", () => "0.5px solid transparent").with("ERROR", () => "0.5px solid transparent").exhaustive();
+	return match($variant).with("PRIMARY", () => "0.5px solid transparent").with("PRIMARY_ALT", () => `0.5px solid transparent`).with("SECONDARY", () => `0.5px solid ${theme.color.border.primary}`).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 }) => {
-	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.background.galaxyAlt).with("PRIMARY_ALT", () => theme.color.background.secondaryAlt).with("SECONDARY", () => theme.color.background.tertiary).with("TERTIARY", () => theme.color.background.secondary).with("SUCCESS", () => theme.color.background.successAlt).with("ERROR", () => theme.color.background.errorAlt).exhaustive();
 };
 var _exp1 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => "transparent").with("ERROR", () => "transparent").exhaustive();
+	return match($variant).with("PRIMARY", () => theme.color.border.primary).with("PRIMARY_ALT", () => theme.color.border.primary).with("SECONDARY", () => theme.color.border.primary).with("TERTIARY", () => theme.color.border.primary).with("SUCCESS", () => theme.color.border.primary).with("ERROR", () => theme.color.border.primary).exhaustive();
 };
 var _exp10 = () => ({ theme, $variant }) => {
-	return match($variant).with("PRIMARY", () => 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();
+	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")({
 	name: "StyledButton",
@@ -82,10 +83,10 @@ var LabelWrapper = /*#__PURE__*/ styled("span")({
 	}
 });
 function getTextVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with("SECONDARY", () => TextVariant.PRIMARY).with("TERTIARY", () => TextVariant.PRIMARY).with("SUCCESS", () => TextVariant.PRIMARY).with("ERROR", () => TextVariant.PRIMARY).exhaustive();
+	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", () => TextVariant.PRIMARY).with("ERROR", () => TextVariant.PRIMARY).exhaustive();
 }
 function getIconVariant(variant, activeTheme) {
-	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY).with("ERROR", () => IconVariant.PRIMARY).exhaustive();
+	return match(variant).with("PRIMARY", () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with("PRIMARY_ALT", () => IconVariant.PRIMARY_ALT).with("SECONDARY", () => IconVariant.PRIMARY).with("TERTIARY", () => IconVariant.PRIMARY).with("SUCCESS", () => IconVariant.PRIMARY).with("ERROR", () => IconVariant.PRIMARY).exhaustive();
 }
 var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,

package/dist/spreadsheet/SpreadsheetHeaderCell.d.ts

@@ -8,6 +8,11 @@ export interface SpreadsheetHeaderCellProps<TData> {
     onResizeStart: (columnId: string, clientX: number) => void;
     getAllRows?: () => TData[];
 }
+export interface HeaderCellDropdownItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
 declare function SpreadsheetHeaderCellInner<TData>({ column, width, pin, pinnedOffset, onResizeStart, getAllRows, }: SpreadsheetHeaderCellProps<TData>): React.JSX.Element;
 declare const SpreadsheetHeaderCell: typeof SpreadsheetHeaderCellInner;
 export default SpreadsheetHeaderCell;

package/dist/spreadsheet/SpreadsheetHeaderCell.js

@@ -4,7 +4,6 @@ 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";
 /* empty css                                */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
@@ -54,6 +53,23 @@ var ResizeHandle = withTheme(/*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "r10tums3-0": [_exp0()] }
 }));
+var _exp1 = () => ({ theme }) => theme.color.background.secondary;
+var HeaderCellDropdownItemWrapper = withTheme(/*#__PURE__*/ styled("button")({
+	name: "HeaderCellDropdownItemWrapper",
+	class: "hz0qata",
+	propsAsIs: false,
+	vars: { "hz0qata-0": [_exp1()] }
+}));
+var HeaderCellDropdownItem = ({ icon, label, onClick }) => {
+	return /* @__PURE__ */ jsxs(HeaderCellDropdownItemWrapper, {
+		onClick,
+		children: [icon, /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			weight: TextWeight.MEDIUM,
+			children: label
+		})]
+	});
+};
 function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResizeStart, getAllRows }) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const handleResizeMouseDown = useCallback((e) => {
@@ -83,7 +99,7 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 					body: /* @__PURE__ */ jsxs(FlexWrapper, {
 						direction: FlexDirection.COLUMN,
 						gap: 2,
-						children: [enrichmentActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+						children: [enrichmentActions.map((action) => /* @__PURE__ */ jsx(HeaderCellDropdownItem, {
 							icon: action.icon,
 							label: action.label,
 							onClick: () => {
@@ -91,10 +107,9 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 								action.onAction(column.id, rows);
 								setIsMenuOpen(false);
 							}
-						}, `enrich-${action.id}`)), headerActions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+						}, `enrich-${action.id}`)), headerActions.map((action) => /* @__PURE__ */ jsx(HeaderCellDropdownItem, {
 							icon: action.icon,
 							label: action.label,
-							variant: action.variant,
 							onClick: () => {
 								action.onAction(column.id);
 								setIsMenuOpen(false);
@@ -102,6 +117,7 @@ function SpreadsheetHeaderCellInner({ column, width, pin, pinnedOffset, onResize
 						}, `action-${action.id}`))]
 					}),
 					position: DropdownPosition.BOTTOM_END,
+					offset: [0, 4],
 					isOpen: isMenuOpen,
 					onClose: () => setIsMenuOpen(false),
 					minWidth: 160,

package/dist/spreadsheet/SpreadsheetRowActionCell.d.ts

@@ -6,6 +6,11 @@ export interface SpreadsheetRowActionCellProps<TData> {
     actions: SpreadsheetRowAction<TData>[];
     pinnedOffset?: number;
 }
+export interface ActionCellDropdownItemProps {
+    icon?: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
 declare function SpreadsheetRowActionCellInner<TData>({ row, rowIndex, actions, pinnedOffset, }: SpreadsheetRowActionCellProps<TData>): React.JSX.Element;
 declare const SpreadsheetRowActionCell: typeof SpreadsheetRowActionCellInner;
 export default SpreadsheetRowActionCell;

package/dist/spreadsheet/SpreadsheetRowActionCell.js

@@ -1,12 +1,12 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
+import Text, { TextSize, TextWeight } from "../text/Text.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                                   */
 import { styled } from "@linaria/react";
 import React, { useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
 //#region src/spreadsheet/SpreadsheetRowActionCell.tsx
 var _exp = () => ({ $pinnedOffset }) => $pinnedOffset !== void 0 ? `${$pinnedOffset}px` : "0";
@@ -22,15 +22,36 @@ var ActionCellContainer = withTheme(/*#__PURE__*/ styled("td")({
 		"a1b1bj84-2": [_exp3()]
 	}
 }));
+var _exp4 = () => ({ theme }) => theme.color.background.secondary;
+var ActionCellDropdownItemWrapper = withTheme(/*#__PURE__*/ styled("button")({
+	name: "ActionCellDropdownItemWrapper",
+	class: "a1mvarzo",
+	propsAsIs: false,
+	vars: { "a1mvarzo-0": [_exp4()] }
+}));
+var ActionCellDropdownItem = ({ icon, label, onClick }) => {
+	return /* @__PURE__ */ jsxs(ActionCellDropdownItemWrapper, {
+		onClick,
+		children: [icon, /* @__PURE__ */ jsx(Text, {
+			size: TextSize.BODY_SM,
+			weight: TextWeight.MEDIUM,
+			children: label
+		})]
+	});
+};
 function SpreadsheetRowActionCellInner({ row, rowIndex, actions, pinnedOffset }) {
 	const [isOpen, setIsOpen] = useState(false);
+	const handleActionClick = (e) => {
+		e.stopPropagation();
+		setIsOpen(!isOpen);
+	};
 	return /* @__PURE__ */ jsx(ActionCellContainer, {
 		$pinnedOffset: pinnedOffset,
 		children: /* @__PURE__ */ jsx(Dropdown, {
 			body: /* @__PURE__ */ jsx(FlexWrapper, {
 				direction: FlexDirection.COLUMN,
 				gap: 2,
-				children: actions.map((action) => /* @__PURE__ */ jsx(DropdownItem, {
+				children: actions.map((action) => /* @__PURE__ */ jsx(ActionCellDropdownItem, {
 					icon: action.icon,
 					label: action.label,
 					onClick: () => {
@@ -47,10 +68,7 @@ function SpreadsheetRowActionCellInner({ row, rowIndex, actions, pinnedOffset })
 				icon: DotsThreeVerticalIcon,
 				variant: ButtonVariant.TERTIARY,
 				size: ButtonSize.SMALL,
-				onClick: (e) => {
-					e.stopPropagation();
-					setIsOpen(!isOpen);
-				}
+				onClick: handleActionClick
 			})
 		})
 	});

package/dist/styles.css

@@ -47,11 +47,6 @@
 .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);}
-.sobaxfi{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(--sobaxfi-0);min-width:var(--sobaxfi-1);overflow:var(--sobaxfi-2);gap:var(--sobaxfi-3);padding:var(--sobaxfi-4);height:var(--sobaxfi-5);background-color:var(--sobaxfi-6);border:var(--sobaxfi-7);border-radius:5px;cursor:var(--sobaxfi-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;}.sobaxfi:hover:not(:disabled){background-color:var(--sobaxfi-9);border-color:var(--sobaxfi-10);}.sobaxfi:disabled{background-color:var(--sobaxfi-11);cursor:not-allowed;opacity:0.5;}
-.l147oxln{-webkit-flex:var(--l147oxln-0);-ms-flex:var(--l147oxln-0);flex:var(--l147oxln-0);min-width:var(--l147oxln-1);overflow:hidden;}
-.d1egzp74{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:var(--d1egzp74-0);-webkit-box-align:var(--d1egzp74-0);-ms-flex-align:var(--d1egzp74-0);align-items:var(--d1egzp74-0);-webkit-box-pack:var(--d1egzp74-1);-ms-flex-pack:var(--d1egzp74-1);-webkit-justify-content:var(--d1egzp74-1);justify-content:var(--d1egzp74-1);gap:var(--d1egzp74-2);width:var(--d1egzp74-3);padding:var(--d1egzp74-4);}
-.syosvbj{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;height:24px;width:100%;border-radius:4px;cursor:pointer;}.syosvbj:disabled{opacity:0.5;cursor:not-allowed;}.syosvbj:disabled:hover{background-color:transparent;}
-.d189jx24{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:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.syosvbj:hover .d189jx24{background-color:var(--d189jx24-0);}.d189jx24:hover{border:0.5px solid var(--d189jx24-1);}
 .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;}
 .h179mi29{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:2px;}
 .h1gstj4e{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
@@ -146,6 +141,7 @@
 .h5b2q63{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:4px;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden;}
 .m1q357fu{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
 .r10tums3{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;z-index:1;}.r10tums3:hover,.r10tums3:active{background-color:var(--r10tums3-0);}
+.hz0qata{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:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.hz0qata:hover{background-color:var(--hz0qata-0);}
 .t15fnb8v{width:var(--t15fnb8v-0);height:var(--t15fnb8v-1);position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-radius:5px;overflow:hidden;}
 .t1xd4vnx{-webkit-flex:1;-ms-flex:1;flex:1;overflow:auto;position:relative;min-height:0;padding-bottom:var(--t1xd4vnx-0);}
 .sk741d9{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
@@ -171,6 +167,7 @@
 .a1thqwpm{position:-webkit-sticky;position:sticky;right:0;z-index:5;-webkit-flex:0 0 48px;-ms-flex:0 0 48px;flex:0 0 48px;background-color:var(--a1thqwpm-0);border-left:0.5px solid var(--a1thqwpm-1);}
 .r1frty7c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content;min-width:100%;position:absolute;top:0;left:0;-webkit-transform:translateY(var(--r1frty7c-0));-moz-transform:translateY(var(--r1frty7c-0));-ms-transform:translateY(var(--r1frty7c-0));transform:translateY(var(--r1frty7c-0));height:var(--r1frty7c-1);}.r1frty7c>td{border-bottom:var(--r1frty7c-2);}.r1frty7c:hover>td{background-color:var(--r1frty7c-3);}
 .a1b1bj84{position:-webkit-sticky;position:sticky;right:var(--a1b1bj84-0);z-index:5;-webkit-flex:0 0 48px;-ms-flex:0 0 48px;flex:0 0 48px;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;background-color:var(--a1b1bj84-1);border-left:0.5px solid var(--a1b1bj84-2);}.a1b1bj84>*{opacity:1;}
+.a1mvarzo{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:8px;padding:4px;width:100%;height:100%;border:0.5px solid transparent;border-radius:4px;}.a1mvarzo:hover{background-color:var(--a1mvarzo-0);}
 .a1tvwf2d{position:-webkit-sticky;position:sticky;top:0;z-index:20;-webkit-flex:0 0 120px;-ms-flex:0 0 120px;flex:0 0 120px;height:36px;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;gap:4px;padding:0 12px;background-color:var(--a1tvwf2d-0);border-bottom:0.5px solid var(--a1tvwf2d-1);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:background-color 0.1s;transition:background-color 0.1s;}.a1tvwf2d:hover{background-color:var(--a1tvwf2d-2);}
 .scx8lyz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--scx8lyz-0);border:0.5px solid var(--scx8lyz-1);border-radius:5px;padding:0 3px;height:28px;}
 .s1law64s{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:8px;padding:3px 8px;background:var(--s1law64s-0);cursor:pointer;border:0.5px solid var(--s1law64s-1);border-radius:4px;}

package/package.json

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

package/dist/dropdown/DropdownButton.d.ts

@@ -1,18 +0,0 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-import { ButtonSize, ButtonVariant } from "../buttons/Button";
-export { ButtonSize, ButtonVariant };
-export interface DropdownButtonProps {
-    label: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    isOpen: boolean;
-    icon?: PhosphorIcon;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    fillWidth?: boolean;
-    isEllipsis?: boolean;
-    cursor?: React.CSSProperties["cursor"];
-}
-declare const DropdownButton: ({ label, icon, variant, size, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor, }: DropdownButtonProps) => import("react").JSX.Element;
-export default DropdownButton;

package/dist/dropdown/DropdownButton.js

@@ -1,179 +0,0 @@
-import { GalaxyTheme } from "../theme/constants.js";
-import { useGalaxyTheme, withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
-import Icon, { IconVariant } from "../icons/Icon.js";
-import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import RotateWithTransition from "../animations/RotateWithTransition.js";
-/* empty css                         */
-import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CaretDownIcon } from "@phosphor-icons/react";
-//#region src/dropdown/DropdownButton.tsx
-var _exp = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp2 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var _exp3 = () => ({ $isEllipsis }) => $isEllipsis ? "hidden" : "visible";
-var _exp4 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "4px").with(ButtonSize.MEDIUM, () => "6px").with(ButtonSize.LARGE, () => "6px").exhaustive();
-};
-var _exp5 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "0 6px").with(ButtonSize.MEDIUM, () => "0 8px").with(ButtonSize.LARGE, () => "0 12px").exhaustive();
-};
-var _exp6 = () => ({ $size }) => {
-	return match($size).with(ButtonSize.SMALL, () => "24px").with(ButtonSize.MEDIUM, () => "28px").with(ButtonSize.LARGE, () => "32px").exhaustive();
-};
-var _exp7 = () => ({ theme, $variant, $isOpen }) => {
-	if ($isOpen) return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxy).with(ButtonVariant.SECONDARY, () => theme.color.background.primary).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.icon.success).with(ButtonVariant.ERROR, () => theme.color.icon.error).exhaustive();
-};
-var _exp8 = () => ({ theme, $variant, $isOpen }) => {
-	return `0.5px solid ${match($variant).with(ButtonVariant.PRIMARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => $isOpen ? theme.color.border.primary : "transparent").with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive()}`;
-};
-var _exp9 = () => ({ $cursor }) => $cursor ?? "pointer";
-var _exp0 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.galaxyAlt).with(ButtonVariant.SECONDARY, () => theme.color.background.tertiary).with(ButtonVariant.TERTIARY, () => theme.color.background.secondary).with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-};
-var _exp1 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.border.primary).with(ButtonVariant.SECONDARY, () => theme.color.border.primary).with(ButtonVariant.TERTIARY, () => theme.color.border.primary).with(ButtonVariant.SUCCESS, () => "transparent").with(ButtonVariant.ERROR, () => "transparent").exhaustive();
-};
-var _exp10 = () => ({ theme, $variant }) => {
-	return match($variant).with(ButtonVariant.PRIMARY, () => theme.color.background.disabled).with(ButtonVariant.SECONDARY, () => theme.color.background.disabled).with(ButtonVariant.TERTIARY, () => "transparent").with(ButtonVariant.SUCCESS, () => theme.color.background.successAlt).with(ButtonVariant.ERROR, () => theme.color.background.errorAlt).exhaustive();
-};
-var StyledDropdownButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "StyledDropdownButton",
-	class: "sobaxfi",
-	propsAsIs: false,
-	vars: {
-		"sobaxfi-0": [_exp()],
-		"sobaxfi-1": [_exp2()],
-		"sobaxfi-2": [_exp3()],
-		"sobaxfi-3": [_exp4()],
-		"sobaxfi-4": [_exp5()],
-		"sobaxfi-5": [_exp6()],
-		"sobaxfi-6": [_exp7()],
-		"sobaxfi-7": [_exp8()],
-		"sobaxfi-8": [_exp9()],
-		"sobaxfi-9": [_exp0()],
-		"sobaxfi-10": [_exp1()],
-		"sobaxfi-11": [_exp10()]
-	}
-}));
-var _exp11 = () => ({ $isEllipsis }) => $isEllipsis ? "1" : "0 1 auto";
-var _exp12 = () => ({ $isEllipsis }) => $isEllipsis ? "0" : "auto";
-var LabelWrapper = /*#__PURE__*/ styled("span")({
-	name: "LabelWrapper",
-	class: "l147oxln",
-	propsAsIs: false,
-	vars: {
-		"l147oxln-0": [_exp11()],
-		"l147oxln-1": [_exp12()]
-	}
-});
-function getTextVariant(variant, activeTheme) {
-	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === GalaxyTheme.DARK ? TextVariant.PRIMARY : TextVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => TextVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => TextVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => TextVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => TextVariant.PRIMARY_ALT).exhaustive();
-}
-function getIconVariant(variant, activeTheme) {
-	return match(variant).with(ButtonVariant.PRIMARY, () => activeTheme === GalaxyTheme.DARK ? IconVariant.PRIMARY : IconVariant.PRIMARY_ALT).with(ButtonVariant.SECONDARY, () => IconVariant.PRIMARY).with(ButtonVariant.TERTIARY, () => IconVariant.PRIMARY).with(ButtonVariant.SUCCESS, () => IconVariant.PRIMARY_ALT).with(ButtonVariant.ERROR, () => IconVariant.PRIMARY_ALT).exhaustive();
-}
-var BUTTON_SIZE_TO_TEXT_SIZE_MAP = {
-	[ButtonSize.SMALL]: TextSize.BODY_SM,
-	[ButtonSize.MEDIUM]: TextSize.BODY_MD,
-	[ButtonSize.LARGE]: TextSize.BODY_LG
-};
-var BUTTON_SIZE_TO_ICON_SIZE_MAP = {
-	[ButtonSize.SMALL]: 12,
-	[ButtonSize.MEDIUM]: 14,
-	[ButtonSize.LARGE]: 16
-};
-var DropdownButton = ({ label, icon, variant = ButtonVariant.PRIMARY, size = ButtonSize.MEDIUM, onClick, isOpen, fillWidth, isLoading, isDisabled, isEllipsis, cursor }) => {
-	const { activeTheme } = useGalaxyTheme();
-	const handleClick = useCallback((e) => {
-		if (isDisabled || isLoading) return;
-		onClick(e);
-	}, [
-		isDisabled,
-		isLoading,
-		onClick
-	]);
-	const renderIcon = useCallback(() => {
-		if (!icon) return null;
-		let iconVariant = getIconVariant(variant, activeTheme);
-		if (isDisabled) iconVariant = IconVariant.TERTIARY;
-		return /* @__PURE__ */ jsx(FlexItem, {
-			shrink: 0,
-			grow: 0,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: icon,
-				variant: iconVariant,
-				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
-			})
-		});
-	}, [
-		icon,
-		variant,
-		size,
-		isDisabled,
-		activeTheme
-	]);
-	const renderLabel = useCallback(() => {
-		let textVariant = getTextVariant(variant, activeTheme);
-		if (isDisabled) textVariant = TextVariant.TERTIARY_ALT;
-		return /* @__PURE__ */ jsx(LabelWrapper, {
-			$isEllipsis: isEllipsis,
-			children: /* @__PURE__ */ jsx(Text, {
-				variant: textVariant,
-				weight: TextWeight.MEDIUM,
-				size: BUTTON_SIZE_TO_TEXT_SIZE_MAP[size],
-				cursor: isDisabled ? "not-allowed" : cursor,
-				isEllipsis,
-				children: label
-			})
-		});
-	}, [
-		label,
-		variant,
-		size,
-		isDisabled,
-		isEllipsis,
-		cursor,
-		activeTheme
-	]);
-	const renderCaret = useCallback(() => {
-		let iconVariant = getIconVariant(variant, activeTheme);
-		if (isDisabled) iconVariant = IconVariant.TERTIARY;
-		return /* @__PURE__ */ jsx(RotateWithTransition, {
-			isRotated: isOpen,
-			deg: -180,
-			children: /* @__PURE__ */ jsx(Icon, {
-				component: CaretDownIcon,
-				variant: iconVariant,
-				size: BUTTON_SIZE_TO_ICON_SIZE_MAP[size]
-			})
-		});
-	}, [
-		variant,
-		size,
-		isDisabled,
-		isOpen,
-		activeTheme
-	]);
-	return /* @__PURE__ */ jsxs(StyledDropdownButton, {
-		$variant: variant,
-		$size: size,
-		$isOpen: isOpen,
-		$fillWidth: fillWidth,
-		$isEllipsis: isEllipsis,
-		$cursor: cursor,
-		onClick: handleClick,
-		disabled: isDisabled || isLoading,
-		children: [
-			renderIcon(),
-			renderLabel(),
-			renderCaret()
-		]
-	});
-};
-//#endregion
-export { ButtonSize, ButtonVariant, DropdownButton as default };

package/dist/dropdown/DropdownFooter.d.ts

@@ -1,10 +0,0 @@
-import type { CSSProperties, PropsWithChildren } from "react";
-interface DropdownFooterProps {
-    gap?: number | string;
-    padding?: CSSProperties["padding"];
-    justifyContent?: CSSProperties["justifyContent"];
-    alignItems?: CSSProperties["alignItems"];
-    fillWidth?: boolean;
-}
-declare const DropdownFooter: ({ children, gap, padding, justifyContent, alignItems, fillWidth, }: PropsWithChildren<DropdownFooterProps>) => import("react").JSX.Element;
-export default DropdownFooter;

package/dist/dropdown/DropdownFooter.js

@@ -1,35 +0,0 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
-/* empty css                         */
-import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
-//#region src/dropdown/DropdownFooter.tsx
-var _exp = () => ({ $alignItems }) => $alignItems ?? "center";
-var _exp2 = () => ({ $justifyContent }) => $justifyContent ?? "flex-start";
-var _exp3 = () => ({ $gap }) => getCssSizeValue($gap, "0");
-var _exp4 = () => ({ $fillWidth }) => $fillWidth ? "100%" : "auto";
-var _exp5 = () => ({ $padding }) => $padding ?? "0";
-var DropdownFooterWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "DropdownFooterWrapper",
-	class: "d1egzp74",
-	propsAsIs: false,
-	vars: {
-		"d1egzp74-0": [_exp()],
-		"d1egzp74-1": [_exp2()],
-		"d1egzp74-2": [_exp3()],
-		"d1egzp74-3": [_exp4()],
-		"d1egzp74-4": [_exp5()]
-	}
-}));
-var DropdownFooter = ({ children, gap, padding, justifyContent, alignItems, fillWidth = false }) => {
-	return /* @__PURE__ */ jsx(DropdownFooterWrapper, {
-		$gap: gap,
-		$padding: padding,
-		$justifyContent: justifyContent,
-		$alignItems: alignItems,
-		$fillWidth: fillWidth,
-		children
-	});
-};
-//#endregion
-export { DropdownFooter as default };

package/dist/dropdown/DropdownItem.d.ts

@@ -1,10 +0,0 @@
-import { type TextVariant } from "../text/Text";
-export interface DropdownItemButton {
-    icon?: React.ReactNode;
-    label: string;
-    variant?: TextVariant;
-    isDisabled?: boolean;
-    onClick: () => void;
-}
-declare const DropdownItem: ({ icon, label, variant, isDisabled, onClick }: DropdownItemButton) => import("react").JSX.Element;
-export default DropdownItem;

package/dist/dropdown/DropdownItem.js

@@ -1,38 +0,0 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text from "../text/Text.js";
-/* empty css                       */
-import { styled } from "@linaria/react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/dropdown/DropdownItem.tsx
-var StyledDropdownItemButton = withTheme(/*#__PURE__*/ styled("button")({
-	name: "StyledDropdownItemButton",
-	class: "syosvbj",
-	propsAsIs: false
-}));
-var _exp2 = () => ({ theme }) => theme.color.background.tertiary;
-var _exp3 = () => ({ theme }) => theme.color.border.primary;
-var DropdownItemWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "DropdownItemWrapper",
-	class: "d189jx24",
-	propsAsIs: false,
-	vars: {
-		"d189jx24-0": [_exp2()],
-		"d189jx24-1": [_exp3()]
-	}
-}));
-var DropdownItem = ({ icon, label, variant, isDisabled, onClick }) => {
-	const handleClick = (e) => {
-		e.stopPropagation();
-		onClick();
-	};
-	return /* @__PURE__ */ jsx(StyledDropdownItemButton, {
-		onClick: handleClick,
-		disabled: isDisabled,
-		children: /* @__PURE__ */ jsxs(DropdownItemWrapper, { children: [icon, /* @__PURE__ */ jsx(Text, {
-			variant,
-			children: label
-		})] })
-	});
-};
-//#endregion
-export { DropdownItem as default };