@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/inputs/Input.js

@@ -1,299 +1,379 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import { getCssSizeValue } from "../utils/linaria.js";
+import { FontFamily } from "../theme/enums.js";
 import Text, { TextSize, TextVariant } from "../text/Text.js";
-import Tooltip, { TooltipPosition } from "../tooltip/Tooltip.js";
+import { useControlledState } from "../hooks/useControlledState.js";
 import Icon, { IconVariant } from "../icons/Icon.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
-import RequiredMarker from "../text/RequiredMarker.js";
-import Spacing from "../containers/Spacing.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { hasContent, isFilled } from "./internal/predicates.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { useIsBareField } from "./internal/bareField.js";
+import "./internal/innerButton.js";
 /* empty css                */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { InfoIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+import { XIcon } from "@phosphor-icons/react";
 //#region src/inputs/Input.tsx
 /**
-* The label row every input renders above itself. Exported for building custom
-* inputs that should match — the stock inputs render it from their own props.
+* The single-line text field every text-like input wraps (TextInput, PasswordInput, SearchInput,
+* NumberInput, CopyInput). It draws the field frame: the resting fill (`variant`, surface set, or
+* none with `isGhost`), the hairline, the size rung, and the focus, error, disabled and read-only looks. It holds a string
+* with `value` / `defaultValue` / `onChange` and lays out the in-field parts in order: `leading`,
+* `icon`, `prefix`, the `<input>`, `suffix`, the clear button (`isClearable`) and `trailing`. It
+* reports Enter (`onEnter`, IME-safe).
+*
+* Labels and errors go through `Field`: a standalone Input with `label` or `error` renders a Field
+* around its frame; an Input inside a Field reads the Field's wiring with `useField()` (id,
+* `aria-describedby`, error and required) and never wraps itself again.
+*
+* Input never validates, parses, masks or counts: `error` / `isError` come from the app. `type` is
+* required, because apps render a typed wrapper (usually `TextInput`) rather than Input itself.
+* Replaces 1.x `Input` (no longer generic; `parse`, `min`/`max`/`step`, `width`, `labelTooltip`,
+* `InputLabel` and the `getInput*` theme helpers are gone).
 */
-var InputLabel = ({ label, labelTooltip, isRequired }) => {
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		alignItems: AlignItems.CENTER,
-		gap: 1,
-		children: [
-			/* @__PURE__ */ jsx(Text, {
-				variant: TextVariant.SECONDARY,
-				children: label
-			}),
-			isRequired && /* @__PURE__ */ jsx(RequiredMarker, {}),
-			labelTooltip && /* @__PURE__ */ jsx(Spacing, {
-				left: 4,
-				children: /* @__PURE__ */ jsx(Tooltip, {
-					body: labelTooltip,
-					position: TooltipPosition.RIGHT,
-					children: /* @__PURE__ */ jsx(Icon, {
-						component: InfoIcon,
-						variant: IconVariant.SECONDARY,
-						size: 12
-					})
-				})
-			})
-		]
-	});
-};
-/** Field height — 24 / 28 / 32px, matching `ButtonSize` so they line up in a row. */
+/** Canonical rungs; Input supports all five. Shared by the text-like inputs that wrap Input. */
 var InputSize = /* @__PURE__ */ function(InputSize) {
+	/** 20px tall: caption text, 12px icon. */
+	InputSize["X_SMALL"] = "X_SMALL";
+	/** 24px tall: body_sm text, 12px icon. */
 	InputSize["SMALL"] = "SMALL";
+	/** 32px tall: body_md text, 14px icon. The default (1.x `MEDIUM` was 28px). */
 	InputSize["MEDIUM"] = "MEDIUM";
+	/** 36px tall: body_lg text, 14px icon. */
 	InputSize["LARGE"] = "LARGE";
+	/** 40px tall: body_lg text, 16px icon. */
+	InputSize["X_LARGE"] = "X_LARGE";
 	return InputSize;
 }({});
 /**
-* 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.
+* Resting fill of the field (Constitution V-A surface set). 1.x `TRANSPARENT` is `isGhost` (color
+* 2.1).
 */
 var InputVariant = /* @__PURE__ */ function(InputVariant) {
-	InputVariant["TRANSPARENT"] = "TRANSPARENT";
+	/** `background.base` fill. */
 	InputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
 	InputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
 	InputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
 	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)};
