@yahoo/uds 3.125.0 → 3.126.0

package/dist/components/Banner/BannerDescription.d.ts

@@ -0,0 +1,36 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerDescription.d.ts
+type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
+interface BannerDescriptionProps extends HtmlSpanProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * **Styled description for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner description typography tokens and truncates text to
+ * 3 lines. Use this subcomponent instead of the `description` prop when
+ * you need rich ReactNode content.
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="alert" startIcon={Error}>
+ *   <BannerContent>
+ *     <BannerTitle>Something went wrong</BannerTitle>
+ *     <BannerDescription>
+ *       Please try again or <Link href="/support">contact support</Link>.
+ *     </BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerDescription: react.ForwardRefExoticComponent<BannerDescriptionProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { BannerDescription, type BannerDescriptionProps };

package/dist/components/Banner/BannerDescription.js

@@ -0,0 +1,45 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Text } from "../Text.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Banner/BannerDescription.tsx
+/**
+* **Styled description for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner description typography tokens and truncates text to
+* 3 lines. Use this subcomponent instead of the `description` prop when
+* you need rich ReactNode content.
+*
+* @example
+* ```tsx
+* <Banner variant="alert" startIcon={Error}>
+*   <BannerContent>
+*     <BannerTitle>Something went wrong</BannerTitle>
+*     <BannerDescription>
+*       Please try again or <Link href="/support">contact support</Link>.
+*     </BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerDescription = forwardRef(function BannerDescription({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		className: cx(getStyles({
+			bannerSizeDescription: "default",
+			className: "w-full line-clamp-3"
+		}), className),
+		...rest,
+		children
+	});
+});
+BannerDescription.displayName = "BannerDescription";
+
+//#endregion
+export { BannerDescription };

package/dist/components/Banner/BannerTitle.cjs

@@ -0,0 +1,42 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+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");
+
+//#region src/components/Banner/BannerTitle.tsx
+/**
+* **Styled title for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner title typography tokens. Renders a single line of text.
+* Use this subcomponent instead of the `title` prop when you need rich
+* ReactNode content (e.g. bold segments, inline icons).
+*
+* @example
+* ```tsx
+* <Banner variant="info" startIcon={Info}>
+*   <BannerContent>
+*     <BannerTitle>Update <strong>available</strong></BannerTitle>
+*     <BannerDescription>A new version is ready to install.</BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerTitle = (0, react.forwardRef)(function BannerTitle({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		ref,
+		className: require_styles_styler.cx(require_styles_styler.getStyles({ bannerSizeTitle: "default" }), "w-full truncate", className),
+		...rest,
+		children
+	});
+});
+BannerTitle.displayName = "BannerTitle";
+
+//#endregion
+exports.BannerTitle = BannerTitle;

package/dist/components/Banner/BannerTitle.d.cts

@@ -0,0 +1,34 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerTitle.d.ts
+type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
+interface BannerTitleProps extends HtmlSpanProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * **Styled title for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner title typography tokens. Renders a single line of text.
+ * Use this subcomponent instead of the `title` prop when you need rich
+ * ReactNode content (e.g. bold segments, inline icons).
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="info" startIcon={Info}>
+ *   <BannerContent>
+ *     <BannerTitle>Update <strong>available</strong></BannerTitle>
+ *     <BannerDescription>A new version is ready to install.</BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerTitle: react.ForwardRefExoticComponent<BannerTitleProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { BannerTitle, type BannerTitleProps };

package/dist/components/Banner/BannerTitle.d.ts

@@ -0,0 +1,34 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerTitle.d.ts
+type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
+interface BannerTitleProps extends HtmlSpanProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * **Styled title for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner title typography tokens. Renders a single line of text.
+ * Use this subcomponent instead of the `title` prop when you need rich
+ * ReactNode content (e.g. bold segments, inline icons).
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="info" startIcon={Info}>
+ *   <BannerContent>
+ *     <BannerTitle>Update <strong>available</strong></BannerTitle>
+ *     <BannerDescription>A new version is ready to install.</BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerTitle: react.ForwardRefExoticComponent<BannerTitleProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { BannerTitle, type BannerTitleProps };

package/dist/components/Banner/BannerTitle.js

@@ -0,0 +1,40 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Text } from "../Text.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Banner/BannerTitle.tsx
+/**
+* **Styled title for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner title typography tokens. Renders a single line of text.
+* Use this subcomponent instead of the `title` prop when you need rich
+* ReactNode content (e.g. bold segments, inline icons).
+*
+* @example
+* ```tsx
+* <Banner variant="info" startIcon={Info}>
+*   <BannerContent>
+*     <BannerTitle>Update <strong>available</strong></BannerTitle>
+*     <BannerDescription>A new version is ready to install.</BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerTitle = forwardRef(function BannerTitle({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Text, {
+		ref,
+		className: cx(getStyles({ bannerSizeTitle: "default" }), "w-full truncate", className),
+		...rest,
+		children
+	});
+});
+BannerTitle.displayName = "BannerTitle";
+
+//#endregion
+export { BannerTitle };

package/dist/components/Banner/index.cjs

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_components_Banner_Banner = require('./Banner.cjs');
+const require_components_Banner_BannerContent = require('./BannerContent.cjs');
+const require_components_Banner_BannerDescription = require('./BannerDescription.cjs');
+const require_components_Banner_BannerTitle = require('./BannerTitle.cjs');
+
+exports.Banner = require_components_Banner_Banner.Banner;
+exports.BannerContent = require_components_Banner_BannerContent.BannerContent;
+exports.BannerDescription = require_components_Banner_BannerDescription.BannerDescription;
+exports.BannerTitle = require_components_Banner_BannerTitle.BannerTitle;

package/dist/components/Banner/index.d.cts

@@ -0,0 +1,6 @@
+
+import { Banner, BannerProps } from "./Banner.cjs";
+import { BannerContent, BannerContentProps } from "./BannerContent.cjs";
+import { BannerDescription, BannerDescriptionProps } from "./BannerDescription.cjs";
+import { BannerTitle, BannerTitleProps } from "./BannerTitle.cjs";
+export { Banner, BannerContent, type BannerContentProps, BannerDescription, type BannerDescriptionProps, type BannerProps, BannerTitle, type BannerTitleProps };

package/dist/components/Banner/index.d.ts

@@ -0,0 +1,6 @@
+
+import { Banner, BannerProps } from "./Banner.js";
+import { BannerContent, BannerContentProps } from "./BannerContent.js";
+import { BannerDescription, BannerDescriptionProps } from "./BannerDescription.js";
+import { BannerTitle, BannerTitleProps } from "./BannerTitle.js";
+export { Banner, BannerContent, type BannerContentProps, BannerDescription, type BannerDescriptionProps, type BannerProps, BannerTitle, type BannerTitleProps };

package/dist/components/Banner/index.js

@@ -0,0 +1,7 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { Banner } from "./Banner.js";
+import { BannerContent } from "./BannerContent.js";
+import { BannerDescription } from "./BannerDescription.js";
+import { BannerTitle } from "./BannerTitle.js";
+
+export { Banner, BannerContent, BannerDescription, BannerTitle };

package/dist/components/Banner/utils.cjs

@@ -0,0 +1,56 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/Banner/utils.ts
+/**
+* Maps banner variants to button variants following the Figma spec.
+* Secondary banner variants map to secondary button variants.
+*/
+const BANNER_TO_BUTTON_VARIANT = {
+	primary: "brand",
+	secondary: "brand",
+	brand: "brand",
+	"brand-secondary": "brand-secondary",
+	alert: "alert",
+	"alert-secondary": "alert-secondary",
+	warning: "warning",
+	"warning-secondary": "warning-secondary",
+	success: "positive",
+	"success-secondary": "positive-secondary",
+	info: "info",
+	"info-secondary": "info-secondary"
+};
+/**
+* Checks whether a React element has a specific displayName.
+* Handles both regular function components and forwardRef components
+* (which have typeof type === 'object').
+*/
+function hasDisplayName(child, name) {
+	if (!(0, react.isValidElement)(child)) return false;
+	const type = child.type;
+	return (typeof type === "function" || typeof type === "object" && type !== null) && "displayName" in type && type.displayName === name;
+}
+/**
+* Separates Banner children into content (BannerContent) and action elements.
+* Skips falsy children so conditional patterns like {show && <Button />} work.
+*/
+function separateChildren(children) {
+	let content = null;
+	const actions = [];
+	react.Children.forEach(children, (child) => {
+		if (child == null || child === false || child === true || child === "") return;
+		if (hasDisplayName(child, "BannerContent")) content = child;
+		else actions.push(child);
+	});
+	return {
+		content,
+		actions
+	};
+}
+
+//#endregion
+exports.BANNER_TO_BUTTON_VARIANT = BANNER_TO_BUTTON_VARIANT;
+exports.hasDisplayName = hasDisplayName;
+exports.separateChildren = separateChildren;

