@galaxy-io/dls 1.4.14 → 1.5.0

package/dist/inputs/Input.d.ts

@@ -1,5 +1,7 @@
 import { type Ref } from "react";
 import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import type { Theme } from "../theme/types";
+import { TextSize } from "../text/Text";
 export interface InputLabelProps {
     label: string;
     /** Adds an info icon beside the label with this content on hover. */
@@ -18,8 +20,79 @@ export declare enum InputSize {
     MEDIUM = "MEDIUM",
     LARGE = "LARGE"
 }
+/**
+ * Field height for an `InputSize`. The single source of truth — every input in
+ * the family routes through this. Call it from inside a Linaria interpolation:
+ *
+ * ```
+ * height: ${({ $size }) => getInputHeight($size)};
+ * ```
+ */
+export declare function getInputHeight(size: InputSize): string;
+/** `getInputHeight` unwrapped, for callers that need to do arithmetic on it. */
+export declare function getInputHeightValue(size: InputSize): number;
+/**
+ * Horizontal inset for an `InputSize` — 6 / 8 / 12px. Returned as a number so
+ * `TextAreaInput` can fold it into its computed `min-height`; most callers want
+ * `getInputPadding` instead.
+ */
+export declare function getInputPaddingValue(size: InputSize): number;
+/** `getInputPaddingValue` as a CSS length. */
+export declare function getInputPadding(size: InputSize): string;
+/** Type step for an `InputSize` — `body_sm` / `body_md` / `body_lg`. */
+export declare function getInputFontSize(theme: Theme, size: InputSize): string;
+/** The line height paired with `getInputFontSize`. */
+export declare function getInputLineHeight(theme: Theme, size: InputSize): string;
+/** Icon px for an `InputSize` — 12 / 14 / 16, for icons sitting inside a field. */
+export declare function getInputIconSize(size: InputSize): number;
+/**
+ * `getInputFontSize` for copy that renders through `Text` rather than through a
+ * raw `<input>` — the trigger labels in `SelectInput`, `DateInput`, `ColorInput`.
+ */
+export declare function getInputTextSize(size: InputSize): TextSize;
+/**
+ * Hit-target box for the boolean controls — 12 / 16 / 20px. Shared by the
+ * `CheckboxInput` square and the `RadioInput` circle, which are sized as targets
+ * rather than off the type scale, so they do not follow `getInputHeight`.
+ */
+export declare function getInputControlSize(size: InputSize): string;
+/**
+ * Surface color for any input. Mirrors `DropdownVariant` so a field and the
+ * panel it sits in can be tuned to the same step of the neutral stack.
+ *
+ * Paints the *resting* surface only — state colors (checked, selected, filled)
+ * are fixed tokens and are not affected by the variant.
+ *
+ * `TRANSPARENT` drops both the fill and the border. `CheckboxInput` and
+ * `RadioInput` keep their hairline under it, or they would be invisible.
+ */
+export declare enum InputVariant {
+    TRANSPARENT = "TRANSPARENT",
+    BASE = "BASE",
+    PRIMARY = "PRIMARY",
+    SECONDARY = "SECONDARY",
+    TERTIARY = "TERTIARY"
+}
+/**
+ * Surface fill for an `InputVariant`. The single source of truth — every input
+ * routes through this. Call it from inside a Linaria interpolation:
+ *
+ * ```
+ * background-color: ${({ theme, $variant }) => getInputSurfaceColor(theme, $variant)};
+ * ```
+ */
+export declare function getInputSurfaceColor(theme: Theme, variant?: InputVariant): string;
+/**
+ * Resting border for an `InputVariant`. Callers short-circuit their own error,
+ * focus and active colors before falling back to this.
+ *
+ * Returns `"transparent"` rather than `"none"` so the box model stays identical
+ * across variants.
+ */
+export declare function getInputBorderColor(theme: Theme, variant?: InputVariant): string;
 export declare const StyledInput: import("react").ComponentType<Pick<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -28,13 +101,14 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
-}, "$width" | "$fillWidth" | "$size" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
+}, "$width" | "$fillWidth" | "$size" | "$variant" | "$isMonospace" | "as" | "$isError" | "$hasLeadingIcon" | "$hasTrailingAction" | "$isDisabled" | keyof import("react").ClassAttributes<HTMLInputElement> | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+    theme?: import("@callstack/react-theme-provider").$DeepPartial<Theme> | undefined;
 }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -43,13 +117,14 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
 }> & {
     __wyw_meta: unknown;
 } & import("react").FunctionComponent<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
     $size: InputSize;
