@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/components/Icon.d.cts

@@ -0,0 +1,38 @@
+import { IconPropsWithSVGProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react3 from "react";
+
+//#region src/components/Icon.d.ts
+
+/**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
+ * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+ * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+ * `lg`. Each size also supports an outline and fill variant. Icons can be
+ * colored using the `color` prop.
+ *
+ * The component is available in the `@yahoo/uds` package but is meant to be used
+ * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+ * A separate package provides modularity from the core library, better
+ * versioning strategies, and tree shakeability.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds';
+ * import { AddFolder } from '@yahoo/uds-icons';
+ *
+ * <Icon name={AddFolder} variant="fill" size="sm" />
+ * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](https://uds.build/docs/components/icon-button)
+ */
+declare const Icon: react3.ForwardRefExoticComponent<IconPropsWithSVGProps & react3.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Icon, type IconPropsWithSVGProps as IconProps };

package/dist/components/Icon.d.ts

@@ -0,0 +1,38 @@
+import { IconPropsWithSVGProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react9 from "react";
+
+//#region src/components/Icon.d.ts
+
+/**
+ * **🎨 A component for displaying icons**
+ *
+ * @description
+ * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+ * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+ * `lg`. Each size also supports an outline and fill variant. Icons can be
+ * colored using the `color` prop.
+ *
+ * The component is available in the `@yahoo/uds` package but is meant to be used
+ * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+ * A separate package provides modularity from the core library, better
+ * versioning strategies, and tree shakeability.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from '@yahoo/uds';
+ * import { AddFolder } from '@yahoo/uds-icons';
+ *
+ * <Icon name={AddFolder} variant="fill" size="sm" />
+ * ```
+ *
+ * @usage
+ * - If you need to display an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+ *
+ * @related [IconButton](https://uds.build/docs/components/icon-button)
+ */
+declare const Icon: react9.ForwardRefExoticComponent<IconPropsWithSVGProps & react9.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Icon, type IconPropsWithSVGProps as IconProps };

package/dist/components/Icon.js

@@ -0,0 +1,66 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../styles/styler.js";
+import { normalIconSizes } from "../tokens/configs/sizes.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Icon.tsx
+/**
+* **🎨 A component for displaying icons**
+*
+* @description
+* [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
+* other items. They are available in four different sizes: `xs`, `sm`, `md`, and
+* `lg`. Each size also supports an outline and fill variant. Icons can be
+* colored using the `color` prop.
+*
+* The component is available in the `@yahoo/uds` package but is meant to be used
+* with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
+* A separate package provides modularity from the core library, better
+* versioning strategies, and tree shakeability.
+*
+* @example
+* ```tsx
+* import { Icon } from '@yahoo/uds';
+* import { AddFolder } from '@yahoo/uds-icons';
+*
+* <Icon name={AddFolder} variant="fill" size="sm" />
+* ```
+*
+* @usage
+* - If you need to display an icon.
+*
+* @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
+*
+* @related [IconButton](https://uds.build/docs/components/icon-button)
+*/
+const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
+	const availableVariants = SVGIcon.metadata?.variants ?? [];
+	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
+	const isMulticolor = effectiveVariant === "multicolor";
+	const styles = getStyles({
+		flex: "none",
+		color: isMulticolor ? void 0 : color,
+		className: cx(className, !isMulticolor && "[&_path]:fill-current")
+	});
+	const sizePx = normalIconSizes[size];
+	return /* @__PURE__ */ jsx("svg", {
+		ref,
+		xmlns: "http://www.w3.org/2000/svg",
+		width: sizePx,
+		height: sizePx,
+		viewBox: `0 0 ${sizePx} ${sizePx}`,
+		"aria-hidden": "true",
+		focusable: "false",
+		className: styles,
+		...props,
+		children: /* @__PURE__ */ jsx(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
+	});
+});
+Icon.displayName = "Icon";
+
+//#endregion
+export { Icon };

package/dist/components/IconSlot.cjs

@@ -0,0 +1,57 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../styles/styler.cjs');
+const require_components_Icon = require('./Icon.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let lodash_isFunction_js = require("lodash/isFunction.js");
+lodash_isFunction_js = require_rolldown_runtime.__toESM(lodash_isFunction_js);
+
+//#region src/components/IconSlot.tsx
+/**
+* A helper container to render a SvgIcon, Icon component, or ReactNode.
+*
+* Useful in components that use icons and have a startIcon and endIcon. It allows
+* consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+* need to override props on the icon. For example, pass an `<Icon>` to override
+* the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+*
+* Examples:
+* ```
+* <Input startIcon={Info} />
+* <Input startIcon={<Icon name={Info} variant="fill" />} />
+* <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+* <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+* ```
+*/
+const IconSlot = (0, react.memo)(function IconSlot$1({ icon, iconProps, className: slotClassName, ...rest }) {
+	if (!icon) return null;
+	const { className: iconPropsClassName, ...props } = iconProps || {};
+	const mergedClassName = require_styles_styler.cx(slotClassName, iconPropsClassName);
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+		name: svgIcon,
+		...props,
+		...rest,
+		className: mergedClassName
+	});
+	if ((0, lodash_isFunction_js.default)(icon)) {
+		const iconEl = icon(iconProps || {});
+		const renderedElementClassName = iconEl?.props.className;
+		return (0, react.isValidElement)(iconEl) && (0, react.cloneElement)(iconEl, {
+			...rest,
+			className: require_styles_styler.cx(mergedClassName, renderedElementClassName)
+		});
+	}
+	return (0, react.isValidElement)(icon) && (0, react.cloneElement)(icon, {
+		...props,
+		...icon.props,
+		...rest,
+		className: require_styles_styler.cx(mergedClassName, icon.props.className)
+	});
+});
+IconSlot.displayName = "IconSlot";
+
+//#endregion
+exports.IconSlot = IconSlot;

