@yahoo/uds 3.66.1 → 3.67.0-beta.1

package/dist/components/Link.cjs

@@ -0,0 +1,98 @@
+/*! © 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_IconSlot = require('./IconSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Link.tsx
+/**
+* A Link provides navigation or actionable functionality by linking users to
+* another location within an application, an external resource, or triggering
+* specific in-page interactions (i.e. scroll-to-section).
+*
+* @componentType Client component
+*
+* @description
+* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+*
+* @usage
+* - Provide a way for users to navigate to another location.
+* - Provide a trigger for in-page interactions.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Link } from '@yahoo/uds';
+* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+*
+* <Link href="#">My Link</Link>
+* <Link href="#" startIcon={Share} />
+* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+*```
+**/
+const Link = (0, react.forwardRef)(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, ...anchorProps }, ref) {
+	const shouldSizeRelativeToContainingText = !textVariant;
+	const rootClasses = (0, react.useMemo)(() => {
+		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)
+		});
+	}, [
+		alwaysUnderline,
+		shouldSizeRelativeToContainingText,
+		textVariant,
+		variant,
+		className
+	]);
+	const iconStartStyles = require_styles_styler.getStyles({
+		linkVariantIconStart: variant,
+		linkTextStyleIcon: textVariant,
+		className: require_styles_styler.cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconEndStyles = require_styles_styler.getStyles({
+		linkVariantIconEnd: variant,
+		linkTextStyleIcon: textVariant,
+		className: require_styles_styler.cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconProps = {
+		variant: "outline",
+		color: "current"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+		ref,
+		className: rootClasses,
+		...anchorProps,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				className: iconStartStyles,
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon"
+			}),
+			children,
+			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				className: iconEndStyles,
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon"
+			})
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+exports.Link = Link;

package/dist/components/Link.d.cts

@@ -0,0 +1,45 @@
+import { UniversalLinkProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react5 from "react";
+
+//#region src/components/Link.d.ts
+type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
+  /** The link's destination. */
+  href?: string;
+  /** Anchor rel property. @default "noopener" **/
+  rel?: string;
+  /** If true, forces an underline to always be shown for a11y purposes.  @default false */
+  alwaysUnderline?: boolean;
+}
+/**
+ * A Link provides navigation or actionable functionality by linking users to
+ * another location within an application, an external resource, or triggering
+ * specific in-page interactions (i.e. scroll-to-section).
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+ *
+ * @usage
+ * - Provide a way for users to navigate to another location.
+ * - Provide a trigger for in-page interactions.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Link } from '@yahoo/uds';
+ * import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+ *
+ * <Link href="#">My Link</Link>
+ * <Link href="#" startIcon={Share} />
+ * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+ *```
+ **/
+declare const Link: react5.ForwardRefExoticComponent<LinkProps & react5.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, type LinkProps };

package/dist/components/Link.d.ts

@@ -0,0 +1,45 @@
+import { UniversalLinkProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react25 from "react";
+
+//#region src/components/Link.d.ts
+type HTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+interface LinkProps extends HTMLAnchorProps, UniversalLinkProps {
+  /** The link's destination. */
+  href?: string;
+  /** Anchor rel property. @default "noopener" **/
+  rel?: string;
+  /** If true, forces an underline to always be shown for a11y purposes.  @default false */
+  alwaysUnderline?: boolean;
+}
+/**
+ * A Link provides navigation or actionable functionality by linking users to
+ * another location within an application, an external resource, or triggering
+ * specific in-page interactions (i.e. scroll-to-section).
+ *
+ * @componentType Client component
+ *
+ * @description
+ * A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+ *
+ * @usage
+ * - Provide a way for users to navigate to another location.
+ * - Provide a trigger for in-page interactions.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Link } from '@yahoo/uds';
+ * import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+ *
+ * <Link href="#">My Link</Link>
+ * <Link href="#" startIcon={Share} />
+ * <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+ *```
+ **/
+declare const Link: react25.ForwardRefExoticComponent<LinkProps & react25.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, type LinkProps };

package/dist/components/Link.js

