@galaxy-io/dls 1.4.14 → 1.5.0

package/dist/charts/ChartLegend.js

@@ -2,7 +2,7 @@ import Text, { TextSize, TextVariant } from "../text/Text.js";
 import Tooltip, { TooltipPosition, TooltipVariant } from "../tooltip/Tooltip.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
-import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
+import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow } from "./ChartPrimitives.js";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
@@ -120,7 +120,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 		$vertical: vertical,
 		$extent: verticalExtent,
 		children: [
-			/* @__PURE__ */ jsxs(ChartLegendMeasure, {
+			/* @__PURE__ */ jsx(ChartLegendMeasureClip, { children: /* @__PURE__ */ jsxs(ChartLegendMeasure, {
 				ref: measureRef,
 				$vertical: vertical,
 				"aria-hidden": "true",
@@ -141,7 +141,7 @@ var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, vertical
 						children: `+${items.length - 1} more`
 					})
 				})]
-			}),
+			}) }),
 			inlineItems.map((item) => renderItem(item, vertical)),
 			overflowItems.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
 				isInteractive: true,

package/dist/charts/ChartPrimitives.d.ts

@@ -228,6 +228,21 @@ export declare const ChartLegendRow: import("@linaria/react").StyledComponent<im
     /** Plot box height in px — the side legend's fit extent. */
     $extent?: number;
 }>;
+/**
+ * Zero-size clip around the measure layer.
+ *
+ * `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
+ * max-content box still joins the scrollable overflow region of every ancestor
+ * up to the nearest scroll container, and the row above cannot clip it. A
+ * legend wide enough to collapse therefore handed the page a horizontal
+ * scrollbar into empty space — the wider the collapsed entries, the further it
+ * scrolled.
+ *
+ * `overflow: hidden` on a 0×0 box ends the propagation there while leaving
+ * descendant layout geometry untouched, so the sizes the fit computation reads
+ * are exactly the ones it read before.
+ */
+export declare const ChartLegendMeasureClip: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 /**
  * Invisible copy of every legend entry plus a worst-case trigger, laid out
  * unconstrained along the legend's own axis so the fit computation can read

package/dist/charts/ChartPrimitives.js

@@ -307,6 +307,25 @@ var ChartLegendRow = /*#__PURE__*/ styled("div")({
 	}
 });
 /**
+* Zero-size clip around the measure layer.
+*
+* `visibility: hidden` suppresses paint but not *overflow*: the measure layer's
+* max-content box still joins the scrollable overflow region of every ancestor
+* up to the nearest scroll container, and the row above cannot clip it. A
+* legend wide enough to collapse therefore handed the page a horizontal
+* scrollbar into empty space — the wider the collapsed entries, the further it
+* scrolled.
+*
+* `overflow: hidden` on a 0×0 box ends the propagation there while leaving
+* descendant layout geometry untouched, so the sizes the fit computation reads
+* are exactly the ones it read before.
+*/
+var ChartLegendMeasureClip = /*#__PURE__*/ styled("div")({
+	name: "ChartLegendMeasureClip",
+	class: "c1armna5",
+	propsAsIs: false
+});
+/**
 * Invisible copy of every legend entry plus a worst-case trigger, laid out
 * unconstrained along the legend's own axis so the fit computation can read
 * real sizes.
@@ -318,11 +337,11 @@ var _exp42 = () => ({ $vertical }) => $vertical ? "column" : "row";
 var _exp43 = () => ({ $vertical }) => $vertical ? "flex-start" : "center";
 var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendMeasure",
-	class: "c1armna5",
+	class: "cgd77rv",
 	propsAsIs: false,
 	vars: {
-		"c1armna5-0": [_exp42()],
-		"c1armna5-1": [_exp43()]
+		"cgd77rv-0": [_exp42()],
+		"cgd77rv-1": [_exp43()]
 	}
 });
 /**
@@ -334,7 +353,7 @@ var ChartLegendMeasure = /*#__PURE__*/ styled("div")({
 */
 var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendOverflowList",
-	class: "cgd77rv",
+	class: "cutidpi",
 	propsAsIs: false
 });
 /**
@@ -358,18 +377,18 @@ var ChartLegendOverflowList = /*#__PURE__*/ styled("div")({
 var _exp45 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemButton = /*#__PURE__*/ styled("button")({
 	name: "ChartLegendItemButton",
-	class: "cutidpi",
+	class: "ccpczg",
 	propsAsIs: false,
-	vars: { "cutidpi-0": [_exp45()] }
+	vars: { "ccpczg-0": [_exp45()] }
 });
 /** The same row, when the legend is inert — no button semantics to announce.
 * Carries the same trailing padding; see {@link ChartLegendItemButton}. */
 var _exp47 = () => ({ $vertical }) => $vertical ? `0 0 8px 0` : `0 16px 0 0`;
 var ChartLegendItemStatic = /*#__PURE__*/ styled("div")({
 	name: "ChartLegendItemStatic",
-	class: "ccpczg",
+	class: "c2re25h",
 	propsAsIs: false,
-	vars: { "ccpczg-0": [_exp47()] }
+	vars: { "c2re25h-0": [_exp47()] }
 });
 //#endregion
-export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };
+export { ChartArcPath, ChartAreaPath, ChartAxisLabelBox, ChartBarPath, ChartCenterBox, ChartCursorBand, ChartCursorLine, ChartEmptyOverlay, ChartGridLine, ChartHitTarget, ChartHitTargetPath, ChartLegendItemButton, ChartLegendItemStatic, ChartLegendMeasure, ChartLegendMeasureClip, ChartLegendOverflowList, ChartLegendRow, ChartLinePath, ChartPlotBox, ChartPointCircle, ChartRoot, ChartSvg, ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartTooltipValueCell };

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
 						})
 					]