@yahoo/uds 3.125.0 → 3.126.0

package/dist/components/Image.d.cts

@@ -1,7 +1,7 @@
 
 import { ImagePropsWithImgProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/Image.d.ts
 /**
@@ -32,65 +32,6 @@ type ImageProps = ImagePropsWithImgProps;
  *
  * @related [Box](https://uds.build/docs/components/box)
  */
-declare function Image({
-  width: imageWidth,
-  height: imageHeight,
-  src,
-  alt,
-  contentFit,
-  backgroundColor,
-  borderRadius,
-  borderTopStartRadius,
-  borderTopEndRadius,
-  borderBottomStartRadius,
-  borderBottomEndRadius,
-  borderColor,
-  borderStartColor,
-  borderEndColor,
-  borderTopColor,
-  borderBottomColor,
-  borderWidth,
-  borderVerticalWidth,
-  borderHorizontalWidth,
-  borderStartWidth,
-  borderEndWidth,
-  borderTopWidth,
-  borderBottomWidth,
-  alignContent,
-  alignItems,
-  alignSelf,
-  flex,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  flexWrap,
-  justifyContent,
-  flexBasis,
-  display,
-  overflow,
-  overflowX,
-  overflowY,
-  position,
-  spacing,
-  spacingHorizontal,
-  spacingVertical,
-  spacingBottom,
-  spacingEnd,
-  spacingStart,
-  spacingTop,
-  offset,
-  offsetVertical,
-  offsetHorizontal,
-  offsetBottom,
-  offsetEnd,
-  offsetStart,
-  offsetTop,
-  columnGap,
-  rowGap,
-  ...props
-}: ImageProps): react_jsx_runtime0.JSX.Element;
-declare namespace Image {
-  var displayName: string;
-}
+declare const Image: react.ForwardRefExoticComponent<ImagePropsWithImgProps & react.RefAttributes<HTMLImageElement>>;
 //#endregion
 export { Image, type ImageProps };

package/dist/components/Image.d.ts

@@ -1,7 +1,7 @@
 
 import { ImagePropsWithImgProps } from "../types/dist/index.js";
 import "../tokens/index.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/Image.d.ts
 /**
@@ -32,65 +32,6 @@ type ImageProps = ImagePropsWithImgProps;
  *
  * @related [Box](https://uds.build/docs/components/box)
  */
-declare function Image({
-  width: imageWidth,
-  height: imageHeight,
-  src,
-  alt,
-  contentFit,
-  backgroundColor,
-  borderRadius,
-  borderTopStartRadius,
-  borderTopEndRadius,
-  borderBottomStartRadius,
-  borderBottomEndRadius,
-  borderColor,
-  borderStartColor,
-  borderEndColor,
-  borderTopColor,
-  borderBottomColor,
-  borderWidth,
-  borderVerticalWidth,
-  borderHorizontalWidth,
-  borderStartWidth,
-  borderEndWidth,
-  borderTopWidth,
-  borderBottomWidth,
-  alignContent,
-  alignItems,
-  alignSelf,
-  flex,
-  flexDirection,
-  flexGrow,
-  flexShrink,
-  flexWrap,
-  justifyContent,
-  flexBasis,
-  display,
-  overflow,
-  overflowX,
-  overflowY,
-  position,
-  spacing,
-  spacingHorizontal,
-  spacingVertical,
-  spacingBottom,
-  spacingEnd,
-  spacingStart,
-  spacingTop,
-  offset,
-  offsetVertical,
-  offsetHorizontal,
-  offsetBottom,
-  offsetEnd,
-  offsetStart,
-  offsetTop,
-  columnGap,
-  rowGap,
-  ...props
-}: ImageProps): react_jsx_runtime0.JSX.Element;
-declare namespace Image {
-  var displayName: string;
-}
+declare const Image: react.ForwardRefExoticComponent<ImagePropsWithImgProps & react.RefAttributes<HTMLImageElement>>;
 //#endregion
 export { Image, type ImageProps };

package/dist/components/Image.js

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { getStyles } from "../styles/styler.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Image.tsx
@@ -26,8 +27,9 @@ import { jsx } from "react/jsx-runtime";
 *
 * @related [Box](https://uds.build/docs/components/box)
 */
-function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }) {
+const Image = forwardRef(function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }, ref) {
 	return /* @__PURE__ */ jsx("img", {
+		ref,
 		src,
 		alt,
 		className: getStyles({
@@ -88,7 +90,7 @@ function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, b
 		},
 		...props
 	});
-}
+});
 Image.displayName = "Image";
 
 //#endregion