-* ```
+* The visual box. Focus is drawn here as `FIELD_FOCUS` (`border.focused` at 1px inside the frame), whenever the
+* inner `<input>` has focus, from the mouse or the keyboard.
 */
-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();
-}
+var Frame = /*#__PURE__*/ styled("div")({
+	name: "Frame",
+	class: "gx-Input-Frame-f1bxp24n",
+	propsAsIs: false
+});
+/** Holds `leading` or `trailing`. */
+var Slot = /*#__PURE__*/ styled("span")({
+	name: "Slot",
+	class: "gx-Input-Slot-sxmrsxd",
+	propsAsIs: false
+});
+/** Prefix, value and suffix, 2px apart, so `https://` reads as the start of the URL. */
+var TextGroup = /*#__PURE__*/ styled("span")({
+	name: "TextGroup",
+	class: "gx-Input-TextGroup-t8jap54",
+	propsAsIs: false
+});
+/** The `<input>`: no chrome of its own; the frame draws the box and the focus. */
+var Control = /*#__PURE__*/ styled("input")({
+	name: "Control",
+	class: "gx-Input-Control-c16cwjje",
+	propsAsIs: false
+});
+/** Wraps the clear button so its space is kept while it is hidden. */
+var ClearSlot = /*#__PURE__*/ styled("span")({
+	name: "ClearSlot",
+	class: "gx-Input-ClearSlot-c1fr44wk",
+	propsAsIs: false
+});
+/** Prefix and suffix text: never wraps, never shrinks, not selectable. */
+var AFFIX_CSS = "gx-Input-AFFIX_CSS-a5syjqa";
+/** Hidden clear button: keeps its width, leaves the tab order and the accessibility tree. */
+var CLEAR_HIDDEN_CSS = "gx-Input-CLEAR_HIDDEN_CSS-cbdp3fy";
+/** Rest look per variant: fill and hairline color. */
+var INPUT_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-Input-BASE-bkepvj0",
+	["PRIMARY"]: "gx-Input-PRIMARY-p1kqylml",
+	["SECONDARY"]: "gx-Input-SECONDARY-sni87mp",
+	["TERTIARY"]: "gx-Input-TERTIARY-t1f9js71"
+};
+/** `isGhost`: no fill and no hairline at rest. Declared after the variant map, which it replaces. */
+var GHOST_CSS = "gx-Input-GHOST_CSS-g1tux5wq";
+/** Height, horizontal padding and gap per rung (Constitution III-A.4). */
+var INPUT_SIZE_TO_CSS_MAP = {
+	["X_SMALL"]: "gx-Input-X_SMALL-xv49y92",
+	["SMALL"]: "gx-Input-SMALL-s15pwf5n",
+	["MEDIUM"]: "gx-Input-MEDIUM-m11kseiu",
+	["LARGE"]: "gx-Input-LARGE-l3scmgs",
+	["X_LARGE"]: "gx-Input-X_LARGE-x18d50g2"
+};
 /**
-* 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.
+* Start inset when `leading` is set: equal to the vertical gap around an in-field button. The
+* `0.5px` hairline is subtracted, as on the end inset: the border adds to the start padding but the
+* vertical gap already includes it.
 */