+    $variant?: InputVariant;
     $width?: number | string;
     $fillWidth?: boolean;
     $isError?: boolean;
@@ -58,7 +133,7 @@ export declare const StyledInput: import("react").ComponentType<Pick<import("rea
     $isMonospace?: boolean;
     $isDisabled?: boolean;
 } & {
-    theme: import("../theme").Theme;
+    theme: Theme;
 } & {
     as?: React.ElementType;
 }>, {}>;
@@ -74,6 +149,8 @@ export interface InputProps<T> {
     parse: (value: T) => T;
     /** Called with the parsed value on every keystroke. */
     onChange: (value: T) => void;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** The underlying `<input type>`. Wrappers set it. */

package/dist/inputs/Input.js

@@ -49,32 +49,118 @@ var InputSize = /* @__PURE__ */ function(InputSize) {
 	InputSize["LARGE"] = "LARGE";
 	return InputSize;
 }({});
-var _exp = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "24px").with("MEDIUM", () => "28px").with("LARGE", () => "32px").exhaustive();
-};
+/**
+* Field height for an `InputSize`. The single source of truth — every input in
+* the family routes through this. Call it from inside a Linaria interpolation:
+*
+* ```
+* height: ${({ $size }) => getInputHeight($size)};
+* ```
+*/
+function getInputHeight(size) {
+	return `${getInputHeightValue(size)}px`;
+}
+/** `getInputHeight` unwrapped, for callers that need to do arithmetic on it. */
+function getInputHeightValue(size) {
+	return match(size).returnType().with("SMALL", () => 24).with("MEDIUM", () => 28).with("LARGE", () => 32).exhaustive();
+}
+/**
+* Horizontal inset for an `InputSize` — 6 / 8 / 12px. Returned as a number so
+* `TextAreaInput` can fold it into its computed `min-height`; most callers want
+* `getInputPadding` instead.
+*/
+function getInputPaddingValue(size) {
+	return match(size).returnType().with("SMALL", () => 6).with("MEDIUM", () => 8).with("LARGE", () => 12).exhaustive();
+}
+/** `getInputPaddingValue` as a CSS length. */
+function getInputPadding(size) {
+	return `${getInputPaddingValue(size)}px`;
+}
+/** Type step for an `InputSize` — `body_sm` / `body_md` / `body_lg`. */
+function getInputFontSize(theme, size) {
+	return match(size).returnType().with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
+}
+/** The line height paired with `getInputFontSize`. */
+function getInputLineHeight(theme, size) {
+	return match(size).returnType().with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
+}
+/** Icon px for an `InputSize` — 12 / 14 / 16, for icons sitting inside a field. */
+function getInputIconSize(size) {
+	return match(size).returnType().with("SMALL", () => 12).with("MEDIUM", () => 14).with("LARGE", () => 16).exhaustive();
+}
+/**
+* `getInputFontSize` for copy that renders through `Text` rather than through a
+* raw `<input>` — the trigger labels in `SelectInput`, `DateInput`, `ColorInput`.
+*/
+function getInputTextSize(size) {
+	return match(size).returnType().with("SMALL", () => TextSize.BODY_SM).with("MEDIUM", () => TextSize.BODY_MD).with("LARGE", () => TextSize.BODY_LG).exhaustive();
+}
+/**
+* Hit-target box for the boolean controls — 12 / 16 / 20px. Shared by the
+* `CheckboxInput` square and the `RadioInput` circle, which are sized as targets
+* rather than off the type scale, so they do not follow `getInputHeight`.
+*/
+function getInputControlSize(size) {
+	return match(size).returnType().with("SMALL", () => "12px").with("MEDIUM", () => "16px").with("LARGE", () => "20px").exhaustive();
+}
+/**
+* Surface color for any input. Mirrors `DropdownVariant` so a field and the
+* panel it sits in can be tuned to the same step of the neutral stack.
+*
+* Paints the *resting* surface only — state colors (checked, selected, filled)
+* are fixed tokens and are not affected by the variant.
+*
+* `TRANSPARENT` drops both the fill and the border. `CheckboxInput` and
+* `RadioInput` keep their hairline under it, or they would be invisible.
+*/
+var InputVariant = /* @__PURE__ */ function(InputVariant) {
+	InputVariant["TRANSPARENT"] = "TRANSPARENT";
+	InputVariant["BASE"] = "BASE";
+	InputVariant["PRIMARY"] = "PRIMARY";
+	InputVariant["SECONDARY"] = "SECONDARY";
+	InputVariant["TERTIARY"] = "TERTIARY";
+	return InputVariant;
+}({});
+/**
+* Surface fill for an `InputVariant`. The single source of truth — every input
+* routes through this. Call it from inside a Linaria interpolation:
+*
+* ```
+* background-color: ${({ theme, $variant }) => getInputSurfaceColor(theme, $variant)};
+* ```
+*/
+function getInputSurfaceColor(theme, variant) {
+	return match(variant).returnType().with("TRANSPARENT", () => "transparent").with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).with(void 0, () => theme.color.background.primary).exhaustive();
+}
+/**
+* Resting border for an `InputVariant`. Callers short-circuit their own error,
+* focus and active colors before falling back to this.
+*
+* Returns `"transparent"` rather than `"none"` so the box model stays identical
+* across variants.
+*/
+function getInputBorderColor(theme, variant) {
+	return variant === "TRANSPARENT" ? "transparent" : theme.color.border.primary;
+}
+/** Space between a trailing action button and the text it must not overlap. */
+var _exp = () => ({ $size }) => getInputHeight($size);
 var _exp2 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var _exp3 = () => ({ theme }) => theme.color.background.primary;
