@yahoo/uds-mobile 1.6.1 → 1.6.3

package/dist/bin/generateTheme.mjs

@@ -304,6 +304,7 @@ function generateComponents(config, colorMode) {
 					}
 					const targetObj = isRootLayer && TEXT_ONLY_PROPS.has(propName) ? textStyleObj : viewStyleObj;
 					for (const rnProp of rnProps) targetObj[rnProp] = resolvedValue;
+					if (stateValue.type === "iconSizes") targetObj.iconSizeToken = stateValue.value;
 				}
 				if (shadowValues.length > 0) viewStyleObj.boxShadow = boxShadowToCssString(shadowValues);
 				if (variantPath[0] === "textStyle") {

package/dist/components/Avatar.cjs

@@ -71,9 +71,9 @@ const Avatar = (0, react.forwardRef)(function Avatar({ src, alt, fallback, size
 	const showIcon = !hasImage && !hasText;
 	generated_styles.avatarStyles.useVariants({
 		size,
-		image: variant,
-		text: variant,
-		icon: variant
+		...showImage && { image: variant },
+		...showText && { text: variant },
+		...showIcon && { icon: variant }
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_Box.Box, {
 		ref,

package/dist/components/Avatar.mjs

@@ -69,9 +69,9 @@ const Avatar = forwardRef(function Avatar({ src, alt, fallback, size = "md", var
 	const showIcon = !hasImage && !hasText;
 	avatarStyles.useVariants({
 		size,
-		image: variant,
-		text: variant,
-		icon: variant
+		...showImage && { image: variant },
+		...showText && { text: variant },
+		...showIcon && { icon: variant }
 	});
 	return /* @__PURE__ */ jsxs(Box, {
 		ref,

package/dist/components/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Uses `alt` prop as accessibility label\n * - Always provide meaningful `alt` text for user identification\n *\n * @see {@link Image} for general image display\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    image: variant,\n    text: variant,\n    icon: variant,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCnD,MAAM,SAAS,WAA8B,SAAS,OACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,OAAO;EACP,MAAM;EACN,MAAM;EACP,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACA;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Avatar.mjs","names":["RNImage","Text"],"sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport { avatarStyles } from '../../generated/styles';\nimport { Box } from './Box';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\n/** Avatar size options */\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/** Avatar variant options */\ntype AvatarVariant = 'primary' | 'secondary';\n\n/** Abbreviation strategy for generating initials */\ntype AbbreviationStrategy =\n  | 'first'\n  | 'last'\n  | 'firstAndLast'\n  | 'firstTwo'\n  | 'firstThree'\n  | 'firstOfEach'\n  | ((name: string) => string);\n\ninterface AvatarProps extends ViewProps {\n  /** Image source URL */\n  src?: string;\n  /** Alt text for the image, also used for generating initials */\n  alt?: string;\n  /** Explicit initials to display (overrides auto-generated from alt) */\n  fallback?: string;\n  /** Size of the avatar @default 'md' */\n  size?: AvatarSize;\n  /** Variant style @default 'primary' */\n  variant?: AvatarVariant;\n  /** Custom icon to display when no image or text fallback */\n  icon?: IconSlotType;\n  /** Strategy for generating initials from name @default 'firstAndLast' */\n  abbreviationStrategy?: AbbreviationStrategy;\n}\n\nconst abbreviationStrategies: Record<\n  Exclude<AbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\n/** Generate initials from a name */\nfunction generateInitials(name?: string, strategy: AbbreviationStrategy = 'firstAndLast'): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Displays a user avatar with image, initials fallback, or icon fallback.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Avatar } from '@yahoo/uds-mobile';\n *\n * // With image\n * <Avatar\n *   src=\"https://example.com/photo.jpg\"\n *   alt=\"Jane Doe\"\n * />\n *\n * // With initials fallback\n * <Avatar alt=\"Jane Doe\" />\n *\n * // With explicit initials\n * <Avatar fallback=\"JD\" />\n *\n * // With custom icon\n * <Avatar icon=\"Person\" variant=\"secondary\" />\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Uses `alt` prop as accessibility label\n * - Always provide meaningful `alt` text for user identification\n *\n * @see {@link Image} for general image display\n */\nconst Avatar = forwardRef<View, AvatarProps>(function Avatar(\n  {\n    src,\n    alt,\n    fallback,\n    size = 'md',\n    variant = 'primary',\n    icon,\n    abbreviationStrategy = 'firstAndLast',\n    style,\n    ...props\n  },\n  ref,\n) {\n  const [imageError, setImageError] = useState(false);\n\n  const initials = fallback || generateInitials(alt, abbreviationStrategy);\n\n  const hasImage = src && !imageError;\n  const hasText = initials.length > 0;\n  const showImage = hasImage;\n  const showText = !hasImage && hasText;\n  const showIcon = !hasImage && !hasText;\n\n  avatarStyles.useVariants({\n    size,\n    ...(showImage && { image: variant }),\n    ...(showText && { text: variant }),\n    ...(showIcon && { icon: variant }),\n  });\n\n  return (\n    <Box\n      ref={ref}\n      style={[\n        avatarStyles.root,\n        { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },\n        style,\n      ]}\n      accessibilityRole=\"image\"\n      accessibilityLabel={alt}\n      {...props}\n    >\n      {showImage && (\n        <RNImage\n          source={{ uri: src }}\n          style={{ width: '100%', height: '100%' }}\n          onError={() => setImageError(true)}\n          accessibilityLabel={alt}\n        />\n      )}\n\n      {showText && (\n        <Text style={avatarStyles.text} numberOfLines={1}>\n          {initials}\n        </Text>\n      )}\n\n      {showIcon && <IconSlot icon={icon ?? 'Person'} variant=\"fill\" style={avatarStyles.icon} />}\n    </Box>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;AA2CA,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;;AAGD,SAAS,iBAAiB,MAAe,WAAiC,gBAAwB;AAChG,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,OAAO,aAAa,WACtB,QAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CACf,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;AAElE,QAAO,uBAAuB,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCnD,MAAM,SAAS,WAA8B,SAAS,OACpD,EACE,KACA,KACA,UACA,OAAO,MACP,UAAU,WACV,MACA,uBAAuB,gBACvB,OACA,GAAG,SAEL,KACA;CACA,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,WAAW,YAAY,iBAAiB,KAAK,qBAAqB;CAExE,MAAM,WAAW,OAAO,CAAC;CACzB,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,YAAY;CAClB,MAAM,WAAW,CAAC,YAAY;CAC9B,MAAM,WAAW,CAAC,YAAY,CAAC;AAE/B,cAAa,YAAY;EACvB;EACA,GAAI,aAAa,EAAE,OAAO,SAAS;EACnC,GAAI,YAAY,EAAE,MAAM,SAAS;EACjC,GAAI,YAAY,EAAE,MAAM,SAAS;EAClC,CAAC;AAEF,QACE,qBAAC;EACM;EACL,OAAO;GACL,aAAa;GACb;IAAE,YAAY;IAAU,gBAAgB;IAAU,UAAU;IAAU;GACtE;GACD;EACD,mBAAkB;EAClB,oBAAoB;EACpB,GAAI;;GAEH,aACC,oBAACA;IACC,QAAQ,EAAE,KAAK,KAAK;IACpB,OAAO;KAAE,OAAO;KAAQ,QAAQ;KAAQ;IACxC,eAAe,cAAc,KAAK;IAClC,oBAAoB;KACpB;GAGH,YACC,oBAACC;IAAK,OAAO,aAAa;IAAM,eAAe;cAC5C;KACI;GAGR,YAAY,oBAAC;IAAS,MAAM,QAAQ;IAAU,SAAQ;IAAO,OAAO,aAAa;KAAQ;;GACtF;EAER;AAEF,OAAO,cAAc"}

package/dist/components/Button.cjs

@@ -136,6 +136,7 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	const showLoading = !!loading;
 	const showStartIcon = !!startIcon && !loading;
 	const showEndIcon = !!endIcon && !loading;
+	const iconSizeToken = generated_styles.buttonStyles.icon.iconSizeToken ?? "sm";
 	const startContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize,
@@ -145,6 +146,7 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 			color: generated_styles.buttonStyles.icon.color
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: startIcon,
+			size: iconSizeToken,
 			variant: iconVariant,
 			style: generated_styles.buttonStyles.icon
 		})
@@ -155,6 +157,7 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 		gap: buttonGap,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: endIcon,
+			size: iconSizeToken,
 			variant: iconVariant,
 			style: generated_styles.buttonStyles.icon
 		})

package/dist/components/Button.mjs

@@ -133,6 +133,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	const showLoading = !!loading;
 	const showStartIcon = !!startIcon && !loading;
 	const showEndIcon = !!endIcon && !loading;
+	const iconSizeToken = buttonStyles.icon.iconSizeToken ?? "sm";
 	const startContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize,
@@ -142,6 +143,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 			color: buttonStyles.icon.color
 		}) : /* @__PURE__ */ jsx(IconSlot, {
 			icon: startIcon,
+			size: iconSizeToken,
 			variant: iconVariant,
 			style: buttonStyles.icon
 		})
@@ -152,6 +154,7 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 		gap: buttonGap,
 		children: /* @__PURE__ */ jsx(IconSlot, {
 			icon: endIcon,
+			size: iconSizeToken,
 			variant: iconVariant,
 			style: buttonStyles.icon
 		})

package/dist/components/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\n */\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** The visual style variant of the button @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: ButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Icon displayed before the button label */\n  startIcon?: IconSlotType;\n  /** Icon displayed after the button label */\n  endIcon?: IconSlotType;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Button label content */\n  children?: React.ReactNode;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - Use `accessibilityLabel` for icon-only buttons\n *\n * @see {@link IconButton} for icon-only buttons\n * @see {@link Link} for navigation actions\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width: _width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath]?.boxShadow;\n\n    return {\n      transform: [{ scale: scale.value }],\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot visible={showLoading || showStartIcon} iconSize={iconSize} gap={buttonGap}>\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot icon={startIcon} variant={iconVariant} style={buttonStyles.icon} />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n      <IconSlot icon={endIcon} variant={iconVariant} style={buttonStyles.icon} />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\n */\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** The visual style variant of the button @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: ButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Icon displayed before the button label */\n  startIcon?: IconSlotType;\n  /** Icon displayed after the button label */\n  endIcon?: IconSlotType;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Button label content */\n  children?: React.ReactNode;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - Use `accessibilityLabel` for icon-only buttons\n *\n * @see {@link IconButton} for icon-only buttons\n * @see {@link Link} for navigation actions\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width: _width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text numberOfLines={1} textAlign=\"center\" style={buttonStyles.text}>\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath]?.boxShadow;\n\n    return {\n      transform: [{ scale: scale.value }],\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  const iconSizeToken = (buttonStyles.icon.iconSizeToken as IconSize) ?? 'sm';\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot visible={showLoading || showStartIcon} iconSize={iconSize} gap={buttonGap}>\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          style={buttonStyles.icon}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        style={buttonStyles.icon}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}

package/dist/components/Icon.cjs

@@ -93,7 +93,9 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, siz
 			{
 				fontFamily: "uds-icons",
 				textAlign: "center",
-				textAlignVertical: "center"
+				textAlignVertical: "center",
+				fontSize: pixelSize,
+				lineHeight: pixelSize
 			},
 			generated_styles.styles.foundation,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
@@ -106,7 +108,8 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, siz
 			dangerouslySetColor,
 			dangerouslySetSize,
 			style,
-			generated_styles.styles.foundation
+			generated_styles.styles.foundation,
+			pixelSize
 		]),
 		...props,
 		children: glyph

package/dist/components/Icon.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+Md,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

package/dist/components/Icon.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+Md,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
+{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,KAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

package/dist/components/Icon.mjs

@@ -91,7 +91,9 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 			{
 				fontFamily: "uds-icons",
 				textAlign: "center",
-				textAlignVertical: "center"
+				textAlignVertical: "center",
+				fontSize: pixelSize,
+				lineHeight: pixelSize
 			},
 			styles.foundation,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
@@ -104,7 +106,8 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 			dangerouslySetColor,
 			dangerouslySetSize,
 			style,
-			styles.foundation
+			styles.foundation,
+			pixelSize
 		]),
 		...props,
 		children: glyph

package/dist/components/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAsBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OAzBqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACpB;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAW,CACpE;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
+{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? pixelSize}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n        fontSize: pixelSize,\n        lineHeight: pixelSize,\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: dangerouslySetSize,\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;AAE1B,KAAI,CAAC,YAAY;AACf,UAAQ,KAAK,oBAAoB,OAAO,aAAa;AACrD,SAAO;;AAGT,QAAO,YAAY;EACjB;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAK,OAAO,OAAO;YAClB,oBAAC;GACC,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;IAC9B;GACG;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;AAEhC,QAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SADG,GAAG,KAAK,GAAG,QAAQ,GAAG;AAwBxC,QACE,oBAAC;EACM;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAC/E;EAQG,GAAI;YAEH;GACI;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;AAEhE,KAAI,YAAY,aACd,QAAO,oBAAC,kBAAe,GAAI,QAAS;AAGtC,QAAO,oBAAC;EAA2B;EAAS,GAAI;GAAS;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/generated/styles.d.ts

@@ -1228,6 +1228,7 @@ export declare const avatarStyles: {
     borderRadius: number;
     color: string;
     fontSize: number;
+    iconSizeToken: 'lg' | 'md' | 'sm';
     lineHeight: number;
   };
 } & {
@@ -1265,7 +1266,7 @@ export declare const badgeStyles: {
     lineHeight: number;
     color: string;
   };
-  icon: { fontSize: number; lineHeight: number; color: string };
+  icon: { fontSize: number; iconSizeToken: 'lg' | 'md' | 'sm'; lineHeight: number; color: string };
 } & {
   useVariants: (
     variants:
@@ -1342,7 +1343,7 @@ export declare const buttonStyles: {
     lineHeight: number;
     color: string;
   };
-  icon: { fontSize: number; lineHeight: number; color: string };
+  icon: { fontSize: number; iconSizeToken: 'sm' | 'xs'; lineHeight: number; color: string };
 } & {
   useVariants: (
     variants:
@@ -1488,7 +1489,7 @@ export declare const chipStyles: {
     letterSpacing: number;
     lineHeight: number;
   };
-  icon: { color: string; fontSize: number; lineHeight: number };
+  icon: { color: string; fontSize: number; iconSizeToken: 'sm'; lineHeight: number };
 } & {
   useVariants: (
     variants:
@@ -1537,7 +1538,7 @@ export declare const dividerStyles: {
 
 export declare const iconButtonStyles: {
   root: { padding: number };
-  icon: { fontSize: number; lineHeight: number };
+  icon: { fontSize: number; iconSizeToken: 'md' | 'sm' | 'lg' | 'xs'; lineHeight: number };
 } & {
   useVariants: (
     variants:
@@ -1547,8 +1548,8 @@ export declare const iconButtonStyles: {
 };
 
 export declare const inputStyles: {
-  endIcon: { fontSize: number; lineHeight: number; color: string };
-  helperIcon: { fontSize: number; lineHeight: number; color: string };
+  endIcon: { fontSize: number; iconSizeToken: 'md'; lineHeight: number; color: string };
+  helperIcon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
   helperText: {
     fontFamily: 'YASans';
     fontSize: number;
@@ -1579,7 +1580,7 @@ export declare const inputStyles: {
     color: string;
   };
   labelRequired: { color: string };
-  startIcon: { fontSize: number; lineHeight: number; color: string };
+  startIcon: { fontSize: number; iconSizeToken: 'md'; lineHeight: number; color: string };
 } & {
   useVariants: (
     variants:
@@ -1673,7 +1674,7 @@ export declare const linkStyles: {
     lineHeight: number;
   };
   text: { color: string; textDecorationLine: 'underline' | 'none' };
-  icon: { lineHeight: number; fontSize: number };
+  icon: { lineHeight: number; fontSize: number; iconSizeToken: 'md' | 'sm' | 'lg' };
   iconEnd: { color: string };
   iconStart: { color: string };
 } & {
@@ -1764,9 +1765,9 @@ export declare const menuContentStyles: {
 export declare const menuItemStyles: {
   root: { backgroundColor: string };
   icon: { color: string };
-  endIcon: { color: string; fontSize: number; lineHeight: number };
+  endIcon: { color: string; fontSize: number; iconSizeToken: 'sm'; lineHeight: number };
   line: { borderColor: 'transparent'; borderWidth: number };
-  startIcon: { color: string; fontSize: number; lineHeight: number };
+  startIcon: { color: string; fontSize: number; iconSizeToken: 'sm'; lineHeight: number };
 } & {
   useVariants: (
     variants:
@@ -1829,7 +1830,7 @@ export declare const switchStyles: {
   root: { gap: number; paddingHorizontal: number; paddingVertical: number };
   text: { fontFamily: 'YASans'; fontSize: number; letterSpacing: number; lineHeight: number };
   handle: { height: number; width: number; backgroundColor: string; boxShadow: string };
-  handleIcon: { fontSize: number; lineHeight: number; color: string };
+  handleIcon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
   switch: {
     borderWidth: number;
     height: number;
@@ -1852,8 +1853,8 @@ export declare const switchStyles: {
 export declare const toastStyles: {
   root: { borderRadius: number; gap: number; paddingHorizontal: number; paddingVertical: number };
   text: { color: string };
-  icon: { fontSize: number; lineHeight: number; color: string };
-  closeIcon: { fontSize: number; lineHeight: number; color: string };
+  icon: { fontSize: number; iconSizeToken: 'md'; lineHeight: number; color: string };
+  closeIcon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
   label: { fontFamily: 'YASans-SmBd'; fontSize: number; letterSpacing: number; lineHeight: number };
 } & {
   useVariants: (
@@ -1878,7 +1879,7 @@ export declare const toastStyles: {
 export declare const tooltipStyles: {
   root: { gap: number; paddingHorizontal: number; paddingVertical: number };
   text: { color: string };
-  icon: { fontSize: number; lineHeight: number; color: string };
+  icon: { fontSize: number; iconSizeToken: 'xs'; lineHeight: number; color: string };
   body: { fontFamily: 'YASans-SmBd'; fontSize: number; letterSpacing: number; lineHeight: number };
   endContent: {
     fontFamily: 'YASans-Medium';

package/generated/unistyles.d.ts

@@ -36,6 +36,7 @@ interface ComponentTheme {
   };
   'avatar/size/lg/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'avatar/size/lg/root/rest': {
@@ -51,6 +52,7 @@ interface ComponentTheme {
   };
   'avatar/size/md/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'avatar/size/md/root/rest': {
@@ -66,6 +68,7 @@ interface ComponentTheme {
   };
   'avatar/size/sm/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'avatar/size/sm/root/rest': {
@@ -81,6 +84,7 @@ interface ComponentTheme {
   };
   'avatar/size/xl/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'avatar/size/xl/root/rest': {
@@ -96,6 +100,7 @@ interface ComponentTheme {
   };
   'avatar/size/xs/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'avatar/size/xs/root/rest': {
@@ -127,6 +132,7 @@ interface ComponentTheme {
   };
   'badge/size/lg/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'badge/size/lg/root/rest': {
@@ -142,6 +148,7 @@ interface ComponentTheme {
   };
   'badge/size/md/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'badge/size/md/root/rest': {
@@ -157,6 +164,7 @@ interface ComponentTheme {
   };
   'badge/size/sm/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'badge/size/sm/root/rest': {
@@ -172,6 +180,7 @@ interface ComponentTheme {
   };
   'badge/size/xs/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'badge/size/xs/root/rest': {
@@ -331,6 +340,7 @@ interface ComponentTheme {
   };
   'button/size/lg/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'button/size/lg/root/rest': {
@@ -346,6 +356,7 @@ interface ComponentTheme {
   };
   'button/size/md/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'button/size/md/root/rest': {
@@ -361,6 +372,7 @@ interface ComponentTheme {
   };
   'button/size/sm/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'button/size/sm/root/rest': {
@@ -376,6 +388,7 @@ interface ComponentTheme {
   };
   'button/size/xs/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'button/size/xs/root/rest': {
@@ -1656,6 +1669,7 @@ interface ComponentTheme {
   };
   'chip/size/md/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'chip/size/md/root/rest': {
@@ -1672,6 +1686,7 @@ interface ComponentTheme {
   };
   'chip/size/sm/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'chip/size/sm/root/rest': {
@@ -1928,6 +1943,7 @@ interface ComponentTheme {
   };
   'iconButton/size/lg/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'iconButton/size/lg/root/rest': {
@@ -1935,6 +1951,7 @@ interface ComponentTheme {
   };
   'iconButton/size/md/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'iconButton/size/md/root/rest': {
@@ -1942,6 +1959,7 @@ interface ComponentTheme {
   };
   'iconButton/size/sm/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'iconButton/size/sm/root/rest': {
@@ -1949,6 +1967,7 @@ interface ComponentTheme {
   };
   'iconButton/size/xl/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'iconButton/size/xl/root/rest': {
@@ -1956,6 +1975,7 @@ interface ComponentTheme {
   };
   'iconButton/size/xs/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'iconButton/size/xs/root/rest': {
@@ -1963,10 +1983,12 @@ interface ComponentTheme {
   };
   'input/size/lg/endIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/size/lg/helperIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/size/lg/helperText/rest': {
@@ -2003,14 +2025,17 @@ interface ComponentTheme {
   };
   'input/size/lg/startIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/size/md/endIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/size/md/helperIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/size/md/helperText/rest': {
@@ -2047,6 +2072,7 @@ interface ComponentTheme {
   };
   'input/size/md/startIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'input/variant/default/value/empty/endIcon/disabled': {
@@ -2343,6 +2369,7 @@ interface ComponentTheme {
   };
   'link/textStyle/body1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/body1/root/disabled': {
@@ -2389,6 +2416,7 @@ interface ComponentTheme {
   };
   'link/textStyle/caption1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/caption1/root/disabled': {
@@ -2435,6 +2463,7 @@ interface ComponentTheme {
   };
   'link/textStyle/caption2/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/caption2/root/disabled': {
@@ -2481,6 +2510,7 @@ interface ComponentTheme {
   };
   'link/textStyle/display1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/display1/root/disabled': {
@@ -2527,6 +2557,7 @@ interface ComponentTheme {
   };
   'link/textStyle/display2/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/display2/root/disabled': {
@@ -2573,6 +2604,7 @@ interface ComponentTheme {
   };
   'link/textStyle/display3/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/display3/root/disabled': {
@@ -2619,6 +2651,7 @@ interface ComponentTheme {
   };
   'link/textStyle/headline1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/headline1/root/disabled': {
@@ -2665,6 +2698,7 @@ interface ComponentTheme {
   };
   'link/textStyle/label1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/label1/root/disabled': {
@@ -2711,6 +2745,7 @@ interface ComponentTheme {
   };
   'link/textStyle/label2/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/label2/root/disabled': {
@@ -2757,6 +2792,7 @@ interface ComponentTheme {
   };
   'link/textStyle/label3/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/label3/root/disabled': {
@@ -2803,6 +2839,7 @@ interface ComponentTheme {
   };
   'link/textStyle/label4/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/label4/root/disabled': {
@@ -2849,6 +2886,7 @@ interface ComponentTheme {
   };
   'link/textStyle/legal1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/legal1/root/disabled': {
@@ -2895,6 +2933,7 @@ interface ComponentTheme {
   };
   'link/textStyle/title1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/title1/root/disabled': {
@@ -2941,6 +2980,7 @@ interface ComponentTheme {
   };
   'link/textStyle/title2/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/title2/root/disabled': {
@@ -2987,6 +3027,7 @@ interface ComponentTheme {
   };
   'link/textStyle/title3/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/title3/root/disabled': {
@@ -3033,6 +3074,7 @@ interface ComponentTheme {
   };
   'link/textStyle/title4/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/title4/root/disabled': {
@@ -3079,6 +3121,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui1/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui1/root/disabled': {
@@ -3125,6 +3168,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui2/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui2/root/disabled': {
@@ -3171,6 +3215,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui3/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui3/root/disabled': {
@@ -3217,6 +3262,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui4/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui4/root/disabled': {
@@ -3263,6 +3309,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui5/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui5/root/disabled': {
@@ -3309,6 +3356,7 @@ interface ComponentTheme {
   };
   'link/textStyle/ui6/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'link/textStyle/ui6/root/disabled': {
@@ -3504,10 +3552,12 @@ interface ComponentTheme {
   };
   'menuItem/size/default/endIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'menuItem/size/default/startIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'radio/size/md/radio/rest': {
@@ -3712,6 +3762,7 @@ interface ComponentTheme {
   };
   'switch/size/md/handleIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'switch/size/md/root/rest': {
@@ -3737,6 +3788,7 @@ interface ComponentTheme {
   };
   'switch/size/sm/handleIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'switch/size/sm/root/rest': {
@@ -3780,10 +3832,12 @@ interface ComponentTheme {
   };
   'toast/size/default/closeIcon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'toast/size/default/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'toast/size/default/label/rest': {
@@ -3857,6 +3911,7 @@ interface ComponentTheme {
   };
   'tooltip/size/default/icon/rest': {
     fontSize: number;
+    iconSizeToken: string;
     lineHeight: number;
   };
   'tooltip/size/default/root/rest': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"
@@ -231,7 +231,7 @@
     }
   },
   "dependencies": {
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.23"
   },
   "peerDependencies": {
     "expo-font": "~14.0.0",