@galaxy-io/dls 1.4.15 → 1.5.1

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

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

package/dist/assets/components/GalaxyFilamentWordmarkDark.js

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

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

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

package/dist/assets/components/GalaxyFilamentWordmarkLight.js

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

package/dist/icons/GalaxyFilamentWordmark.d.ts

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

package/dist/icons/GalaxyFilamentWordmark.js

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

package/dist/inputs/CheckboxInput.d.ts

@@ -1,18 +1,15 @@
-/** Fill color when checked. */
-export declare enum CheckboxInputVariant {
-    PRIMARY = "PRIMARY",
-    SECONDARY = "SECONDARY"
-}
-/** Box size. Two steps only — this is a hit target, not a type scale. */
-export declare enum CheckboxInputSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM"
-}
+import { InputSize, InputVariant } from "./Input";
 export interface CheckboxInputProps {
-    /** @default CheckboxInputVariant.PRIMARY */
-    variant?: CheckboxInputVariant;
-    /** @default CheckboxInputSize.MEDIUM */
-    size?: CheckboxInputSize;
+    /**
+     * Unchecked fill color. The checked fill is a state color and stays
+     * `background.primaryAlt` so the tick keeps its contrast. Unlike the field
+     * inputs, `TRANSPARENT` keeps the hairline border here — without it the box
+     * would be invisible. @default InputVariant.PRIMARY
+     */
+    variant?: InputVariant;
+    /** Box size — a hit target, so it steps 12 / 16 / 20px, not off the type scale.
+     * @default InputSize.MEDIUM */
+    size?: InputSize;
     /** Controlled state. The checkbox holds none of its own. */
     isChecked: boolean;
     /** Draw a dash instead of a tick — for a partially-selected group. */

package/dist/inputs/CheckboxInput.js

@@ -3,24 +3,12 @@ import Text, { TextVariant } from "../text/Text.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
 import RequiredMarker from "../text/RequiredMarker.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 { CheckIcon, MinusIcon } from "@phosphor-icons/react";
 //#region src/inputs/CheckboxInput.tsx
-/** Fill color when checked. */
-var CheckboxInputVariant = /* @__PURE__ */ function(CheckboxInputVariant) {
-	CheckboxInputVariant["PRIMARY"] = "PRIMARY";
-	CheckboxInputVariant["SECONDARY"] = "SECONDARY";
-	return CheckboxInputVariant;
-}({});
-/** Box size. Two steps only — this is a hit target, not a type scale. */
-var CheckboxInputSize = /* @__PURE__ */ function(CheckboxInputSize) {
-	CheckboxInputSize["SMALL"] = "SMALL";
-	CheckboxInputSize["MEDIUM"] = "MEDIUM";
-	return CheckboxInputSize;
-}({});
 var _exp = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
 var _exp2 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
 var _exp3 = () => ({ theme }) => theme.color.border.selected;
@@ -34,14 +22,9 @@ var CheckboxContainer = withTheme(/*#__PURE__*/ styled("div")({
 		"cythikj-2": [_exp3()]
 	}
 }));
-var _exp5 = () => ({ $size }) => {
-	return match($size).with("SMALL", () => "12px").with("MEDIUM", () => "16px").exhaustive();
-};
+var _exp5 = () => ({ $size }) => getInputControlSize($size);
 var _exp6 = () => ({ theme }) => theme.color.border.primary;