package/dist/components/client/Avatar/AvatarIcon.cjs

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_Box = require('../../Box.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_Box = require('../../Box.cjs');
 const require_components_client_Avatar_utils = require('./utils.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 
 //#region src/components/client/Avatar/AvatarIcon.tsx
 /** Maps avatar variant to icon */

package/dist/components/client/Avatar/AvatarIcon.js

@@ -1,12 +1,12 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { Box } from "../../Box.js";
 import { IconSlot } from "../../IconSlot.js";
+import { Box } from "../../Box.js";
 import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
+import { Building, Person } from "@yahoo/uds-icons";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Building, Person } from "@yahoo/uds-icons";
 
 //#region src/components/client/Avatar/AvatarIcon.tsx
 /** Maps avatar variant to icon */

package/dist/components/client/Avatar/AvatarImage.cjs

@@ -69,6 +69,7 @@ const AvatarImage = (0, react.forwardRef)(({ size = require_components_client_Av
 	});
 	const sharedProps = {
 		...props,
+		className,
 		size,
 		customSize,
 		variant

package/dist/components/client/Avatar/AvatarImage.js

@@ -67,6 +67,7 @@ const AvatarImage = forwardRef(({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_
 	});
 	const sharedProps = {
 		...props,
+		className,
 		size,
 		customSize,
 		variant

package/dist/components/client/Avatar/AvatarText.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_Box = require('../../Box.cjs');
 const require_components_Text = require('../../Text.cjs');
+const require_components_Box = require('../../Box.cjs');
 const require_components_client_Avatar_utils = require('./utils.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/client/Avatar/AvatarText.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx } from "../../../styles/styler.js";
-import { Box } from "../../Box.js";
 import { Text } from "../../Text.js";
+import { Box } from "../../Box.js";
 import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation } from "./utils.js";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/client/Badge.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../styles/styler.cjs');
-const require_components_HStack = require('../HStack.cjs');
 const require_components_IconSlot = require('../IconSlot.cjs');
+const require_components_HStack = require('../HStack.cjs');
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/client/Badge.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../styles/styler.js";
-import { HStack } from "../HStack.js";
 import { IconSlot } from "../IconSlot.js";
+import { HStack } from "../HStack.js";
 import React, { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/components/client/BottomSheet/BottomSheetHeader.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_Box = require('../../Box.cjs');
 const require_components_Text = require('../../Text.cjs');
+const require_components_Box = require('../../Box.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/BottomSheet/BottomSheetHeader.tsx

package/dist/components/client/BottomSheet/BottomSheetHeader.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { Box } from "../../Box.js";
 import { Text } from "../../Text.js";
+import { Box } from "../../Box.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/client/BottomSheet/BottomSheetHeader.tsx

package/dist/components/client/Button.cjs

@@ -10,10 +10,10 @@ const require_components_IconSlot = require('../IconSlot.cjs');
 const require_generateDefaultClassName = require('../../automated-config/dist/utils/generateDefaultClassName.cjs');
 const require_components_client_buttonConstants = require('./buttonConstants.cjs');
 const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let motion_react = require("motion/react");
 
 //#region src/components/client/Button.tsx

package/dist/components/client/Button.js

@@ -8,9 +8,9 @@ import { IconSlot } from "../IconSlot.js";
 import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
 import { buttonIconSvgSize } from "./buttonConstants.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import { Progress } from "@yahoo/uds-icons";
 import React, { cloneElement, forwardRef, isValidElement, useImperativeHandle, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Progress } from "@yahoo/uds-icons";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
 //#region src/components/client/Button.tsx

package/dist/components/client/Checkbox.cjs

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_Icon = require('../Icon.cjs');
 const require_components_Box = require('../Box.cjs');
 const require_components_FormLabel = require('../FormLabel.cjs');
-const require_components_Icon = require('../Icon.cjs');
 const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let motion_react = require("motion/react");
 
 //#region src/components/client/Checkbox.tsx
@@ -58,7 +58,7 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
 **/
-const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, layerClassNames, ...checkboxProps }, parentRef) {
+const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, layerClassNames, ...checkboxProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const innerRef = (0, react.useRef)(null);
@@ -161,6 +161,7 @@ const Checkbox = (0, react.forwardRef)(function Checkbox({ id, checked: checkedP
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
 			className: classNames.root,
 			"data-testid": "container",
+			style,
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			onTapStart: handleTapStart,

package/dist/components/client/Checkbox.js

@@ -1,13 +1,13 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../styles/styler.js";
+import { Icon } from "../Icon.js";
 import { Box } from "../Box.js";
 import { FormLabel } from "../FormLabel.js";
-import { Icon } from "../Icon.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import { Check, Minus } from "@yahoo/uds-icons";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Minus } from "@yahoo/uds-icons";
 import { m, useReducedMotion } from "motion/react";
 
 //#region src/components/client/Checkbox.tsx
@@ -55,7 +55,7 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
 **/
-const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, layerClassNames, ...checkboxProps }, parentRef) {
+const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, layerClassNames, ...checkboxProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const innerRef = useRef(null);
@@ -158,6 +158,7 @@ const Checkbox = forwardRef(function Checkbox({ id, checked: checkedProp, defaul
 		children: /* @__PURE__ */ jsxs(RootElement, {
 			className: classNames.root,
 			"data-testid": "container",
+			style,
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			onTapStart: handleTapStart,

package/dist/components/client/Chip/ChipBase.cjs

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_HStack = require('../../HStack.cjs');
-const require_components_Text = require('../../Text.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_Text = require('../../Text.cjs');
+const require_components_HStack = require('../../HStack.cjs');
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/client/Chip/ChipBase.js

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
-import { HStack } from "../../HStack.js";
-import { Text } from "../../Text.js";
 import { IconSlot } from "../../IconSlot.js";
+import { Text } from "../../Text.js";
+import { HStack } from "../../HStack.js";
 import React, { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useReducedMotion } from "motion/react";

package/dist/components/client/Chip/ChipDismissible.cjs

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_client_Pressable = require('../Pressable.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_utils_mergeSlotProps = require('../../../utils/mergeSlotProps.cjs');
 const require_components_client_Chip_ChipBase = require('./ChipBase.cjs');
-const require_components_client_Pressable = require('../Pressable.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 
 //#region src/components/client/Chip/ChipDismissible.tsx
 const ChipDismissible = (0, react.forwardRef)(function ChipDismissible({ dismissButtonAriaLabel, onDismiss, dismissIcon, variant = require_components_client_Chip_ChipBase.VARIANT_DEFAULT, disabled, slotProps, className, ...rest }, ref) {

package/dist/components/client/Chip/ChipDismissible.js

@@ -1,13 +1,13 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
+import { Pressable } from "../Pressable.js";
 import { IconSlot } from "../../IconSlot.js";
 import { mergeSlotProps } from "../../../utils/mergeSlotProps.js";
 import { ChipBase, VARIANT_DEFAULT } from "./ChipBase.js";
-import { Pressable } from "../Pressable.js";
+import { Cross } from "@yahoo/uds-icons";
 import React, { forwardRef, useCallback, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Cross } from "@yahoo/uds-icons";
 
 //#region src/components/client/Chip/ChipDismissible.tsx
 const ChipDismissible = forwardRef(function ChipDismissible({ dismissButtonAriaLabel, onDismiss, dismissIcon, variant = VARIANT_DEFAULT, disabled, slotProps, className, ...rest }, ref) {

package/dist/components/client/IconButton.cjs

@@ -9,9 +9,9 @@ const require_generateDefaultClassName = require('../../automated-config/dist/ut
 const require_components_client_buttonConstants = require('./buttonConstants.cjs');
 const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
 const require_components_client_Button = require('./Button.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let motion_react = require("motion/react");
 
 //#region src/components/client/IconButton.tsx

package/dist/components/client/IconButton.js

@@ -7,9 +7,9 @@ import { generateDefaultClassName } from "../../automated-config/dist/utils/gene
 import { buttonIconSvgSize } from "./buttonConstants.js";
 import { SpringMotionConfig } from "./SpringMotionConfig.js";
 import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
+import { Progress } from "@yahoo/uds-icons";
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Progress } from "@yahoo/uds-icons";
 import { AnimatePresence, m, useReducedMotion } from "motion/react";
 
 //#region src/components/client/IconButton.tsx

package/dist/components/client/Input/Input.cjs

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_Box = require('../../Box.cjs');
 const require_components_HStack = require('../../HStack.cjs');
 const require_components_VStack = require('../../VStack.cjs');
-const require_components_IconSlot = require('../../IconSlot.cjs');
 const require_components_client_AnimateHeightChange = require('../AnimateHeightChange.cjs');
 const require_components_client_Input_InputHelpTextInternal = require('./InputHelpTextInternal.cjs');
 let react = require("react");
@@ -79,7 +79,7 @@ const EndIcon = (0, react.memo)(function EndIcon({ icon, className, iconProps })
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, className, ...otherProps }, forwardedRef) {
+const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -138,6 +138,7 @@ const Input = (0, react.forwardRef)(function Input({ id, label, type = "text", s
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_VStack.VStack, {
 		width: containerWidth,
 		className: classNames.root,
+		style,
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 				spacingBottom: "2",

package/dist/components/client/Input/Input.js

@@ -1,10 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
 import { Box } from "../../Box.js";
 import { HStack } from "../../HStack.js";
 import { VStack } from "../../VStack.js";
-import { IconSlot } from "../../IconSlot.js";
 import { AnimateHeightChange } from "../AnimateHeightChange.js";
 import { InputHelpTextInternal as InputHelpTextInternalMemo } from "./InputHelpTextInternal.js";
 import { forwardRef, memo, useCallback, useId, useImperativeHandle, useRef, useState } from "react";
@@ -76,7 +76,7 @@ const EndIcon = memo(function EndIcon({ icon, className, iconProps }) {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox), [Radio](https://uds.build/docs/components/radio).
 **/
-const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, className, ...otherProps }, forwardedRef) {
+const Input = forwardRef(function Input({ id, label, type = "text", size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, width: containerWidth = "full", defaultValue, required, readOnly, disabled, reduceMotion: forceReduceMotion, onChange, slotProps, style, className, ...otherProps }, forwardedRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const helpTextId = `uds-input-${uid}-help-text`;
@@ -135,6 +135,7 @@ const Input = forwardRef(function Input({ id, label, type = "text", size = "md",
 	return /* @__PURE__ */ jsxs(VStack, {
 		width: containerWidth,
 		className: classNames.root,
+		style,
 		children: [
 			label && /* @__PURE__ */ jsxs(Box, {
 				spacingBottom: "2",

package/dist/components/client/Input/InputHelpTextInternal.cjs

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../../../styles/styler.cjs');
-const require_components_HStack = require('../../HStack.cjs');
 const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_HStack = require('../../HStack.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }) {
+const InputHelpTextInternal = (0, react.forwardRef)(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: require_styles_styler.cx(require_styles_styler.getStyles({
@@ -30,6 +30,7 @@ function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
 		gap: "1",
 		alignItems: "center",
+		ref,
 		...rest,
 		children: [
 			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
@@ -50,7 +51,7 @@ function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size,
 			})
 		]
 	});
-}
+});
 InputHelpTextInternal.displayName = "InputHelpTextInternal";
 const InputHelpTextInternalMemo = (0, react.memo)(InputHelpTextInternal);
 

package/dist/components/client/Input/InputHelpTextInternal.d.cts

@@ -5,7 +5,6 @@ import { IconProps } from "../../Icon.cjs";
 import { InputProps } from "./Input.cjs";
 import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
 interface InputHelpTextInternalProps extends PropsWithChildren {
@@ -21,18 +20,6 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   size?: InputProps['size'];
   isFilled?: boolean;
 }
-declare function InputHelpTextInternal({
-  startIcon,
-  endIcon,
-  iconProps,
-  children,
-  size,
-  isFilled,
-  ...rest
-}: InputHelpTextInternalProps): react_jsx_runtime0.JSX.Element;
-declare namespace InputHelpTextInternal {
-  var displayName: string;
-}
-declare const InputHelpTextInternalMemo: react.MemoExoticComponent<typeof InputHelpTextInternal>;
+declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputHelpTextInternalMemo as InputHelpTextInternal, type InputHelpTextInternalProps };

package/dist/components/client/Input/InputHelpTextInternal.d.ts

@@ -6,7 +6,6 @@ import { IconProps } from "../../Icon.js";
 import { InputProps } from "./Input.js";
 import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/client/Input/InputHelpTextInternal.d.ts
 interface InputHelpTextInternalProps extends PropsWithChildren {
@@ -22,18 +21,6 @@ interface InputHelpTextInternalProps extends PropsWithChildren {
   size?: InputProps['size'];
   isFilled?: boolean;
 }
-declare function InputHelpTextInternal({
-  startIcon,
-  endIcon,
-  iconProps,
-  children,
-  size,
-  isFilled,
-  ...rest
-}: InputHelpTextInternalProps): react_jsx_runtime0.JSX.Element;
-declare namespace InputHelpTextInternal {
-  var displayName: string;
-}
-declare const InputHelpTextInternalMemo: react.MemoExoticComponent<typeof InputHelpTextInternal>;
+declare const InputHelpTextInternalMemo: react.NamedExoticComponent<InputHelpTextInternalProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { InputHelpTextInternalMemo as InputHelpTextInternal, type InputHelpTextInternalProps };