@@ -0,0 +1,97 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../styles/styler.js";
+import { IconSlot } from "./IconSlot.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Link.tsx
+/**
+* A Link provides navigation or actionable functionality by linking users to
+* another location within an application, an external resource, or triggering
+* specific in-page interactions (i.e. scroll-to-section).
+*
+* @componentType Client component
+*
+* @description
+* A link component provides navigation or actionable functionality by linking users to another location within an application, an external resource, or triggering specific in-page interactions (i.e. scroll-to-section). This is different than a “button” link which is a button component without a border or fill.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/link Link Docs} for more info
+*
+* @usage
+* - Provide a way for users to navigate to another location.
+* - Provide a trigger for in-page interactions.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Link } from '@yahoo/uds';
+* import { Share, Link as LinkIcon } from '@yahoo/uds-icons';
+*
+* <Link href="#">My Link</Link>
+* <Link href="#" startIcon={Share} />
+* <Link href="https://yahoo.com" target="_blank" endIcon={LinkIcon} />
+*```
+**/
+const Link = forwardRef(function Input({ variant = "primary", textVariant, startIcon, endIcon, alwaysUnderline = false, children, className, ...anchorProps }, ref) {
+	const shouldSizeRelativeToContainingText = !textVariant;
+	const rootClasses = useMemo(() => {
+		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)
+		});
+	}, [
+		alwaysUnderline,
+		shouldSizeRelativeToContainingText,
+		textVariant,
+		variant,
+		className
+	]);
+	const iconStartStyles = getStyles({
+		linkVariantIconStart: variant,
+		linkTextStyleIcon: textVariant,
+		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconEndStyles = getStyles({
+		linkVariantIconEnd: variant,
+		linkTextStyleIcon: textVariant,
+		className: cx(shouldSizeRelativeToContainingText && "w-[0.7em] h-[0.7em]")
+	});
+	const iconProps = {
+		variant: "outline",
+		color: "current"
+	};
+	return /* @__PURE__ */ jsxs("a", {
+		ref,
+		className: rootClasses,
+		...anchorProps,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				className: iconStartStyles,
+				icon: startIcon,
+				iconProps,
+				"data-testid": "start-icon"
+			}),
+			children,
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				className: iconEndStyles,
+				icon: endIcon,
+				iconProps,
+				"data-testid": "end-icon"
+			})
+		]
+	});
+});
+Link.displayName = "Link";
+
+//#endregion
+export { Link };

package/dist/components/Text.cjs

@@ -0,0 +1,157 @@
+/*! © 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_utils_createSlot = require('../utils/createSlot.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Text.tsx
+const Slot = require_utils_createSlot.createSlot();
+const asMap = {
+	display1: "h1",
+	display2: "h1",
+	display3: "h1",
+	title1: "h1",
+	title2: "h2",
+	title3: "h3",
+	title4: "h4",
+	headline1: "h5",
+	body1: "p",
+	label1: "p",
+	label2: "p",
+	label3: "p",
+	label4: "p",
+	caption1: "p",
+	caption2: "p",
+	legal1: "p",
+	"display1/emphasized": "h1",
+	"display2/emphasized": "h1",
+	"display3/emphasized": "h1",
+	"title1/emphasized": "h1",
+	"title2/emphasized": "h2",
+	"title3/emphasized": "h3",
+	"title4/emphasized": "h4",
+	"headline1/emphasized": "h5",
+	"body1/emphasized": "p",
+	"label1/emphasized": "p",
+	"label2/emphasized": "p",
+	"label3/emphasized": "p",
+	"label4/emphasized": "p",
+	"caption1/emphasized": "p",
+	"caption2/emphasized": "p",
+	"legal1/emphasized": "p",
+	ui1: "span",
+	ui2: "span",
+	ui3: "span",
+	ui4: "span",
+	ui5: "span",
+	ui6: "span",
+	"ui1/emphasized": "span",
+	"ui2/emphasized": "span",
+	"ui3/emphasized": "span",
+	"ui4/emphasized": "span",
+	"ui5/emphasized": "span",
+	"ui6/emphasized": "span",
+	inherit: "p"
+};
+/**
+* **💬 A text element that can be used to display text**
+*
+* @description
+* By default, the `Text` component uses text primary color and selects the
+* correct font, weight, and leading. It also choices appropriate semantic
+* HTML element based on the `variant` prop. For example, `body1` will use a
+* `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+* with the `as` prop.
+*
+*
+* @example
+* ```tsx
+* import { Text } from '@yahoo/uds';
+*
+* <Text variant="body1" color="primary">
+*   Text goes here
+* </Text>
+* ```
+*
+* @usage
+* - Use `Text` to display text in your app.
+* - Use `variant` to change the size and weight of the text.
+* - Use `color` to change the color of the text.
+* - Use `as` to change the HTML tag used to render the text.
+*
+* @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+*/
+const Text = (0, react.forwardRef)(function Text$1({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], 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, ...props }, ref) {
+	const classNames = require_styles_styler.getStyles({
+		className,
+		...color && color !== "inherit" ? { color } : {},
+		...variant && variant !== "inherit" ? {
+			fontFamily: fontFamily ?? variant,
+			fontSize: fontSize ?? variant,
+			fontWeight: fontWeight ?? variant,
+			lineHeight: lineHeight ?? variant,
+			textTransform: textTransform ?? variant,
+			letterSpacing: letterSpacing ?? variant
+		} : {},
+		textAlign,
+		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
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : as, {
+		className: classNames,
+		ref,
+		...props
+	});
+});
+Text.displayName = "Text";
+
+//#endregion
+exports.Text = Text;