-var _exp7 = () => ({ theme, $isChecked, $isIndeterminate }) => $isChecked || $isIndeterminate ? theme.color.background.primaryAlt : theme.color.background.tertiary;
-var _exp8 = () => ({ 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 _exp7 = () => ({ theme, $variant, $isChecked, $isIndeterminate }) => $isChecked || $isIndeterminate ? theme.color.background.primaryAlt : getInputSurfaceColor(theme, $variant);
 var CheckboxWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	name: "CheckboxWrapper",
 	class: "c1f4v2sg",
@@ -49,13 +32,14 @@ var CheckboxWrapper = withTheme(/*#__PURE__*/ styled("div")({
 	vars: {
 		"c1f4v2sg-0": [_exp5()],
 		"c1f4v2sg-1": [_exp6()],
-		"c1f4v2sg-2": [_exp7()],
-		"c1f4v2sg-3": [_exp8()]
+		"c1f4v2sg-2": [_exp7()]
 	}
 }));
+/** The tick sits inside the box, so it runs a step under `getInputIconSize`. */
 var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
-	["SMALL"]: 10,
-	["MEDIUM"]: 12
+	[InputSize.SMALL]: 10,
+	[InputSize.MEDIUM]: 12,
+	[InputSize.LARGE]: 14
 };
 /**
 * A checkbox with an optional label. Fully controlled — you own `isChecked`.
@@ -63,7 +47,7 @@ var CHECKBOX_INPUT_SIZE_TO_ICON_SIZE_MAP = {
 * `isIndeterminate` is purely visual and does not change what `onChange`
 * reports; the callback still flips against `isChecked`.
 */
-var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
+var CheckboxInput = ({ variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, isChecked, isIndeterminate = false, label, isRequired = false, isDisabled = false, onChange, ariaLabel, stopClickPropagation = false }) => {
 	const handleClick = (event) => {
 		if (stopClickPropagation) event.stopPropagation();
 		if (!isDisabled) onChange(!isChecked, event);
@@ -105,7 +89,6 @@ var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndete
 			$size: size,
 			$isChecked: isChecked,
 			$isIndeterminate: isIndeterminate,
-			$isDisabled: isDisabled,
 			children: renderIcon()
 		}), label && /* @__PURE__ */ jsxs(FlexWrapper, {
 			alignItems: AlignItems.CENTER,
@@ -118,4 +101,4 @@ var CheckboxInput = ({ variant = "PRIMARY", size = "MEDIUM", isChecked, isIndete
 	});
 };
 //#endregion
-export { CheckboxInputSize, CheckboxInputVariant, CheckboxInput as default };
+export { CheckboxInput as default };

package/dist/inputs/ColorInput.d.ts

@@ -1,6 +1,8 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface ColorInputProps {
     label?: string;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Controlled hex value, e.g. `"#1a1a1a"`. */
@@ -31,5 +33,5 @@ export interface ColorInputProps {
  * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
  * drive a live preview from the first and persist from the second.
  */
-declare const ColorInput: ({ label, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
+declare const ColorInput: ({ label, variant, size, value, placeholder, onChange, onPreviewChange, width, fillWidth, isDisabled, isRequired, error, pinnedHex, isOpen: controlledIsOpen, onOpenChange, children, }: ColorInputProps) => import("react").JSX.Element;
 export default ColorInput;

package/dist/inputs/ColorInput.js

@@ -4,37 +4,32 @@ import { hexToHsva, hsvaToHex } from "../utils/colors.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { Hue, Saturation } from "@uiw/react-color";
 //#region src/inputs/ColorInput.tsx
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px 0 8px").with(InputSize.MEDIUM, () => "0 8px 0 10px").with(InputSize.LARGE, () => "0 10px 0 12px").exhaustive();
-};
-var _exp2 = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "24px").with(InputSize.MEDIUM, () => "28px").with(InputSize.LARGE, () => "32px").exhaustive();
-};
+var _exp = () => ({ $size }) => `0 ${getInputPadding($size)}`;
+var _exp2 = () => ({ $size }) => getInputHeight($size);
 var _exp3 = () => ({ $width, $fillWidth }) => $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, $isDisabled }) => {
-	if ($isDisabled) return theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
+	if ($isDisabled) return getInputBorderColor(theme, $variant);
 	if ($isActive) return theme.color.border.selected;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var StyledColorInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledColorInput",
@@ -123,23 +118,13 @@ var safeNormalizeHex = (hex) => {
 		return null;
 	}
 };
-var COLOR_INPUT_SIZE_TO_TEXT_SIZE = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
-};
-var COLOR_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 14,
-	[InputSize.MEDIUM]: 16,
-	[InputSize.LARGE]: 18
-};
 /**
 * A hex color field with a picker popover. Fully controlled.
 *
 * `onPreviewChange` fires throughout the drag while `onChange` fires on commit —
 * drive a live preview from the first and persist from the second.
 */