-var _exp4 = () => ({ theme, $isError }) => {
+var _exp3 = () => ({ theme, $variant }) => getInputSurfaceColor(theme, $variant);
+var _exp4 = () => ({ theme, $variant, $isError }) => {
 	if ($isError) return theme.color.border.error;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var _exp5 = () => ({ theme }) => theme.color.text.primary;
-var _exp6 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.size.body_sm).with("MEDIUM", () => theme.font.sans.size.body_md).with("LARGE", () => theme.font.sans.size.body_lg).exhaustive();
-};
-var _exp7 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.height.body_sm).with("MEDIUM", () => theme.font.sans.height.body_md).with("LARGE", () => theme.font.sans.height.body_lg).exhaustive();
-};
-var _exp8 = () => ({ theme, $size }) => {
-	return match($size).with("SMALL", () => theme.font.sans.weight.regular).with("MEDIUM", () => theme.font.sans.weight.regular).with("LARGE", () => theme.font.sans.weight.regular).exhaustive();
-};
+var _exp6 = () => ({ theme, $size }) => getInputFontSize(theme, $size);
+var _exp7 = () => ({ theme, $size }) => getInputLineHeight(theme, $size);
+var _exp8 = () => ({ theme }) => theme.font.sans.weight.regular;
 var _exp9 = () => ({ theme, $isMonospace }) => $isMonospace ? theme.font.mono.family : theme.font.sans.family;
 var _exp0 = () => ({ $size, $hasLeadingIcon, $hasTrailingAction }) => {
-	const leftPadding = match($size).with("SMALL", () => $hasLeadingIcon ? "24px" : "6px").with("MEDIUM", () => $hasLeadingIcon ? "28px" : "8px").with("LARGE", () => $hasLeadingIcon ? "32px" : "12px").exhaustive();
-	return `0 ${match($size).with("SMALL", () => $hasTrailingAction ? "28px" : "6px").with("MEDIUM", () => $hasTrailingAction ? "32px" : "8px").with("LARGE", () => $hasTrailingAction ? "38px" : "12px").exhaustive()} 0 ${leftPadding}`;
+	const leftPadding = $hasLeadingIcon ? getInputHeight($size) : getInputPadding($size);
+	return `0 ${$hasTrailingAction ? `${getInputPaddingValue($size) + getInputIconSize($size) + 10}px` : getInputPadding($size)} 0 ${leftPadding}`;
 };
 var _exp1 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-var _exp10 = () => ({ theme }) => theme.color.border.primary;
