@galaxy-io/dls 1.5.0 → 1.5.2

package/dist/assets/components/GalaxyFilamentWordmarkDark.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgGalaxyFilamentWordmarkDark: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export default SvgGalaxyFilamentWordmarkDark;

package/dist/assets/components/GalaxyFilamentWordmarkDark.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/assets/components/GalaxyFilamentWordmarkDark.tsx
+var SvgGalaxyFilamentWordmarkDark = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 4513 1200",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "#000",
+		d: "M181.814 1141.98 159.701 1200 0 985.717l292.377-774.718 70.759-59.34h338.665l-41.276 102.197H517.432l-49.379 131.852h149.481l-37.837 101.538H429.725zm538.618-805.707 46.19-123.955h238.818l-46.498 123.955zM505.694 910.552l196.064-526.148h239.307L745.001 910.552zm320.218 0 283.538-758.893 21.61-58.681 159.71 214.284-225.06 603.29zm626.528-190.548-32.93 88.352h91.4l33.41-88.352zm129.72-102.196 48.65-130.549h-91.4l-29 76.484h-239.3l45.21-120.658 43.24-58.681h505.15l21.62 58.681-174.93 467.467h-525.79l-21.62-58.68 86.97-234.064zm434.51 292.744h-228.62l195.57-525.489h758.71l21.62 58.022L2590 910.552h-228.62l158.23-423.293h-62.17l-158.23 423.293h-216.93l157.73-423.293h-66.1zm981.66-245.931-54.53 143.735h90.9l40.3-104.834h239.3l-56.01 149.009-43.25 58.021H2709.9l-21.63-58.021 152.33-409.446 43.24-58.022h505.15l21.63 58.022-80.59 222.196h-239.8v-.66zm129.74-101.538 27.02-75.824h-91.89l-27.52 75.824zm425.05 347.469h-239.8l195.58-525.489h524.3l21.63 58.022-174.45 467.467h-239.79l158.22-423.293h-88.45zm567.26-429.226 37.84-101.538 85.5-230.107L4265.34 91l159.7 213.625-27.51 75.163H4513l-42.26 101.538h-111.05l-121.86 327.03h105.37l-44.03 102.196h-295.25l-23.1-56.042z"
+	})
+});
+//#endregion
+export { SvgGalaxyFilamentWordmarkDark as default };

package/dist/assets/components/GalaxyFilamentWordmarkLight.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps } from "react";
+declare const SvgGalaxyFilamentWordmarkLight: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export default SvgGalaxyFilamentWordmarkLight;

package/dist/assets/components/GalaxyFilamentWordmarkLight.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/assets/components/GalaxyFilamentWordmarkLight.tsx
+var SvgGalaxyFilamentWordmarkLight = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 4513 1200",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "#fff",
+		d: "M181.814 1141.98 159.701 1200 0 985.717l292.377-774.718 70.759-59.34h338.665l-41.276 102.197H517.432l-49.379 131.852h149.481l-37.837 101.538H429.725zm538.618-805.707 46.19-123.955h238.818l-46.498 123.955zM505.694 910.552l196.064-526.148h239.307L745.001 910.552zm320.218 0 283.538-758.893 21.61-58.681 159.71 214.284-225.06 603.29zm626.528-190.548-32.93 88.352h91.4l33.41-88.352zm129.72-102.196 48.65-130.549h-91.4l-29 76.484h-239.3l45.21-120.658 43.24-58.681h505.15l21.62 58.681-174.93 467.467h-525.79l-21.62-58.68 86.97-234.064zm434.51 292.744h-228.62l195.57-525.489h758.71l21.62 58.022L2590 910.552h-228.62l158.23-423.293h-62.17l-158.23 423.293h-216.93l157.73-423.293h-66.1zm981.66-245.931-54.53 143.735h90.9l40.3-104.834h239.3l-56.01 149.009-43.25 58.021H2709.9l-21.63-58.021 152.33-409.446 43.24-58.022h505.15l21.63 58.022-80.59 222.196h-239.8v-.66zm129.74-101.538 27.02-75.824h-91.89l-27.52 75.824zm425.05 347.469h-239.8l195.58-525.489h524.3l21.63 58.022-174.45 467.467h-239.79l158.22-423.293h-88.45zm567.26-429.226 37.84-101.538 85.5-230.107L4265.34 91l159.7 213.625-27.51 75.163H4513l-42.26 101.538h-111.05l-121.86 327.03h105.37l-44.03 102.196h-295.25l-23.1-56.042z"
+	})
+});
+//#endregion
+export { SvgGalaxyFilamentWordmarkLight as default };