package/dist/components/Banner/utils.d.cts

@@ -0,0 +1,26 @@
+
+import { BannerVariant } from "../../types/dist/index.cjs";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/utils.d.ts
+/**
+ * Maps banner variants to button variants following the Figma spec.
+ * Secondary banner variants map to secondary button variants.
+ */
+declare const BANNER_TO_BUTTON_VARIANT: Record<BannerVariant, string>;
+/**
+ * Checks whether a React element has a specific displayName.
+ * Handles both regular function components and forwardRef components
+ * (which have typeof type === 'object').
+ */
+declare function hasDisplayName(child: ReactNode, name: string): boolean;
+/**
+ * Separates Banner children into content (BannerContent) and action elements.
+ * Skips falsy children so conditional patterns like {show && <Button />} work.
+ */
+declare function separateChildren(children: ReactNode): {
+  content: ReactNode | null;
+  actions: ReactNode[];
+};
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };

package/dist/components/Banner/utils.d.ts

@@ -0,0 +1,26 @@
+
+import { BannerVariant } from "../../types/dist/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/utils.d.ts
+/**
+ * Maps banner variants to button variants following the Figma spec.
+ * Secondary banner variants map to secondary button variants.
+ */
+declare const BANNER_TO_BUTTON_VARIANT: Record<BannerVariant, string>;
+/**
+ * Checks whether a React element has a specific displayName.
+ * Handles both regular function components and forwardRef components
+ * (which have typeof type === 'object').
+ */
+declare function hasDisplayName(child: ReactNode, name: string): boolean;
+/**
+ * Separates Banner children into content (BannerContent) and action elements.
+ * Skips falsy children so conditional patterns like {show && <Button />} work.
+ */
+declare function separateChildren(children: ReactNode): {
+  content: ReactNode | null;
+  actions: ReactNode[];
+};
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };

