/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
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
/**
* **📸 A component for displaying images**
*
* @description
* Wrapper for the image element. In the future, may provide additional
* functionality for handling fallbacks, dark mode, lazy loading, shimmers.
*
* @example
* ```tsx
* import { Image } from '@yahoo/uds';
*
* <Image src="/images/profile.png" width={580} height={334} />;
* ```
*
* @usage
* - Use the `Image` component to display images.
* - Use `width` and `height` props to set the size of the image.
* - Image extends the HTMLImageElement, as well as the uds `Box` component and supports all of their props.
*
* @see The {@link https://uds.build/docs/components/image Image Docs} for more info
*
* @related [Box](https://uds.build/docs/components/box)
*/
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({
			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
		}),
		style: {
			width: imageWidth,
			height: imageHeight
		},
		...props
	});
});
Image.displayName = "Image";
//#endregion
exports.Image = Image;
