@yahoo/uds 3.124.0 → 3.125.1

package/dist/automated-config/dist/generated/autoVariants.cjs

@@ -14,6 +14,9 @@ const autoVariants = {
 		secondary: "uds-avatar-image-variant-secondary-root"
 	},
 	avatarSizeIcon: {
+		"2xl": "uds-avatar-size-2xl-icon",
+		"2xs": "uds-avatar-size-2xs-icon",
+		"3xl": "uds-avatar-size-3xl-icon",
 		default: "uds-avatar-size-default-icon",
 		lg: "uds-avatar-size-lg-icon",
 		md: "uds-avatar-size-md-icon",
@@ -22,6 +25,9 @@ const autoVariants = {
 		xs: "uds-avatar-size-xs-icon"
 	},
 	avatarSizeRoot: {
+		"2xl": "uds-avatar-size-2xl-root",
+		"2xs": "uds-avatar-size-2xs-root",
+		"3xl": "uds-avatar-size-3xl-root",
 		default: "uds-avatar-size-default-root",
 		lg: "uds-avatar-size-lg-root",
 		md: "uds-avatar-size-md-root",

package/dist/automated-config/dist/generated/autoVariants.d.cts

@@ -3,8 +3,8 @@
 interface StylePropsVariantsAuto<T> {
   avatarIconVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
   avatarImageVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
-  avatarSizeIcon: Record<'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
-  avatarSizeRoot: Record<'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
+  avatarSizeIcon: Record<'2xl' | '2xs' | '3xl' | 'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
+  avatarSizeRoot: Record<'2xl' | '2xs' | '3xl' | 'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
   avatarTextVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
   badgeSizeIcon: Record<'default' | 'lg' | 'md' | 'sm' | 'xs', T>;
   badgeSizeRoot: Record<'default' | 'lg' | 'md' | 'sm' | 'xs', T>;

package/dist/automated-config/dist/generated/autoVariants.d.ts

@@ -3,8 +3,8 @@
 interface StylePropsVariantsAuto<T> {
   avatarIconVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
   avatarImageVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
-  avatarSizeIcon: Record<'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
-  avatarSizeRoot: Record<'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
+  avatarSizeIcon: Record<'2xl' | '2xs' | '3xl' | 'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
+  avatarSizeRoot: Record<'2xl' | '2xs' | '3xl' | 'default' | 'lg' | 'md' | 'sm' | 'xl' | 'xs', T>;
   avatarTextVariantRoot: Record<'default' | 'primary' | 'secondary', T>;
   badgeSizeIcon: Record<'default' | 'lg' | 'md' | 'sm' | 'xs', T>;
   badgeSizeRoot: Record<'default' | 'lg' | 'md' | 'sm' | 'xs', T>;

package/dist/automated-config/dist/generated/autoVariants.js

@@ -13,6 +13,9 @@ const autoVariants = {
 		secondary: "uds-avatar-image-variant-secondary-root"
 	},
 	avatarSizeIcon: {
+		"2xl": "uds-avatar-size-2xl-icon",
+		"2xs": "uds-avatar-size-2xs-icon",
+		"3xl": "uds-avatar-size-3xl-icon",
 		default: "uds-avatar-size-default-icon",
 		lg: "uds-avatar-size-lg-icon",
 		md: "uds-avatar-size-md-icon",
@@ -21,6 +24,9 @@ const autoVariants = {
 		xs: "uds-avatar-size-xs-icon"
 	},
 	avatarSizeRoot: {
+		"2xl": "uds-avatar-size-2xl-root",
+		"2xs": "uds-avatar-size-2xs-root",
+		"3xl": "uds-avatar-size-3xl-root",
 		default: "uds-avatar-size-default-root",
 		lg: "uds-avatar-size-lg-root",
 		md: "uds-avatar-size-md-root",

package/dist/automated-config/dist/generated/generatedConfigs.cjs

@@ -2647,6 +2647,9 @@ const AvatarConfig = {
 				label: "icon",
 				properties: { iconSize: {
 					defaults: {
+						"2xl": "lg",
+						"2xs": "xs",
+						"3xl": "lg",
 						lg: "lg",
 						md: "md",
 						sm: "sm",
@@ -2669,6 +2672,9 @@ const AvatarConfig = {
 				properties: {
 					borderWidth: {
 						defaults: {
+							"2xl": "thin",
+							"2xs": "thin",
+							"3xl": "thin",
 							lg: "thin",
 							md: "thin",
 							sm: "thin",
@@ -2687,6 +2693,9 @@ const AvatarConfig = {
 					},
 					height: {
 						defaults: {
+							"2xl": "20",
+							"2xs": "5",
+							"3xl": "24",
 							lg: "12",
 							md: "10",
 							sm: "7",
@@ -2738,6 +2747,9 @@ const AvatarConfig = {
 					},
 					textVariant: {
 						defaults: {
+							"2xl": "title2",
+							"2xs": "caption1",
+							"3xl": "title1",
 							lg: "title4",
 							md: "headline1",
 							sm: "caption2",
@@ -2796,6 +2808,9 @@ const AvatarConfig = {
 					},
 					width: {
 						defaults: {
+							"2xl": "20",
+							"2xs": "5",
+							"3xl": "24",
 							lg: "12",
 							md: "10",
 							sm: "7",
@@ -2849,11 +2864,14 @@ const AvatarConfig = {
 			}
 		},
 		options: [
+			"2xs",
 			"xs",
 			"sm",
 			"md",
 			"lg",
-			"xl"
+			"xl",
+			"2xl",
+			"3xl"
 		]
 	} }
 };

package/dist/automated-config/dist/generated/generatedConfigs.d.cts

@@ -174,6 +174,9 @@ declare const AvatarConfig: {
           readonly properties: {
             readonly iconSize: {
               readonly defaults: {
+                readonly '2xl': "lg";
+                readonly '2xs': "xs";
+                readonly '3xl': "lg";
                 readonly lg: "lg";
                 readonly md: "md";
                 readonly sm: "sm";
@@ -192,6 +195,9 @@ declare const AvatarConfig: {
           readonly properties: {
             readonly borderWidth: {
               readonly defaults: {
+                readonly '2xl': "thin";
+                readonly '2xs': "thin";
+                readonly '3xl': "thin";
                 readonly lg: "thin";
                 readonly md: "thin";
                 readonly sm: "thin";
@@ -205,6 +211,9 @@ declare const AvatarConfig: {
             };
             readonly height: {
               readonly defaults: {
+                readonly '2xl': "20";
+                readonly '2xs': "5";
+                readonly '3xl': "24";
                 readonly lg: "12";
                 readonly md: "10";
                 readonly sm: "7";
@@ -218,6 +227,9 @@ declare const AvatarConfig: {
             };
             readonly textVariant: {
               readonly defaults: {
+                readonly '2xl': "title2";
+                readonly '2xs': "caption1";
+                readonly '3xl': "title1";
                 readonly lg: "title4";
                 readonly md: "headline1";
                 readonly sm: "caption2";
@@ -231,6 +243,9 @@ declare const AvatarConfig: {
             };
             readonly width: {
               readonly defaults: {
+                readonly '2xl': "20";
+                readonly '2xs': "5";
+                readonly '3xl': "24";
                 readonly lg: "12";
                 readonly md: "10";
                 readonly sm: "7";
@@ -245,7 +260,7 @@ declare const AvatarConfig: {
           };
         };
       };
-      readonly options: readonly ["xs", "sm", "md", "lg", "xl"];
+      readonly options: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
     };
   };
 };

package/dist/automated-config/dist/generated/generatedConfigs.d.ts

@@ -174,6 +174,9 @@ declare const AvatarConfig: {
           readonly properties: {
             readonly iconSize: {
               readonly defaults: {
+                readonly '2xl': "lg";
+                readonly '2xs': "xs";
+                readonly '3xl': "lg";
                 readonly lg: "lg";
                 readonly md: "md";
                 readonly sm: "sm";
@@ -192,6 +195,9 @@ declare const AvatarConfig: {
           readonly properties: {
             readonly borderWidth: {
               readonly defaults: {
+                readonly '2xl': "thin";
+                readonly '2xs': "thin";
+                readonly '3xl': "thin";
                 readonly lg: "thin";
                 readonly md: "thin";
                 readonly sm: "thin";
@@ -205,6 +211,9 @@ declare const AvatarConfig: {
             };
             readonly height: {
               readonly defaults: {
+                readonly '2xl': "20";
+                readonly '2xs': "5";
+                readonly '3xl': "24";
                 readonly lg: "12";
                 readonly md: "10";
                 readonly sm: "7";
@@ -218,6 +227,9 @@ declare const AvatarConfig: {
             };
             readonly textVariant: {
               readonly defaults: {
+                readonly '2xl': "title2";
+                readonly '2xs': "caption1";
+                readonly '3xl': "title1";
                 readonly lg: "title4";
                 readonly md: "headline1";
                 readonly sm: "caption2";
@@ -231,6 +243,9 @@ declare const AvatarConfig: {
             };
             readonly width: {
               readonly defaults: {
+                readonly '2xl': "20";
+                readonly '2xs': "5";
+                readonly '3xl': "24";
                 readonly lg: "12";
                 readonly md: "10";
                 readonly sm: "7";
@@ -245,7 +260,7 @@ declare const AvatarConfig: {
           };
         };
       };
-      readonly options: readonly ["xs", "sm", "md", "lg", "xl"];
+      readonly options: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
     };
   };
 };

package/dist/automated-config/dist/generated/generatedConfigs.js

@@ -2646,6 +2646,9 @@ const AvatarConfig = {
 				label: "icon",
 				properties: { iconSize: {
 					defaults: {
+						"2xl": "lg",
+						"2xs": "xs",
+						"3xl": "lg",
 						lg: "lg",
 						md: "md",
 						sm: "sm",
@@ -2668,6 +2671,9 @@ const AvatarConfig = {
 				properties: {
 					borderWidth: {
 						defaults: {
+							"2xl": "thin",
+							"2xs": "thin",
+							"3xl": "thin",
 							lg: "thin",
 							md: "thin",
 							sm: "thin",
@@ -2686,6 +2692,9 @@ const AvatarConfig = {
 					},
 					height: {
 						defaults: {
+							"2xl": "20",
+							"2xs": "5",
+							"3xl": "24",
 							lg: "12",
 							md: "10",
 							sm: "7",
@@ -2737,6 +2746,9 @@ const AvatarConfig = {
 					},
 					textVariant: {
 						defaults: {
+							"2xl": "title2",
+							"2xs": "caption1",
+							"3xl": "title1",
 							lg: "title4",
 							md: "headline1",
 							sm: "caption2",
@@ -2795,6 +2807,9 @@ const AvatarConfig = {
 					},
 					width: {
 						defaults: {
+							"2xl": "20",
+							"2xs": "5",
+							"3xl": "24",
 							lg: "12",
 							md: "10",
 							sm: "7",
@@ -2848,11 +2863,14 @@ const AvatarConfig = {
 			}
 		},
 		options: [
+			"2xs",
 			"xs",
 			"sm",
 			"md",
 			"lg",
-			"xl"
+			"xl",
+			"2xl",
+			"3xl"
 		]
 	} }
 };

package/dist/automated-config/dist/generated/universalTokensConfigAuto.cjs

@@ -81,6 +81,87 @@ const defaultUniversalTokensConfigAuto = {
 					valueType: "alias"
 				} }
 			},
+			"size/2xl/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/2xl/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "20",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "title2",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "20",
+					valueType: "alias"
+				} }
+			},
+			"size/2xs/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "xs",
+				valueType: "alias"
+			} } },
+			"size/2xs/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "caption1",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} }
+			},
+			"size/3xl/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/3xl/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "24",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "title1",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "24",
+					valueType: "alias"
+				} }
+			},
 			"size/lg/icon": { iconSize: { rest: {
 				type: "iconSizes",
 				value: "lg",

package/dist/automated-config/dist/generated/universalTokensConfigAuto.js

@@ -80,6 +80,87 @@ const defaultUniversalTokensConfigAuto = {
 					valueType: "alias"
 				} }
 			},
+			"size/2xl/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/2xl/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "20",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "title2",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "20",
+					valueType: "alias"
+				} }
+			},
+			"size/2xs/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "xs",
+				valueType: "alias"
+			} } },
+			"size/2xs/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "caption1",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "5",
+					valueType: "alias"
+				} }
+			},
+			"size/3xl/icon": { iconSize: { rest: {
+				type: "iconSizes",
+				value: "lg",
+				valueType: "alias"
+			} } },
+			"size/3xl/root": {
+				borderWidth: { rest: {
+					type: "borderWidths",
+					value: "thin",
+					valueType: "alias"
+				} },
+				height: { rest: {
+					type: "spacingAliases",
+					value: "24",
+					valueType: "alias"
+				} },
+				textVariant: { rest: {
+					type: "textVariants",
+					value: "title1",
+					valueType: "alias"
+				} },
+				width: { rest: {
+					type: "spacingAliases",
+					value: "24",
+					valueType: "alias"
+				} }
+			},
 			"size/lg/icon": { iconSize: { rest: {
 				type: "iconSizes",
 				value: "lg",

package/dist/components/FormLabel.cjs

@@ -3,15 +3,17 @@ 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 = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }) => {
+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;
 	if (!contents) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Text.Text, {
+		ref,
 		variant,
 		color,
 		as,
@@ -27,7 +29,7 @@ const FormLabel = ({ htmlFor, required, label, children, color = "muted", varian
 			children: "*"
 		})]
 	});
-};
+});
 FormLabel.displayName = "FormLabel";
 
 //#endregion

package/dist/components/FormLabel.d.cts

@@ -1,27 +1,12 @@
 
 import { UniversalFormLabelProps } from "../types/dist/index.cjs";
 import "../tokens/index.cjs";
+import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: {
-  ({
-    htmlFor,
-    required,
-    label,
-    children,
-    color,
-    variant,
-    hasError,
-    showRequiredAsterisk,
-    as,
-    className,
-    ...rest
-  }: FormLabelProps): react_jsx_runtime0.JSX.Element | null;
-  displayName: string;
-};
+declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.d.ts

@@ -1,27 +1,12 @@
 
 import { UniversalFormLabelProps } from "../types/dist/index.js";
 import "../tokens/index.js";
+import * as react from "react";
 import { PropsWithChildren } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/FormLabel.d.ts
 type HtmlLabelProps = Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'>;
 interface FormLabelProps extends UniversalFormLabelProps, PropsWithChildren, HtmlLabelProps {}
-declare const FormLabel: {
-  ({
-    htmlFor,
-    required,
-    label,
-    children,
-    color,
-    variant,
-    hasError,
-    showRequiredAsterisk,
-    as,
-    className,
-    ...rest
-  }: FormLabelProps): react_jsx_runtime0.JSX.Element | null;
-  displayName: string;
-};
+declare const FormLabel: react.ForwardRefExoticComponent<FormLabelProps & react.RefAttributes<HTMLElement>>;
 //#endregion
 export { FormLabel, type FormLabelProps };

package/dist/components/FormLabel.js

@@ -1,14 +1,16 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { cx } from "../styles/styler.js";
 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 = ({ htmlFor, required, label, children, color = "muted", variant = "label3", hasError = false, showRequiredAsterisk = false, as = "label", className, ...rest }) => {
+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;
 	if (!contents) return null;
 	return /* @__PURE__ */ jsxs(Text, {
+		ref,
 		variant,
 		color,
 		as,
@@ -24,7 +26,7 @@ const FormLabel = ({ htmlFor, required, label, children, color = "muted", varian
 			children: "*"
 		})]
 	});
-};
+});
 FormLabel.displayName = "FormLabel";
 
 //#endregion

package/dist/components/Image.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = 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");
 
 //#region src/components/Image.tsx
@@ -28,8 +29,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @related [Box](https://uds.build/docs/components/box)
 */
-function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }) {
+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, ...props }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		ref,
 		src,
 		alt,
 		className: require_styles_styler.getStyles({
@@ -90,7 +92,7 @@ function Image({ width: imageWidth, height: imageHeight, src, alt, contentFit, b
 		},
 		...props
 	});
-}
+});
 Image.displayName = "Image";
 
 //#endregion