package/dist/components/Banner/utils.js

@@ -0,0 +1,52 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { Children, isValidElement } from "react";
+
+//#region src/components/Banner/utils.ts
+/**
+* Maps banner variants to button variants following the Figma spec.
+* Secondary banner variants map to secondary button variants.
+*/
+const BANNER_TO_BUTTON_VARIANT = {
+	primary: "brand",
+	secondary: "brand",
+	brand: "brand",
+	"brand-secondary": "brand-secondary",
+	alert: "alert",
+	"alert-secondary": "alert-secondary",
+	warning: "warning",
+	"warning-secondary": "warning-secondary",
+	success: "positive",
+	"success-secondary": "positive-secondary",
+	info: "info",
+	"info-secondary": "info-secondary"
+};
+/**
+* Checks whether a React element has a specific displayName.
+* Handles both regular function components and forwardRef components
+* (which have typeof type === 'object').
+*/
+function hasDisplayName(child, name) {
+	if (!isValidElement(child)) return false;
+	const type = child.type;
+	return (typeof type === "function" || typeof type === "object" && type !== null) && "displayName" in type && type.displayName === name;
+}
+/**
+* Separates Banner children into content (BannerContent) and action elements.
+* Skips falsy children so conditional patterns like {show && <Button />} work.
+*/
+function separateChildren(children) {
+	let content = null;
+	const actions = [];
+	Children.forEach(children, (child) => {
+		if (child == null || child === false || child === true || child === "") return;
+		if (hasDisplayName(child, "BannerContent")) content = child;
+		else actions.push(child);
+	});
+	return {
+		content,
+		actions
+	};
+}
+
+//#endregion
+export { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren };

package/dist/components/Divider/DividerCore.cjs

@@ -2,9 +2,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_Text = require('../Text.cjs');
 const require_components_Box = require('../Box.cjs');
 const require_components_HStack = require('../HStack.cjs');
-const require_components_Text = require('../Text.cjs');
 const require_components_VStack = require('../VStack.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/Divider/DividerCore.js

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

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