@yahoo/uds 3.132.2 → 3.133.0-beta.2

package/dist/components/{client/Avatar → Avatar}/AvatarText.d.cts

@@ -1,10 +1,10 @@
 
-import { UniversalAvatarTextProps } from "../../../types/dist/index.cjs";
-import "../../../tokens/index.cjs";
-import { TextProps } from "../../Text.cjs";
+import { UniversalAvatarTextProps } from "../../types/src/index.cjs";
+import "../../tokens/index.cjs";
+import { TextProps } from "../Text.cjs";
 import * as react from "react";
 
-//#region src/components/client/Avatar/AvatarText.d.ts
+//#region src/components/Avatar/AvatarText.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -21,6 +21,7 @@ interface AvatarTextProps extends UniversalAvatarTextProps {
  *
  * @param props - Props for text variant.
  * @returns The AvatarText element.
+ * @componentType Server component
  */
 declare const AvatarText: react.ForwardRefExoticComponent<AvatarTextProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/{client/Avatar → Avatar}/AvatarText.d.ts

@@ -1,11 +1,10 @@
 
-"use client";
-import { UniversalAvatarTextProps } from "../../../types/dist/index.js";
-import "../../../tokens/index.js";
-import { TextProps } from "../../Text.js";
+import { UniversalAvatarTextProps } from "../../types/src/index.js";
+import "../../tokens/index.js";
+import { TextProps } from "../Text.js";
 import * as react from "react";
 
-//#region src/components/client/Avatar/AvatarText.d.ts
+//#region src/components/Avatar/AvatarText.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -22,6 +21,7 @@ interface AvatarTextProps extends UniversalAvatarTextProps {
  *
  * @param props - Props for text variant.
  * @returns The AvatarText element.
+ * @componentType Server component
  */
 declare const AvatarText: react.ForwardRefExoticComponent<AvatarTextProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/{client/Avatar → Avatar}/AvatarText.js

@@ -1,13 +1,12 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { cx } from "../../../styles/styler.js";
-import { Text } from "../../Text.js";
-import { Box } from "../../Box.js";
+import { cx } from "../../styles/styler.js";
+import { Box } from "../Box.js";
 import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation } from "./utils.js";