-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, $variant }) => getInputSurfaceColor(theme, $variant);
-var _exp4 = () => ({ theme, $variant, $isError }) => {
-	if ($isError) return theme.color.border.error;
-	return getInputBorderColor(theme, $variant);
+var INPUT_SIZE_TO_LEADING_INSET_CSS_MAP = {
+	["X_SMALL"]: "gx-Input-X_SMALL-xykym5i",
+	["SMALL"]: "gx-Input-SMALL-s14m5w1k",
+	["MEDIUM"]: "gx-Input-MEDIUM-m6tn9fi",
+	["LARGE"]: "gx-Input-LARGE-l7uvomj",
+	["X_LARGE"]: "gx-Input-X_LARGE-x1jl17jf"
 };
-var _exp5 = () => ({ theme }) => theme.color.text.primary;
-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 = $hasLeadingIcon ? getInputHeight($size) : getInputPadding($size);
-	return `0 ${$hasTrailingAction ? `${getInputPaddingValue($size) + getInputIconSize($size) + 10}px` : getInputPadding($size)} 0 ${leftPadding}`;
+/**
+* End inset when `trailing` is set or `isClearable`: equal to the vertical gap around the clear
+* button. The `0.5px` hairline is subtracted, because the frame's border adds to the end padding
+* but the vertical gap already includes it (the button is centered inside the border).
+*/
+var INPUT_SIZE_TO_TRAILING_INSET_CSS_MAP = {
+	["X_SMALL"]: "gx-Input-X_SMALL-xxkw71w",
+	["SMALL"]: "gx-Input-SMALL-s17zpwrs",
+	["MEDIUM"]: "gx-Input-MEDIUM-m73yd93",
+	["LARGE"]: "gx-Input-LARGE-laix6ny",
+	["X_LARGE"]: "gx-Input-X_LARGE-x3ne53q"
 };
-var _exp1 = () => ({ $isDisabled }) => $isDisabled ? .5 : 1;
-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")({
-	name: "StyledInput",
-	class: "s1bxp24n",
-	propsAsIs: false,
-	vars: {
-		"s1bxp24n-0": [_exp()],
-		"s1bxp24n-1": [_exp2()],
-		"s1bxp24n-2": [_exp3()],
-		"s1bxp24n-3": [_exp4()],
-		"s1bxp24n-4": [_exp5()],
-		"s1bxp24n-5": [_exp6()],
-		"s1bxp24n-6": [_exp7()],
-		"s1bxp24n-7": [_exp8()],
-		"s1bxp24n-8": [_exp9()],
-		"s1bxp24n-9": [_exp0()],
-		"s1bxp24n-10": [_exp1()],
-		"s1bxp24n-11": [_exp10()],
-		"s1bxp24n-12": [_exp11()],
-		"s1bxp24n-13": [_exp12()]
-	}
-}));
-var _exp13 = () => ({ $fillWidth, $width }) => $fillWidth ? "100%" : $width ? getCssSizeValue($width) : "auto";
-var InputContainer = /*#__PURE__*/ styled("div")({
-	name: "InputContainer",
-	class: "ixmrsxd",
-	propsAsIs: false,
-	vars: { "ixmrsxd-0": [_exp13()] }
-});
-var _exp14 = () => ({ $size }) => getInputPadding($size);
-var LeadingIconWrapper = withTheme(/*#__PURE__*/ styled("div")({
-	name: "LeadingIconWrapper",
-	class: "l8jap54",
-	propsAsIs: false,
-	vars: { "l8jap54-0": [_exp14()] }
-}));
-var _exp15 = () => ({ $size }) => getInputPadding($size);
-var _exp16 = () => ({ $isDisabled }) => $isDisabled ? "not-allowed" : "pointer";
-var TrailingActionButton = /*#__PURE__*/ styled("button")({
-	name: "TrailingActionButton",
-	class: "t16cwjje",
-	propsAsIs: false,
-	vars: {
-		"t16cwjje-0": [_exp15()],
-		"t16cwjje-1": [_exp16()]
+/**
+* Hover on an editable field: `border.hovered` (stronger than `border.primary` in both themes,
+* Constitution III.6).
+*/
+var INPUT_VARIANT_TO_HOVER_CSS_MAP = {
+	["BASE"]: "gx-Input-BASE-b16arvuc",
+	["PRIMARY"]: "gx-Input-PRIMARY-pr1g7kx",
+	["SECONDARY"]: "gx-Input-SECONDARY-s1pzdsn8",
+	["TERTIARY"]: "gx-Input-TERTIARY-t1xoy9v8"
+};
+/** Hover on an editable ghost field: the frame appears, `border.hovered` with no fill. */
+var GHOST_HOVER_CSS = "gx-Input-GHOST_HOVER_CSS-g6g85zv";
+/** Error border at rest, on hover and with focus (the 1px inset focus line is red too). */
+var ERROR_CSS = "gx-Input-ERROR_CSS-e1e4v88v";
+/**
+* Disabled: the variant's resting fill and hairline are kept (`border.disabled` is not used on
+* frames); the field reads as disabled through `text.disabled` / `text.disabled` and the cursor.
+*/
+var DISABLED_CSS = "gx-Input-DISABLED_CSS-d1d35fia";
+/** Stretch to the parent's width (frame, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-Input-FILL_WIDTH_CSS-f1jgakl6";
+/**
+* The value's type per family and rung. `height` equals the line height, so the value centers on
+* whole pixels in every rung; mono uses its ~0.92× sizes with the same line heights.
+*/
+var INPUT_FAMILY_TO_SIZE_CSS_MAP = {
+	[FontFamily.SANS]: {
+		["X_SMALL"]: "gx-Input-X_SMALL-x1iku50u",
+		["SMALL"]: "gx-Input-SMALL-s1gabvh6",
+		["MEDIUM"]: "gx-Input-MEDIUM-m1niie6",
+		["LARGE"]: "gx-Input-LARGE-l1x6769h",
+		["X_LARGE"]: "gx-Input-X_LARGE-x1jooqdg"
+	},
+	[FontFamily.MONO]: {
+		["X_SMALL"]: "gx-Input-X_SMALL-x1hsdcy6",
+		["SMALL"]: "gx-Input-SMALL-s1qh8eqy",
+		["MEDIUM"]: "gx-Input-MEDIUM-m1g40gnd",
+		["LARGE"]: "gx-Input-LARGE-l148eler",
+		["X_LARGE"]: "gx-Input-X_LARGE-x734zbi"
 	}
-});
+};
+/** Leading icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var INPUT_SIZE_TO_ICON_PX_MAP = {
+	["X_SMALL"]: 12,
+	["SMALL"]: 12,
+	["MEDIUM"]: 14,
+	["LARGE"]: 14,
+	["X_LARGE"]: 16
+};
+/** Prefix and suffix step per rung (the canonical control text). */
+var INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
 /**
-* The generic text field every typed input wraps. Renders the label, the field,
-* the leading/trailing affordances and the error line.
-*
-* Prefer a concrete wrapper — `TextInput`, `PasswordInput`, `NumberInput` — which
-* pin `type` and `parse` for you. Use this directly only for a value type none of
-* them cover.
+* In-field button rung: 20px up to MEDIUM, 24px for LARGE and X_LARGE. Shared with the inputs that
+* put a button inside Input's frame (PasswordInput, NumberInput, CopyInput).
+*/
+var INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL,
+	["X_LARGE"]: ButtonSize.SMALL
+};
+/**
+* The gap between the in-field parts per rung, as a `Space` (the value `INPUT_SIZE_TO_CSS_MAP`
+* draws). For an input that lays out its own trailing parts beside the clear button (SearchInput).
 */