package/dist/components/Text.d.cts

@@ -0,0 +1,90 @@
+import { UniversalTextProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import * as react7 from "react";
+import { 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. */
+  as?: TagName;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ */
+declare const Text: react7.ForwardRefExoticComponent<(Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLElement> & react7.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLHeadingElement> & react7.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLLabelElement> & react7.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLLIElement> & react7.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLParagraphElement> & react7.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react7.ClassAttributes<HTMLSpanElement> & react7.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react7.RefAttributes<HTMLElement>>;
+//#endregion
+export { Text, type TextProps };

package/dist/components/Text.d.ts

@@ -0,0 +1,90 @@
+import { UniversalTextProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import * as react11 from "react";
+import { 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. */
+  as?: TagName;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & JSX.IntrinsicElements[TagName] & Omit<UniversalTextProps, 'variant' | 'color'>;
+/**
+ * **💬 A text element that can be used to display text**
+ *
+ * @description
+ * By default, the `Text` component uses text primary color and selects the
+ * correct font, weight, and leading. It also choices appropriate semantic
+ * HTML element based on the `variant` prop. For example, `body1` will use a
+ * `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+ * with the `as` prop.
+ *
+ *
+ * @example
+ * ```tsx
+ * import { Text } from '@yahoo/uds';
+ *
+ * <Text variant="body1" color="primary">
+ *   Text goes here
+ * </Text>
+ * ```
+ *
+ * @usage
+ * - Use `Text` to display text in your app.
+ * - Use `variant` to change the size and weight of the text.
+ * - Use `color` to change the color of the text.
+ * - Use `as` to change the HTML tag used to render the text.
+ *
+ * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+ */
+declare const Text: react11.ForwardRefExoticComponent<(Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLElement> & react11.HTMLAttributes<HTMLElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLHeadingElement> & react11.HTMLAttributes<HTMLHeadingElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLLabelElement> & react11.LabelHTMLAttributes<HTMLLabelElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLLIElement> & react11.LiHTMLAttributes<HTMLLIElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLParagraphElement> & react11.HTMLAttributes<HTMLParagraphElement> & Omit<UniversalTextProps, "color" | "variant">, "ref"> | Omit<{
+  /** 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?: TextElementTagName | undefined;
+  variant?: VariantWithInherit;
+  color?: ColorWithInherit;
+} & react11.ClassAttributes<HTMLSpanElement> & react11.HTMLAttributes<HTMLSpanElement> & Omit<UniversalTextProps, "color" | "variant">, "ref">) & react11.RefAttributes<HTMLElement>>;
+//#endregion
+export { Text, type TextProps };