@yahoo/uds 3.133.0-beta.1 → 3.133.0

package/dist/components/Box.d.ts

@@ -1,7 +1,6 @@
 
-import { UniversalBoxProps } from "../types/src/index.js";
-import "../tokens/index.js";
-import * as react from "react";
+import { UniversalBoxProps } from "../types/dist/index.js";
+import * as _$react from "react";
 
 //#region src/components/Box.d.ts
 type DivProps = React.HTMLAttributes<HTMLDivElement>;
@@ -31,6 +30,6 @@ interface BoxProps extends UniversalBoxProps, DivProps {}
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
+declare const Box: _$react.ForwardRefExoticComponent<BoxProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Box, type BoxProps, type DivProps };

package/dist/components/Box.js

@@ -3,7 +3,6 @@ import { getStyles } from "../styles/styler.js";
 import { createSlot } from "../utils/createSlot.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/Box.tsx
 const Slot = createSlot();
 /**
@@ -100,6 +99,5 @@ const Box = forwardRef(function Box({ asChild, as: As = "div", className, elevat
 	});
 });
 Box.displayName = "Box";
-
 //#endregion
-export { Box };
+export { Box };

package/dist/components/Divider/Divider.cjs

@@ -1,10 +1,9 @@
 /*! © 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_components_Divider_DividerInternal = require('./DividerInternal.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Divider_DividerInternal = require("./DividerInternal.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/Divider/Divider.tsx
 /**
 * **📦 A divider component that can be used to visually separate components**
@@ -43,6 +42,5 @@ const Divider = (0, react.forwardRef)(function Divider(props, ref) {
 	});
 });
 Divider.displayName = "Divider";
-
 //#endregion
-exports.Divider = Divider;
+exports.Divider = Divider;

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

@@ -1,6 +1,6 @@
 
 import { DividerInternalProps } from "./DividerInternal.cjs";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Divider/Divider.d.ts
 type DividerProps = DividerInternalProps;
@@ -34,6 +34,6 @@ type DividerProps = DividerInternalProps;
  *
  * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

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

@@ -1,6 +1,6 @@
 
 import { DividerInternalProps } from "./DividerInternal.js";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Divider/Divider.d.ts
 type DividerProps = DividerInternalProps;
@@ -34,6 +34,6 @@ type DividerProps = DividerInternalProps;
  *
  * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
  */
-declare const Divider: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
+declare const Divider: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Divider, type DividerProps };

package/dist/components/Divider/Divider.js