package/dist/components/IconSlot.d.cts

@@ -0,0 +1,31 @@
+import { IconPropsWithSVGProps, UniversalIconSlot } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import React from "react";
+
+//#region src/components/IconSlot.d.ts
+interface IconSlotProps {
+  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
+  icon?: UniversalIconSlot;
+  /** Props to spread onto the icon. */
+  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
+  className?: string;
+}
+/**
+ * A helper container to render a SvgIcon, Icon component, or ReactNode.
+ *
+ * Useful in components that use icons and have a startIcon and endIcon. It allows
+ * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+ * need to override props on the icon. For example, pass an `<Icon>` to override
+ * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+ *
+ * Examples:
+ * ```
+ * <Input startIcon={Info} />
+ * <Input startIcon={<Icon name={Info} variant="fill" />} />
+ * <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+ * <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+ * ```
+ */
+declare const IconSlot: React.NamedExoticComponent<IconSlotProps>;
+//#endregion
+export { IconSlot, type IconSlotProps };

package/dist/components/IconSlot.d.ts

@@ -0,0 +1,31 @@
+import { IconPropsWithSVGProps, UniversalIconSlot } from "../tokens/types.js";
+import "../tokens/index.js";
+import React from "react";
+
+//#region src/components/IconSlot.d.ts
+interface IconSlotProps {
+  /** The icon to render. Can be a UDS icon, an Icon component, ReactNode, or a function that a ReactNode. */
+  icon?: UniversalIconSlot;
+  /** Props to spread onto the icon. */
+  iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
+  className?: string;
+}
+/**
+ * A helper container to render a SvgIcon, Icon component, or ReactNode.
+ *
+ * Useful in components that use icons and have a startIcon and endIcon. It allows
+ * consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+ * need to override props on the icon. For example, pass an `<Icon>` to override
+ * the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+ *
+ * Examples:
+ * ```
+ * <Input startIcon={Info} />
+ * <Input startIcon={<Icon name={Info} variant="fill" />} />
+ * <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+ * <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+ * ```
+ */
+declare const IconSlot: React.NamedExoticComponent<IconSlotProps>;
+//#endregion
+export { IconSlot, type IconSlotProps };

package/dist/components/IconSlot.js

@@ -0,0 +1,54 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../styles/styler.js";
+import { Icon } from "./Icon.js";
+import React, { cloneElement, isValidElement, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "lodash-es";
+
+//#region src/components/IconSlot.tsx
+/**
+* A helper container to render a SvgIcon, Icon component, or ReactNode.
+*
+* Useful in components that use icons and have a startIcon and endIcon. It allows
+* consumers to pass in a standard UDS icon (`SvgIcon`) or a ReactNode if they
+* need to override props on the icon. For example, pass an `<Icon>` to override
+* the icon variant. Pass a `<IconButton>` to support interactivity on an icon slot.
+*
+* Examples:
+* ```
+* <Input startIcon={Info} />
+* <Input startIcon={<Icon name={Info} variant="fill" />} />
+* <Input startIcon={() => <Icon name={Info} variant="fill" />} />
+* <Input endIcon={() => <IconButton name={Info} aria-label="My label" />} />
+* ```
+*/
+const IconSlot = memo(function IconSlot$1({ icon, iconProps, className: slotClassName, ...rest }) {
+	if (!icon) return null;
+	const { className: iconPropsClassName, ...props } = iconProps || {};
+	const mergedClassName = cx(slotClassName, iconPropsClassName);
+	const svgIcon = icon;
+	if (svgIcon.metadata?.isSvgIcon) return /* @__PURE__ */ jsx(Icon, {
+		name: svgIcon,
+		...props,
+		...rest,
+		className: mergedClassName
+	});
+	if (isFunction(icon)) {
+		const iconEl = icon(iconProps || {});
+		const renderedElementClassName = iconEl?.props.className;
+		return isValidElement(iconEl) && cloneElement(iconEl, {
+			...rest,
+			className: cx(mergedClassName, renderedElementClassName)
+		});
+	}
+	return isValidElement(icon) && cloneElement(icon, {
+		...props,
+		...icon.props,
+		...rest,
+		className: cx(mergedClassName, icon.props.className)
+	});
+});
+IconSlot.displayName = "IconSlot";
+
+//#endregion
+export { IconSlot };

package/dist/components/Image.cjs

@@ -0,0 +1,96 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../styles/styler.cjs');
+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)
+*/
+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 }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		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;

package/dist/components/Image.d.cts

@@ -0,0 +1,91 @@
+import { ImagePropsWithImgProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Image.d.ts
+
+/**
+ * **📸 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)
+ */
+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
+}: ImagePropsWithImgProps): react_jsx_runtime0.JSX.Element;
+declare namespace Image {
+  var displayName: string;
+}
+//#endregion
+export { Image, type ImagePropsWithImgProps as ImageProps };

package/dist/components/Image.d.ts

@@ -0,0 +1,91 @@
+import { ImagePropsWithImgProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+
+//#region src/components/Image.d.ts
+
+/**
+ * **📸 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)
+ */
+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
+}: ImagePropsWithImgProps): react_jsx_runtime3.JSX.Element;
+declare namespace Image {
+  var displayName: string;
+}
+//#endregion
+export { Image, type ImagePropsWithImgProps as ImageProps };

package/dist/components/Image.js

@@ -0,0 +1,95 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../styles/styler.js";
+import { jsx } from "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)
+*/
+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 }) {
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		className: 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
+export { Image };