@yahoo/uds 3.175.2 → 3.175.4

package/dist/components/IconSlot.d.cts

@@ -1,8 +1,8 @@
 
 import { UniversalIconSlot } from "../types/dist/index.cjs";
 import { IconPropsWithSVGProps } 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. */

package/dist/components/IconSlot.d.ts

@@ -1,8 +1,8 @@
 
 import { UniversalIconSlot } from "../types/dist/index.js";
 import { IconPropsWithSVGProps } 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. */

package/dist/components/Image.cjs

@@ -1,6 +1,5 @@
 /*! © 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");
@@ -29,63 +28,64 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @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, className, ...props }, ref) {
+	const imageStyles = 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,
+		className
+	});
 	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,
-			className
-		}),
+		className: imageStyles,
 		style: {
 			width: imageWidth,
 			height: imageHeight

package/dist/components/Image.d.cts

@@ -1,7 +1,6 @@
 
 import { ImagePropsWithImgProps } from "../types/dist/index.cjs";
-import * as _$react from "react";
-
+import "../tokens/index.cjs";
 //#region src/components/Image.d.ts
 /**
  * Props for the Image component.
@@ -31,6 +30,6 @@ type ImageProps = ImagePropsWithImgProps;
  *
  * @related [Box](https://uds.build/docs/components/box)
  */
-declare const Image: _$react.ForwardRefExoticComponent<ImagePropsWithImgProps & _$react.RefAttributes<HTMLImageElement>>;
+declare const Image: import("react").ForwardRefExoticComponent<ImagePropsWithImgProps & import("react").RefAttributes<HTMLImageElement>>;
 //#endregion
 export { Image, type ImageProps };

package/dist/components/Image.d.ts

@@ -1,7 +1,6 @@
 
 import { ImagePropsWithImgProps } from "../types/dist/index.js";
-import * as _$react from "react";
-
+import "../tokens/index.js";
 //#region src/components/Image.d.ts
 /**
  * Props for the Image component.
@@ -31,6 +30,6 @@ type ImageProps = ImagePropsWithImgProps;
  *
  * @related [Box](https://uds.build/docs/components/box)
  */
-declare const Image: _$react.ForwardRefExoticComponent<ImagePropsWithImgProps & _$react.RefAttributes<HTMLImageElement>>;
+declare const Image: import("react").ForwardRefExoticComponent<ImagePropsWithImgProps & import("react").RefAttributes<HTMLImageElement>>;
 //#endregion
 export { Image, type ImageProps };

package/dist/components/Image.js

