@galaxy-io/dls 1.4.14 → 1.5.0

package/dist/inputs/MultiTextInput.js

@@ -2,40 +2,36 @@ import { withTheme } from "../theme/GalaxyTheme.js";
 import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexWrapper, { FlexDirection } from "../containers/FlexWrapper.js";
-import { InputLabel } from "./Input.js";
-import Chip, { ChipSize } from "../chips/Chip.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputLineHeight, getInputSurfaceColor } from "./Input.js";
+import Chip, { ChipSize, ChipVariant } from "../chips/Chip.js";
 /* empty css                         */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/inputs/MultiTextInput.tsx
-/** Field height. */
-var MultiTextInputSize = /* @__PURE__ */ function(MultiTextInputSize) {
-	MultiTextInputSize["SMALL"] = "SMALL";
-	MultiTextInputSize["MEDIUM"] = "MEDIUM";
-	MultiTextInputSize["LARGE"] = "LARGE";
-	return MultiTextInputSize;
-}({});
-/** Color of the chips created from entered values. */
-var MultiTextInputVariant = /* @__PURE__ */ function(MultiTextInputVariant) {
-	MultiTextInputVariant["PRIMARY"] = "PRIMARY";
-	MultiTextInputVariant["SECONDARY"] = "SECONDARY";
-	MultiTextInputVariant["TERTIARY"] = "TERTIARY";
-	return MultiTextInputVariant;
-}({});
-var _exp = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
+var INPUT_VARIANT_TO_CHIP_VARIANT_MAP = {
+	[InputVariant.TRANSPARENT]: ChipVariant.SECONDARY,
+	[InputVariant.BASE]: ChipVariant.SECONDARY,
+	[InputVariant.PRIMARY]: ChipVariant.SECONDARY,
+	[InputVariant.SECONDARY]: ChipVariant.PRIMARY,
+	[InputVariant.TERTIARY]: ChipVariant.SECONDARY
 };
+var INPUT_SIZE_TO_CHIP_SIZE_MAP = {
+	[InputSize.SMALL]: ChipSize.SMALL,
+	[InputSize.MEDIUM]: ChipSize.MEDIUM,
+	[InputSize.LARGE]: ChipSize.LARGE
+};
+var _exp = () => ({ $size }) => getInputHeight($size);
 var _exp2 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
-var _exp4 = () => ({ theme, $isError, $isFocused }) => {
+var _exp3 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
+var _exp4 = () => ({ theme, $variant, $isError, $isFocused }) => {
 	if ($isError) return theme.color.border.error;
 	if ($isFocused) return theme.color.border.selected;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var _exp5 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "2px 6px").with("MEDIUM", () => "4px 6px").with("LARGE", () => "4px 8px").exhaustive();
+	return `${match($size).with(InputSize.SMALL, () => "2px").with(InputSize.MEDIUM, () => "4px").with(InputSize.LARGE, () => "4px").exhaustive()} ${match($size).with(InputSize.SMALL, () => "2px").with(InputSize.MEDIUM, () => "4px").with(InputSize.LARGE, () => "4px").exhaustive()}`;
 };
 var _exp6 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "text";
 var _exp7 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
@@ -56,12 +52,8 @@ var MultiTextInputWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	}
 }));
 var _exp9 = () => ({ theme }) => theme.color.text.primary;
-var _exp0 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.size.body_md).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
-};
-var _exp1 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.height.body_md).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
-};
+var _exp0 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
+var _exp1 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
 var _exp10 = () => ({ theme }) => theme.font.sans.weight.regular;
 var _exp11 = () => ({ theme }) => theme.font.sans.family;
 var _exp12 = () => ({ theme }) => theme.color.text.disabled;