-var Input = forwardRef(({ parse, onChange, variant = "PRIMARY", size = "MEDIUM", type, value, label, labelTooltip, error, isError, placeholder, leading, trailing, isRequired, isDisabled, autoFocus, min, max, step, onFocus, onBlur, onKeyDown, width, fillWidth, isMonospace }, ref) => {
-	const handleChange = (e) => {
-		onChange(parse(e.target.value));
+var INPUT_SIZE_TO_GAP_MAP = {
+	["X_SMALL"]: 4,
+	["SMALL"]: 4,
+	["MEDIUM"]: 8,
+	["LARGE"]: 8,
+	["X_LARGE"]: 8
+};
+/** The `Field` an Input renders for its own `label` / `error` uses the same rung. */
+var INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** The frame and the `<input>`, wired to the nearest Field (the Input's own or the app's). */
+function InputFrame({ inputProps, forwardedRef, isRoot }) {
+	const { type, value, defaultValue = "", onChange, onEnter, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, icon, leading, trailing, prefix, suffix, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, family = FontFamily.SANS, fillWidth = false, ariaLabel, autoComplete = "off", onKeyDown, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = inputProps;
+	const isBare = useIsBareField();
+	const hasPrefix = isFilled(prefix);
+	const hasSuffix = isFilled(suffix);
+	const { controlId: inputId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		describedByIds: (controlId) => [hasPrefix && `${controlId}-prefix`, hasSuffix && `${controlId}-suffix`],
+		error,
+		isError,
+		isRequired
+	});
+	const prefixId = `${inputId}-prefix`;
+	const suffixId = `${inputId}-suffix`;
+	const innerRef = useRef(null);
+	const mergedRef = useMergeRefs([innerRef, forwardedRef]);
+	const [currentValue, setValue] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const hasLeading = hasContent(leading);
+	const hasTrailing = hasContent(trailing);
+	const isEditable = !isDisabled && !isReadOnly;
+	const isClearHidden = currentValue === "" || !isEditable;
+	useDevWarning(!hasName, "[@galaxy-io/dls] Input has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`. `placeholder` is not a name.");
+	/** Clicking the icon, prefix, suffix or padding focuses the field. */
+	const handleFrameMouseDown = (event) => {
+		const interactive = event.target.closest("input, button, a, [tabindex]");
+		if (interactive !== null && event.currentTarget.contains(interactive)) return;
+		event.preventDefault();
+		innerRef.current?.focus();
 	};
-	const hasLeading = !!leading?.icon;
-	const hasTrailing = !!trailing?.icon;
-	return /* @__PURE__ */ jsxs(FlexWrapper, {
-		direction: FlexDirection.COLUMN,
-		gap: 4,
-		fillWidth,
+	const handleChange = (event) => setValue(event.target.value);
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Enter" && !event.nativeEvent.isComposing && !event.defaultPrevented) onEnter?.(event.currentTarget.value);
+	};
+	const clear = () => {
+		setValue("");
+		innerRef.current?.focus();
+	};
+	const textSize = INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const affixVariant = isDisabled ? TextVariant.DISABLED : TextVariant.TERTIARY;
+	return /* @__PURE__ */ jsxs(Frame, {
+		"data-gx-anchor": "",
+		onMouseDown: handleFrameMouseDown,
+		className: cx(isGhost ? GHOST_CSS : INPUT_VARIANT_TO_CSS_MAP[variant], INPUT_SIZE_TO_CSS_MAP[size], hasLeading && INPUT_SIZE_TO_LEADING_INSET_CSS_MAP[size], (hasTrailing || isClearable) && INPUT_SIZE_TO_TRAILING_INSET_CSS_MAP[size], isEditable && !isInvalid && (isGhost ? GHOST_HOVER_CSS : INPUT_VARIANT_TO_HOVER_CSS_MAP[variant]), isInvalid && !isDisabled && ERROR_CSS, isDisabled && DISABLED_CSS, fillWidth && FILL_WIDTH_CSS, isBare && "gx-bareField-BARE_FIELD_CSS-b1memido", isBare && "gx-bareField-BARE_INPUT_CSS-bq8fkxg", isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
 		children: [
-			label && /* @__PURE__ */ jsx(InputLabel, {
-				label,
-				labelTooltip,
-				isRequired
+			hasLeading && /* @__PURE__ */ jsx(Slot, { children: leading }),
+			icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+				component: icon,
+				size: INPUT_SIZE_TO_ICON_PX_MAP[size],
+				variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
+				"aria-hidden": true
 			}),
-			/* @__PURE__ */ jsxs(InputContainer, {
-				$width: width,
-				$fillWidth: fillWidth,
-				children: [
-					hasLeading && /* @__PURE__ */ jsx(LeadingIconWrapper, {
-						$size: size,
-						children: /* @__PURE__ */ jsx(Icon, {
-							component: leading.icon,
-							variant: isDisabled ? IconVariant.DISABLED : IconVariant.SECONDARY,
-							size: getInputIconSize(size)
-						})
-					}),
-					/* @__PURE__ */ jsx(StyledInput, {
-						$size: size,
-						$variant: variant,
-						$width: width,
-						$fillWidth: fillWidth || hasLeading || hasTrailing,
-						$isError: isError || !!error,
-						$hasLeadingIcon: hasLeading,
-						$hasTrailingAction: hasTrailing,
-						$isMonospace: isMonospace,
-						ref,
-						type,
-						placeholder,
-						value: value?.toString() ?? "",
-						required: isRequired,
-						$isDisabled: isDisabled,
-						disabled: isDisabled,
-						onChange: handleChange,
-						autoComplete: "off",
-						autoCorrect: "off",
-						min,
-						max,
-						step,
-						autoFocus,
-						onFocus,
-						onBlur,
-						onKeyDown
-					}),
-					hasTrailing && /* @__PURE__ */ jsx(TrailingActionButton, {
-						onClick: trailing.onClick,
-						$size: size,
-						$isDisabled: isDisabled || trailing.isDisabled,
-						disabled: isDisabled || trailing.isDisabled,
-						children: /* @__PURE__ */ jsx(Icon, {
-							component: trailing.icon,
-							variant: IconVariant.SECONDARY,
-							size: getInputIconSize(size)
-						})
-					})
-				]
+			/* @__PURE__ */ jsxs(TextGroup, { children: [
+				hasPrefix && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					id: prefixId,
+					size: textSize,
+					family,
+					variant: affixVariant,
+					className: AFFIX_CSS,
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx(Control, {
+					ref: mergedRef,
+					id: inputId,
+					type,
+					value: currentValue,
+					onChange: handleChange,
+					onKeyDown: handleKeyDown,
+					placeholder,
+					disabled: isDisabled,
+					readOnly: isReadOnly,
+					autoComplete,
+					autoCorrect: "off",
+					"aria-label": ariaLabel,
+					"aria-describedby": describedBy,
+					"aria-invalid": isInvalid ? true : void 0,
+					"aria-required": isRequiredState ? true : void 0,
+					className: INPUT_FAMILY_TO_SIZE_CSS_MAP[family][size],
+					...rest
+				}),
+				hasSuffix && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					id: suffixId,
+					size: textSize,
+					family,
+					variant: affixVariant,
+					className: AFFIX_CSS,
+					children: suffix
+				})
+			] }),
+			isClearable && /* @__PURE__ */ jsx(ClearSlot, {
+				className: cx(isClearHidden && CLEAR_HIDDEN_CSS),
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.TERTIARY,
+					size: INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+					icon: XIcon,
+					ariaLabel: "Clear",
+					onClick: clear,
+					className: cx(size === "X_SMALL" && "gx-innerButton-X_SMALL_INNER_BUTTON_CSS-x1ep0pcd")
+				})
 			}),
-			error && /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				variant: TextVariant.ERROR,
-				children: error
-			})
+			hasTrailing && /* @__PURE__ */ jsx(Slot, { children: trailing })
 		]
 	});
+}
+/** The single-line text field frame every text-like input wraps. Apps render `TextInput`. */
+var Input = forwardRef(function Input(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "Input",
+		label,
+		error,
+		isRequired,
+		size: INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(InputFrame, {
+			inputProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(InputFrame, {
+		inputProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
 });
-var InputWithDisplayName = Input;
-InputWithDisplayName.displayName = "Input";
+Input.displayName = "Input";
 //#endregion
-export { InputLabel, InputSize, InputVariant, StyledInput, Input as default, getInputBorderColor, getInputControlSize, getInputFontSize, getInputHeight, getInputHeightValue, getInputIconSize, getInputLineHeight, getInputPadding, getInputPaddingValue, getInputSurfaceColor, getInputTextSize };
+export { INPUT_SIZE_TO_BUTTON_SIZE_MAP, INPUT_SIZE_TO_GAP_MAP, InputSize, InputVariant, Input as default };