+import { Text } from "../Text.js";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
-//#region src/components/client/Avatar/AvatarText.tsx
+//#region src/components/Avatar/AvatarText.tsx
 /**
 * **AvatarText Component**
 *
@@ -15,6 +14,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @param props - Props for text variant.
 * @returns The AvatarText element.
+* @componentType Server component
 */
 const AvatarText = forwardRef(({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
 	const classNames = useMemo(() => ({

package/dist/components/Avatar/index.cjs

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_components_Avatar_AvatarIcon = require('./AvatarIcon.cjs');
+const require_components_Avatar_AvatarImageNoFallback = require('./AvatarImageNoFallback.cjs');
+const require_components_Avatar_AvatarText = require('./AvatarText.cjs');
+const require_components_Avatar_Avatar = require('./Avatar.cjs');
+
+exports.Avatar = require_components_Avatar_Avatar.Avatar;
+exports.AvatarIcon = require_components_Avatar_AvatarIcon.AvatarIcon;
+exports.AvatarImageNoFallback = require_components_Avatar_AvatarImageNoFallback.AvatarImageNoFallback;
+exports.AvatarText = require_components_Avatar_AvatarText.AvatarText;

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

@@ -0,0 +1,6 @@
+
+import { AvatarIcon, AvatarIconProps } from "./AvatarIcon.cjs";
+import { AvatarText, AvatarTextProps } from "./AvatarText.cjs";
+import { Avatar, AvatarProps } from "./Avatar.cjs";
+import { AvatarImageNoFallback, AvatarImageNoFallbackProps } from "./AvatarImageNoFallback.cjs";
+export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImageNoFallback, type AvatarImageNoFallbackProps, type AvatarProps, AvatarText, type AvatarTextProps };

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

@@ -0,0 +1,6 @@
+
+import { AvatarIcon, AvatarIconProps } from "./AvatarIcon.js";
+import { AvatarText, AvatarTextProps } from "./AvatarText.js";
+import { Avatar, AvatarProps } from "./Avatar.js";
+import { AvatarImageNoFallback, AvatarImageNoFallbackProps } from "./AvatarImageNoFallback.js";
+export { Avatar, AvatarIcon, type AvatarIconProps, AvatarImageNoFallback, type AvatarImageNoFallbackProps, type AvatarProps, AvatarText, type AvatarTextProps };

package/dist/components/Avatar/index.js

@@ -0,0 +1,7 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { AvatarIcon } from "./AvatarIcon.js";
+import { AvatarImageNoFallback } from "./AvatarImageNoFallback.js";
+import { AvatarText } from "./AvatarText.js";
+import { Avatar } from "./Avatar.js";
+
+export { Avatar, AvatarIcon, AvatarImageNoFallback, AvatarText };

package/dist/components/{client/Avatar → Avatar}/utils.cjs

@@ -1,12 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
 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_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
 let lodash_isFunction_js = require("lodash/isFunction.js");
 lodash_isFunction_js = require_runtime.__toESM(lodash_isFunction_js);
 
-//#region src/components/client/Avatar/utils.ts
+//#region src/components/Avatar/utils.ts
 /** Strategies for generating text abbreviation */
 const abbrevStrategies = {
 	first: (initials) => initials[0] ?? "",

package/dist/components/{client/Avatar → Avatar}/utils.d.cts

@@ -1,9 +1,9 @@
 
-import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/dist/index.cjs";
-import "../../../tokens/index.cjs";
-import { getStyles } from "../../../styles/styler.cjs";
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../types/src/index.cjs";
+import "../../tokens/index.cjs";
+import { getStyles } from "../../styles/styler.cjs";
 
-//#region src/components/client/Avatar/utils.d.ts
+//#region src/components/Avatar/utils.d.ts
 /**
  * Generates an abbreviation from a name using a specified strategy.
  *

package/dist/components/{client/Avatar → Avatar}/utils.d.ts

@@ -1,10 +1,9 @@
 
-"use client";
-import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../../types/dist/index.js";
-import "../../../tokens/index.js";
-import { getStyles } from "../../../styles/styler.js";
+import { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant, UniversalAvatarProps } from "../../types/src/index.js";
+import "../../tokens/index.js";
+import { getStyles } from "../../styles/styler.js";
 
-//#region src/components/client/Avatar/utils.d.ts
+//#region src/components/Avatar/utils.d.ts
 /**
  * Generates an abbreviation from a name using a specified strategy.
  *

package/dist/components/{client/Avatar → Avatar}/utils.js

@@ -1,9 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { cx, getStyles } from "../../../styles/styler.js";
+import { cx, getStyles } from "../../styles/styler.js";
 import { isFunction } from "lodash-es";
 
-//#region src/components/client/Avatar/utils.ts
+//#region src/components/Avatar/utils.ts
 /** Strategies for generating text abbreviation */
 const abbrevStrategies = {
 	first: (initials) => initials[0] ?? "",

package/dist/components/Banner/Banner.cjs

@@ -2,12 +2,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_client_Pressable = require('../client/Pressable.cjs');
 const require_components_IconSlot = require('../IconSlot.cjs');
 const require_components_Text = require('../Text.cjs');
+const require_components_client_Pressable = require('../client/Pressable.cjs');
 const require_components_Banner_utils = require('./utils.cjs');
-let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react = require("react");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Banner/Banner.tsx

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

@@ -1,5 +1,5 @@
 
-import { UniversalBannerProps } from "../../types/dist/index.cjs";
+import { UniversalBannerProps } from "../../types/src/index.cjs";
 import "../../tokens/index.cjs";
 import * as react from "react";
 

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

@@ -1,5 +1,5 @@
 
-import { UniversalBannerProps } from "../../types/dist/index.js";
+import { UniversalBannerProps } from "../../types/src/index.js";
 import "../../tokens/index.js";
 import * as react from "react";
 

package/dist/components/Banner/Banner.js

@@ -1,11 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { cx, getStyles } from "../../styles/styler.js";
-import { Pressable } from "../client/Pressable.js";
 import { IconSlot } from "../IconSlot.js";
 import { Text } from "../Text.js";
+import { Pressable } from "../client/Pressable.js";
 import { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren } from "./utils.js";
-import { Cross } from "@yahoo/uds-icons";
 import { cloneElement, forwardRef, isValidElement } from "react";
+import { Cross } from "@yahoo/uds-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Banner/Banner.tsx

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

@@ -1,5 +1,5 @@
 
-import { BannerVariant } from "../../types/dist/index.cjs";
+import { BannerVariant } from "../../types/src/index.cjs";
 import { ReactNode } from "react";
 
 //#region src/components/Banner/utils.d.ts

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

@@ -1,5 +1,5 @@
 
-import { BannerVariant } from "../../types/dist/index.js";
+import { BannerVariant } from "../../types/src/index.js";
 import { ReactNode } from "react";
 
 //#region src/components/Banner/utils.d.ts

package/dist/components/Box.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalBoxProps } from "../types/dist/index.cjs";
+import { UniversalBoxProps } from "../types/src/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 

package/dist/components/Box.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalBoxProps } from "../types/dist/index.js";
+import { UniversalBoxProps } from "../types/src/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 

package/dist/components/Divider/DividerCore.cjs

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

package/dist/components/Divider/DividerCore.d.cts

@@ -1,8 +1,8 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.cjs";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.cjs";
 import "../../tokens/types.cjs";
-import { BoxProps } from "../Box.cjs";
 import { Text } from "../Text.cjs";
+import { BoxProps } from "../Box.cjs";
 import * as react from "react";
 import { ComponentProps, HTMLAttributes } from "react";
 

package/dist/components/Divider/DividerCore.d.ts

@@ -1,8 +1,8 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.js";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.js";
 import "../../tokens/types.js";
-import { BoxProps } from "../Box.js";
 import { Text } from "../Text.js";
+import { BoxProps } from "../Box.js";
 import * as react from "react";
 import { ComponentProps, HTMLAttributes } from "react";
 

package/dist/components/Divider/DividerCore.js

@@ -1,7 +1,7 @@
 /*! © 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 { Text } from "../Text.js";
 import { HStack } from "../HStack.js";
 import { VStack } from "../VStack.js";
 import { forwardRef, useMemo } from "react";

package/dist/components/Divider/DividerInternal.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalDividerProps } from "../../types/dist/index.cjs";
+import { UniversalDividerProps } from "../../types/src/index.cjs";
 import "../../tokens/types.cjs";
 import { DividerCoreProps } from "./DividerCore.cjs";
 import * as react from "react";

package/dist/components/Divider/DividerInternal.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalDividerProps } from "../../types/dist/index.js";
+import { UniversalDividerProps } from "../../types/src/index.js";
 import "../../tokens/types.js";
 import { DividerCoreProps } from "./DividerCore.js";
 import * as react from "react";

package/dist/components/FormLabel.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalFormLabelProps } from "../types/dist/index.cjs";
+import { UniversalFormLabelProps } from "../types/src/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";
 import { PropsWithChildren } from "react";

package/dist/components/FormLabel.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalFormLabelProps } from "../types/dist/index.js";
+import { UniversalFormLabelProps } from "../types/src/index.js";
 import "../tokens/index.js";
 import * as react from "react";
 import { PropsWithChildren } from "react";

package/dist/components/HStack.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/dist/index.cjs";
+import { UniversalStackProps } from "../types/src/index.cjs";
 import "../tokens/index.cjs";
 import { DivProps } from "./Box.cjs";
 import * as react from "react";

package/dist/components/HStack.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/dist/index.js";
+import { UniversalStackProps } from "../types/src/index.js";
 import "../tokens/index.js";
 import { DivProps } from "./Box.js";
 import * as react from "react";

package/dist/components/Icon.cjs

@@ -5,6 +5,7 @@ const require_styles_styler = require('../styles/styler.cjs');
 const require_tokens_configs_sizes = require('../tokens/configs/sizes.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
 
 //#region src/components/Icon.tsx
 /**
@@ -36,8 +37,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
-const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
-	const availableVariants = SVGIcon.metadata?.variants ?? [];
+const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
+	const iconDefinition = (0, _yahoo_uds_icons_utils.isIconDefinition)(iconName) ? iconName : void 0;
+	const iconComponent = typeof iconName === "function" ? iconName : void 0;
+	const availableVariants = iconDefinition ? (0, _yahoo_uds_icons_utils.getIconVariants)(iconDefinition) : [];
 	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
 	const isMulticolor = effectiveVariant === "multicolor";
 	const styles = require_styles_styler.getStyles({
@@ -46,6 +49,14 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md
 		className: require_styles_styler.cx(className, !isMulticolor && "[&_path]:fill-current")
 	});
 	const sizePx = require_tokens_configs_sizes.normalIconSizes[size];
+	const renderedMarkup = iconDefinition ? (0, _yahoo_uds_icons_utils.getIconMarkup)(iconDefinition, size, effectiveVariant) : null;
+	const renderedIcon = renderedMarkup ? null : (0, react.isValidElement)(iconName) ? (0, react.cloneElement)(iconName, {
+		size,
+		variant: effectiveVariant
+	}) : iconComponent ? iconComponent({
+		size,
+		variant: effectiveVariant
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		ref,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -55,11 +66,9 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: SVGIcon, size = "md
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
+		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGIcon, {
-			size,
-			variant: effectiveVariant
-		})
+		children: renderedIcon
 	});
 });
 Icon.displayName = "Icon";

package/dist/components/Icon.d.cts

@@ -6,7 +6,6 @@ import * as react from "react";
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
- * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**

package/dist/components/Icon.d.ts

@@ -6,7 +6,6 @@ import * as react from "react";
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
- * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**

package/dist/components/Icon.js

@@ -1,8 +1,9 @@
 /*! © 2026 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 { cloneElement, forwardRef, isValidElement } from "react";
 import { jsx } from "react/jsx-runtime";
+import { getIconMarkup, getIconVariants, isIconDefinition } from "@yahoo/uds-icons/utils";
 
 //#region src/components/Icon.tsx
 /**
@@ -34,8 +35,10 @@ import { jsx } from "react/jsx-runtime";
 *
 * @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 Icon = forwardRef(function BaseIcon({ name: iconName, size = "md", variant = "outline", color = "primary", className, ...props }, ref) {
+	const iconDefinition = isIconDefinition(iconName) ? iconName : void 0;
+	const iconComponent = typeof iconName === "function" ? iconName : void 0;
+	const availableVariants = iconDefinition ? getIconVariants(iconDefinition) : [];
 	const effectiveVariant = availableVariants.includes(variant) ? variant : availableVariants[0] ?? "fill";
 	const isMulticolor = effectiveVariant === "multicolor";
 	const styles = getStyles({
@@ -44,6 +47,14 @@ const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant
 		className: cx(className, !isMulticolor && "[&_path]:fill-current")
 	});
 	const sizePx = normalIconSizes[size];
+	const renderedMarkup = iconDefinition ? getIconMarkup(iconDefinition, size, effectiveVariant) : null;
+	const renderedIcon = renderedMarkup ? null : isValidElement(iconName) ? cloneElement(iconName, {
+		size,
+		variant: effectiveVariant
+	}) : iconComponent ? iconComponent({
+		size,
+		variant: effectiveVariant
+	}) : null;
 	return /* @__PURE__ */ jsx("svg", {
 		ref,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -53,11 +64,9 @@ const Icon = forwardRef(function BaseIcon({ name: SVGIcon, size = "md", variant
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
+		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: /* @__PURE__ */ jsx(SVGIcon, {
-			size,
-			variant: effectiveVariant
-		})
+		children: renderedIcon
 	});
 });
 Icon.displayName = "Icon";

package/dist/components/IconSlot.cjs

@@ -6,10 +6,12 @@ const require_components_Icon = require('./Icon.cjs');
 let react = require("react");
 react = require_runtime.__toESM(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);
+let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
 
 //#region src/components/IconSlot.tsx
+function isIconRenderOutput(icon) {
+	return (0, react.isValidElement)(icon) && (icon.type === react.default.Fragment || typeof icon.type === "string");
+}
 /**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
@@ -30,21 +32,38 @@ const IconSlot = (0, react.memo)(function IconSlot({ icon, iconProps, className:
 	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,
+	if ((0, _yahoo_uds_icons_utils.isIconDefinition)(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+		name: icon,
 		...props,
 		...rest,
 		className: mergedClassName
 	});
-	if ((0, lodash_isFunction_js.default)(icon)) {
+	if (typeof icon === "function") {
 		const iconEl = icon(iconProps || {});
+		if ((0, _yahoo_uds_icons_utils.isIconDefinition)(iconEl)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+			name: iconEl,
+			...props,
+			...rest,
+			className: mergedClassName
+		});
+		if (isIconRenderOutput(iconEl)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+			name: icon,
+			...props,
+			...rest,
+			className: mergedClassName
+		});
 		const elProps = iconEl?.props;
 		return (0, react.isValidElement)(iconEl) && (0, react.cloneElement)(iconEl, {
 			...rest,
 			className: require_styles_styler.cx(mergedClassName, elProps?.className)
 		});
 	}
+	if (isIconRenderOutput(icon)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
+		name: ((svgIconProps) => (0, react.cloneElement)(icon, svgIconProps)),
+		...props,
+		...rest,
+		className: mergedClassName
+	});
 	const elProps = icon.props;
 	return (0, react.isValidElement)(icon) && (0, react.cloneElement)(icon, {
 		...props,

package/dist/components/IconSlot.d.cts

@@ -1,13 +1,14 @@
 
-import { UniversalIconSlot } from "../types/dist/index.cjs";
+import { UniversalIconSlot } from "../types/src/index.cjs";
 import { IconPropsWithSVGProps } from "../tokens/types.cjs";
 import "../tokens/index.cjs";
 import React from "react";
+import { IconDefinition } from "@yahoo/uds-icons/types";
 
 //#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;
+  icon?: UniversalIconSlot<IconDefinition>;
   /** Props to spread onto the icon. */
   iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
   className?: string;

package/dist/components/IconSlot.d.ts

@@ -1,13 +1,14 @@
 
-import { UniversalIconSlot } from "../types/dist/index.js";
+import { UniversalIconSlot } from "../types/src/index.js";
 import { IconPropsWithSVGProps } from "../tokens/types.js";
 import "../tokens/index.js";
 import React from "react";
+import { IconDefinition } from "@yahoo/uds-icons/types";
 
 //#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;
+  icon?: UniversalIconSlot<IconDefinition>;
   /** Props to spread onto the icon. */
   iconProps?: Omit<IconPropsWithSVGProps, 'name'>;
   className?: string;

package/dist/components/IconSlot.js

@@ -3,9 +3,12 @@ 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";
+import { isIconDefinition } from "@yahoo/uds-icons/utils";
 
 //#region src/components/IconSlot.tsx
+function isIconRenderOutput(icon) {
+	return isValidElement(icon) && (icon.type === React.Fragment || typeof icon.type === "string");
+}
 /**
 * A helper container to render a SvgIcon, Icon component, or ReactNode.
 *
@@ -26,21 +29,38 @@ const IconSlot = memo(function IconSlot({ icon, iconProps, className: slotClassN
 	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,
+	if (isIconDefinition(icon)) return /* @__PURE__ */ jsx(Icon, {
+		name: icon,
 		...props,
 		...rest,
 		className: mergedClassName
 	});
-	if (isFunction(icon)) {
+	if (typeof icon === "function") {
 		const iconEl = icon(iconProps || {});
+		if (isIconDefinition(iconEl)) return /* @__PURE__ */ jsx(Icon, {
+			name: iconEl,
+			...props,
+			...rest,
+			className: mergedClassName
+		});
+		if (isIconRenderOutput(iconEl)) return /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			...props,
+			...rest,
+			className: mergedClassName
+		});
 		const elProps = iconEl?.props;
 		return isValidElement(iconEl) && cloneElement(iconEl, {
 			...rest,
 			className: cx(mergedClassName, elProps?.className)
 		});
 	}
+	if (isIconRenderOutput(icon)) return /* @__PURE__ */ jsx(Icon, {
+		name: ((svgIconProps) => cloneElement(icon, svgIconProps)),
+		...props,
+		...rest,
+		className: mergedClassName
+	});
 	const elProps = icon.props;
 	return isValidElement(icon) && cloneElement(icon, {
 		...props,

package/dist/components/Image.d.cts

@@ -1,5 +1,5 @@
 
-import { ImagePropsWithImgProps } from "../types/dist/index.cjs";
+import { ImagePropsWithImgProps } from "../types/src/index.cjs";
 import "../tokens/index.cjs";
 import * as react from "react";