@yahoo/uds-mobile 2.24.0-beta.1 → 2.24.0-beta.11

package/README.md

@@ -7,6 +7,7 @@
 - [Quick Start](#quick-start)
 - [Components](#components)
 - [Icons](#icons)
+- [Accessibility and Text Scaling](#accessibility-and-text-scaling)
 - [Fonts](#fonts)
 - [CLI](#cli)
 - [Testing](#testing)
@@ -17,11 +18,12 @@
 
 `@yahoo/uds-mobile` brings UDS to React Native. It provides:
 
-- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, InputHelpText, Link, Radio, RadioGroup, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
+- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, InputHelpText, Link, Pagination, Radio, RadioGroup, Select, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
 - **Theming**: Full light/dark mode support with automatic system preference detection
 - **Design Token Integration**: Colors, typography, spacing, and motion configs synced from UDS tokens
 - **Animations**: Smooth, physics-based animations using Reanimated with motion parity to web
 - **Icon Support**: Icon font and SVG icon rendering with full UDS icon library
+- **Dynamic Type**: Text, icons, and bounded controls respond to system text-size settings
 
 ### Key Dependencies
 
@@ -476,6 +478,40 @@ const animatedStyle = useAnimatedStyle(() => ({
 }));
 ```
 
+## Accessibility and Text Scaling
+
+UDS Mobile automatically scales text, font icons, multicolor SVG icons, and supported control
+geometry with the iOS and Android system text-size settings. Every text style caps at 2x or below by
+default, with the largest display and title styles tapering further.
+
+Most apps need no configuration. To override the defaults, pass a stable configuration object to
+`UDSGestureProvider`:
+
+```tsx
+import type { FontScalingConfig } from '@yahoo/uds-mobile/fontScaling';
+import { UDSGestureProvider } from '@yahoo/uds-mobile/UDSGestureProvider';
+
+const FONT_SCALING: FontScalingConfig = {
+  variants: { body1: null }, // Let body text follow the system without a cap
+  control: 2,
+};
+
+<UDSGestureProvider fontScaling={FONT_SCALING}>
+  <App />
+</UDSGestureProvider>;
+```
+
+See the [Accessibility and text scaling guide](https://uds.build/docs/mobile/accessibility) for the
+default cap table, per-component overrides, custom-component hooks, known limits, and device test
+matrix.
+
+When upgrading from manual scaling workarounds, remove app-level geometry multiplication only after
+comparing the screen with UDS defaults; applying both can make controls oversized. App-owned
+composite controls should use `useFontScale(cap, baseSize)`. As a temporary rollback,
+`fontScaling={{ enabled: false }}` restores the pre-feature behavior: native text scaling remains,
+while UDS-added caps, ramps, multicolor-icon scaling, and control geometry growth are disabled.
+An explicit `maxFontSizeMultiplier` on a component still opts that component back into scaling.
+
 ## Fonts
 
 ### Font Handling

package/dist/components/Avatar/AvatarIcon.cjs

@@ -2,26 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_components_Box = require("../Box.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Avatar_useAvatarFontScale = require("./useAvatarFontScale.cjs");
 const require_components_Avatar_utils = require("./utils.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarIcon.tsx
-const AvatarIcon = (0, react.memo)(function AvatarIcon({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, icon, customSize, style, accessibilityLabel, alt, ref, ...viewProps }) {
+const AvatarIcon = (0, react.memo)(function AvatarIcon({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, icon, customSize, maxFontSizeMultiplier, style, accessibilityLabel, alt, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.avatarStyles.useVariants({
 		size,
 		icon: variant
 	});
+	const fontScaleFactor = require_components_Avatar_useAvatarFontScale.useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = (0, react.useMemo)(() => [
 		generated_styles.avatarStyles.root,
 		avatarStaticStyles.root,
-		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		require_components_Avatar_utils.getAvatarSizeStyle(generated_styles.avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		generated_styles.avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -33,6 +38,7 @@ const AvatarIcon = (0, react.memo)(function AvatarIcon({ size = "md", variant =
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: icon ?? require_components_Avatar_utils.getDefaultAvatarIcon(variant),
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.avatarStyles.icon
 		})
 	});

package/dist/components/Avatar/AvatarIcon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarIcon.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarIcon.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarIcon.js

@@ -1,25 +1,30 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "../Box.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
 import { IconSlot } from "../IconSlot.js";
-import { DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle, getDefaultAvatarIcon } from "./utils.js";
+import { useAvatarFontScale } from "./useAvatarFontScale.js";
+import { DEFAULT_AVATAR_VARIANT, getAvatarSizeStyle, getDefaultAvatarIcon } from "./utils.js";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarIcon.tsx
-const AvatarIcon = memo(function AvatarIcon({ size = "md", variant = DEFAULT_AVATAR_VARIANT, icon, customSize, style, accessibilityLabel, alt, ref, ...viewProps }) {
+const AvatarIcon = memo(function AvatarIcon({ size = "md", variant = DEFAULT_AVATAR_VARIANT, icon, customSize, maxFontSizeMultiplier, style, accessibilityLabel, alt, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	avatarStyles.useVariants({
 		size,
 		icon: variant
 	});
+	const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = useMemo(() => [
 		avatarStyles.root,
 		avatarStaticStyles.root,
-		getAvatarCustomSizeStyle(customSize),
+		getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ jsx(Box, {
@@ -31,6 +36,7 @@ const AvatarIcon = memo(function AvatarIcon({ size = "md", variant = DEFAULT_AVA
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: icon ?? getDefaultAvatarIcon(variant),
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: avatarStyles.icon
 		})
 	});

package/dist/components/Avatar/AvatarIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { IconSlot } from '../IconSlot';\nimport type { AvatarIconProps } from './types';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  getAvatarCustomSizeStyle,\n  getDefaultAvatarIcon,\n} from './utils';\n\nconst AvatarIcon = memo(function AvatarIcon({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  icon,\n  customSize,\n  style,\n  accessibilityLabel,\n  alt,\n  ref,\n  ...viewProps\n}: AvatarIconProps) {\n  avatarStyles.useVariants({ size, icon: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <IconSlot\n        icon={icon ?? getDefaultAvatarIcon(variant)}\n        variant=\"fill\"\n        style={avatarStyles.icon}\n      />\n    </Box>\n  );\n});\n\nAvatarIcon.displayName = 'AvatarIcon';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarIcon };\n"],"mappings":";;;;;;;;;AAcA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,YACA,OACA,oBACA,KACA,KACA,GAAG,aACe;CAClB,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CAEjD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAAC,UAAD;GACE,MAAM,QAAQ,qBAAqB,QAAQ;GAC3C,SAAQ;GACR,OAAO,aAAa;GACpB,CAAA;EACE,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}
+{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { Box } from '../Box';\nimport { IconSlot } from '../IconSlot';\nimport type { AvatarIconProps } from './types';\nimport { useAvatarFontScale } from './useAvatarFontScale';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  getAvatarSizeStyle,\n  getDefaultAvatarIcon,\n} from './utils';\n\nconst AvatarIcon = memo(function AvatarIcon({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  icon,\n  customSize,\n  maxFontSizeMultiplier,\n  style,\n  accessibilityLabel,\n  alt,\n  ref,\n  ...viewProps\n}: AvatarIconProps) {\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  avatarStyles.useVariants({ size, icon: variant });\n  const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo(\n    () => [\n      avatarStyles.root,\n      avatarStaticStyles.root,\n      getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),\n      style,\n    ],\n    [avatarStyles.root, customSize, fontScaleFactor, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <IconSlot\n        icon={icon ?? getDefaultAvatarIcon(variant)}\n        variant=\"fill\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={avatarStyles.icon}\n      />\n    </Box>\n  );\n});\n\nAvatarIcon.displayName = 'AvatarIcon';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarIcon };\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,YACA,uBACA,OACA,oBACA,KACA,KACA,GAAG,aACe;CAClB,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CACjD,MAAM,kBAAkB,mBAAmB,8BAA8B;CAEzE,MAAM,YAAY,cACV;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB,aAAa,MAAM,YAAY,gBAAgB;EAClE;EACD,EACD;EAAC,aAAa;EAAM;EAAY;EAAiB;EAAM,CACxD;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAAC,UAAD;GACE,MAAM,QAAQ,qBAAqB,QAAQ;GAC3C,SAAQ;GACR,uBAAuB;GACvB,OAAO,aAAa;GACpB,CAAA;EACE,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}

package/dist/components/Avatar/AvatarImage.cjs

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_components_Box = require("../Box.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
+const require_components_Avatar_useAvatarFontScale = require("./useAvatarFontScale.cjs");
 const require_components_Avatar_utils = require("./utils.cjs");
 const require_components_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
 const require_components_Avatar_AvatarText = require("./AvatarText.cjs");
@@ -10,21 +12,24 @@ let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarImage.tsx
-const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = (0, react.useState)(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	generated_styles.avatarStyles.useVariants({
 		size,
 		image: variant
 	});
+	const fontScaleFactor = require_components_Avatar_useAvatarFontScale.useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = (0, react.useMemo)(() => [
 		generated_styles.avatarStyles.root,
 		avatarStaticStyles.root,
-		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		require_components_Avatar_utils.getAvatarSizeStyle(generated_styles.avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		generated_styles.avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	if (!shouldShowImage) {
@@ -36,6 +41,7 @@ const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant
 			initials: fallback,
 			abbreviationStrategy,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
 			style,
 			...viewProps
@@ -46,6 +52,7 @@ const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant
 			variant,
 			icon,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt,
 			style,
 			...viewProps

package/dist/components/Avatar/AvatarImage.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"AvatarImage.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAYM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"AvatarImage.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAYM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.js

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "../Box.js";
-import { DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from "./utils.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
+import { useAvatarFontScale } from "./useAvatarFontScale.js";
+import { DEFAULT_AVATAR_VARIANT, getAvatarSizeStyle } from "./utils.js";
 import { AvatarIcon } from "./AvatarIcon.js";
 import { AvatarText } from "./AvatarText.js";
 import { memo, useMemo, useState } from "react";
@@ -8,21 +10,24 @@ import { Image, StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarImage.tsx
-const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = useState(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	avatarStyles.useVariants({
 		size,
 		image: variant
 	});
+	const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = useMemo(() => [
 		avatarStyles.root,
 		avatarStaticStyles.root,
-		getAvatarCustomSizeStyle(customSize),
+		getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	if (!shouldShowImage) {
@@ -34,6 +39,7 @@ const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_A
 			initials: fallback,
 			abbreviationStrategy,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
 			style,
 			...viewProps
@@ -44,6 +50,7 @@ const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_A
 			variant,
 			icon,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt,
 			style,
 			...viewProps

package/dist/components/Avatar/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","names":["RNImage"],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport { Image as RNImage, StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarImageProps } from './types';\nimport { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from './utils';\n\nconst AvatarImage = memo(function AvatarImage({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  src,\n  alt,\n  fallback,\n  icon,\n  abbreviationStrategy,\n  customSize,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarImageProps) {\n  const [imageError, setImageError] = useState(false);\n  const shouldShowImage = Boolean(src) && !imageError;\n\n  avatarStyles.useVariants({ size, image: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  if (!shouldShowImage) {\n    if (fallback || alt) {\n      return (\n        <AvatarText\n          ref={ref}\n          size={size}\n          variant={variant}\n          name={alt}\n          initials={fallback}\n          abbreviationStrategy={abbreviationStrategy}\n          customSize={customSize}\n          accessibilityLabel={accessibilityLabel ?? alt ?? fallback}\n          style={style}\n          {...viewProps}\n        />\n      );\n    }\n\n    return (\n      <AvatarIcon\n        ref={ref}\n        size={size}\n        variant={variant}\n        icon={icon}\n        customSize={customSize}\n        accessibilityLabel={accessibilityLabel ?? alt}\n        style={style}\n        {...viewProps}\n      />\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <RNImage\n        source={{ uri: src }}\n        accessibilityLabel={alt}\n        onError={() => setImageError(true)}\n        style={avatarStaticStyles.image}\n      />\n    </Box>\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport { AvatarImage };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,OAAA,MACA,UAAU,wBACV,KACA,KACA,UACA,MACA,sBACA,YACA,OACA,oBACA,KACA,GAAG,aACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,QAAQ,IAAI,IAAI,CAAC;CAEzC,aAAa,YAAY;EAAE;EAAM,OAAO;EAAS,CAAC;CAElD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,IAAI,CAAC,iBAAiB;EACpB,IAAI,YAAY,KACd,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACT,MAAM;GACN,UAAU;GACY;GACV;GACZ,oBAAoB,sBAAsB,OAAO;GAC1C;GACP,GAAI;GACJ,CAAA;EAIN,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACH;GACM;GACZ,oBAAoB,sBAAsB;GACnC;GACP,GAAI;GACJ,CAAA;;CAIN,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAACA,OAAD;GACE,QAAQ,EAAE,KAAK,KAAK;GACpB,oBAAoB;GACpB,eAAe,cAAc,KAAK;GAClC,OAAO,mBAAmB;GAC1B,CAAA;EACE,CAAA;EAER;AAEF,YAAY,cAAc;AAE1B,MAAM,qBAAqB,WAAW,OAAO;CAC3C,MAAM;EACJ,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"AvatarImage.js","names":["RNImage"],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport { Image as RNImage, StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { Box } from '../Box';\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarImageProps } from './types';\nimport { useAvatarFontScale } from './useAvatarFontScale';\nimport { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, getAvatarSizeStyle } from './utils';\n\nconst AvatarImage = memo(function AvatarImage({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  src,\n  alt,\n  fallback,\n  icon,\n  abbreviationStrategy,\n  customSize,\n  maxFontSizeMultiplier,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarImageProps) {\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const [imageError, setImageError] = useState(false);\n  const shouldShowImage = Boolean(src) && !imageError;\n\n  avatarStyles.useVariants({ size, image: variant });\n  const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo(\n    () => [\n      avatarStyles.root,\n      avatarStaticStyles.root,\n      getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),\n      style,\n    ],\n    [avatarStyles.root, customSize, fontScaleFactor, style],\n  );\n\n  if (!shouldShowImage) {\n    if (fallback || alt) {\n      return (\n        <AvatarText\n          ref={ref}\n          size={size}\n          variant={variant}\n          name={alt}\n          initials={fallback}\n          abbreviationStrategy={abbreviationStrategy}\n          customSize={customSize}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          accessibilityLabel={accessibilityLabel ?? alt ?? fallback}\n          style={style}\n          {...viewProps}\n        />\n      );\n    }\n\n    return (\n      <AvatarIcon\n        ref={ref}\n        size={size}\n        variant={variant}\n        icon={icon}\n        customSize={customSize}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        accessibilityLabel={accessibilityLabel ?? alt}\n        style={style}\n        {...viewProps}\n      />\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <RNImage\n        source={{ uri: src }}\n        accessibilityLabel={alt}\n        onError={() => setImageError(true)}\n        style={avatarStaticStyles.image}\n      />\n    </Box>\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport { AvatarImage };\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,OAAA,MACA,UAAU,wBACV,KACA,KACA,UACA,MACA,sBACA,YACA,uBACA,OACA,oBACA,KACA,GAAG,aACgB;CACnB,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,QAAQ,IAAI,IAAI,CAAC;CAEzC,aAAa,YAAY;EAAE;EAAM,OAAO;EAAS,CAAC;CAClD,MAAM,kBAAkB,mBAAmB,8BAA8B;CAEzE,MAAM,YAAY,cACV;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB,aAAa,MAAM,YAAY,gBAAgB;EAClE;EACD,EACD;EAAC,aAAa;EAAM;EAAY;EAAiB;EAAM,CACxD;CAED,IAAI,CAAC,iBAAiB;EACpB,IAAI,YAAY,KACd,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACT,MAAM;GACN,UAAU;GACY;GACV;GACZ,uBAAuB;GACvB,oBAAoB,sBAAsB,OAAO;GAC1C;GACP,GAAI;GACJ,CAAA;EAIN,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACH;GACM;GACZ,uBAAuB;GACvB,oBAAoB,sBAAsB;GACnC;GACP,GAAI;GACJ,CAAA;;CAIN,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAACA,OAAD;GACE,QAAQ,EAAE,KAAK,KAAK;GACpB,oBAAoB;GACpB,eAAe,cAAc,KAAK;GAClC,OAAO,mBAAmB;GAC1B,CAAA;EACE,CAAA;EAER;AAEF,YAAY,cAAc;AAE1B,MAAM,qBAAqB,WAAW,OAAO;CAC3C,MAAM;EACJ,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC"}

package/dist/components/Avatar/AvatarText.cjs

@@ -2,26 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_components_Box = require("../Box.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_Text = require("../Text.cjs");
+const require_components_Avatar_useAvatarFontScale = require("./useAvatarFontScale.cjs");
 const require_components_Avatar_utils = require("./utils.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarText.tsx
-const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.avatarStyles.useVariants({
 		size,
 		text: variant
 	});
+	const fontScaleFactor = require_components_Avatar_useAvatarFontScale.useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = (0, react.useMemo)(() => [
 		generated_styles.avatarStyles.root,
 		avatarStaticStyles.root,
-		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		require_components_Avatar_utils.getAvatarSizeStyle(generated_styles.avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		generated_styles.avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -34,6 +39,7 @@ const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant =
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.avatarStyles.text,
 			children: initials || require_components_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
 		})

package/dist/components/Avatar/AvatarText.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarText.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarText.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarText.js

@@ -1,25 +1,30 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "../Box.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
 import { Text as Text$1 } from "../Text.js";
-import { DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle } from "./utils.js";
+import { useAvatarFontScale } from "./useAvatarFontScale.js";
+import { DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle } from "./utils.js";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarText.tsx
-const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	avatarStyles.useVariants({
 		size,
 		text: variant
 	});
+	const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = useMemo(() => [
 		avatarStyles.root,
 		avatarStaticStyles.root,
-		getAvatarCustomSizeStyle(customSize),
+		getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ jsx(Box, {
@@ -32,6 +37,7 @@ const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVA
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: avatarStyles.text,
 			children: initials || generateAvatarAbbreviation(name, abbreviationStrategy)
 		})

package/dist/components/Avatar/AvatarText.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.js","names":["Text"],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport type { AvatarTextProps } from './types';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarCustomSizeStyle,\n} from './utils';\n\nconst AvatarText = memo(function AvatarText({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  name,\n  initials,\n  abbreviationStrategy,\n  customSize,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarTextProps) {\n  avatarStyles.useVariants({ size, text: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? name ?? initials}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Text color=\"inherit\" variant=\"inherit\" numberOfLines={1} style={avatarStyles.text}>\n        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}\n      </Text>\n    </Box>\n  );\n});\n\nAvatarText.displayName = 'AvatarText';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarText };\n"],"mappings":";;;;;;;;;AAcA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,UACA,sBACA,YACA,OACA,oBACA,KACA,GAAG,aACe;CAClB,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CAEjD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB,QAAQ;EAClD,GAAI;EACJ,OAAO;YAEP,oBAACA,QAAD;GAAM,OAAM;GAAU,SAAQ;GAAU,eAAe;GAAG,OAAO,aAAa;aAC3E,YAAY,2BAA2B,MAAM,qBAAqB;GAC9D,CAAA;EACH,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}
+{"version":3,"file":"AvatarText.js","names":["Text"],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport type { AvatarTextProps } from './types';\nimport { useAvatarFontScale } from './useAvatarFontScale';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarSizeStyle,\n} from './utils';\n\nconst AvatarText = memo(function AvatarText({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  name,\n  initials,\n  abbreviationStrategy,\n  customSize,\n  maxFontSizeMultiplier,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarTextProps) {\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  avatarStyles.useVariants({ size, text: variant });\n  const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo(\n    () => [\n      avatarStyles.root,\n      avatarStaticStyles.root,\n      getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),\n      style,\n    ],\n    [avatarStyles.root, customSize, fontScaleFactor, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? name ?? initials}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={avatarStyles.text}\n      >\n        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}\n      </Text>\n    </Box>\n  );\n});\n\nAvatarText.displayName = 'AvatarText';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarText };\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,UACA,sBACA,YACA,uBACA,OACA,oBACA,KACA,GAAG,aACe;CAClB,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CACjD,MAAM,kBAAkB,mBAAmB,8BAA8B;CAEzE,MAAM,YAAY,cACV;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB,aAAa,MAAM,YAAY,gBAAgB;EAClE;EACD,EACD;EAAC,aAAa;EAAM;EAAY;EAAiB;EAAM,CACxD;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB,QAAQ;EAClD,GAAI;EACJ,OAAO;YAEP,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACR,eAAe;GACf,uBAAuB;GACvB,OAAO,aAAa;aAEnB,YAAY,2BAA2B,MAAM,qBAAqB;GAC9D,CAAA;EACH,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}

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

@@ -5,17 +5,21 @@ import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar/types.d.ts
-interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'> {
+interface AvatarFontScalingProps {
+  /** Caps avatar content and geometry at the control scale. Set null to remove the cap. @default 2 */
+  maxFontSizeMultiplier?: number | null;
+}
+interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
   /** Custom icon to display if the image fails and no text fallback is available. */
   icon?: IconSlotType;
 }
-interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'> {
+interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }
-interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'> {
+interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }

package/dist/components/Avatar/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,gBAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,yBAAA;;EAE1C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFV;EAIA,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA;EANhC;EAQV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA,CAAyB,YAAA;EAd9B;EAgBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAnBpB;EAqBb,GAAA;AAAA"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,sBAAA;;EAER,qBAAA;AAAA;AAAA,UAGQ,gBAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,yBAAA,2BACL,sBAAA;EAPF;EASA,GAAA,GAAM,GAAA,CAAI,IAAA;EANF;EAQR,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,gBACL,sBAAA;EAZK;EAcP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,CAAyB,YAAA,iBAC9B,sBAAA;EAtBA;EAwBF,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAzBT;EA2BxB,GAAA;AAAA"}

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

@@ -5,17 +5,21 @@ import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar/types.d.ts
-interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'> {
+interface AvatarFontScalingProps {
+  /** Caps avatar content and geometry at the control scale. Set null to remove the cap. @default 2 */
+  maxFontSizeMultiplier?: number | null;
+}
+interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
   /** Custom icon to display if the image fails and no text fallback is available. */
   icon?: IconSlotType;
 }
-interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'> {
+interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }
-interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'> {
+interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }

package/dist/components/Avatar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,gBAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,yBAAA;;EAE1C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFV;EAIA,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA;EANhC;EAQV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA,CAAyB,YAAA;EAd9B;EAgBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAnBpB;EAqBb,GAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,sBAAA;;EAER,qBAAA;AAAA;AAAA,UAGQ,gBAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,yBAAA,2BACL,sBAAA;EAPF;EASA,GAAA,GAAM,GAAA,CAAI,IAAA;EANF;EAQR,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,gBACL,sBAAA;EAZK;EAcP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,CAAyB,YAAA,iBAC9B,sBAAA;EAtBA;EAwBF,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAzBT;EA2BxB,GAAA;AAAA"}

package/dist/components/Avatar/useAvatarFontScale.cjs

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Avatar/useAvatarFontScale.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+function useAvatarFontScale(maxFontSizeMultiplier) {
+	const textStyle = generated_styles.avatarStyles.text;
+	const iconStyle = generated_styles.avatarStyles.icon;
+	const textScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const iconScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0));
+	return Math.max(textScaleFactor, iconScaleFactor);
+}
+//#endregion
+exports.useAvatarFontScale = useAvatarFontScale;

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

@@ -0,0 +1,7 @@
+
+//#region src/components/Avatar/useAvatarFontScale.d.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+declare function useAvatarFontScale(maxFontSizeMultiplier?: number): number;
+//#endregion
+export { useAvatarFontScale };
+//# sourceMappingURL=useAvatarFontScale.d.cts.map

package/dist/components/Avatar/useAvatarFontScale.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.d.cts","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"mappings":";;;iBAMS,kBAAA,CAAmB,qBAAA"}

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

@@ -0,0 +1,7 @@
+
+//#region src/components/Avatar/useAvatarFontScale.d.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+declare function useAvatarFontScale(maxFontSizeMultiplier?: number): number;
+//#endregion
+export { useAvatarFontScale };
+//# sourceMappingURL=useAvatarFontScale.d.ts.map

package/dist/components/Avatar/useAvatarFontScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.d.ts","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"mappings":";;;iBAMS,kBAAA,CAAmB,qBAAA"}

package/dist/components/Avatar/useAvatarFontScale.js

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
+import { avatarStyles } from "../../../generated/styles";
+//#region src/components/Avatar/useAvatarFontScale.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+function useAvatarFontScale(maxFontSizeMultiplier) {
+	const textStyle = avatarStyles.text;
+	const iconStyle = avatarStyles.icon;
+	const textScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const iconScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0));
+	return Math.max(textScaleFactor, iconScaleFactor);
+}
+//#endregion
+export { useAvatarFontScale };
+
+//# sourceMappingURL=useAvatarFontScale.js.map

package/dist/components/Avatar/useAvatarFontScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.js","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"sourcesContent":["import type { TextStyle } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\n\n/** Keep every avatar content type on one size-aware scale that contains text and icons. */\nfunction useAvatarFontScale(maxFontSizeMultiplier?: number): number {\n  const textStyle = avatarStyles.text as TextStyle;\n  const iconStyle = avatarStyles.icon as TextStyle;\n  const textScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n      (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n  );\n  const iconScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n      (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined),\n  );\n\n  return Math.max(textScaleFactor, iconScaleFactor);\n}\n\nexport { useAvatarFontScale };\n"],"mappings":";;;;;AAMA,SAAS,mBAAmB,uBAAwC;CAClE,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,aAAa;CAC/B,MAAM,kBAAkB,sBACtB,wBACC,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,OAChE,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,GAClE;CACD,MAAM,kBAAkB,sBACtB,wBACC,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,OAC5D,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,GACtE;CAED,OAAO,KAAK,IAAI,iBAAiB,gBAAgB"}

package/dist/components/Avatar/utils.cjs

@@ -21,11 +21,14 @@ function generateAvatarAbbreviation(name, strategy = "firstAndLast") {
 	const initials = name.trim().split(/\s+/).filter(Boolean).map((word) => word[0]?.toUpperCase() ?? "");
 	return abbreviationStrategies[strategy](initials);
 }
-function getAvatarCustomSizeStyle(customSize) {
-	return customSize === void 0 ? void 0 : {
-		width: customSize,
-		height: customSize
-	};
+function getAvatarSizeStyle(rootStyle, customSize, fontScaleFactor) {
+	if (customSize === void 0 && fontScaleFactor === 1) return;
+	const width = customSize ?? rootStyle.width;
+	const height = customSize ?? rootStyle.height;
+	return typeof width === "number" && typeof height === "number" ? {
+		width: Math.round(width * fontScaleFactor),
+		height: Math.round(height * fontScaleFactor)
+	} : void 0;
 }
 function getDefaultAvatarIcon(variant) {
 	return DEFAULT_AVATAR_ICON[variant];
@@ -34,5 +37,5 @@ function getDefaultAvatarIcon(variant) {
 exports.DEFAULT_AVATAR_SIZE = DEFAULT_AVATAR_SIZE;
 exports.DEFAULT_AVATAR_VARIANT = DEFAULT_AVATAR_VARIANT;
 exports.generateAvatarAbbreviation = generateAvatarAbbreviation;
-exports.getAvatarCustomSizeStyle = getAvatarCustomSizeStyle;
+exports.getAvatarSizeStyle = getAvatarSizeStyle;
 exports.getDefaultAvatarIcon = getDefaultAvatarIcon;

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

@@ -7,8 +7,8 @@ import { ViewStyle } from "react-native";
 declare const DEFAULT_AVATAR_SIZE: AvatarSize;
 declare const DEFAULT_AVATAR_VARIANT: AvatarVariant;
 declare function generateAvatarAbbreviation(name?: string, strategy?: AvatarAbbreviationStrategy): string;
-declare function getAvatarCustomSizeStyle(customSize?: number): ViewStyle | undefined;
+declare function getAvatarSizeStyle(rootStyle: ViewStyle, customSize: number | undefined, fontScaleFactor: number): ViewStyle | undefined;
 declare function getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType;
 //#endregion
-export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle, getDefaultAvatarIcon };
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle, getDefaultAvatarIcon };
 //# sourceMappingURL=utils.d.cts.map

package/dist/components/Avatar/utils.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,wBAAA,CAAyB,UAAA,YAAsB,SAAA;AAAA,iBAI/C,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,kBAAA,CACP,SAAA,EAAW,SAAA,EACX,UAAA,sBACA,eAAA,WACC,SAAA;AAAA,iBAgBM,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}

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

@@ -7,8 +7,8 @@ import { ViewStyle } from "react-native";
 declare const DEFAULT_AVATAR_SIZE: AvatarSize;
 declare const DEFAULT_AVATAR_VARIANT: AvatarVariant;
 declare function generateAvatarAbbreviation(name?: string, strategy?: AvatarAbbreviationStrategy): string;
-declare function getAvatarCustomSizeStyle(customSize?: number): ViewStyle | undefined;
+declare function getAvatarSizeStyle(rootStyle: ViewStyle, customSize: number | undefined, fontScaleFactor: number): ViewStyle | undefined;
 declare function getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType;
 //#endregion
-export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle, getDefaultAvatarIcon };
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle, getDefaultAvatarIcon };
 //# sourceMappingURL=utils.d.ts.map