@@ -27,63 +27,64 @@ import { jsx } from "react/jsx-runtime";
 * @related [Box](https://uds.build/docs/components/box)
 */
 const Image = 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, className, ...props }, ref) {
+	const imageStyles = 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,
+		className
+	});
 	return /* @__PURE__ */ jsx("img", {
 		ref,
 		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,
-			className
-		}),
+		className: imageStyles,
 		style: {
 			width: imageWidth,
 			height: imageHeight

package/dist/components/Link.cjs

@@ -1,6 +1,5 @@
 /*! © 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");
 const require_components_IconSlot = require("./IconSlot.cjs");
 let react = require("react");
@@ -39,18 +38,19 @@ const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVar
 	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
 	const shouldSizeRelativeToContainingText = !textVariant;
 	const rootClasses = (0, react.useMemo)(() => {
+		const textStyles = !shouldSizeRelativeToContainingText && require_styles_styler.getStyles({
+			linkTextStyleRoot: textVariant,
+			fontSize: textVariant,
+			fontFamily: textVariant,
+			fontWeight: textVariant,
+			lineHeight: textVariant,
+			textTransform: textVariant
+		});
 		return require_styles_styler.getStyles({
 			linkVariantRoot: variant,
 			display: "inline-flex",
 			alignItems: "center",
-			className: require_styles_styler.cx(!shouldSizeRelativeToContainingText && require_styles_styler.getStyles({
-				linkTextStyleRoot: textVariant,
-				fontSize: textVariant,
-				fontFamily: textVariant,
-				fontWeight: textVariant,
-				lineHeight: textVariant,
-				textTransform: textVariant
-			}), "uds-ring", alwaysUnderline && "underline", className)
+			className: require_styles_styler.cx(textStyles, "uds-ring", alwaysUnderline && "underline", className)
 		});
 	}, [
 		alwaysUnderline,

package/dist/components/Link.d.cts

@@ -1,8 +1,7 @@
 
 import { UniversalLinkProps } from "../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../tokens/types.cjs";
-import * as _$react from "react";
-
+import "../tokens/index.cjs";
 //#region src/components/Link.d.ts
 type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 type DataAttributes = {
@@ -48,6 +47,6 @@ interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
  * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
  *```
  **/
-declare const Link: _$react.ForwardRefExoticComponent<LinkProps & _$react.RefAttributes<HTMLAnchorElement>>;
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 //#endregion
 export { Link, type LinkProps };

package/dist/components/Link.d.ts

@@ -1,8 +1,7 @@
 
 import { UniversalLinkProps } from "../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../tokens/types.js";
-import * as _$react from "react";
-
+import "../tokens/index.js";
 //#region src/components/Link.d.ts
 type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 type DataAttributes = {
@@ -48,6 +47,6 @@ interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
  * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
  *```
  **/
-declare const Link: _$react.ForwardRefExoticComponent<LinkProps & _$react.RefAttributes<HTMLAnchorElement>>;
+declare const Link: import("react").ForwardRefExoticComponent<LinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
 //#endregion
 export { Link, type LinkProps };

package/dist/components/Link.js

@@ -37,18 +37,19 @@ const Link = forwardRef(function Input({ variant = "primary", textVariant, start
 	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
 	const shouldSizeRelativeToContainingText = !textVariant;
 	const rootClasses = useMemo(() => {
+		const textStyles = !shouldSizeRelativeToContainingText && getStyles({
+			linkTextStyleRoot: textVariant,
+			fontSize: textVariant,
+			fontFamily: textVariant,
+			fontWeight: textVariant,
+			lineHeight: textVariant,
+			textTransform: textVariant
+		});
 		return getStyles({
 			linkVariantRoot: variant,
 			display: "inline-flex",
 			alignItems: "center",
-			className: cx(!shouldSizeRelativeToContainingText && getStyles({
-				linkTextStyleRoot: textVariant,
-				fontSize: textVariant,
-				fontFamily: textVariant,
-				fontWeight: textVariant,
-				lineHeight: textVariant,
-				textTransform: textVariant
-			}), "uds-ring", alwaysUnderline && "underline", className)
+			className: cx(textStyles, "uds-ring", alwaysUnderline && "underline", className)
 		});
 	}, [
 		alwaysUnderline,

package/dist/components/Scrim.cjs

@@ -1,6 +1,5 @@
 /*! © 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");
 const require_components_Box = require("./Box.cjs");
 let react = require("react");

package/dist/components/Scrim.d.cts

@@ -1,7 +1,5 @@
 
 import { DivProps } from "./Box.cjs";
-import * as _$react from "react";
-
 //#region src/components/Scrim.d.ts
 interface ScrimProps extends DivProps {
   className?: string;
@@ -9,6 +7,6 @@ interface ScrimProps extends DivProps {
   position?: 'fixed' | 'absolute';
   animateOpacity?: boolean;
 }
-declare const Scrim: _$react.ForwardRefExoticComponent<ScrimProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const Scrim: import("react").ForwardRefExoticComponent<ScrimProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Scrim, type ScrimProps };

package/dist/components/Scrim.d.ts

@@ -1,7 +1,5 @@
 
 import { DivProps } from "./Box.js";
-import * as _$react from "react";
-
 //#region src/components/Scrim.d.ts
 interface ScrimProps extends DivProps {
   className?: string;
@@ -9,6 +7,6 @@ interface ScrimProps extends DivProps {
   position?: 'fixed' | 'absolute';
   animateOpacity?: boolean;
 }
-declare const Scrim: _$react.ForwardRefExoticComponent<ScrimProps & _$react.RefAttributes<HTMLDivElement>>;
+declare const Scrim: import("react").ForwardRefExoticComponent<ScrimProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Scrim, type ScrimProps };

package/dist/components/SvgFloatingOverlay.cjs

@@ -1,6 +1,5 @@
 /*! © 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");
 const require_components_Box = require("./Box.cjs");
 let react = require("react");

package/dist/components/SvgFloatingOverlay.d.cts

@@ -2,8 +2,6 @@
 import { BoxProps } from "./Box.cjs";
 import { UseSvgFloatingContentReturn } from "../hooks/useSvgFloatingContent.cjs";
 import { CSSProperties } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/SvgFloatingOverlay.d.ts
 interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blurStyle' | 'childTransitionStyle' | 'svgPath' | 'shadows' | 'shadowFilterId' | 'shadowPadding' | 'dimensions'> {
   blurClassName: string;
@@ -20,24 +18,7 @@ interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blu
   svgBorderStyle?: CSSProperties;
 }
 declare const SvgFloatingOverlay: {
-  ({
-    blurClassName,
-    blurStyle,
-    childTransitionStyle,
-    svgPath,
-    dimensions,
-    shadows,
-    svgClassNames,
-    shadowFilterId,
-    shadowPadding,
-    arrowHeight,
-    contentWrapperSlotProps,
-    contentOverflow,
-    children,
-    borderRadius,
-    svgBaseStyle,
-    svgBorderStyle
-  }: SvgFloatingOverlayProps): _$react_jsx_runtime0.JSX.Element;
+  ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, contentOverflow, children, borderRadius, svgBaseStyle, svgBorderStyle }: SvgFloatingOverlayProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/components/SvgFloatingOverlay.d.ts

@@ -2,8 +2,6 @@
 import { BoxProps } from "./Box.js";
 import { UseSvgFloatingContentReturn } from "../hooks/useSvgFloatingContent.js";
 import { CSSProperties } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-
 //#region src/components/SvgFloatingOverlay.d.ts
 interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blurStyle' | 'childTransitionStyle' | 'svgPath' | 'shadows' | 'shadowFilterId' | 'shadowPadding' | 'dimensions'> {
   blurClassName: string;
@@ -20,24 +18,7 @@ interface SvgFloatingOverlayProps extends Pick<UseSvgFloatingContentReturn, 'blu
   svgBorderStyle?: CSSProperties;
 }
 declare const SvgFloatingOverlay: {
-  ({
-    blurClassName,
-    blurStyle,
-    childTransitionStyle,
-    svgPath,
-    dimensions,
-    shadows,
-    svgClassNames,
-    shadowFilterId,
-    shadowPadding,
-    arrowHeight,
-    contentWrapperSlotProps,
-    contentOverflow,
-    children,
-    borderRadius,
-    svgBaseStyle,
-    svgBorderStyle
-  }: SvgFloatingOverlayProps): _$react_jsx_runtime0.JSX.Element;
+  ({ blurClassName, blurStyle, childTransitionStyle, svgPath, dimensions, shadows, svgClassNames, shadowFilterId, shadowPadding, arrowHeight, contentWrapperSlotProps, contentOverflow, children, borderRadius, svgBaseStyle, svgBorderStyle }: SvgFloatingOverlayProps): import("react/jsx-runtime").JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/components/Text.cjs

@@ -1,6 +1,5 @@
 /*! © 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");
 const require_utils_createSlot = require("../utils/createSlot.cjs");
 let react = require("react");
@@ -83,8 +82,7 @@ const asMap = {
 * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
 */
 const Text = (0, react.forwardRef)(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, 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, width, height, ...props }, ref) {
-	const classNames = require_styles_styler.getStyles({
-		className,
+	const textStyles = {
 		...color && color !== "inherit" ? { color } : {},
 		...variant && variant !== "inherit" ? {
 			fontFamily: fontFamily ?? variant,
@@ -94,7 +92,11 @@ const Text = (0, react.forwardRef)(function Text({ className, asChild, color = "
 			textTransform: textTransform ?? variant,
 			letterSpacing: letterSpacing ?? variant
 		} : {},
-		textAlign,
+		textAlign
+	};
+	const classNames = require_styles_styler.getStyles({
+		className,
+		...textStyles,
 		backgroundColor,
 		borderRadius,
 		borderTopStartRadius,

package/dist/components/Text.d.cts

@@ -1,14 +1,15 @@
 
 import { UniversalTextProps } from "../types/dist/index.cjs";
-import * as _$react from "react";
+import "../tokens/index.cjs";
 import { JSX, ReactNode, Ref } from "react";
-
 //#region src/components/Text.d.ts
 type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
 type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
 type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
-  /** Ref passed to the inner container. */ref?: Ref<HTMLElement>; /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+  /** Ref passed to the inner container. */
+  ref?: Ref<HTMLElement>;
+  /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
   as?: TagName;
   /**
    * Applies italic styling. Works with both traditional fonts (via font-style: italic)
@@ -53,6 +54,6 @@ type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
  *
  * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
  */
-declare const Text: _$react.ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & _$react.RefAttributes<HTMLElement>>;
+declare const Text: import("react").ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & import("react").RefAttributes<HTMLElement>>;
 //#endregion
 export { Text, type TextProps };

package/dist/components/Text.d.ts

@@ -1,14 +1,15 @@
 
 import { UniversalTextProps } from "../types/dist/index.js";
-import * as _$react from "react";
+import "../tokens/index.js";
 import { JSX, ReactNode, Ref } from "react";
-
 //#region src/components/Text.d.ts
 type TextElementTagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'strong' | 'span' | 'label' | 'li' | 'sup';
 type ColorWithInherit = Exclude<UniversalTextProps['color'], undefined> | 'inherit';
 type VariantWithInherit = Exclude<UniversalTextProps['variant'], undefined> | 'inherit';
 type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
-  /** Ref passed to the inner container. */ref?: Ref<HTMLElement>; /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
+  /** Ref passed to the inner container. */
+  ref?: Ref<HTMLElement>;
+  /** Changes the HTML tag used to render text. Uses the most appropriate semantic tag based on the text style variant. */
   as?: TagName;
   /**
    * Applies italic styling. Works with both traditional fonts (via font-style: italic)
@@ -53,6 +54,6 @@ type TextProps<TagName extends TextElementTagName = TextElementTagName> = {
  *
  * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
  */
-declare const Text: _$react.ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & _$react.RefAttributes<HTMLElement>>;
+declare const Text: import("react").ForwardRefExoticComponent<Omit<TextProps<TextElementTagName>, "ref"> & import("react").RefAttributes<HTMLElement>>;
 //#endregion
 export { Text, type TextProps };

package/dist/components/Text.js

@@ -81,8 +81,7 @@ const asMap = {
 * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
 */
 const Text = forwardRef(function Text({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], italic, tabularNumbers, fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, 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, width, height, ...props }, ref) {
-	const classNames = getStyles({
-		className,
+	const textStyles = {
 		...color && color !== "inherit" ? { color } : {},
 		...variant && variant !== "inherit" ? {
 			fontFamily: fontFamily ?? variant,
@@ -92,7 +91,11 @@ const Text = forwardRef(function Text({ className, asChild, color = "primary", v
 			textTransform: textTransform ?? variant,
 			letterSpacing: letterSpacing ?? variant
 		} : {},
-		textAlign,
+		textAlign
+	};
+	const classNames = getStyles({
+		className,
+		...textStyles,
 		backgroundColor,
 		borderRadius,
 		borderTopStartRadius,

package/dist/components/VStack.cjs

@@ -1,6 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 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");

package/dist/components/VStack.d.cts

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