@galaxy-io/dls 1.5.1 → 1.5.2

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.
@@ -345,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,
@@ -418,12 +425,15 @@ var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = In
 				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/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.1",
+  "version": "1.5.2",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",