package/dist/icons/GalaxyFilamentWordmark.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The Galaxy wordmark, in the variant that reads against the active theme.
+ * Use `GalaxyLogomark` when you need just the mark without the word.
+ */
+declare const GalaxyFilamentWordmark: ({ height, isDark, }: {
+    /** Rendered height in px. Width follows the aspect ratio. */
+    height: number;
+    /** Force the light artwork instead of following the theme. */
+    isDark?: boolean;
+}) => import("react").JSX.Element;
+export default GalaxyFilamentWordmark;

package/dist/icons/GalaxyFilamentWordmark.js

@@ -0,0 +1,25 @@
+import { GalaxyTheme } from "../theme/types.js";
+import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
+import SvgGalaxyFilamentWordmarkDark from "../assets/components/GalaxyFilamentWordmarkDark.js";
+import SvgGalaxyFilamentWordmarkLight from "../assets/components/GalaxyFilamentWordmarkLight.js";
+import { match } from "ts-pattern";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/icons/GalaxyFilamentWordmark.tsx
+/**
+* The Galaxy wordmark, in the variant that reads against the active theme.
+* Use `GalaxyLogomark` when you need just the mark without the word.
+*/
+var GalaxyFilamentWordmark = ({ height, isDark }) => {
+	const { activeTheme } = useGalaxyTheme();
+	return useMemo(() => {
+		if (isDark) return /* @__PURE__ */ jsx(SvgGalaxyFilamentWordmarkLight, { height });
+		return match(activeTheme).with(GalaxyTheme.DARK, () => /* @__PURE__ */ jsx(SvgGalaxyFilamentWordmarkLight, { height })).with(GalaxyTheme.LIGHT, () => /* @__PURE__ */ jsx(SvgGalaxyFilamentWordmarkDark, { height })).exhaustive();
+	}, [
+		height,
+		isDark,
+		activeTheme
+	]);
+};
+//#endregion
+export { GalaxyFilamentWordmark as default };

package/dist/inputs/MultiSelectInput.js

@@ -5,7 +5,7 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.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";
@@ -121,6 +121,13 @@ var OptionIconSlot = /*#__PURE__*/ styled("span")({
 	class: "o16no7ck",
 	propsAsIs: false
 });
