@galaxy-io/dls 1.5.15 → 1.5.17

package/dist/inputs/Input.d.ts

@@ -175,6 +175,8 @@ export interface InputProps<T> {
     labelTooltip?: string | React.ReactNode;
     /** Message shown under the field; also switches the border to the error color. */
     error?: string;
+    /** Switches the border to the error color without a message. Implied by `error`. */
+    isError?: boolean;
     /** Appends the red required asterisk to the label. */
     isRequired?: boolean;
     isDisabled?: boolean;

package/dist/inputs/Input.js

@@ -217,7 +217,7 @@ var TrailingActionButton = /*#__PURE__*/ styled("button")({
 * pin `type` and `parse` for you. Use this directly only for a value type none of
 * them cover.
 */
-var Input = forwardRef(({ parse, onChange, variant = "PRIMARY", size = "MEDIUM", type, value, label, labelTooltip, error, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
+var Input = forwardRef(({ parse, onChange, variant = "PRIMARY", size = "MEDIUM", type, value, label, labelTooltip, error, isError, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
 	const handleChange = (e) => {
 		onChange(parse(e.target.value));
 	};
@@ -250,7 +250,7 @@ var Input = forwardRef(({ parse, onChange, variant = "PRIMARY", size = "MEDIUM",
 						$variant: variant,
 						$width: width,
 						$fillWidth: fillWidth || hasLeading || hasTrailing,
-						$isError: !!error,
+						$isError: isError || !!error,
 						$hasLeadingIcon: hasLeading,
 						$hasTrailingAction: hasTrailing,
 						$isMonospace: isMonospace,

package/dist/inputs/NumberInput.d.ts

@@ -6,5 +6,5 @@ export type NumberInputProps = Omit<InputProps<number>, "type" | "parse">;
  * where they bound character count) and values outside it are clamped, not
  * rejected — `onChange` only ever sees an in-range number.
  */
-declare const NumberInput: ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace, }: NumberInputProps) => import("react").JSX.Element;
+declare const NumberInput: ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace, }: NumberInputProps) => import("react").JSX.Element;
 export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 * where they bound character count) and values outside it are clamped, not
 * rejected — `onChange` only ever sees an in-range number.
 */
-var NumberInput = ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }) => {
+var NumberInput = ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }) => {
 	return /* @__PURE__ */ jsx(Input, {
 		type: "number",
 		value,
@@ -19,6 +19,7 @@ var NumberInput = ({ value, placeholder, label, labelTooltip, variant, size, lea
 		leading,
 		trailing,
 		error,
+		isError,
 		isRequired,
 		isDisabled,
 		autoFocus,

package/dist/inputs/PasswordInput.js

@@ -8,7 +8,7 @@ var DEFAULT_STATE = { showPassword: false };
 * A masked text field with a built-in reveal toggle in the trailing slot.
 * Toggling only flips the DOM `type` — the value is never transformed.
 */
-var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labelTooltip, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus, isMonospace }, ref) => {
+var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labelTooltip, leading, error, isError, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	return /* @__PURE__ */ jsx(Input, {
 		ref,
@@ -31,6 +31,7 @@ var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labe
 			isDisabled
 		},
 		error,
+		isError,
 		isRequired,
 		isDisabled,
 		autoFocus,

package/dist/inputs/SelectInput.d.ts

@@ -38,7 +38,7 @@ export interface SelectInputProps {
     /** Trigger width. A number is px. */
     width?: number | string;
     fillWidth?: boolean;
-    /** Panel width. Defaults to matching the trigger. */
+    /** Panel width. By default, fits the options and is at least as wide as the trigger. */
     dropdownWidth?: number | string;
     isDisabled?: boolean;
     isRequired?: boolean;

package/dist/inputs/SelectInput.js

@@ -6,7 +6,6 @@ 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 HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
@@ -72,11 +71,8 @@ var StyledSearchInput = withTheme(/*#__PURE__*/ styled("input")({
 		"s14m69un-6": [_exp13()]
 	}
 }));
-var _exp14 = () => ({ $width }) => getCssSizeValue($width, 200);
-var _exp15 = () => ({ $fillWidth, $width }) => {
-	if ($width) return getCssSizeValue($width);
-	return $fillWidth ? "100%" : "auto";
-};
+var _exp14 = () => ({ $minWidth }) => `min(${getCssSizeValue($minWidth)}, calc(100vw - 16px))`;
+var _exp15 = () => ({ $width }) => getCssSizeValue($width, "max-content");
 var SelectInputContent = /*#__PURE__*/ styled("div")({
 	name: "SelectInputContent",
 	class: "sbfl8n6",
@@ -86,39 +82,37 @@ var SelectInputContent = /*#__PURE__*/ styled("div")({
 		"sbfl8n6-1": [_exp15()]
 	}
 });
-var _exp16 = () => ({ $fillWidth, $width }) => $fillWidth || $width ? "100%" : "auto";
 var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
 	name: "SelectInputOptionsContainer",
 	class: "sk260f0",
-	propsAsIs: false,
-	vars: { "sk260f0-0": [_exp16()] }
+	propsAsIs: false
 });
-var _exp17 = () => ({ theme, $isSelected, $isFocused }) => {
+var _exp16 = () => ({ theme, $isSelected, $isFocused }) => {
 	if ($isSelected || $isFocused) return theme.color.background.secondary;
 	return "transparent";
 };
-var _exp19 = () => ({ theme }) => theme.color.background.secondary;
+var _exp18 = () => ({ theme }) => theme.color.background.secondary;
 var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
 	name: "SelectInputOption",
 	class: "so10ras",
 	propsAsIs: false,
 	vars: {
-		"so10ras-0": [_exp17()],
-		"so10ras-1": [_exp19()]
+		"so10ras-0": [_exp16()],
+		"so10ras-1": [_exp18()]
 	}
 }));
-var _exp20 = () => ({ theme, $isSelected, $isFocused }) => {
+var _exp19 = () => ({ theme, $isSelected, $isFocused }) => {
 	if ($isSelected || $isFocused) return theme.color.background.tertiary;
 	return "transparent";
 };
-var _exp22 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp21 = () => ({ theme }) => theme.color.background.tertiary;
 var PinnedOptionButton = withTheme(/*#__PURE__*/ styled("button")({
 	name: "PinnedOptionButton",
 	class: "poe2ind",
 	propsAsIs: false,
 	vars: {
-		"poe2ind-0": [_exp20()],
-		"poe2ind-1": [_exp22()]
+		"poe2ind-0": [_exp19()],
+		"poe2ind-1": [_exp21()]
 	}
 }));
 var OptionIconSlot = /*#__PURE__*/ styled("span")({
@@ -153,11 +147,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 		onOpenChange
 	});
 	const triggerWidth = useElementWidth(triggerRef);
-	const resolvedDropdownWidth = useMemo(() => dropdownWidth ?? triggerWidth ?? width, [
-		dropdownWidth,
-		triggerWidth,
-		width
-	]);
+	const dropdownMinWidth = dropdownWidth ?? triggerWidth ?? width ?? 200;
 	const selectedOption = value ?? null;
 	const effectiveIsDisabled = isDisabled || options.length <= 1;
 	const visible = isOpen;
@@ -285,8 +275,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 		return isSearchable && focusedOptionIndex === index + filteredPinnedOptions.length && index >= 0;
 	};
 	const dropdownBody = /* @__PURE__ */ jsxs(SelectInputContent, {
-		$fillWidth: fillWidth,
-		$width: resolvedDropdownWidth,
+		$minWidth: dropdownMinWidth,
+		$width: dropdownWidth,
 		children: [
 			filteredPinnedOptions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [filteredPinnedOptions.map((pinnedOption, index) => /* @__PURE__ */ jsxs(PinnedOptionButton, {
 				ref: (el) => {
@@ -304,58 +294,55 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 					isEllipsis: true,
 					children: pinnedOption.label
-				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(Icon, {
+				}), isPinnedOptionSelected(pinnedOption) && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
 					component: CheckIcon,
 					variant: IconVariant.TERTIARY,
 					weight: IconWeight.BOLD,
 					size: 12
-				})]
+				}) })]
 			}, pinnedOption.id)), /* @__PURE__ */ jsx(HorizontalDivider, {})] }),
