@yahoo/uds-mobile 2.23.3 → 2.24.0-beta.10

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
@@ -546,17 +582,11 @@ The CLI generates a TypeScript file containing:
 ```typescript
 // AUTO-GENERATED FILE. DO NOT EDIT.
 export const themes = {
-  light: {
-    /* ... */
-  },
-  dark: {
-    /* ... */
-  },
+  light: {/* ... */},
+  dark: {/* ... */},
 };
 
-export const breakpoints = {
-  /* ... */
-};
+export const breakpoints = {/* ... */};
 ```
 
 ## Testing
@@ -642,9 +672,7 @@ import { mocks } from '@yahoo/uds-mobile/jest';
 jest.mock('react-native-unistyles', () => ({
   ...mocks.unistyles,
   useUnistyles: () => ({
-    theme: {
-      /* custom theme */
-    },
+    theme: {/* custom theme */},
     rt: { themeName: 'dark' },
   }),
 }));

package/dist/bin/automated-config/dist/generated/generatedConfigs.mjs

@@ -2694,7 +2694,8 @@ const AvatarConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -2931,7 +2932,8 @@ const BadgeConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -3532,7 +3534,8 @@ const BadgeConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -4881,7 +4884,8 @@ const BannerConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -5887,7 +5891,8 @@ const BannerConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -8841,7 +8846,8 @@ const ButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -9456,7 +9462,8 @@ const ButtonConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -13187,7 +13194,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -14740,7 +14748,8 @@ const ChipConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -16292,7 +16301,8 @@ const ChipConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -17497,7 +17507,8 @@ const ChipConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -18635,7 +18646,8 @@ const IconButtonConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -18771,7 +18783,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperIcon: {
 					label: "helperIcon",
@@ -18789,7 +18802,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				helperText: {
 					label: "helperText",
@@ -19227,7 +19241,8 @@ const InputConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				}
 			},
 			options: ["md", "lg"]
@@ -19609,7 +19624,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperIcon: {
 					atomicStates: [
@@ -19979,7 +19995,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				helperText: {
 					atomicStates: [
@@ -22932,7 +22949,8 @@ const InputConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				}
 			},
 			options: ["default"]
@@ -22984,7 +23002,8 @@ const LinkConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -23455,7 +23474,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				iconStart: {
 					label: "iconStart",
@@ -23824,7 +23844,8 @@ const LinkConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -26023,7 +26044,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27128,7 +27150,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -27853,7 +27876,8 @@ const MenuItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						text: {
 							label: "text",
@@ -28302,7 +28326,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -28321,7 +28346,8 @@ const MenuItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -28499,7 +28525,8 @@ const ModalConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -29327,7 +29354,8 @@ const ModalConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				description: {
 					label: "description",
@@ -31204,7 +31232,8 @@ const PaddleNavConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -32215,7 +32244,8 @@ const PaddleNavConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -32657,7 +32687,8 @@ const PaginationConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				item: {
 					label: "item",
@@ -34031,7 +34062,8 @@ const PopoverConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				closeIconContainer: {
 					label: "closeIconContainer",
@@ -34670,7 +34702,8 @@ const PopoverConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -39992,7 +40025,8 @@ const SelectItemConfig = {
 										"always/accent"
 									]
 								]
-							} }
+							} },
+							userOverridableProperties: ["color"]
 						},
 						root: {
 							label: "root",
@@ -40755,7 +40789,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			root: {
 				label: "root",
@@ -40774,7 +40809,8 @@ const SelectItemConfig = {
 						"md",
 						"lg"
 					]]
-				} }
+				} },
+				userOverridableProperties: ["iconSize"]
 			},
 			text: {
 				label: "text",
@@ -40961,7 +40997,8 @@ const SwitchConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -42092,7 +42129,8 @@ const SwitchConfig = {
 								"muted",
 								"on-color"
 							]]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -43253,7 +43291,8 @@ const TabConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -43819,7 +43858,8 @@ const TabConfig = {
 									"always/accent"
 								]
 							]
-						} }
+						} },
+						userOverridableProperties: ["color"]
 					},
 					root: {
 						label: "root",
@@ -46447,7 +46487,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				icon: {
 					label: "icon",
@@ -46462,7 +46503,8 @@ const ToastConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				label: {
 					label: "label",
@@ -47129,7 +47171,8 @@ const ToastConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				icon: {
 					label: "icon",
@@ -47517,7 +47560,8 @@ const ToastConfig = {
 								"multicolor"
 							]]
 						}
-					}
+					},
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",
@@ -48450,7 +48494,8 @@ const TooltipConfig = {
 							"md",
 							"lg"
 						]]
-					} }
+					} },
+					userOverridableProperties: ["iconSize"]
 				},
 				root: {
 					label: "root",
@@ -49085,7 +49130,8 @@ const TooltipConfig = {
 								"always/accent"
 							]
 						]
-					} }
+					} },
+					userOverridableProperties: ["color"]
 				},
 				root: {
 					label: "root",

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"}