@@ -2,7 +2,6 @@
 import { DividerInternal } from "./DividerInternal.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/Divider/Divider.tsx
 /**
 * **📦 A divider component that can be used to visually separate components**
@@ -41,6 +40,5 @@ const Divider = forwardRef(function Divider(props, ref) {
 	});
 });
 Divider.displayName = "Divider";
-
 //#endregion
-export { Divider };
+export { Divider };

package/dist/components/Divider/DividerCore.cjs

@@ -1,14 +1,13 @@
 /*! © 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');
-const require_components_Box = require('../Box.cjs');
-const require_components_HStack = require('../HStack.cjs');
-const require_components_VStack = require('../VStack.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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_VStack = require("../VStack.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/Divider/DividerCore.tsx
 const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
@@ -80,6 +79,5 @@ const DividerCore = (0, react.forwardRef)(function Divider({ vertical = false, c
 	});
 });
 DividerCore.displayName = "DividerCore";
-
 //#endregion
-exports.DividerCore = DividerCore;
+exports.DividerCore = DividerCore;

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

@@ -1,9 +1,8 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.cjs";
-import "../../tokens/types.cjs";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.cjs";
 import { BoxProps } from "../Box.cjs";
 import { Text } from "../Text.cjs";
-import * as react from "react";
+import * as _$react from "react";
 import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
@@ -18,6 +17,6 @@ interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'bor
     line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
-declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;
+declare const DividerCore: _$react.ForwardRefExoticComponent<DividerCoreProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DividerCore, type DividerCoreProps };

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

@@ -1,9 +1,8 @@
 
-import { UniversalDividerProps, UniversalStackProps } from "../../types/src/index.js";
-import "../../tokens/types.js";
+import { UniversalDividerProps, UniversalStackProps } from "../../types/dist/index.js";
 import { BoxProps } from "../Box.js";
 import { Text } from "../Text.js";
-import * as react from "react";
+import * as _$react from "react";
 import { ComponentProps, HTMLAttributes } from "react";
 
 //#region src/components/Divider/DividerCore.d.ts
@@ -18,6 +17,6 @@ interface DividerCoreProps extends Omit<BoxProps, 'color' | 'borderColor' | 'bor
     line?: Partial<HTMLAttributes<HTMLDivElement> & DataAttributes>;
   };
 }
-declare const DividerCore: react.ForwardRefExoticComponent<DividerCoreProps & react.RefAttributes<HTMLDivElement>>;
+declare const DividerCore: _$react.ForwardRefExoticComponent<DividerCoreProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DividerCore, type DividerCoreProps };

package/dist/components/Divider/DividerCore.js

@@ -6,7 +6,6 @@ import { HStack } from "../HStack.js";
 import { VStack } from "../VStack.js";
 import { forwardRef, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/Divider/DividerCore.tsx
 const ORIENTATION_WIDTH_MAP = {
 	horizontal: "w-full",
@@ -78,6 +77,5 @@ const DividerCore = forwardRef(function Divider({ vertical = false, contentPosit
 	});
 });
 DividerCore.displayName = "DividerCore";
-
 //#endregion
-export { DividerCore };
+export { DividerCore };

package/dist/components/Divider/DividerInternal.cjs

@@ -1,11 +1,10 @@
 /*! © 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_Divider_DividerCore = require('./DividerCore.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../styles/styler.cjs");
+const require_components_Divider_DividerCore = require("./DividerCore.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/Divider/DividerInternal.tsx
 const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerCore.DividerCore, {
@@ -28,6 +27,5 @@ const DividerInternal = (0, react.forwardRef)(function Divider({ variant = "prim
 	});
 });
 DividerInternal.displayName = "DividerInternal";
-
 //#endregion
-exports.DividerInternal = DividerInternal;
+exports.DividerInternal = DividerInternal;

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

@@ -1,14 +1,13 @@
 
-import { UniversalDividerProps } from "../../types/src/index.cjs";
-import "../../tokens/types.cjs";
+import { UniversalDividerProps } from "../../types/dist/index.cjs";
 import { DividerCoreProps } from "./DividerCore.cjs";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Divider/DividerInternal.d.ts
 type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
 interface DividerInternalProps extends DividerCoreProps {
   variant?: VariantWithInherit;
 }
-declare const DividerInternal: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
+declare const DividerInternal: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DividerInternal, type DividerInternalProps };

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

@@ -1,14 +1,13 @@
 
-import { UniversalDividerProps } from "../../types/src/index.js";
-import "../../tokens/types.js";
+import { UniversalDividerProps } from "../../types/dist/index.js";
 import { DividerCoreProps } from "./DividerCore.js";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Divider/DividerInternal.d.ts
 type VariantWithInherit = Exclude<UniversalDividerProps['variant'], undefined> | 'inherit';
 interface DividerInternalProps extends DividerCoreProps {
   variant?: VariantWithInherit;
 }
-declare const DividerInternal: react.ForwardRefExoticComponent<DividerInternalProps & react.RefAttributes<HTMLDivElement>>;
+declare const DividerInternal: _$react.ForwardRefExoticComponent<DividerInternalProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { DividerInternal, type DividerInternalProps };

package/dist/components/Divider/DividerInternal.js

@@ -3,7 +3,6 @@ import { cx, getStyles } from "../../styles/styler.js";
 import { DividerCore } from "./DividerCore.js";
 import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/Divider/DividerInternal.tsx
 const DividerInternal = forwardRef(function Divider({ variant = "primary", slotProps, ...props }, ref) {
 	return /* @__PURE__ */ jsx(DividerCore, {
@@ -26,6 +25,5 @@ const DividerInternal = forwardRef(function Divider({ variant = "primary", slotP
 	});
 });
 DividerInternal.displayName = "DividerInternal";
-
 //#endregion
-export { DividerInternal };
+export { DividerInternal };

package/dist/components/Divider/index.cjs

@@ -1,5 +1,4 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_components_Divider_Divider = require('./Divider.cjs');
-
-exports.Divider = require_components_Divider_Divider.Divider;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_Divider_Divider = require("./Divider.cjs");
+exports.Divider = require_components_Divider_Divider.Divider;

package/dist/components/Divider/index.js

@@ -1,4 +1,3 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { Divider } from "./Divider.js";
-
-export { Divider };
+export { Divider };

package/dist/components/FormLabel.cjs

@@ -1,13 +1,12 @@
 /*! © 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');
+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 = (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;
@@ -31,6 +30,5 @@ const FormLabel = (0, react.forwardRef)(function FormLabel({ htmlFor, required,
 	});
 });
 FormLabel.displayName = "FormLabel";
-
 //#endregion
-exports.FormLabel = FormLabel;
+exports.FormLabel = FormLabel;

package/dist/components/FormLabel.d.cts

@@ -1,12 +1,11 @@
 
-import { UniversalFormLabelProps } from "../types/src/index.cjs";
-import "../tokens/index.cjs";
-import * as react from "react";
+import { UniversalFormLabelProps } from "../types/dist/index.cjs";
+import * as _$react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
+declare const FormLabel: _$react.ForwardRefExoticComponent<FormLabelProps & _$react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.d.ts

@@ -1,12 +1,11 @@
 
-import { UniversalFormLabelProps } from "../types/src/index.js";
-import "../tokens/index.js";
-import * as react from "react";
+import { UniversalFormLabelProps } from "../types/dist/index.js";
+import * as _$react from "react";
 import { PropsWithChildren } from "react";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
+declare const FormLabel: _$react.ForwardRefExoticComponent<FormLabelProps & _$react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.js

@@ -4,7 +4,6 @@ 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 = 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;
@@ -28,6 +27,5 @@ const FormLabel = forwardRef(function FormLabel({ htmlFor, required, label, chil
 	});
 });
 FormLabel.displayName = "FormLabel";
-
 //#endregion
-export { FormLabel };
+export { FormLabel };

package/dist/components/HStack.cjs

@@ -1,11 +1,10 @@
 /*! © 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_components_Box = require('./Box.cjs');
-const require_utils_intersperse = require('../utils/intersperse.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("./Box.cjs");
+const require_utils_intersperse = require("../utils/intersperse.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/HStack.tsx
 /**
 * **📏 A layout component that arranges its children in columns using flexbox** 
@@ -47,6 +46,5 @@ const HStack = (0, react.forwardRef)(function HStack({ gap, children, separator,
 	});
 });
 HStack.displayName = "HStack";
-
 //#endregion
-exports.HStack = HStack;
+exports.HStack = HStack;

package/dist/components/HStack.d.cts

@@ -1,8 +1,7 @@
 
-import { UniversalStackProps } from "../types/src/index.cjs";
-import "../tokens/index.cjs";
+import { UniversalStackProps } from "../types/dist/index.cjs";
 import { DivProps } from "./Box.cjs";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/HStack.d.ts
 interface HStackProps extends UniversalStackProps, DivProps {}
@@ -35,6 +34,6 @@ interface HStackProps extends UniversalStackProps, DivProps {}
  *
  * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
  **/
-declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
+declare const HStack: _$react.ForwardRefExoticComponent<HStackProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { HStack, type HStackProps };

package/dist/components/HStack.d.ts

@@ -1,8 +1,7 @@
 
-import { UniversalStackProps } from "../types/src/index.js";
-import "../tokens/index.js";
+import { UniversalStackProps } from "../types/dist/index.js";
 import { DivProps } from "./Box.js";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/HStack.d.ts
 interface HStackProps extends UniversalStackProps, DivProps {}
@@ -35,6 +34,6 @@ interface HStackProps extends UniversalStackProps, DivProps {}
  *
  * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
  **/
-declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
+declare const HStack: _$react.ForwardRefExoticComponent<HStackProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { HStack, type HStackProps };

package/dist/components/HStack.js

@@ -3,7 +3,6 @@ import { Box } from "./Box.js";
 import { intersperseReactChildren } from "../utils/intersperse.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/HStack.tsx
 /**
 * **📏 A layout component that arranges its children in columns using flexbox** 
@@ -45,6 +44,5 @@ const HStack = forwardRef(function HStack({ gap, children, separator, ...props }
 	});
 });
 HStack.displayName = "HStack";
-
 //#endregion
-export { HStack };
+export { HStack };

package/dist/components/Icon.cjs

@@ -1,12 +1,10 @@
 /*! © 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_tokens_configs_sizes = require('../tokens/configs/sizes.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../_virtual/_rolldown/runtime.cjs");
+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
 /**
 * **🎨 A component for displaying icons**
@@ -37,10 +35,8 @@ let _yahoo_uds_icons_utils = require("@yahoo/uds-icons/utils");
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
-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 Icon = (0, react.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 = require_styles_styler.getStyles({
@@ -49,14 +45,6 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "m
 		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",
@@ -66,12 +54,13 @@ const Icon = (0, react.forwardRef)(function BaseIcon({ name: iconName, size = "m
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
-		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: renderedIcon
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
 	});
 });
 Icon.displayName = "Icon";
-
 //#endregion
-exports.Icon = Icon;
+exports.Icon = Icon;

package/dist/components/Icon.d.cts

@@ -1,11 +1,11 @@
 
 import { IconPropsWithSVGProps } from "../tokens/types.cjs";
-import "../tokens/index.cjs";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
+ * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**
@@ -37,6 +37,6 @@ type IconProps = IconPropsWithSVGProps;
  *
  * @related [IconButton](https://uds.build/docs/components/icon-button)
  */
-declare const Icon: react.ForwardRefExoticComponent<IconPropsWithSVGProps & react.RefAttributes<SVGSVGElement>>;
+declare const Icon: _$react.ForwardRefExoticComponent<IconPropsWithSVGProps & _$react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { Icon, type IconProps };

package/dist/components/Icon.d.ts

@@ -1,11 +1,11 @@
 
 import { IconPropsWithSVGProps } from "../tokens/types.js";
-import "../tokens/index.js";
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/Icon.d.ts
 /**
  * Props for the Icon component.
+ * @see IconPropsWithSVGProps
  */
 type IconProps = IconPropsWithSVGProps;
 /**
@@ -37,6 +37,6 @@ type IconProps = IconPropsWithSVGProps;
  *
  * @related [IconButton](https://uds.build/docs/components/icon-button)
  */
-declare const Icon: react.ForwardRefExoticComponent<IconPropsWithSVGProps & react.RefAttributes<SVGSVGElement>>;
+declare const Icon: _$react.ForwardRefExoticComponent<IconPropsWithSVGProps & _$react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { Icon, type IconProps };

package/dist/components/Icon.js

@@ -1,10 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { cx, getStyles } from "../styles/styler.js";
 import { normalIconSizes } from "../tokens/configs/sizes.js";
-import { cloneElement, forwardRef, isValidElement } from "react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { getIconMarkup, getIconVariants, isIconDefinition } from "@yahoo/uds-icons/utils";
-
 //#region src/components/Icon.tsx
 /**
 * **🎨 A component for displaying icons**
@@ -35,10 +33,8 @@ import { getIconMarkup, getIconVariants, isIconDefinition } from "@yahoo/uds-ico
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
-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 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({
@@ -47,14 +43,6 @@ const Icon = forwardRef(function BaseIcon({ name: iconName, 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",
@@ -64,12 +52,13 @@ const Icon = forwardRef(function BaseIcon({ name: iconName, size = "md", variant
 		"aria-hidden": "true",
 		focusable: "false",
 		className: styles,
-		dangerouslySetInnerHTML: renderedMarkup ? { __html: renderedMarkup } : void 0,
 		...props,
-		children: renderedIcon
+		children: /* @__PURE__ */ jsx(SVGIcon, {
+			size,
+			variant: effectiveVariant
+		})
 	});
 });
 Icon.displayName = "Icon";
-
 //#endregion
-export { Icon };
+export { Icon };