@yahoo/uds 3.125.0 → 3.125.1

package/dist/components/FormLabel.cjs

@@ -3,15 +3,17 @@ 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_Text = require('./Text.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 
 //#region src/components/FormLabel.tsx
-const FormLabel = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }) => {
+const FormLabel = (0, react.forwardRef)(function FormLabel({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }, ref) {
 	const contents = label ? (0, lodash_isFunction_js.default)(label) ? label() : label : children;
 	if (!contents) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Text.Text, {
+		ref,
 		variant,
 		color,
 		as,
@@ -27,7 +29,7 @@ const FormLabel = ({ htmlFor, required, label, children, color = "muted", varian
 			children: "*"
 		})]
 	});
-};
+});
 FormLabel.displayName = "FormLabel";
 
 //#endregion

package/dist/components/FormLabel.d.cts

@@ -1,27 +1,12 @@
 
 import { UniversalFormLabelProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
+import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: {
-  ({
-    htmlFor,
-    required,
-    label,
-    children,
-    color,
-    variant,
-    hasError,
-    showRequiredAsterisk,
-    as,
-    className,
-    ...rest
-  }: FormLabelProps): react_jsx_runtime0.JSX.Element | null;
-  displayName: string;
-};
+declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.d.ts

@@ -1,27 +1,12 @@
 
 import { UniversalFormLabelProps } from "../types/dist/index.js";
 import "../tokens/index.js";
+import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: {
-  ({
-    htmlFor,
-    required,
-    label,
-    children,
-    color,
-    variant,
-    hasError,
-    showRequiredAsterisk,
-    as,
-    className,
-    ...rest
-  }: FormLabelProps): react_jsx_runtime0.JSX.Element | null;
-  displayName: string;
-};
+declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.js

@@ -1,14 +1,16 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { cx } from "../styles/styler.js";
 import { Text } from "./Text.js";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { isFunction } from "lodash-es";
 
 //#region src/components/FormLabel.tsx
-const FormLabel = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }) => {
+const FormLabel = forwardRef(function FormLabel({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }, ref) {
 	const contents = label ? isFunction(label) ? label() : label : children;
 	if (!contents) return null;
 	return /* @__PURE__ */ jsxs(Text, {
+		ref,
 		variant,
 		color,
 		as,
@@ -24,7 +26,7 @@ const FormLabel = ({ htmlFor, required, label, children, color = "muted", varian
 			children: "*"
 		})]
 	});
-};
+});
 FormLabel.displayName = "FormLabel";
 
 //#endregion

package/dist/components/Image.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_styles_styler = require('../styles/styler.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Image.tsx
@@ -28,8 +29,9 @@ let react_jsx_runtime = require("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 = (0, react.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__ */ (0, react_jsx_runtime.jsx)("img", {
+		ref,
 		src,
 		alt,
 		className: require_styles_styler.getStyles({
@@ -90,7 +92,7 @@ function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, b
 		},
 		...props
 	});
-}
+});
 Image.displayName = "Image";
 
 //#endregion

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/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/Checkbox.cjs

@@ -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

@@ -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/Input/Input.cjs

@@ -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

@@ -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

@@ -9,7 +9,7 @@ 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 };

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

@@ -3,11 +3,11 @@
 import { cx, getStyles } from "../../../styles/styler.js";
 import { HStack } from "../../HStack.js";
 import { IconSlot } from "../../IconSlot.js";
-import { memo } from "react";
+import { forwardRef, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/client/Input/InputHelpTextInternal.tsx
-function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }) {
+const InputHelpTextInternal = forwardRef(function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size, isFilled, ...rest }, ref) {
 	const defaultIconProps = { variant: "outline" };
 	const classNames = {
 		helperText: cx(getStyles({
@@ -28,6 +28,7 @@ function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size,
 	return /* @__PURE__ */ jsxs(HStack, {
 		gap: "1",
 		alignItems: "center",
+		ref,
 		...rest,
 		children: [
 			startIcon && /* @__PURE__ */ jsx(IconSlot, {
@@ -48,7 +49,7 @@ function InputHelpTextInternal({ startIcon, endIcon, iconProps, children, size,
 			})
 		]
 	});
-}
+});
 InputHelpTextInternal.displayName = "InputHelpTextInternal";
 const InputHelpTextInternalMemo = memo(InputHelpTextInternal);
 

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "hideEndIcon" | "rootProps" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -89,6 +89,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "hideEndIcon" | "rootProps"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "hideEndIcon" | "rootProps" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts

@@ -29,7 +29,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts

@@ -30,7 +30,7 @@ declare function usePopoverConfig(sizeProp?: PopoverSize | undefined, variantPro
   gap: SpacingAlias;
   dismissButtonSpacing: SpacingAlias;
   dismissIconSize: number;
-  ariaKitPlacement: ("top-start" | "top-end" | "bottom-start" | "bottom-end" | ("top" | "bottom" | "left" | "right") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
+  ariaKitPlacement: ("bottom-start" | "bottom-end" | "top-start" | "top-end" | ("bottom" | "left" | "right" | "top") | "left-start" | "right-start" | "left-end" | "right-end") | undefined;
   animationDuration: number;
 };
 //#endregion

package/dist/components/client/Radio/Radio.cjs

@@ -52,7 +52,7 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, layerClassNames, ...radioProps }, parentRef) {
+const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-radio-${generatedId}`;
 	const innerRef = (0, react.useRef)(null);
@@ -171,6 +171,7 @@ const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label,
 		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/Radio/Radio.js

@@ -49,7 +49,7 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, layerClassNames, ...radioProps }, parentRef) {
+const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, layerClassNames, ...radioProps }, parentRef) {
 	const generatedId = useId();
 	const uid = id ?? `uds-radio-${generatedId}`;
 	const innerRef = useRef(null);
@@ -168,6 +168,7 @@ const Radio = forwardRef(function Radio({ id, name: nameProp, label, labelPositi
 		children: /* @__PURE__ */ jsxs(RootElement, {
 			className: classNames.root,
 			"data-testid": "container",
+			style,
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			onTapStart: handleTapStart,

package/dist/components/client/Switch.cjs

@@ -46,7 +46,7 @@ const toggleTransition = {
 *
 * @related [Checkbox](https://uds.build/docs/components/checkbox).
 **/
-const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, layerClassNames, ...switchProps }, parentRef) {
+const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defaultIsOn, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, reduceMotion: forceReduceMotion, disabled, required, onFocus, onBlur, className, style, layerClassNames, ...switchProps }, parentRef) {
 	const generatedId = (0, react.useId)();
 	const uid = id ?? `uds-input-${generatedId}`;
 	const innerRef = (0, react.useRef)(null);
@@ -153,6 +153,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
 			className: classNames.root,
 			"data-testid": "container",
+			style,
 			onHoverStart: handleHoverStart,
 			onHoverEnd: handleHoverEnd,
 			tabIndex: -1,
@@ -175,8 +176,7 @@ const Switch = (0, react.forwardRef)(function Switch({ id, isOn: isOnProp, defau
 					checked: isControlled ? isOn : void 0,
 					defaultChecked: isControlled ? void 0 : defaultIsOn,
 					onChange: handleChange,
-					className: classNames.htmlCheckbox,
-					style: {}
+					className: classNames.htmlCheckbox
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
 					className: classNames.handle,
 					...motionInitialAndAnimate,