+var _exp22 = () => ({ $size }) => getInputControlSize($size);
+var ResetIconSlot = /*#__PURE__*/ styled("span")({
+	name: "ResetIconSlot",
+	class: "roazm1",
+	propsAsIs: false,
+	vars: { "roazm1-0": [_exp22()] }
+});
 /**
 * Multi-choice dropdown. Same option shape and search contract as `SelectInput`,
 * but the panel stays open across picks and the trigger summarizes what's chosen.
@@ -325,6 +332,7 @@ var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = In
 					optionsRefs.current[index] = el;
 				},
 				$isFocused: isPinnedOptionFocused(index),
+				$size: size,
 				onClick: (e) => {
 					e.preventDefault();
 					handlePinnedOptionToggle(pinnedOption);
@@ -344,7 +352,7 @@ var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = In
 						shrink: 1,
 						minWidth: 0,
 						children: /* @__PURE__ */ jsx(Text, {
-							variant: TextVariant.PRIMARY,
+							variant: isPinnedOptionSelected(pinnedOption) ? TextVariant.PRIMARY : TextVariant.SECONDARY,
 							size: getInputTextSize(size),
 							cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 							isEllipsis: true,
@@ -413,15 +421,19 @@ var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = In
 			}), /* @__PURE__ */ jsx(PinnedOptionButton, {
 				onClick: handleReset,
 				$isFocused: false,
+				$size: size,
 				children: /* @__PURE__ */ jsxs(FlexWrapper, {
 					alignItems: AlignItems.CENTER,
 					gap: 8,
-					children: [/* @__PURE__ */ jsx(Icon, {
-						component: ArrowCounterClockwiseIcon,
-						variant: IconVariant.TERTIARY,
-						size: getInputIconSize(size)
+					children: [/* @__PURE__ */ jsx(ResetIconSlot, {
+						$size: size,
+						children: /* @__PURE__ */ jsx(Icon, {
+							component: ArrowCounterClockwiseIcon,
+							variant: IconVariant.TERTIARY,
+							size: getInputIconSize(size)
+						})
 					}), /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.PRIMARY,
+						variant: TextVariant.SECONDARY,
 						size: getInputTextSize(size),
 						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 						children: "Reset"

package/dist/inputs/SwitcherInput.js

@@ -1,5 +1,5 @@
 import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextWeight } from "../text/Text.js";
+import Text, { TextVariant, TextWeight } from "../text/Text.js";
 import { InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 /* empty css                        */
 import { styled } from "@linaria/react";
@@ -26,7 +26,7 @@ var StyledSwitcherInput = withTheme(/*#__PURE__*/ styled("div")({
 var _exp5 = () => ({ $size }) => {
 	return match($size).with(InputSize.SMALL, () => "2px 8px").with(InputSize.MEDIUM, () => "3px 10px").with(InputSize.LARGE, () => "5px 12px").exhaustive();
 };
-var _exp6 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.secondary : "transparent";
+var _exp6 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : "transparent";
 var _exp7 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.border.primary : "transparent";
 var StyledSwitcherInputItem = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledSwitcherInputItem",
@@ -52,6 +52,7 @@ var SwitcherInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM,
 			$size: size,
 			children: /* @__PURE__ */ jsx(Text, {
 				size: getInputTextSize(size),
+				variant: item.id === selectedId ? TextVariant.PRIMARY_ALT : TextVariant.SECONDARY,
 				weight: item.id === selectedId ? TextWeight.MEDIUM : TextWeight.REGULAR,
 				cursor: "pointer",
 				children: item.label

package/dist/styles.css

@@ -107,6 +107,7 @@
 .m78p4ib{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;width:100%;padding:8px;background:var(--m78p4ib-0);border-radius:4px;cursor:pointer;}.m78p4ib:hover{background-color:var(--m78p4ib-1);}
 .p6xdmgb{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:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;padding:8px;background:var(--p6xdmgb-0);border-radius:4px;border:none;cursor:pointer;}.p6xdmgb:hover{background-color:var(--p6xdmgb-1);}.p6xdmgb:focus{outline:none;background-color:var(--p6xdmgb-1);}
 .o16no7ck{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}
+.roazm1{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;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:var(--roazm1-0);}
 .m19ovajc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;min-height:var(--m19ovajc-0);width:var(--m19ovajc-1);background-color:var(--m19ovajc-2);border:0.5px solid var(--m19ovajc-3);border-radius:4px;padding:var(--m19ovajc-4);-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;cursor:var(--m19ovajc-5);opacity:var(--m19ovajc-6);}.m19ovajc:hover:not([data-disabled="true"]){border-color:var(--m19ovajc-7);}
 .s190irv4{-webkit-flex:1;-ms-flex:1;flex:1;min-width:80px;border:none;outline:none;background:transparent;color:var(--s190irv4-0);font-size:var(--s190irv4-1);line-height:var(--s190irv4-2);font-weight:var(--s190irv4-3);font-family:var(--s190irv4-4);}.s190irv4:disabled{cursor:not-allowed;}.s190irv4::-webkit-input-placeholder{color:var(--s190irv4-5);}.s190irv4::-moz-placeholder{color:var(--s190irv4-5);}.s190irv4:-ms-input-placeholder{color:var(--s190irv4-5);}.s190irv4::placeholder{color:var(--s190irv4-5);}
 .r1pzr59l{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;cursor:var(--r1pzr59l-0);opacity:var(--r1pzr59l-1);}

package/package.json

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