-var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
+var ColorInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select color...", onChange, onPreviewChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, pinnedHex = [], isOpen: controlledIsOpen, onOpenChange, children }) => {
 	const [localState, setLocalState] = useState({
 		isOpen: false,
 		isHovered: false
@@ -328,6 +313,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					children
 				}) : /* @__PURE__ */ jsxs(StyledColorInput, {
 					$size: size,
+					$variant: variant,
 					$isActive: isOpen,
 					$isDisabled: isDisabled,
 					$isError: !!error,
@@ -347,7 +333,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 							gap: 8,
 							children: [value && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ColorInputPreviewSwatch, { $color: value }), /* @__PURE__ */ jsx(Spacing, { left: 4 })] }), /* @__PURE__ */ jsx(Text, {
 								variant: textVariant,
-								size: COLOR_INPUT_SIZE_TO_TEXT_SIZE[size],
+								size: getInputTextSize(size),
 								isEllipsis: true,
 								cursor: !isDisabled ? "pointer" : "not-allowed",
 								children: displayValue
@@ -356,7 +342,7 @@ var ColorInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
 						/* @__PURE__ */ jsx(Icon, {
 							component: CaretDownIcon,
-							size: COLOR_INPUT_SIZE_TO_ICON_SIZE[size],
+							size: getInputIconSize(size),
 							variant: isOpen || localState.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
 						})
 					]

package/dist/inputs/CopyInput.d.ts

@@ -1,10 +1,12 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface CopyInputProps {
     /** The text shown and copied. Read-only — there is no `onChange`. */
     value: string;
     label?: string;
     /** Adds an info icon beside the label with this content on hover. */
     labelTooltip?: string | React.ReactNode;
+    /** Field surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** A number is px. */
@@ -18,7 +20,7 @@ export interface CopyInputProps {
  * The trailing button confirms the copy itself, so you don't need to.
  */
 declare const CopyInput: {
-    ({ value, label, labelTooltip, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
+    ({ value, label, labelTooltip, variant, size, width, fillWidth, isMonospace, }: CopyInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default CopyInput;

package/dist/inputs/CopyInput.js

@@ -1,6 +1,6 @@
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexWrapper, { AlignItems } from "../containers/FlexWrapper.js";
-import { InputSize } from "./Input.js";
+import { InputSize, InputVariant } from "./Input.js";
 import TextInput from "./TextInput.js";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +11,18 @@ var INPUT_SIZE_TO_BUTTON_SIZE = {
 	[InputSize.MEDIUM]: ButtonSize.MEDIUM,
 	[InputSize.LARGE]: ButtonSize.LARGE
 };
+var INPUT_VARIANT_TO_BUTTON_VARIANT = {
+	[InputVariant.TRANSPARENT]: ButtonVariant.TERTIARY,
+	[InputVariant.BASE]: ButtonVariant.SECONDARY,
+	[InputVariant.PRIMARY]: ButtonVariant.SECONDARY,
+	[InputVariant.SECONDARY]: ButtonVariant.SECONDARY,
+	[InputVariant.TERTIARY]: ButtonVariant.SECONDARY
+};
 /**
 * A read-only field with a copy-to-clipboard button — API keys, IDs, share links.
 * The trailing button confirms the copy itself, so you don't need to.
 */
-var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
+var CopyInput = ({ value, label, labelTooltip, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, width, fillWidth, isMonospace = false }) => {
 	const [copied, setCopied] = useState(false);
 	const inputRef = useRef(null);
 	const handleCopy = useCallback(() => {
@@ -35,13 +42,14 @@ var CopyInput = ({ value, label, labelTooltip, size = InputSize.MEDIUM, width, f
 			labelTooltip,
 			value,
 			onChange: () => {},
+			variant,
 			size,
 			width,
 			fillWidth,
 			isMonospace
 		}), /* @__PURE__ */ jsx(Button, {
 			icon: copied ? CheckIcon : CopyIcon,
-			variant: ButtonVariant.SECONDARY,
+			variant: INPUT_VARIANT_TO_BUTTON_VARIANT[variant],
 			size: INPUT_SIZE_TO_BUTTON_SIZE[size],
 			onClick: handleCopy
 		})]

package/dist/inputs/DateInput.d.ts

@@ -1,6 +1,8 @@
-import { InputSize } from "./Input";
+import { InputSize, InputVariant } from "./Input";
 export interface DateInputProps {
     label?: string;
+    /** Trigger surface color. @default InputVariant.PRIMARY */
+    variant?: InputVariant;
     /** @default InputSize.MEDIUM */
     size?: InputSize;
     /** Controlled value. `null` shows the placeholder. */
@@ -28,5 +30,5 @@ export declare function defaultDateFormat(date: Date): string;
  *
  * Works in `Date` objects throughout; there is no string parsing to get wrong.
  */
-declare const DateInput: ({ label, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
+declare const DateInput: ({ label, variant, size, value, placeholder, onChange, width, fillWidth, isDisabled, isRequired, error, minDate, maxDate, format, }: DateInputProps) => import("react").JSX.Element;
 export default DateInput;

package/dist/inputs/DateInput.js

@@ -3,14 +3,13 @@ import { getCssSizeValue } from "../utils/linaria.js";
 import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
 import FlexWrapper, { AlignItems, FlexDirection, JustifyContent } from "../containers/FlexWrapper.js";
+import Spacing from "../containers/Spacing.js";
+import { InputLabel, InputSize, InputVariant, getInputBorderColor, getInputHeight, getInputIconSize, getInputPadding, getInputSurfaceColor, getInputTextSize } from "./Input.js";
 import Dropdown, { DropdownVariant } from "../dropdown/Dropdown.js";
 import GridWrapper from "../containers/GridWrapper.js";
-import Spacing from "../containers/Spacing.js";
-import { InputLabel, InputSize } from "./Input.js";
-import SelectInput, { SelectInputVariant } from "./SelectInput.js";
+import SelectInput from "./SelectInput.js";
 /* empty css                    */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarBlankIcon, CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
@@ -63,25 +62,28 @@ var DATE_DAY_TO_LABEL = {
 	["FRIDAY"]: "Fri",
 	["SATURDAY"]: "Sat"
 };
-var _exp = () => ({ $size }) => {
-	return match($size).with(InputSize.SMALL, () => "0 6px 0 8px").with(InputSize.MEDIUM, () => "0 8px 0 10px").with(InputSize.LARGE, () => "0 10px 0 12px").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 = () => ({ $width, $fillWidth }) => $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, $isDisabled }) => {
-	if ($isDisabled) return theme.color.border.primary;
+var _exp8 = () => ({ theme, $variant, $isActive, $isDisabled }) => {
+	if ($isDisabled) return getInputBorderColor(theme, $variant);
 	if ($isActive) return theme.color.border.selected;
-	return theme.color.border.primary;
+	return getInputBorderColor(theme, $variant);
 };
 var StyledDateInput = withTheme(/*#__PURE__*/ styled("div")({
 	name: "StyledDateInput",
@@ -131,16 +133,6 @@ var DayCell = withTheme(/*#__PURE__*/ styled("button")({
 		"d60emtx-4": [_exp11()]
 	}
 }));
-var DATE_INPUT_SIZE_TO_TEXT_SIZE = {
-	[InputSize.SMALL]: TextSize.BODY_MD,
-	[InputSize.MEDIUM]: TextSize.BODY_MD,
-	[InputSize.LARGE]: TextSize.BODY_MD
-};
-var DATE_INPUT_SIZE_TO_ICON_SIZE = {
-	[InputSize.SMALL]: 14,
-	[InputSize.MEDIUM]: 16,
-	[InputSize.LARGE]: 18
-};
 var DEFAULT_MAX_DATE = /* @__PURE__ */ new Date();
 function defaultDateFormat(date) {
 	return date.toLocaleDateString("en-US", {
@@ -157,7 +149,7 @@ var getInitialViewDate = (value) => {
 *
 * Works in `Date` objects throughout; there is no string parsing to get wrong.
 */
-var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
+var DateInput = ({ label, variant = InputVariant.PRIMARY, size = InputSize.MEDIUM, value, placeholder = "Select date...", onChange, width, fillWidth = false, isDisabled = false, isRequired = false, error, minDate = new Date(1970, 0, 1), maxDate = DEFAULT_MAX_DATE, format = defaultDateFormat }) => {
 	const [state, setState] = useState({
 		isOpen: false,
 		isHovered: false,
@@ -383,7 +375,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					onClick: (e) => e.stopPropagation(),
 					onMouseDown: (e) => e.stopPropagation(),
 					children: [/* @__PURE__ */ jsx(SelectInput, {
-						variant: SelectInputVariant.SECONDARY,
+						variant,
 						size: InputSize.SMALL,
 						options: monthOptions,
 						value: selectedMonthOption,
@@ -392,7 +384,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						onOpenChange: handleMonthSelectOpenChange,
 						width: 120
 					}), /* @__PURE__ */ jsx(SelectInput, {
-						variant: SelectInputVariant.SECONDARY,
+						variant,
 						size: InputSize.SMALL,
 						options: yearOptions,
 						value: selectedYearOption,
@@ -450,7 +442,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 				isRequired
 			}),
 			/* @__PURE__ */ jsx(Dropdown, {
-				variant: DropdownVariant.PRIMARY,
+				variant: INPUT_VARIANT_TO_DROPDOWN_VARIANT[variant],
 				body: calendarBody,
 				isOpen: state.isOpen,
 				onClose: handleClose,
@@ -458,6 +450,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 				fillWidth,
 				children: /* @__PURE__ */ jsxs(StyledDateInput, {
 					$size: size,
+					$variant: variant,
 					$isActive: state.isOpen,
 					$isDisabled: isDisabled,
 					$isError: !!error,
@@ -474,7 +467,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 					children: [
 						/* @__PURE__ */ jsx(Text, {
 							variant: textVariant,
-							size: DATE_INPUT_SIZE_TO_TEXT_SIZE[size],
+							size: getInputTextSize(size),
 							isEllipsis: true,
 							cursor: !isDisabled ? "pointer" : "not-allowed",
 							children: displayValue
@@ -482,7 +475,7 @@ var DateInput = ({ label, size = InputSize.MEDIUM, value, placeholder = "Select
 						/* @__PURE__ */ jsx(Spacing, { left: 8 }),
 						/* @__PURE__ */ jsx(Icon, {
 							component: CalendarBlankIcon,
-							size: DATE_INPUT_SIZE_TO_ICON_SIZE[size],
+							size: getInputIconSize(size),
 							variant: state.isOpen || state.isHovered ? IconVariant.SECONDARY : IconVariant.TERTIARY
 						})
 					]