+var _exp10 = () => ({ theme, $variant }) => getInputBorderColor(theme, $variant);
 var _exp11 = () => ({ theme }) => theme.color.border.selected;
 var _exp12 = () => ({ theme }) => theme.color.text.tertiary;
 var StyledInput = withTheme(/*#__PURE__*/ styled("input")({
@@ -105,18 +191,14 @@ var InputContainer = /*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "ixmrsxd-0": [_exp13()] }
 });
-var _exp14 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "12px").exhaustive();
-};
+var _exp14 = () => ({ $size }) => getInputPadding($size);
 var LeadingIconWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "LeadingIconWrapper",
 	class: "l8jap54",
 	propsAsIs: false,
 	vars: { "l8jap54-0": [_exp14()] }
 }));
-var _exp15 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "6px").with("MEDIUM", () => "8px").with("LARGE", () => "12px").exhaustive();
-};
+var _exp15 = () => ({ $size }) => getInputPadding($size);
 var _exp16 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var TrailingActionButton = /*#__PURE__*/ styled("button")({
 	name: "TrailingActionButton",
@@ -127,11 +209,6 @@ var TrailingActionButton = /*#__PURE__*/ styled("button")({
 		"t16cwjje-1": [_exp16()]
 	}
 });
-var INPUT_SIZE_TO_ICON_SIZE_MAP = {
-	["SMALL"]: 12,
-	["MEDIUM"]: 14,
-	["LARGE"]: 14
-};
 /**
 * The generic text field every typed input wraps. Renders the label, the field,
 * the leading/trailing affordances and the error line.
@@ -140,7 +217,7 @@ var INPUT_SIZE_TO_ICON_SIZE_MAP = {
 * pin `type` and `parse` for you. Use this directly only for a value type none of
 * them cover.
 */
-var Input = forwardRef(({ parse, onChange, 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, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
 	const handleChange = (e) => {
 		onChange(parse(e.target.value));
 	};
@@ -165,11 +242,12 @@ var Input = forwardRef(({ parse, onChange, size = "MEDIUM", type, value, label,
 						children: /* @__PURE__ */ jsx(Icon, {
 							component: leading.icon,
 							variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
-							size: INPUT_SIZE_TO_ICON_SIZE_MAP[size]
+							size: getInputIconSize(size)
 						})
 					}),
 					/* @__PURE__ */ jsx(StyledInput, {
 						$size: size,
+						$variant: variant,
 						$width: width,
 						$fillWidth: fillWidth || hasLeading || hasTrailing,
 						$isError: !!error,
@@ -202,7 +280,7 @@ var Input = forwardRef(({ parse, onChange, size = "MEDIUM", type, value, label,
 						children: /* @__PURE__ */ jsx(Icon, {
 							component: trailing.icon,
 							variant: IconVariant.SECONDARY,
-							size: INPUT_SIZE_TO_ICON_SIZE_MAP[size]
+							size: getInputIconSize(size)
 						})
 					})
 				]
@@ -218,4 +296,4 @@ var Input = forwardRef(({ parse, onChange, size = "MEDIUM", type, value, label,
 var InputWithDisplayName = Input;
 InputWithDisplayName.displayName = "Input";
 //#endregion
-export { InputLabel, InputSize, StyledInput, Input as default };
+export { InputLabel, InputSize, InputVariant, StyledInput, Input as default, getInputBorderColor, getInputControlSize, getInputFontSize, getInputHeight, getInputHeightValue, getInputIconSize, getInputLineHeight, getInputPadding, getInputPaddingValue, getInputSurfaceColor, getInputTextSize };

package/dist/inputs/MultiSelectInput.d.ts

@@ -1,8 +1,8 @@
 import { type ReactNode } from "react";
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { DropdownPosition } from "../dropdown/Dropdown";
-import { InputSize } from "./Input";
-import { SelectInputVariant, type SelectInputOption } from "./SelectInput";
+import { InputSize, InputVariant } from "./Input";
+import { type SelectInputOption } from "./SelectInput";
 export interface PinnedOptions {
     id: string;
     label: string;
@@ -13,8 +13,8 @@ export interface MultiSelectInputProps {
     label?: string;
     /** Phosphor icon *component* on the trigger. */
     icon?: PhosphorIcon;
-    /** @default SelectInputVariant.PRIMARY */
-    variant?: SelectInputVariant;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Every choice. Order is preserved. */

package/dist/inputs/MultiSelectInput.js

@@ -5,36 +5,38 @@ 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 CheckboxInput, { CheckboxInputVariant } from "./CheckboxInput.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputFontSize, getInputHeight, getInputIconSize, getInputLineHeight, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
+import CheckboxInput from "./CheckboxInput.js";
 import Dropdown, { DropdownPosition, DropdownVariant } from "../dropdown/Dropdown.js";
-import { InputLabel, InputSize } from "./Input.js";
 import HorizontalDivider from "../dividers/HorizontalDivider.js";
 import { useElementWidth } from "../hooks/useElementWidth.js";
 import { useControlledOpenState, useDebouncedValue } from "./hooks.js";
-import { SELECT_INPUT_SIZE_TO_ICON_SIZE, SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP, SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP, SelectInputVariant } from "./SelectInput.js";
+import { INPUT_VARIANT_TO_ICON_VARIANT_MAP } from "./SelectInput.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 } from "@phosphor-icons/react";
 //#region src/inputs/MultiSelectInput.tsx
-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.PRIMARY]: DropdownVariant.PRIMARY,
+	[InputVariant.SECONDARY]: DropdownVariant.SECONDARY,
+	[InputVariant.TERTIARY]: DropdownVariant.TERTIARY,
+	[InputVariant.BASE]: DropdownVariant.PRIMARY
 };
+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 StyledMultiSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledMultiSelectInput",
 	class: "sf4kgcu",
@@ -50,16 +52,10 @@ var StyledMultiSelectInput = withTheme(/*#__PURE__*/ styled("div")({
 		"sf4kgcu-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;
@@ -98,8 +94,8 @@ var MultiSelectInputOptionsContainer = /*#__PURE__*/ styled("div")({
 	propsAsIs: false,
 	vars: { "m1ybiav6-0": [_exp16()] }
 });
-var _exp17 = () => ({ theme, $isFocused }) => $isFocused ? theme.color.background.tertiary : "transparent";
-var _exp18 = () => ({ theme }) => theme.color.background.tertiary;
+var _exp17 = () => ({ theme, $isFocused }) => $isFocused ? theme.color.background.secondary : "transparent";
+var _exp18 = () => ({ theme }) => theme.color.background.secondary;
 var MultiSelectInputOption = withTheme(/*#__PURE__*/ styled("div")({
 	name: "MultiSelectInputOption",
 	class: "m78p4ib",
@@ -125,19 +121,13 @@ var OptionIconSlot = /*#__PURE__*/ styled("span")({
 	class: "o16no7ck",
 	propsAsIs: false
 });
-var SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT = {
-	[SelectInputVariant.BASE]: CheckboxInputVariant.SECONDARY,
-	[SelectInputVariant.PRIMARY]: CheckboxInputVariant.SECONDARY,
-	[SelectInputVariant.SECONDARY]: CheckboxInputVariant.SECONDARY,
-	[SelectInputVariant.TERTIARY]: CheckboxInputVariant.PRIMARY
-};
 /**
 * 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.
 *
 * Controlled: `onChange` hands back the complete next selection, not a delta.
 */
-var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
+var MultiSelectInput = ({ label, icon, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, options, value, placeholder = "Select options...", onChange, width, fillWidth, dropdownWidth, dropdownPlacement = DropdownPosition.BOTTOM_START, isDisabled = false, isRequired = false, isOpen: controlledIsOpen, isIconTrailing, onOpenChange, onReset, pinnedOptions = [], maxDisplayItems = 3, renderSelectedText, renderSelectedContent, error, onSearch, debounceMs = 300 }) => {
 	const isSearchable = !!onSearch;
 	const [isHovered, setIsHovered] = useState(false);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -174,7 +164,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 	}
 	const renderIcon = useCallback(() => {
 		if (!icon) return null;
-		let iconVariant = SELECT_INPUT_VARIANT_TO_ICON_VARIANT_MAP[variant];
+		let iconVariant = INPUT_VARIANT_TO_ICON_VARIANT_MAP[variant];
 		if (isDisabled) iconVariant = IconVariant.TERTIARY;
 		return /* @__PURE__ */ jsx(FlexItem, {
 			shrink: 0,
@@ -182,7 +172,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 			children: /* @__PURE__ */ jsx(Icon, {
 				component: icon,
 				variant: iconVariant,
-				size: SELECT_INPUT_SIZE_TO_ICON_SIZE[size]
+				size: getInputIconSize(size)
 			})
 		});
 	}, [
@@ -345,7 +335,8 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 					gap: 8,
 					fillWidth: true,
 					children: [/* @__PURE__ */ jsx(CheckboxInput, {
-						variant: SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT[variant],
+						variant,
+						size,
 						isChecked: isPinnedOptionSelected(pinnedOption),
 						onChange: noop
 					}), /* @__PURE__ */ jsx(FlexItem, {
@@ -354,7 +345,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 						minWidth: 0,
 						children: /* @__PURE__ */ jsx(Text, {
 							variant: TextVariant.PRIMARY,
-							size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+							size: getInputTextSize(size),
 							cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 							isEllipsis: true,
 							children: pinnedOption.label
@@ -386,7 +377,8 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							fillWidth: true,
 							children: [
 								/* @__PURE__ */ jsx(CheckboxInput, {
-									variant: SELECT_INPUT_VARIANT_TO_CHECKBOX_INPUT_VARIANT[variant],
+									variant,
+									size,
 									isChecked: isOptionSelected(option.id),
 									onChange: noop
 								}),
@@ -397,7 +389,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 									minWidth: 0,
 									children: /* @__PURE__ */ jsx(Text, {
 										variant: option.variant ?? TextVariant.PRIMARY,
-										size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+										size: getInputTextSize(size),
 										cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 										isEllipsis: true,
 										children: option.label
@@ -410,7 +402,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 					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"
 					})
 				})
@@ -427,10 +419,10 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 					children: [/* @__PURE__ */ jsx(Icon, {
 						component: ArrowCounterClockwiseIcon,
 						variant: IconVariant.TERTIARY,
-						size: 12
+						size: getInputIconSize(size)
 					}), /* @__PURE__ */ jsx(Text, {
 						variant: TextVariant.PRIMARY,
-						size: SELECT_INPUT_SIZE_TO_TEXT_SIZE_MAP[size],
+						size: getInputTextSize(size),
 						cursor: !effectiveIsDisabled ? "pointer" : "not-allowed",
 						children: "Reset"
 					})]
@@ -467,7 +459,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 				isRequired
 			}),
 			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
+				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
 				body: dropdownBody,
 				isOpen: visible,
 				onClose: handleClose,
@@ -492,7 +484,6 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 						!isIconTrailing && renderIcon(),
 						/* @__PURE__ */ jsx(StyledSearchInput, {
 							ref: inputRef,
-							$variant: variant,
 							$size: size,
 							$isActive: visible ?? false,
 							$isDisabled: effectiveIsDisabled,
@@ -514,7 +505,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) }),
@@ -542,7 +533,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 						!isIconTrailing && renderIcon(),
 						renderSelectedContent ? renderSelectedContent(value, placeholder) : /* @__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: displayValue
@@ -552,7 +543,7 @@ var MultiSelectInput = ({ label, icon, variant = SelectInputVariant.PRIMARY, siz
 							deg: -180,
 							children: /* @__PURE__ */ jsx(Icon, {
 								component: CaretDownIcon,
-								size: 10,
+								size: getInputIconSize(size),
 								variant: !effectiveIsDisabled && (isHovered || visible) ? IconVariant.SECONDARY : IconVariant.TERTIARY
 							})
 						}) }),

package/dist/inputs/MultiTextInput.d.ts

@@ -1,24 +1,13 @@
-/** Field height. */
-export declare enum MultiTextInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
-}
-/** Color of the chips created from entered values. */
-export declare enum MultiTextInputVariant {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY",
-    TERTIARY = "TERTIARY"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface MultiTextInputProps {
     /** Controlled list of entered values, one chip each. */
     value: string[];
     /** Called with the full next list, not a delta. */
     onChange: (value: string[]) => void;
-    /** @default MultiTextInputVariant.PRIMARY */
-    variant?: MultiTextInputVariant;
-    /** @default MultiTextInputSize.MEDIUM */
-    size?: MultiTextInputSize;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
+    /** @default InputSize.MEDIUM */
+    size?: InputSize;
     placeholder?: string;
     label?: string;
     /** Message under the field; also switches the border to the error color. */