@@ -85,7 +77,7 @@ var StyledInput = withTheme(/*#__PURE__*/ styled("input")({
 * The in-progress draft is internal state and is *not* part of `value`; it only
 * lands there once committed.
 */
-var MultiTextInput = forwardRef(({ value, onChange, variant = "PRIMARY", size = "MEDIUM", placeholder, label, error, isRequired, isDisabled, autoFocus, width, fillWidth, separator = "," }, ref) => {
+var MultiTextInput = forwardRef(({ value, onChange, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, placeholder, label, error, isRequired, isDisabled, autoFocus, width, fillWidth, separator = "," }, ref) => {
 	const [inputValue, setInputValue] = useState("");
 	const [isFocused, setIsFocused] = useState(false);
 	const inputRef = useRef(null);
@@ -156,7 +148,8 @@ var MultiTextInput = forwardRef(({ value, onChange, variant = "PRIMARY", size =
 				"data-disabled": isDisabled,
 				children: [value.map((item, index) => /* @__PURE__ */ jsx(Chip, {
 					label: item,
-					size: ChipSize.SMALL,
+					size: INPUT_SIZE_TO_CHIP_SIZE_MAP[size],
+					variant: INPUT_VARIANT_TO_CHIP_VARIANT_MAP[variant],
 					onDismiss: isDisabled ? void 0 : () => handleRemoveChip(index)
 				}, `${item}-${index}`)), /* @__PURE__ */ jsx(StyledInput, {
 					ref: setRefs,
@@ -184,4 +177,4 @@ var MultiTextInput = forwardRef(({ value, onChange, variant = "PRIMARY", size =
 });
 MultiTextInput.displayName = "MultiTextInput";
 //#endregion
-export { MultiTextInputSize, MultiTextInputVariant, MultiTextInput as default };
+export { MultiTextInput as default };

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, size, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth, }: NumberInputProps) => import("react").JSX.Element;
+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;
 export default NumberInput;

package/dist/inputs/NumberInput.js

@@ -7,17 +7,21 @@ 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, size, leading, trailing, isRequired, isDisabled, min, max, step, onChange, width, fillWidth }) => {
+var NumberInput = ({ value, placeholder, label, labelTooltip, variant, size, leading, trailing, error, isRequired, isDisabled, autoFocus, min, max, step, onChange, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }) => {
 	return /* @__PURE__ */ jsx(Input, {
 		type: "number",
 		value,
 		placeholder,
 		label,
+		labelTooltip,
+		variant,
 		size,
 		leading,
 		trailing,
+		error,
 		isRequired,
 		isDisabled,
+		autoFocus,
 		min,
 		max,
 		step,
@@ -31,9 +35,13 @@ var NumberInput = ({ value, placeholder, label, size, leading, trailing, isRequi
 			max,
 			onChange
 		]),
+		onFocus,
+		onBlur,
+		onKeyDown,
 		parse: Number,
 		width,
-		fillWidth
+		fillWidth,
+		isMonospace
 	});
 };
 //#endregion

package/dist/inputs/PasswordInput.d.ts

@@ -1,9 +1,10 @@
 import { type InputProps } from "./Input";
 /**
- * Every `InputProps` field except `type` and `parse`, which are fixed. The
- * trailing slot is used by the reveal toggle, so passing `trailing` has no effect.
+ * Every `InputProps` field except `type` and `parse`, which are fixed. `trailing`
+ * is omitted because the reveal toggle owns that slot, and `min`/`max`/`step` are
+ * numeric-only.
  */
-export type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "action">;
+export type PasswordInputProps = Omit<InputProps<string>, "type" | "parse" | "trailing" | "min" | "max" | "step">;
 /**
  * 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.

package/dist/inputs/PasswordInput.js

@@ -1,4 +1,4 @@
-import Input, { InputSize } from "./Input.js";
+import Input from "./Input.js";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
@@ -8,17 +8,19 @@ 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(({ size = InputSize.MEDIUM, value, placeholder, label, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus }, ref) => {
+var PasswordInput = forwardRef(({ variant, size, value, placeholder, label, labelTooltip, leading, error, isRequired, isDisabled, autoFocus, onChange, width, fillWidth, onKeyDown, onBlur, onFocus, isMonospace }, ref) => {
 	const [state, setState] = useState(DEFAULT_STATE);
 	return /* @__PURE__ */ jsx(Input, {
 		ref,
 		parse: String,
 		onChange,
+		variant,
 		size,
 		type: state.showPassword ? "text" : "password",
 		value,
 		placeholder,
 		label,
+		labelTooltip,
 		leading,
 		trailing: {
 			icon: state.showPassword ? EyeSlashIcon : EyeIcon,
@@ -36,7 +38,8 @@ var PasswordInput = forwardRef(({ size = InputSize.MEDIUM, value, placeholder, l
 		onBlur,
 		onFocus,
 		width,
-		fillWidth
+		fillWidth,
+		isMonospace
 	});
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/inputs/RadioInput.d.ts

@@ -1,18 +1,15 @@
-/** Fill color of the dot when selected. */
-export declare enum RadioInputVariant {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-/** Circle size. Two steps only — this is a hit target, not a type scale. */
-export declare enum RadioInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface RadioInputProps {
-    /** @default RadioInputVariant.PRIMARY */
-    variant?: RadioInputVariant;
-    /** @default RadioInputSize.MEDIUM */
-    size?: RadioInputSize;
+    /**
+     * Unselected fill color. The selected fill is a state color and stays
+     * `background.primaryAlt` so the dot keeps its contrast. Unlike the field
+     * inputs, `TRANSPARENT` keeps the hairline border here — without it the
+     * circle would be invisible. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Circle size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
+     * @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Controlled state. The radio holds none of its own. */
     isSelected: boolean;
     /** Text beside the circle. */

package/dist/inputs/RadioInput.js

@@ -5,24 +5,13 @@ import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.js";
 import Spacing from "../containers/Spacing.js";
+import { InputSize, InputVariant, getInputControlSize, getInputSurfaceColor } from "./Input.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
 import { match } from "ts-pattern";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InfoIcon } from "@phosphor-icons/react";
 //#region src/inputs/RadioInput.tsx
-/** Fill color of the dot when selected. */
-var RadioInputVariant = /* @__PURE__ */ function(RadioInputVariant) {
-	RadioInputVariant["PRIMARY"] = "PRIMARY";
-	RadioInputVariant["SECONDARY"] = "SECONDARY";
-	return RadioInputVariant;
-}({});
-/** Circle size. Two steps only — this is a hit target, not a type scale. */
-var RadioInputSize = /* @__PURE__ */ function(RadioInputSize) {
-	RadioInputSize["SMALL"] = "SMALL";
-	RadioInputSize["MEDIUM"] = "MEDIUM";
-	return RadioInputSize;
-}({});
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var RadioContainer = /*#__PURE__*/ styled("div")({
@@ -34,14 +23,9 @@ var RadioContainer = /*#__PURE__*/ styled("div")({
 		"r1pzr59l-1": [_exp2()]
 	}
 });
-var _exp4 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "12px").with("MEDIUM", () => "16px").exhaustive();
-};
+var _exp4 = () => ({ $size }) => getInputControlSize($size);
 var _exp5 = () => ({ theme }) => theme.color.border.primary;
-var _exp6 = () => ({ theme, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : theme.color.background.tertiary;
-var _exp7 = () => ({ theme, $isDisabled, $variant }) => {
-	return match($variant).with("PRIMARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).with("SECONDARY", () => $isDisabled ? theme.color.border.primary : theme.color.border.primary).exhaustive();
-};
+var _exp6 = () => ({ theme, $variant, $isSelected }) => $isSelected ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
 var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "RadioWrapper",
 	class: "r1mwwvky",
@@ -49,25 +33,26 @@ var RadioWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	vars: {
 		"r1mwwvky-0": [_exp4()],
 		"r1mwwvky-1": [_exp5()],
-		"r1mwwvky-2": [_exp6()],
-		"r1mwwvky-3": [_exp7()]
+		"r1mwwvky-2": [_exp6()]
 	}
 }));
-var _exp9 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").exhaustive();
-};
-var _exp0 = () => ({ theme }) => theme.color.background.primary;
-var _exp1 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
-var _exp10 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
+/** The dot is half the circle it sits in — see `getInputControlSize`. */
+function getRadioDotSize(size) {
+	return match(size).returnType().with(InputSize.SMALL, () => "6px").with(InputSize.MEDIUM, () => "8px").with(InputSize.LARGE, () => "10px").exhaustive();
+}
+var _exp8 = () => ({ $size }) => getRadioDotSize($size);
+var _exp9 = () => ({ theme }) => theme.color.background.primary;
+var _exp0 = () => ({ $isSelected }) => $isSelected ? 1 : 0;
+var _exp1 = () => ({ $isSelected }) => $isSelected ? "scale(1)" : "scale(0)";
 var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
 	name: "RadioDot",
 	class: "r137y8ev",
 	propsAsIs: false,
 	vars: {
-		"r137y8ev-0": [_exp9()],
-		"r137y8ev-1": [_exp0()],
-		"r137y8ev-2": [_exp1()],
-		"r137y8ev-3": [_exp10()]
+		"r137y8ev-0": [_exp8()],
+		"r137y8ev-1": [_exp9()],
+		"r137y8ev-2": [_exp0()],
+		"r137y8ev-3": [_exp1()]
 	}
 }));
 /**
@@ -76,7 +61,7 @@ var RadioDot = withTheme(/*#__PURE__*/ styled("div")({
 * There is no group component — render several and enforce single-selection in
 * your own state.
 */
-var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
+var RadioInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isSelected, label, labelTooltip, isRequired = false, isDisabled = false, onChange }) => {
 	const handleClick = () => {
 		if (!isDisabled) onChange(!isSelected);
 	};
@@ -87,7 +72,6 @@ var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, lab
 			$variant: variant,
 			$size: size,
 			$isSelected: isSelected,
-			$isDisabled: isDisabled,
 			children: /* @__PURE__ */ jsx(RadioDot, {
 				$size: size,
 				$isSelected: isSelected
@@ -118,4 +102,4 @@ var RadioInput = ({ variant = "PRIMARY", size = "MEDIUM", isSelected, label, lab
 	});
 };
 //#endregion
-export { RadioInputSize, RadioInputVariant, RadioInput as default };
+export { RadioInput as default };

package/dist/inputs/SelectInput.d.ts

@@ -1,13 +1,6 @@
 import { IconVariant } from "../icons/Icon";
-import { TextSize, TextVariant } from "../text/Text";
-import { InputSize } from "./Input";
-/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
-export declare enum SelectInputVariant {
-    BASE = "BASE",
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
+import { TextVariant } from "../text/Text";
+import { InputSize, InputVariant } from "./Input";
 /** One choice in a select. */
 export interface SelectInputOption {
     /** Stable identity — selection is matched on this, not on `value`. */
@@ -30,8 +23,8 @@ export interface PinnedOption {
 }
 export interface SelectInputProps {
     label?: string;
-    /** @default SelectInputVariant.PRIMARY */
-    variant?: SelectInputVariant;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Every choice. Order is preserved. */
@@ -63,9 +56,7 @@ export interface SelectInputProps {
     /** Debounce before `onSearch` fires, in ms. @default 300 */
     debounceMs?: number;
 }
-export declare const SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<SelectInputVariant, IconVariant>;
-export declare const SELECT_INPUT_SIZE_TO_ICON_SIZE: Record<InputSize, number>;
-export declare const SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP: Record<InputSize, TextSize>;
+export declare const INPUT_VARIANT_TO_ICON_VARIANT_MAP: Record<InputVariant, IconVariant>;
 /**
  * Single-choice dropdown with keyboard navigation and optional search.
  *

package/dist/inputs/SelectInput.js

@@ -5,43 +5,37 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import FlexItem from "../containers/FlexItem.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.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";
 /* empty css                      */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowCounterClockwiseIcon, CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 //#region src/inputs/SelectInput.tsx
-/** Surface treatment of the closed trigger. Shared with `MultiSelectInput`. */
-var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
-	SelectInputVariant["BASE"] = "BASE";
-	SelectInputVariant["PRIMARY"] = "PRIMARY";
-	SelectInputVariant["SECONDARY"] = "SECONDARY";
-	SelectInputVariant["TERTIARY"] = "TERTIARY";
-	return SelectInputVariant;
-}({});
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px").with(InputSize.MEDIUM, () => "0 8px").with(InputSize.LARGE, () => "0 10px").exhaustive();
-};
-var _exp2 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
+var INPUT_VARIANT_TO_DROPDOWN_VARIANT = {
+	[InputVariant.TRANSPARENT]: DropdownVariant.TRANSPARENT,
+	[InputVariant.BASE]: DropdownVariant.PRIMARY,
+	[InputVariant.PRIMARY]: DropdownVariant.PRIMARY,
+	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
+	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY
 };
+var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
+var _exp2 = () => ({ $size }) => getInputHeight($size);
 var _exp3 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
 var _exp4 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp5 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp6 = () => ({ theme }) => theme.color.background.primary;
-var _exp7 = () => ({ theme, $isActive, $isError }) => {
+var _exp6 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
+var _exp7 = () => ({ theme, $variant, $isActive, $isError }) => {
 	if ($isActive) return theme.color.border.selected;
 	if ($isError) return theme.color.border.error;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
-var _exp8 = () => ({ theme, $isActive }) => $isActive ? theme.color.border.selected : theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive }) => $isActive ? theme.color.border.selected : getInputBorderColor(theme, $variant);
 var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledSelectInput",
 	class: "s1ecxi56",
@@ -57,16 +51,10 @@ var StyledSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 		"s1ecxi56-7": [_exp8()]
 	}
 }));
-var _exp9 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
-};
+var _exp9 = () => ({ $size }) => getInputHeight($size);
 var _exp0 = () => ({ theme }) => theme.color.text.primary;
-var _exp1 = () => ({ theme, $size }) => {
-	return match($size).with(InputSize.SMALL, () => theme.font.sans.size.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.size.body_md).with(InputSize.LARGE, () => theme.font.sans.size.body_lg).exhaustive();
-};
-var _exp10 = () => ({ theme, $size }) => {
-	return match($size).with(InputSize.SMALL, () => theme.font.sans.height.body_sm).with(InputSize.MEDIUM, () => theme.font.sans.height.body_md).with(InputSize.LARGE, () => theme.font.sans.height.body_lg).exhaustive();
-};
+var _exp1 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
+var _exp10 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
 var _exp11 = () => ({ theme }) => theme.font.sans.weight.medium;
 var _exp12 = () => ({ theme }) => theme.font.sans.family;
 var _exp13 = () => ({ theme }) => theme.color.text.tertiary;
@@ -106,10 +94,10 @@ var SelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
 	vars: { "sk260f0-0": [_exp16()] }
 });
 var _exp17 = () => ({ theme, $isSelected, $isFocused }) => {
-	if ($isSelected || $isFocused) return theme.color.background.tertiary;
+	if ($isSelected || $isFocused) return theme.color.background.secondary;
 	return "transparent";
 };
-var _exp19 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp19 = () => ({ theme }) => theme.color.background.secondary;
 var SelectInputOption = withTheme(/*#__PURE__*/ styled("button")({
 	name: "SelectInputOption",
 	class: "so10ras",
@@ -138,21 +126,12 @@ var OptionIconSlot = /*#__PURE__*/ styled("span")({
 	class: "o9236d8",
 	propsAsIs: false
 });
-var SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
-	["BASE"]: IconVariant.SECONDARY,
-	["PRIMARY"]: IconVariant.SECONDARY,
-	["SECONDARY"]: IconVariant.SECONDARY,
-	["TERTIARY"]: IconVariant.PRIMARY
-};
-var SELECT_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 12,
-	[InputSize.MEDIUM]: 14,
-	[InputSize.LARGE]: 16
-};
-var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
+var INPUT_VARIANT_TO_ICON_VARIANT_MAP = {
+	[InputVariant.TRANSPARENT]: IconVariant.SECONDARY,
+	[InputVariant.BASE]: IconVariant.SECONDARY,
+	[InputVariant.PRIMARY]: IconVariant.SECONDARY,
+	[InputVariant.SECONDARY]: IconVariant.SECONDARY,
+	[InputVariant.TERTIARY]: IconVariant.PRIMARY
 };
 /**
 * Single-choice dropdown with keyboard navigation and optional search.
@@ -161,7 +140,7 @@ var SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
 * option back. Passing `onSearch` turns the trigger into a search box — you own
 * the filtering, so it works equally well against a local list or a server.
 */
-var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
+var SelectInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select an option...", onChange, width, fillWidth, dropdownWidth, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, onOpenChange, onReset, pinnedOptions = [], error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -321,7 +300,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 				},
 				onMouseEnter: () => setFocusedOptionIndex(index),
 				children: [/* @__PURE__ */ jsx(Text, {
-					size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+					size: getInputTextSize(size),
 					cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 					isEllipsis: true,
 					children: pinnedOption.label
@@ -354,7 +333,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 								shrink: 1,
 								minWidth: 0,
 								children: /* @__PURE__ */ jsx(Text, {
-									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									size: getInputTextSize(size),
 									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 									isEllipsis: true,
 									variant: option.variant ?? TextVariant.PRIMARY,
@@ -372,7 +351,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					style: { padding: "8px" },
 					children: /* @__PURE__ */ jsx(Text, {
 						variant: TextVariant.TERTIARY,
-						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						size: getInputTextSize(size),
 						children: "No options found"
 					})
 				})
@@ -390,7 +369,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 						size: 12
 					}), /* @__PURE__ */ jsx(Text, {
 						variant: TextVariant.SECONDARY,
-						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						size: getInputTextSize(size),
 						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 						children: "Reset"
 					})]
@@ -418,7 +397,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 				isRequired
 			}),
 			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
+				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
 				body: dropdownBody,
 				isOpen: visible,
 				onClose: handleClose,
@@ -441,7 +420,6 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 					children: [
 						/* @__PURE__ */ jsx(StyledSearchInput, {
 							ref: inputRef,
-							$variant: variant,
 							$size: size,
 							$isActive: visible ?? false,
 							$isDisabled: effectiveIsDisabled,
@@ -464,7 +442,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) })
@@ -498,7 +476,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 								minWidth: 0,
 								children: /* @__PURE__ */ jsx(Text, {
 									variant: textVariant,
-									size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+									size: getInputTextSize(size),
 									cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 									isEllipsis: true,
 									children: selectedOption ? selectedOption.label : placeholder
@@ -511,7 +489,7 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) })
@@ -527,4 +505,4 @@ var SelectInput = ({ label, variant = "PRIMARY", size = InputSize.MEDIUM, option
 	});
 };
 //#endregion
-export { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant, SelectInput as default };
+export { INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInput as default };

package/dist/inputs/SliderInput.d.ts

@@ -1,4 +1,12 @@
+import { InputSize, InputVariant } from "./Input";
 export interface SliderInputProps {
+    /**
+     * Track color. The filled portion and the handle are state colors and stay
+     * `icon.primary`. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Rail and handle size — 2/6, 3/8 or 4/10px. @default InputSize.MEDIUM */
+    size?: InputSize;
     label?: string;
     /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
@@ -27,5 +35,5 @@ export interface SliderInputProps {
  * `onChange` fires on every pointer move. When each change is expensive, drive
  * a preview from it and commit on `onInteractionEnd`.
  */
-declare const SliderInput: ({ label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
+declare const SliderInput: ({ variant, size, label, labelTooltip, value, onChange, onInteractionStart, onInteractionEnd, min, max, step, isDisabled, width, fillWidth, }: SliderInputProps) => import("react").JSX.Element;
 export default SliderInput;