@galaxy-io/dls 2.4.1 → 2.5.0

package/dist/feedback/EmptyState.js

@@ -26,6 +26,14 @@ var EmptyStateSize = /* @__PURE__ */ function(EmptyStateSize) {
 	EmptyStateSize["LARGE"] = "LARGE";
 	return EmptyStateSize;
 }({});
+/** Color role of the tile (color set, subset). */
+var EmptyStateVariant = /* @__PURE__ */ function(EmptyStateVariant) {
+	/** A quiet tile: `text.secondary` icon on a `border.primary` hairline. The default. */
+	EmptyStateVariant["SECONDARY"] = "SECONDARY";
+	/** Something failed: `text.error` icon on a `border.error` hairline. */
+	EmptyStateVariant["ERROR"] = "ERROR";
+	return EmptyStateVariant;
+}({});
 /** Fills its parent's width and centers its stack. No background, border or radius. */
 var Root = /*#__PURE__*/ styled("div")({
 	name: "Root",
@@ -38,23 +46,37 @@ var Tile = /*#__PURE__*/ styled("div")({
 	class: "gx-EmptyState-Tile-t2lzt2i",
 	propsAsIs: false
 });
+/** The app's own graphic above the header: centered, never wider than the region. */
+var Graphic = /*#__PURE__*/ styled("div")({
+	name: "Graphic",
+	class: "gx-EmptyState-Graphic-g1cew7lm",
+	propsAsIs: false
+});
+var EMPTY_STATE_VARIANT_TO_TILE_CSS_MAP = {
+	["SECONDARY"]: "gx-EmptyState-SECONDARY-sz10ltv",
+	["ERROR"]: "gx-EmptyState-ERROR-e1ao7sbo"
+};
+var EMPTY_STATE_VARIANT_TO_ICON_VARIANT_MAP = {
+	["SECONDARY"]: IconVariant.SECONDARY,
+	["ERROR"]: IconVariant.ERROR
+};
 var Copy = /*#__PURE__*/ styled("div")({
 	name: "Copy",
-	class: "gx-EmptyState-Copy-c1cew7lm",
+	class: "gx-EmptyState-Copy-ca0wxkf",
 	propsAsIs: false
 });
 var Actions = /*#__PURE__*/ styled("div")({
 	name: "Actions",
-	class: "gx-EmptyState-Actions-az10ltv",
+	class: "gx-EmptyState-Actions-agybc7l",
 	propsAsIs: false
 });
 /** A measure, not a spacing value: two-line descriptions stay two lines at body_md. */
-var DESCRIPTION_CSS = "gx-EmptyState-DESCRIPTION_CSS-d1ao7sbo";
+var DESCRIPTION_CSS = "gx-EmptyState-DESCRIPTION_CSS-d4781xg";
 /** Padding, stack gap and tile size per placement. */
 var EMPTY_STATE_SIZE_TO_CSS_MAP = {
-	["SMALL"]: "gx-EmptyState-SMALL-sa0wxkf",
-	["MEDIUM"]: "gx-EmptyState-MEDIUM-mgybc7l",
-	["LARGE"]: "gx-EmptyState-LARGE-l4781xg"
+	["SMALL"]: "gx-EmptyState-SMALL-s15jcumv",
+	["MEDIUM"]: "gx-EmptyState-MEDIUM-m1x5idgk",
+	["LARGE"]: "gx-EmptyState-LARGE-l1410570"
 };
 /** The tile's icon: the rung pair of its control square (24/14, 32/16, 40/18). */
 var EMPTY_STATE_SIZE_TO_ICON_PX_MAP = {
@@ -73,17 +95,21 @@ var EMPTY_STATE_SIZE_TO_DESCRIPTION_SIZE_MAP = {
 	["LARGE"]: TextSize.BODY_MD
 };
 /** A centered icon, header, description and actions for a region with nothing to show. */
-var EmptyState = forwardRef(function EmptyState({ header, description, icon, actions, size = "MEDIUM", className, ...rest }, ref) {
+var EmptyState = forwardRef(function EmptyState({ header, description, icon, graphic, actions, size = "MEDIUM", variant = "SECONDARY", className, ...rest }, ref) {
 	return /* @__PURE__ */ jsxs(Root, {
 		...rest,
 		ref,
 		className: cx(EMPTY_STATE_SIZE_TO_CSS_MAP[size], className),
 		children: [
-			icon && /* @__PURE__ */ jsx(Tile, { children: /* @__PURE__ */ jsx(Icon, {
-				component: icon,
-				size: EMPTY_STATE_SIZE_TO_ICON_PX_MAP[size],
-				variant: IconVariant.SECONDARY
-			}) }),
+			graphic !== void 0 && /* @__PURE__ */ jsx(Graphic, { children: graphic }),
+			icon && /* @__PURE__ */ jsx(Tile, {
+				className: EMPTY_STATE_VARIANT_TO_TILE_CSS_MAP[variant],
+				children: /* @__PURE__ */ jsx(Icon, {
+					component: icon,
+					size: EMPTY_STATE_SIZE_TO_ICON_PX_MAP[size],
+					variant: EMPTY_STATE_VARIANT_TO_ICON_VARIANT_MAP[variant]
+				})
+			}),
 			/* @__PURE__ */ jsxs(Copy, { children: [/* @__PURE__ */ jsx(Text, {
 				as: "p",
 				size: EMPTY_STATE_SIZE_TO_HEADER_SIZE_MAP[size],
@@ -106,4 +132,4 @@ var EmptyState = forwardRef(function EmptyState({ header, description, icon, act
 });
 EmptyState.displayName = "EmptyState";
 //#endregion
-export { EmptyStateSize, EmptyState as default };
+export { EmptyStateSize, EmptyStateVariant, EmptyState as default };

package/dist/feedback/ProgressBar.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type CSSProperties } from "react";
-import type { PaletteColor } from "../theme/tokens/types.js";
+import type { RoleColor } from "../theme/tokens/types.js";
 /** Canonical rungs; the member names the rung of the text the bar sits with. */
 export declare enum ProgressBarSize {
     /** 2px track, caption label. */
@@ -54,11 +54,12 @@ interface ProgressBarColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the fill takes `text.<family>`, the way
-     * a status variant renders. For a category's color (a source type, a team); meanings take
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the fill takes `text.<name>`, the way a status variant renders. For a
+     * category's or data-driven color (a source type, a team); a status that is meaning takes
      * `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** The passthrough, kept last so `className` and `style` close the props table. */
 interface ProgressBarPassthroughProps {

package/dist/feedback/ProgressBar.js

@@ -97,31 +97,34 @@ var PROGRESS_BAR_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: `text.<family>` on the root, the way a status variant renders. */
 var PROGRESS_BAR_COLOR_TO_CSS_MAP = {
-	red: "gx-ProgressBar-red-reiy0oi",
-	orange: "gx-ProgressBar-orange-o1epzlep",
-	amber: "gx-ProgressBar-amber-aasg8k0",
-	yellow: "gx-ProgressBar-yellow-y1kkinrj",
-	lime: "gx-ProgressBar-lime-lcvje08",
-	green: "gx-ProgressBar-green-gb5j54q",
-	emerald: "gx-ProgressBar-emerald-elbvi15",
-	teal: "gx-ProgressBar-teal-twaqggx",
-	cyan: "gx-ProgressBar-cyan-c6fb74o",
-	sky: "gx-ProgressBar-sky-s13m8tjk",
-	blue: "gx-ProgressBar-blue-b195062s",
-	indigo: "gx-ProgressBar-indigo-i1tjg1hb",
-	violet: "gx-ProgressBar-violet-v1hc7niq",
-	purple: "gx-ProgressBar-purple-p31v6jj",
-	fuchsia: "gx-ProgressBar-fuchsia-f1idth2y",
-	pink: "gx-ProgressBar-pink-psz64tr",
-	rose: "gx-ProgressBar-rose-r121jrhu"
+	success: "gx-ProgressBar-success-seiy0oi",
+	warning: "gx-ProgressBar-warning-w1epzlep",
+	error: "gx-ProgressBar-error-easg8k0",
+	red: "gx-ProgressBar-red-r1kkinrj",
+	orange: "gx-ProgressBar-orange-ocvje08",
+	amber: "gx-ProgressBar-amber-ab5j54q",
+	yellow: "gx-ProgressBar-yellow-ylbvi15",
+	lime: "gx-ProgressBar-lime-lwaqggx",
+	green: "gx-ProgressBar-green-g6fb74o",
+	emerald: "gx-ProgressBar-emerald-e13m8tjk",
+	teal: "gx-ProgressBar-teal-t195062s",
+	cyan: "gx-ProgressBar-cyan-c1tjg1hb",
+	sky: "gx-ProgressBar-sky-s1hc7niq",
+	blue: "gx-ProgressBar-blue-b31v6jj",
+	indigo: "gx-ProgressBar-indigo-i1idth2y",
+	violet: "gx-ProgressBar-violet-vsz64tr",
+	purple: "gx-ProgressBar-purple-p121jrhu",
+	fuchsia: "gx-ProgressBar-fuchsia-foqk5ch",
+	pink: "gx-ProgressBar-pink-p1luqk3n",
+	rose: "gx-ProgressBar-rose-r1hbdj3k"
 };
 /** Track thickness and the gap between the label line and the track. */
 var PROGRESS_BAR_SIZE_TO_CSS_MAP = {
-	["X_SMALL"]: "gx-ProgressBar-X_SMALL-xoqk5ch",
-	["SMALL"]: "gx-ProgressBar-SMALL-s1luqk3n",
-	["MEDIUM"]: "gx-ProgressBar-MEDIUM-m1hbdj3k",
-	["LARGE"]: "gx-ProgressBar-LARGE-l17skgql",
-	["X_LARGE"]: "gx-ProgressBar-X_LARGE-x1i0eise"
+	["X_SMALL"]: "gx-ProgressBar-X_SMALL-x17skgql",
+	["SMALL"]: "gx-ProgressBar-SMALL-s1i0eise",
+	["MEDIUM"]: "gx-ProgressBar-MEDIUM-mnhve48",
+	["LARGE"]: "gx-ProgressBar-LARGE-l1p1szbl",
+	["X_LARGE"]: "gx-ProgressBar-X_LARGE-xu0asu0"
 };
 /** The label and value are the rung's text step (the ProgressCircle table). */
 var PROGRESS_BAR_SIZE_TO_TEXT_SIZE_MAP = {

package/dist/feedback/ProgressCircle.d.ts

@@ -1,5 +1,5 @@
 import { type AriaAttributes, type CSSProperties } from "react";
-import type { PaletteColor } from "../theme/tokens/types.js";
+import type { RoleColor } from "../theme/tokens/types.js";
 /** Canonical rungs; the member names the control rung the ring sits in. */
 export declare enum ProgressCircleSize {
     /** 20px rung: 12px ring, caption label. */
@@ -61,11 +61,12 @@ interface ProgressCircleColorProps {
      */
     variant?: undefined;
     /**
-     * Categorical palette family (`"blue"`, `"violet"`, …): the arc takes `text.<family>`, the way a
-     * status variant renders. For a category's color (a source type, a team); meanings take
+     * Categorical palette family (`"blue"`, `"violet"`, …) or a status role as a string
+     * (`"success"`, `"error"`): the arc takes `text.<name>`, the way a status variant renders. For a
+     * category's or data-driven color (a source type, a team); a status that is meaning takes
      * `variant`. Not with `variant`.
      */
-    color: PaletteColor;
+    color: RoleColor;
 }
 /** The passthrough, kept last so `className` and `style` close the props table. */
 interface ProgressCirclePassthroughProps {

package/dist/feedback/ProgressCircle.js

@@ -84,31 +84,34 @@ var PROGRESS_CIRCLE_VARIANT_TO_CSS_MAP = {
 };
 /** Categorical `color`: `text.<family>` on the root, the way a status variant renders. */
 var PROGRESS_CIRCLE_COLOR_TO_CSS_MAP = {
-	red: "gx-ProgressCircle-red-r5wr4fy",
-	orange: "gx-ProgressCircle-orange-o3cpdk8",
-	amber: "gx-ProgressCircle-amber-a3bcytf",
-	yellow: "gx-ProgressCircle-yellow-y1b1indu",
-	lime: "gx-ProgressCircle-lime-ls32e8h",
-	green: "gx-ProgressCircle-green-g1z891t",
-	emerald: "gx-ProgressCircle-emerald-e169l71b",
-	teal: "gx-ProgressCircle-teal-t7wy6jh",
-	cyan: "gx-ProgressCircle-cyan-cid9v1r",
-	sky: "gx-ProgressCircle-sky-sphjv2k",
-	blue: "gx-ProgressCircle-blue-b14y8mwv",
-	indigo: "gx-ProgressCircle-indigo-i1gpmklw",
-	violet: "gx-ProgressCircle-violet-v15o8mw",
-	purple: "gx-ProgressCircle-purple-p865hhm",
-	fuchsia: "gx-ProgressCircle-fuchsia-f1lkh9dd",
-	pink: "gx-ProgressCircle-pink-p4a8qsx",
-	rose: "gx-ProgressCircle-rose-rzljd4b"
+	success: "gx-ProgressCircle-success-s5wr4fy",
+	warning: "gx-ProgressCircle-warning-w3cpdk8",
+	error: "gx-ProgressCircle-error-e3bcytf",
+	red: "gx-ProgressCircle-red-r1b1indu",
+	orange: "gx-ProgressCircle-orange-os32e8h",
+	amber: "gx-ProgressCircle-amber-a1z891t",
+	yellow: "gx-ProgressCircle-yellow-y169l71b",
+	lime: "gx-ProgressCircle-lime-l7wy6jh",
+	green: "gx-ProgressCircle-green-gid9v1r",
+	emerald: "gx-ProgressCircle-emerald-ephjv2k",
+	teal: "gx-ProgressCircle-teal-t14y8mwv",
+	cyan: "gx-ProgressCircle-cyan-c1gpmklw",
+	sky: "gx-ProgressCircle-sky-s15o8mw",
+	blue: "gx-ProgressCircle-blue-b865hhm",
+	indigo: "gx-ProgressCircle-indigo-i1lkh9dd",
+	violet: "gx-ProgressCircle-violet-v4a8qsx",
+	purple: "gx-ProgressCircle-purple-pzljd4b",
+	fuchsia: "gx-ProgressCircle-fuchsia-foz9zwb",
+	pink: "gx-ProgressCircle-pink-pi0gudm",
+	rose: "gx-ProgressCircle-rose-r1tg3t7s"
 };
 /** Ring box, root height (the rung's text line height) and gap: the Spinner table. */
 var PROGRESS_CIRCLE_SIZE_TO_CSS_MAP = {
-	["X_SMALL"]: "gx-ProgressCircle-X_SMALL-xoz9zwb",
-	["SMALL"]: "gx-ProgressCircle-SMALL-si0gudm",
-	["MEDIUM"]: "gx-ProgressCircle-MEDIUM-m1tg3t7s",
-	["LARGE"]: "gx-ProgressCircle-LARGE-l1tizbqg",
-	["X_LARGE"]: "gx-ProgressCircle-X_LARGE-xuuqsnf"
+	["X_SMALL"]: "gx-ProgressCircle-X_SMALL-x1tizbqg",
+	["SMALL"]: "gx-ProgressCircle-SMALL-suuqsnf",
+	["MEDIUM"]: "gx-ProgressCircle-MEDIUM-mrsjl86",
+	["LARGE"]: "gx-ProgressCircle-LARGE-lzwqtuj",
+	["X_LARGE"]: "gx-ProgressCircle-X_LARGE-x1omzhlm"
 };
 /** The label and value are the rung's text step (the ProgressBar table). */
 var PROGRESS_CIRCLE_SIZE_TO_TEXT_SIZE_MAP = {

package/dist/inputs/CheckboxGroup.d.ts

@@ -50,8 +50,12 @@ export interface CheckboxGroupProps<TId extends string = string> extends AriaAtt
     defaultValue?: TId[];
     /** Called with the new array of checked ids, in `options` order. */
     onChange?: (value: TId[]) => void;
-    /** The question, rendered through `Field` above the options. For a description, a tooltip or a horizontal layout, wrap the group in `Field` instead. */
+    /** The question, rendered through `Field` above the options. For a horizontal layout or `actions`, wrap the group in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the question, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the question, above the options, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app, shown under the options through `Field`. It also marks every box invalid. */
     error?: string;
     /**

package/dist/inputs/CheckboxGroup.js

@@ -96,7 +96,7 @@ var CHECKBOX_GROUP_SIZE_TO_FIELD_SIZE_MAP = {
 var EMPTY_IDS = [];
 /** The group element and its boxes, wired to the nearest Field (the group's own or the app's). */
 function GroupBody({ groupProps, forwardedRef, isRoot }) {
-	const { options, value, defaultValue, onChange, label: _label, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
+	const { options, value, defaultValue, onChange, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isRequired = false, orientation = Orientation.VERTICAL, size = "MEDIUM", variant = "PRIMARY", isGhost = false, isDisabled = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = groupProps;
 	const wiring = useFieldWiring({
 		id,
 		ariaLabel,
@@ -151,11 +151,13 @@ function GroupBody({ groupProps, forwardedRef, isRoot }) {
 /** A set of checkboxes answering one question; the value is the array of checked ids. */
 var CheckboxGroupBase = forwardRef(function CheckboxGroup(props, ref) {
 	const { label, error, isRequired = false, size = "MEDIUM" } = props;
-	const { id, className, style } = props;
+	const { labelTooltip, description, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "CheckboxGroup",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: CHECKBOX_GROUP_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/ColorInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties, type ReactElement } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode } from "react";
 import { type Hex } from "../utils/colors.js";
 /** Canonical rungs; ColorInput supports all five (the Input rung table). */
 export declare enum ColorInputSize {
@@ -54,8 +54,12 @@ export interface ColorInputProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap the input in `Field`. A custom trigger (`children`) ignores it. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). A custom trigger ignores it. */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. A custom trigger ignores it. */
+    description?: ReactNode;
     /**
      * Shown in the field while there is no value. Never the label.
      * @default Select color…

package/dist/inputs/ColorInput.js

@@ -333,7 +333,7 @@ function presetCheckColor(hex) {
 }
 /** The field (or the custom trigger), the trailing parts and the picker panel. */
 function ColorInputFrame({ colorProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = null, onChange, onPreviewChange, presets, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label, placeholder = "Select color…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, children, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = colorProps;
+	const { value, defaultValue = null, onChange, onPreviewChange, presets, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label, labelTooltip: _labelTooltip, description: _description, placeholder = "Select color…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, children, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = colorProps;
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName: hasOwnName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -749,12 +749,14 @@ function ColorInputFrame({ colorProps, forwardedRef, isRoot }) {
 }
 /** Choose one solid color as a hex value, in a field (or a custom trigger) that opens a picker. */
 var ColorInput = forwardRef(function ColorInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, children } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false, children } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "ColorInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: COLOR_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/CopyInput.d.ts

@@ -1,11 +1,15 @@
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 import { FontFamily } from "../theme/enums.js";
 import { InputSize, InputVariant } from "./Input.js";
 export interface CopyInputProps extends AriaAttributes {
     /** The text shown in the field and written to the clipboard. It is read-only, so there is no `onChange`. */
     value: string;
-    /** Label above the field, rendered through `Field`. It also names the copy button ("Copy Webhook URL"). For a description or a label tooltip, wrap the field in `Field` instead. */
+    /** Label above the field, rendered through `Field`. It also names the copy button ("Copy Webhook URL"). For a horizontal layout or `actions`, wrap the field in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Accessible name of the field when there is no visible label (no `label` and no wrapping `Field`). It also names the copy button ("Copy API key"). */
     ariaLabel?: string;
     /**

package/dist/inputs/CopyInput.js

@@ -23,7 +23,7 @@ import { useMergeRefs } from "@floating-ui/react";
 * in-field size in `trailing` (`PasswordInput` owns its trailing slot); an editable value with a
 * copy action is `TextInput` with a `CopyButton` in `trailing`. Replaces 1.x
 * `CopyInput` (the outside button moves inside the field; `width` → `fillWidth`, `isMonospace` →
-* `family`, `labelTooltip` → wrap in `Field`).
+* `family`; `labelTooltip` and `description` render through the input's own Field since 2.5).
 */
 /** A read-only field with an in-field copy button: `TextInput isReadOnly` + `CopyButton`. */
 var CopyInput = forwardRef(function CopyInput(props, ref) {

package/dist/inputs/CronInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Canonical rungs; CronInput supports all five (the Input rung table). */
 export declare enum CronInputSize {
     /** 20px field, caption text, 12px icon. */
@@ -61,8 +61,12 @@ export interface CronInputProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap the input in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /**
      * Shown in the field while the expression is empty. Never the label.
      * @default Select schedule…

package/dist/inputs/CronInput.js

@@ -535,7 +535,7 @@ var ExpressionSlot = /*#__PURE__*/ styled("div")({
 });
 /** The field, the trailing parts and the schedule panel, wired to the nearest Field. */
 function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = CRON_INPUT_DEFAULT_VALUE, onChange, presets = CRON_INPUT_DEFAULT_PRESETS, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder = "Select schedule…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = cronProps;
+	const { value, defaultValue = CRON_INPUT_DEFAULT_VALUE, onChange, presets = CRON_INPUT_DEFAULT_PRESETS, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder = "Select schedule…", error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = cronProps;
 	const isBare = useIsBareField();
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
@@ -878,12 +878,14 @@ function CronInputFrame({ cronProps, forwardedRef, isRoot }) {
 }
 /** A five-field cron expression in a field that opens presets and a schedule builder. */
 var CronInput = forwardRef(function CronInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "CronInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: CRON_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/DateInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Canonical rungs; DateInput supports all five (the Input rung table). */
 export declare enum DateInputSize {
     /** 20px field, caption text, 12px icon. */
@@ -74,8 +74,12 @@ interface DateInputBaseProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap the input in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /**
      * Shown in the field while there is no value. Never the label.
      * @default Select date… (Select dates… with isRange)

package/dist/inputs/DateInput.js

@@ -477,7 +477,7 @@ function monthGrid(view) {
 }
 /** The field, the trailing parts and the calendar panel, wired to the nearest Field. */
 function DateInputFrame({ dateProps, forwardedRef, isRoot }) {
-	const { isRange = false, value, defaultValue = null, onChange, presets, hasTime = false, min, max, timeZone, format, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = dateProps;
+	const { isRange = false, value, defaultValue = null, onChange, presets, hasTime = false, min, max, timeZone, format, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder, error, isError = false, isClearable = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = dateProps;
 	const isBare = useIsBareField();
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
@@ -1122,12 +1122,14 @@ var MINUTE_OPTIONS = Array.from({ length: 60 }, (_, minute) => ({
 }));
 /** Choose a date, a date and time, or a range of either, in a field that opens a calendar. */
 var DateInput = forwardRef(function DateInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "DateInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: DATE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/DurationInput.d.ts

@@ -1,4 +1,4 @@
-import { type AriaAttributes, type CSSProperties } from "react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 /** Canonical rungs; DurationInput supports all five (the Input rung table). */
 export declare enum DurationInputSize {
     /** 20px field, caption text. */
@@ -56,8 +56,12 @@ export interface DurationInputProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout or `actions`, wrap the input in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid` on each segment. */
     error?: string;
     /**

package/dist/inputs/DurationInput.js

@@ -191,7 +191,7 @@ var DISABLED_CSS = "gx-DurationInput-DISABLED_CSS-d1j9h77i";
 var FILL_WIDTH_CSS = "gx-DurationInput-FILL_WIDTH_CSS-f4chal5";
 /** The frame and its three segments, wired to the nearest Field (the input's own or the app's). */
 function DurationFrame({ durationProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = null, onChange, min = 0, max, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = durationProps;
+	const { value, defaultValue = null, onChange, min = 0, max, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = durationProps;
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -409,12 +409,14 @@ function DurationFrame({ durationProps, forwardedRef, isRoot }) {
 }
 /** A length of time in hours, minutes and seconds; the value is milliseconds. */
 var DurationInput = forwardRef(function DurationInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
 	const { id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "DurationInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: DURATION_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/FileInput.d.ts

@@ -57,8 +57,12 @@ export interface FileInputProps extends AriaAttributes {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the control, rendered through `Field`. For a description (the accepted types and limits), wrap it in `Field` instead. */
+    /** Label above the control, rendered through `Field`. For a horizontal layout or `actions`, wrap it in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label (the accepted types and limits), through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /**
      * Text in the drop zone above the button.
      * @default "Drop files here" ("Drop a file here" without isMultiple)

package/dist/inputs/FileInput.js

@@ -215,7 +215,7 @@ function readDrop(transfer) {
 }
 /** The group, the zone and the file list, wired to the nearest Field (the input's own or the app's). */
 function FileGroup({ fileProps, forwardedRef, isRoot }) {
-	const { value, defaultValue = [], onChange, onReject, accept, isMultiple = false, renderFileActions, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = fileProps;
+	const { value, defaultValue = [], onChange, onReject, accept, isMultiple = false, renderFileActions, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = fileProps;
 	const { field, controlId: groupId, describedBy: buttonDescribedBy, isInvalid, hasName } = useFieldWiring({
 		id,
 		ariaLabel,
@@ -445,11 +445,13 @@ function FileGroup({ fileProps, forwardedRef, isRoot }) {
 }
 /** A drop zone and a "Choose files" button over a hidden native file input, with the chosen files listed. */
 var FileInput = forwardRef(function FileInput(props, ref) {
-	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
+	const { label, error, labelTooltip, description, isRequired = false, size = "MEDIUM", fillWidth = false, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "FileInput",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: FILE_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,

package/dist/inputs/Input.d.ts

@@ -60,6 +60,8 @@ interface InputNativeProps {
     onBlur?: NativeInputAttributes["onBlur"];
     /** Key-down handler on the `<input>`. Runs before the `onEnter` check; `preventDefault()` skips `onEnter`. */
     onKeyDown?: NativeInputAttributes["onKeyDown"];
+    /** Paste handler on the `<input>`. `preventDefault()` keeps the browser from writing the clipboard text, so the app can store it itself (a multi-line secret). */
+    onPaste?: NativeInputAttributes["onPaste"];
 }
 export interface InputProps extends AriaAttributes, InputNativeProps {
     /** The native input type. The typed wrappers set it, and apps render a wrapper (`TextInput`). */
@@ -91,8 +93,12 @@ export interface InputProps extends AriaAttributes, InputNativeProps {
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the field, rendered through `Field`. For anything more, wrap the input in `Field`. */
+    /** Label above the field, rendered through `Field`. For a horizontal layout, a counter or `actions`, wrap the input in `Field`. */
     label?: string;
+    /** Hint behind an info icon beside the label, shown in a `Tooltip` (through `Field`). */
+    labelTooltip?: string | ReactNode;
+    /** Help copy under the label, through `Field`. Text and inline `Link`s only. */
+    description?: ReactNode;
     /** Hint shown while the value is empty. It is never the label. */
     placeholder?: string;
     /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid`. */

package/dist/inputs/Input.js

@@ -32,8 +32,9 @@ import { XIcon } from "@phosphor-icons/react";
 *
 * 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).
+* Replaces 1.x `Input` (no longer generic; `parse`, `min`/`max`/`step`, `width`, `InputLabel` and
+* the `getInput*` theme helpers are gone; `labelTooltip` and `description` render through the
+* input's own Field since 2.5).
 */
 /** Canonical rungs; Input supports all five. Shared by the text-like inputs that wrap Input. */
 var InputSize = /* @__PURE__ */ function(InputSize) {
@@ -233,7 +234,7 @@ var INPUT_SIZE_TO_FIELD_SIZE_MAP = {
 };
 /** 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 { type, value, defaultValue = "", onChange, onEnter, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, 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);
@@ -350,11 +351,13 @@ function InputFrame({ inputProps, forwardedRef, isRoot }) {
 /** 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 { labelTooltip, description, id, className, style } = props;
 	const ownField = useOwnField({
 		componentName: "Input",
 		label,
 		error,
+		labelTooltip,
+		description,
 		isRequired,
 		size: INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
 		id,