-			/* @__PURE__ */ jsx(SelectInputOptionsContainer, {
-				$fillWidth: fillWidth,
-				$width: resolvedDropdownWidth,
-				children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-					const absoluteIndex = filteredPinnedOptions.length + index;
-					return /* @__PURE__ */ jsxs(SelectInputOption, {
-						ref: (el) => {
-							optionsRefs.current[absoluteIndex] = el;
-						},
-						$isSelected: option.id === value?.id,
-						$isFocused: isOptionFocused(index),
-						onClick: () => handleOptionSelect(option),
-						onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
-						children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							fillWidth: true,
-							children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
-								grow: 1,
-								shrink: 1,
-								minWidth: 0,
-								children: /* @__PURE__ */ jsx(Text, {
-									size: getInputTextSize(size),
-									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-									isEllipsis: true,
-									variant: option.variant ?? TextVariant.PRIMARY,
-									children: option.label
-								})
-							})]
-						}), option.id === value?.id && /* @__PURE__ */ jsx(Icon, {
-							component: CheckIcon,
-							variant: IconVariant.TERTIARY,
-							weight: IconWeight.BOLD,
-							size: 12
+			/* @__PURE__ */ jsx(SelectInputOptionsContainer, { children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+				const absoluteIndex = filteredPinnedOptions.length + index;
+				return /* @__PURE__ */ jsxs(SelectInputOption, {
+					ref: (el) => {
+						optionsRefs.current[absoluteIndex] = el;
+					},
+					$isSelected: option.id === value?.id,
+					$isFocused: isOptionFocused(index),
+					onClick: () => handleOptionSelect(option),
+					onMouseEnter: () => setFocusedOptionIndex(absoluteIndex),
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 8,
+						minWidth: 0,
+						grow: 1,
+						children: [option.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: option.icon }), /* @__PURE__ */ jsx(FlexItem, {
+							grow: 1,
+							shrink: 1,
+							minWidth: 0,
+							children: /* @__PURE__ */ jsx(Text, {
+								size: getInputTextSize(size),
+								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+								isEllipsis: true,
+								variant: option.variant ?? TextVariant.PRIMARY,
+								children: option.label
+							})
 						})]
-					}, option.id);
-				}) : /* @__PURE__ */ jsx("div", {
-					style: { padding: "8px" },
-					children: /* @__PURE__ */ jsx(Text, {
-						variant: TextVariant.TERTIARY,
-						size: getInputTextSize(size),
-						children: "No options found"
-					})
+					}), option.id === value?.id && /* @__PURE__ */ jsx(OptionIconSlot, { children: /* @__PURE__ */ jsx(Icon, {
+						component: CheckIcon,
+						variant: IconVariant.TERTIARY,
+						weight: IconWeight.BOLD,
+						size: 12
+					}) })]
+				}, option.id);
+			}) : /* @__PURE__ */ jsx(FlexWrapper, {
+				padding: 8,
+				children: /* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.TERTIARY,
+					size: getInputTextSize(size),
+					children: "No options found"
 				})
-			}),
+			}) }),
 			onReset && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HorizontalDivider, {}), /* @__PURE__ */ jsx(PinnedOptionButton, {
 				onClick: handleReset,
 				$isSelected: false,
@@ -390,6 +377,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 	return /* @__PURE__ */ jsxs(FlexWrapper, {
 		direction: FlexDirection.COLUMN,
 		gap: 4,
+		minWidth: 0,
 		fillWidth,
 		children: [
 			label && /* @__PURE__ */ jsx(InputLabel, {
@@ -401,7 +389,7 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 				body: dropdownBody,
 				isOpen: visible,
 				onClose: handleClose,
-				minWidth: resolvedDropdownWidth ?? 200,
+				minWidth: 0,
 				offset: [0, 3],
 				fillWidth,
 				noPadding: true,
@@ -417,27 +405,26 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					onMouseEnter: handleMouseEnter,
 					onMouseLeave: handleMouseLeave,
 					onClick: handleToggle,
-					children: [
-						/* @__PURE__ */ jsx(StyledSearchInput, {
-							ref: inputRef,
-							$size: size,
-							$isActive: visible ?? false,
-							$isDisabled: effectiveIsDisabled,
-							$isError: !!error,
-							$width: width,
-							$fillWidth: fillWidth,
-							type: "text",
-							placeholder,
-							value: searchTerm,
-							onChange: handleInputChange,
-							onKeyDown: handleSearchKeyDown,
-							autoComplete: "off",
-							autoCorrect: "off",
-							disabled: effectiveIsDisabled,
-							onClick: (e) => e.stopPropagation()
-						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
+					children: [/* @__PURE__ */ jsx(StyledSearchInput, {
+						ref: inputRef,
+						$size: size,
+						$isActive: visible ?? false,
+						$isDisabled: effectiveIsDisabled,
+						$isError: !!error,
+						$width: width,
+						$fillWidth: fillWidth,
+						type: "text",
+						placeholder,
+						value: searchTerm,
+						onChange: handleInputChange,
+						onKeyDown: handleSearchKeyDown,
+						autoComplete: "off",
+						autoCorrect: "off",
+						disabled: effectiveIsDisabled,
+						onClick: (e) => e.stopPropagation()
+					}), /* @__PURE__ */ jsx(FlexWrapper, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -445,8 +432,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
-						}) })
-					]
+						})
+					})]
 				}) : /* @__PURE__ */ jsxs(StyledSelectInput, {
 					ref: triggerRef,
 					$variant: variant,
@@ -465,26 +452,26 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 					"aria-haspopup": "listbox",
 					"aria-expanded": visible,
 					"aria-label": selectedOption ? selectedOption.label : placeholder,
-					children: [
-						/* @__PURE__ */ jsxs(FlexWrapper, {
-							alignItems: AlignItems.CENTER,
-							gap: 8,
-							fillWidth: true,
-							children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
-								grow: 1,
-								shrink: 1,
-								minWidth: 0,
-								children: /* @__PURE__ */ jsx(Text, {
-									variant: textVariant,
-									size: getInputTextSize(size),
-									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
-									isEllipsis: true,
-									children: selectedOption ? selectedOption.label : placeholder
-								})
-							})]
-						}),
-						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
-						/* @__PURE__ */ jsx(FlexWrapper, { children: /* @__PURE__ */ jsx(Rotate, {
+					children: [/* @__PURE__ */ jsxs(FlexWrapper, {
+						alignItems: AlignItems.CENTER,
+						gap: 8,
+						minWidth: 0,
+						grow: 1,
+						children: [selectedOption?.icon && /* @__PURE__ */ jsx(OptionIconSlot, { children: selectedOption.icon }), /* @__PURE__ */ jsx(FlexItem, {
+							grow: 1,
+							shrink: 1,
+							minWidth: 0,
+							children: /* @__PURE__ */ jsx(Text, {
+								variant: textVariant,
+								size: getInputTextSize(size),
+								cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
+								isEllipsis: true,
+								children: selectedOption ? selectedOption.label : placeholder
+							})
+						})]
+					}), /* @__PURE__ */ jsx(FlexWrapper, {
+						shrink: 0,
+						children: /* @__PURE__ */ jsx(Rotate, {
 							isRotated: visible,
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
@@ -492,8 +479,8 @@ var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MED
 								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
-						}) })
-					]
+						})
+					})]
 				})
 			}),
 			error && /* @__PURE__ */ jsx(Text, {

package/dist/inputs/TextInput.js

@@ -9,7 +9,7 @@ var DEFAULT_STATE = { error: "" };
 * `min`/`max` bound the *character count*, not a numeric range — the field
 * validates length on blur and shows its own error. A `error` you pass wins.
 */
-var TextInput = forwardRef(({ variant, size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
+var TextInput = forwardRef(({ variant, size, value, min, max, placeholder, label, labelTooltip, leading, trailing, error, isError, isRequired, isDisabled, autoFocus, onChange, onKeyDown, onBlur, fillWidth, width, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	const handleFocus = () => {
 		setState({
@@ -45,6 +45,7 @@ var TextInput = forwardRef(({ variant, size, value, min, max, placeholder, label
 		trailing,
 		autoFocus,
 		error: state.error || error,
+		isError,
 		isRequired,
 		isDisabled,
 		onKeyDown,

package/dist/styles.css

@@ -95,12 +95,12 @@
 .s1902pw9{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;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;padding:var(--s1902pw9-0);height:var(--s1902pw9-1);width:var(--s1902pw9-2);cursor:var(--s1902pw9-3);opacity:var(--s1902pw9-4);background-color:var(--s1902pw9-5);border:0.5px solid var(--s1902pw9-6);border-radius:5px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1902pw9:hover{border-color:var(--s1902pw9-7);}
 .c179xo5d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
 .d60emtx{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:36px;height:36px;border:none;border-radius:4px;cursor:var(--d60emtx-0);opacity:var(--d60emtx-1);background-color:var(--d60emtx-2);border:var(--d60emtx-3);-webkit-transition:all 0.075s ease-in-out;transition:all 0.075s ease-in-out;}.d60emtx:hover:not(:disabled){background-color:var(--d60emtx-4);}.d60emtx:focus{outline:none;}
-.s1ecxi56{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;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;padding:var(--s1ecxi56-0);height:var(--s1ecxi56-1);width:var(--s1ecxi56-2);cursor:var(--s1ecxi56-3);opacity:var(--s1ecxi56-4);background-color:var(--s1ecxi56-5);border:0.5px solid var(--s1ecxi56-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1ecxi56:hover{border:0.5px solid var(--s1ecxi56-7);}
-.s14m69un{-webkit-flex:1;-ms-flex:1;flex:1;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s14m69un-0);color:var(--s14m69un-1);font-size:var(--s14m69un-2);line-height:var(--s14m69un-3);font-weight:var(--s14m69un-4);font-family:var(--s14m69un-5);}.s14m69un:disabled{cursor:not-allowed;}.s14m69un::-webkit-input-placeholder{color:var(--s14m69un-6);}.s14m69un::-moz-placeholder{color:var(--s14m69un-6);}.s14m69un:-ms-input-placeholder{color:var(--s14m69un-6);}.s14m69un::placeholder{color:var(--s14m69un-6);}
-.sbfl8n6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:var(--sbfl8n6-0);max-height:300px;width:var(--sbfl8n6-1);}
-.sk260f0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;min-height:0;width:var(--sk260f0-0);}
-.so10ras{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(--so10ras-0);border:none;border-radius:4px;cursor:pointer;}.so10ras:hover{background-color:var(--so10ras-1);}.so10ras:focus{outline:none;background-color:var(--so10ras-1);}
-.poe2ind{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(--poe2ind-0);border-radius:4px;border:none;cursor:pointer;}.poe2ind:hover{background-color:var(--poe2ind-1);}.poe2ind:focus{outline:none;background-color:var(--poe2ind-1);}
+.s1ecxi56{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;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;box-sizing:border-box;min-width:0;gap:8px;padding:var(--s1ecxi56-0);height:var(--s1ecxi56-1);width:var(--s1ecxi56-2);cursor:var(--s1ecxi56-3);opacity:var(--s1ecxi56-4);background-color:var(--s1ecxi56-5);border:0.5px solid var(--s1ecxi56-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.s1ecxi56:hover{border:0.5px solid var(--s1ecxi56-7);}
+.s14m69un{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0;text-overflow:ellipsis;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s14m69un-0);color:var(--s14m69un-1);font-size:var(--s14m69un-2);line-height:var(--s14m69un-3);font-weight:var(--s14m69un-4);font-family:var(--s14m69un-5);}.s14m69un:disabled{cursor:not-allowed;}.s14m69un::-webkit-input-placeholder{color:var(--s14m69un-6);}.s14m69un::-moz-placeholder{color:var(--s14m69un-6);}.s14m69un:-ms-input-placeholder{color:var(--s14m69un-6);}.s14m69un::placeholder{color:var(--s14m69un-6);}
+.sbfl8n6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:var(--sbfl8n6-0);max-width:calc(100vw - 16px);max-height:300px;width:var(--sbfl8n6-1);}
+.sk260f0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;min-height:0;width:100%;}
+.so10ras{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;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:8px;width:100%;padding:8px;background:var(--so10ras-0);border:none;border-radius:4px;cursor:pointer;}.so10ras:hover{background-color:var(--so10ras-1);}.so10ras:focus{outline:none;background-color:var(--so10ras-1);}
+.poe2ind{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;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;gap:8px;width:100%;padding:8px;background:var(--poe2ind-0);border-radius:4px;border:none;cursor:pointer;}.poe2ind:hover{background-color:var(--poe2ind-1);}.poe2ind:focus{outline:none;background-color:var(--poe2ind-1);}
 .o9236d8{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;}
 .sf4kgcu{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;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:4px;padding:var(--sf4kgcu-0);height:var(--sf4kgcu-1);width:var(--sf4kgcu-2);cursor:var(--sf4kgcu-3);opacity:var(--sf4kgcu-4);background-color:var(--sf4kgcu-5);border:0.5px solid var(--sf4kgcu-6);border-radius:4px;-webkit-transition:border-color 0.075s ease-in-out;transition:border-color 0.075s ease-in-out;}.sf4kgcu:hover{border:0.5px solid var(--sf4kgcu-7);}
 .s15yoqwu{-webkit-flex:1;-ms-flex:1;flex:1;outline:none;border:none;background:transparent;padding:0;margin:0;height:var(--s15yoqwu-0);color:var(--s15yoqwu-1);font-size:var(--s15yoqwu-2);line-height:var(--s15yoqwu-3);font-weight:var(--s15yoqwu-4);font-family:var(--s15yoqwu-5);}.s15yoqwu:disabled{cursor:not-allowed;}.s15yoqwu::-webkit-input-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu::-moz-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu:-ms-input-placeholder{color:var(--s15yoqwu-6);}.s15yoqwu::placeholder{color:var(--s15yoqwu-6);}

package/package.json

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