@yahoo/uds-mobile 2.24.0-beta.6 → 2.24.0-beta.8

package/README.md

@@ -18,7 +18,7 @@
 
 `@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
@@ -505,6 +505,12 @@ See the [Accessibility and text scaling guide](https://uds.build/docs/mobile/acc
 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.
+
 ## Fonts
 
 ### Font Handling

package/dist/components/Avatar/AvatarIcon.cjs

@@ -12,7 +12,7 @@ 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, maxFontSizeMultiplier, style, accessibilityLabel, alt, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.avatarStyles.useVariants({
 		size,
 		icon: variant

package/dist/components/Avatar/AvatarIcon.js

@@ -10,7 +10,7 @@ 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, maxFontSizeMultiplier, style, accessibilityLabel, alt, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	avatarStyles.useVariants({
 		size,
 		icon: variant

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

package/dist/components/Avatar/AvatarImage.cjs

@@ -13,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarImage.tsx
 const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = (0, react.useState)(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	generated_styles.avatarStyles.useVariants({

package/dist/components/Avatar/AvatarImage.js

@@ -11,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarImage.tsx
 const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = useState(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	avatarStyles.useVariants({

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

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

package/dist/components/Avatar/AvatarText.cjs

@@ -12,7 +12,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarText.tsx
 const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.avatarStyles.useVariants({
 		size,
 		text: variant

package/dist/components/Avatar/AvatarText.js

@@ -10,7 +10,7 @@ import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarText.tsx
 const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	avatarStyles.useVariants({
 		size,
 		text: variant

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

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

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

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

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

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

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

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

package/dist/components/Button/buttonTheme.cjs

@@ -22,6 +22,10 @@ function getLayerStyle(theme, path) {
 function getIconSize(iconStyle) {
 	return (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0) ?? 16;
 }
+/** Base icon size for an IconButton size layer. */
+function getIconButtonIconSize(theme, size) {
+	return getIconSize(getLayerStyle(theme, iconButtonSizePath(size, "icon")));
+}
 function getVerticalPadding(rootStyle) {
 	return (typeof rootStyle.paddingVertical === "number" ? rootStyle.paddingVertical : void 0) ?? (typeof rootStyle.padding === "number" ? rootStyle.padding : void 0) ?? 0;
 }
@@ -85,7 +89,7 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 function getIconButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, "icon"));
-	const iconSize = getIconSize(iconStyle);
+	const iconSize = getIconButtonIconSize(theme, size);
 	const tokenLineHeight = typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : iconSize;
 	const paddingVertical = getVerticalPadding(rootStyle);
 	const explicitHeight = typeof rootStyle.height === "number" ? rootStyle.height : void 0;
@@ -110,4 +114,5 @@ function getButtonTextStyle(textStyle, labelLineHeight) {
 exports.getButtonControlMetrics = getButtonControlMetrics;
 exports.getButtonTextStyle = getButtonTextStyle;
 exports.getIconButtonControlMetrics = getIconButtonControlMetrics;
+exports.getIconButtonIconSize = getIconButtonIconSize;
 exports.getSafeIconCell = getSafeIconCell;

package/dist/components/Button/buttonTheme.d.cts

@@ -6,6 +6,8 @@ import { TextStyle } from "react-native";
 type ButtonTheme = {
   components: Record<string, any>;
 };
+/** Base icon size for an IconButton size layer. */
+declare function getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number;
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
 /**
@@ -42,5 +44,5 @@ declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButto
 /** Apply the metric-safe line height after the token typography styles. */
 declare function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle;
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 //# sourceMappingURL=buttonTheme.d.cts.map

package/dist/components/Button/buttonTheme.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAyBA;;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA6BL,qBAAA,CAAsB,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,cAAA;;iBAoCzC,eAAA,CAAgB,QAAA;AAjEZ;;;;;;;;;AAAA,iBA0FJ,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.d.ts

@@ -6,6 +6,8 @@ import { TextStyle } from "react-native";
 type ButtonTheme = {
   components: Record<string, any>;
 };
+/** Base icon size for an IconButton size layer. */
+declare function getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number;
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
 /**
@@ -42,5 +44,5 @@ declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButto
 /** Apply the metric-safe line height after the token typography styles. */
 declare function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle;
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 //# sourceMappingURL=buttonTheme.d.ts.map

package/dist/components/Button/buttonTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAyBA;;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA6BL,qBAAA,CAAsB,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,cAAA;;iBAoCzC,eAAA,CAAgB,QAAA;AAjEZ;;;;;;;;;AAAA,iBA0FJ,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.js

@@ -21,6 +21,10 @@ function getLayerStyle(theme, path) {
 function getIconSize(iconStyle) {
 	return (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0) ?? 16;
 }
+/** Base icon size for an IconButton size layer. */
+function getIconButtonIconSize(theme, size) {
+	return getIconSize(getLayerStyle(theme, iconButtonSizePath(size, "icon")));
+}
 function getVerticalPadding(rootStyle) {
 	return (typeof rootStyle.paddingVertical === "number" ? rootStyle.paddingVertical : void 0) ?? (typeof rootStyle.padding === "number" ? rootStyle.padding : void 0) ?? 0;
 }
@@ -84,7 +88,7 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 function getIconButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, "icon"));
-	const iconSize = getIconSize(iconStyle);
+	const iconSize = getIconButtonIconSize(theme, size);
 	const tokenLineHeight = typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : iconSize;
 	const paddingVertical = getVerticalPadding(rootStyle);
 	const explicitHeight = typeof rootStyle.height === "number" ? rootStyle.height : void 0;
@@ -106,6 +110,6 @@ function getButtonTextStyle(textStyle, labelLineHeight) {
 	};
 }
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 
 //# sourceMappingURL=buttonTheme.js.map

package/dist/components/Button/buttonTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { fontMetrics } from '../../../generated/fontMetrics';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n// Covers common native font boxes (roughly 1.2em) plus pixel-rounding headroom.\nconst UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getMetricHeight(value: number, unitsPerEm: number, fontSize: number): number {\n  return Math.ceil((Math.max(0, value) / unitsPerEm) * fontSize);\n}\n\nfunction getSafeLabelLineHeight(textStyle: TextStyle, fallbackFontSize: number): number {\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : fallbackFontSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const metrics =\n    typeof textStyle.fontFamily === 'string' ? fontMetrics[textStyle.fontFamily] : undefined;\n\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));\n  }\n\n  const metricsLineHeight =\n    getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);\n\n  return Math.max(tokenLineHeight, metricsLineHeight);\n}\n\n/** Safe line box for the icon font's em square plus any bbox overflow. */\nexport function getSafeIconCell(fontSize: number): number {\n  const metrics = fontMetrics['uds-icons'];\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);\n  }\n\n  const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);\n  const overflowBelowEm = Math.max(0, -metrics.bbox.minY);\n\n  return (\n    Math.ceil(fontSize) +\n    getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize)\n  );\n}\n\n/**\n * Safe native content metrics while retaining the token-derived target control height.\n *\n * `fontScaleFactor` pre-scales container metrics only. A single number keeps\n * the legacy linear behavior; distinct label/icon factors let Android 14+\n * geometry follow its size-dependent nonlinear font curve. The returned\n * `labelLineHeight`/`iconCellHeight` stay unscaled because native Text applies\n * the same cap.\n */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n  fontScaleFactor: number | { label: number; icon: number; iconCell?: number } = 1,\n): {\n  minHeight: number;\n  labelLineHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n} {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const labelScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.label;\n  const iconScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.icon;\n  const iconCellScaleFactor =\n    typeof fontScaleFactor === 'number'\n      ? fontScaleFactor\n      : (fontScaleFactor.iconCell ?? fontScaleFactor.icon);\n  const targetContentHeight = Math.max(\n    iconSize * iconScaleFactor,\n    tokenLineHeight * labelScaleFactor,\n  );\n  const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);\n  const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);\n  const iconCellHeight = getSafeIconCell(iconSize);\n  const safeContentHeight = Math.max(\n    labelLineHeight * labelScaleFactor,\n    iconCellHeight * iconCellScaleFactor,\n  );\n\n  return {\n    minHeight,\n    labelLineHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2),\n  };\n}\n\n/**\n * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.\n *\n * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit\n * token height stays fixed, with padding absorbing the scaled content.\n */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n  fontScaleFactor = 1,\n): {\n  minHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n  hasExplicitHeight: boolean;\n} {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconSize(iconStyle);\n  const tokenLineHeight =\n    typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : iconSize;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n  const hasExplicitHeight =\n    SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined;\n  const minHeight = hasExplicitHeight\n    ? (explicitHeight as number)\n    : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);\n  const iconCellHeight = getSafeIconCell(iconSize);\n\n  return {\n    minHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(\n      0,\n      (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2,\n    ),\n    hasExplicitHeight,\n  };\n}\n\n/** Apply the metric-safe line height after the token typography styles. */\nexport function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: labelLineHeight,\n  };\n}\n"],"mappings":";;;AAUA,MAAM,iCAAiC,IAAI,IAAoB;CAAC;CAAM;CAAM;CAAM;CAAK,CAAC;AAExF,MAAM,iCAAiC;AAEvC,SAAS,eAAe,MAAkB,OAA6C;CACrF,OAAO,eAAe,KAAK,GAAG,MAAM;;AAGtC,SAAS,mBAAmB,MAAsB,OAAgC;CAChF,OAAO,mBAAmB,KAAK,GAAG,MAAM;;AAG1C,SAAS,cAAc,OAAoB,MAAqC;CAC9E,MAAM,QAAQ,MAAM,WAAW;CAC/B,OAAO,SAAS,OAAO,UAAU,WAAW,QAAQ,EAAE;;AAGxD,SAAS,YAAY,WAA8B;CACjD,QACG,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,OAC9D,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,MACnE;;AAIJ,SAAS,mBAAmB,WAA8B;CACxD,QACG,OAAO,UAAU,oBAAoB,WAAW,UAAU,kBAAkB,KAAA,OAC5E,OAAO,UAAU,YAAY,WAAW,UAAU,UAAU,KAAA,MAC7D;;AAIJ,SAAS,gBAAgB,OAAe,YAAoB,UAA0B;CACpF,OAAO,KAAK,KAAM,KAAK,IAAI,GAAG,MAAM,GAAG,aAAc,SAAS;;AAGhE,SAAS,uBAAuB,WAAsB,kBAAkC;CACtF,MAAM,WAAW,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW;CAC/E,MAAM,kBACJ,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa;CACpE,MAAM,UACJ,OAAO,UAAU,eAAe,WAAW,YAAY,UAAU,cAAc,KAAA;CAEjF,IAAI,CAAC,WAAW,QAAQ,cAAc,GACpC,OAAO,KAAK,IAAI,iBAAiB,KAAK,KAAK,WAAW,+BAA+B,CAAC;CAGxF,MAAM,oBACJ,gBAAgB,QAAQ,QAAQ,QAAQ,YAAY,SAAS,GAC7D,gBAAgB,CAAC,QAAQ,SAAS,QAAQ,YAAY,SAAS,GAC/D,gBAAgB,QAAQ,SAAS,QAAQ,YAAY,SAAS;CAEhE,OAAO,KAAK,IAAI,iBAAiB,kBAAkB;;;AAIrD,SAAgB,gBAAgB,UAA0B;CACxD,MAAM,UAAU,YAAY;CAC5B,IAAI,CAAC,WAAW,QAAQ,cAAc,GACpC,OAAO,KAAK,KAAK,WAAW,+BAA+B;CAG7D,MAAM,kBAAkB,KAAK,IAAI,GAAG,QAAQ,KAAK,OAAO,QAAQ,WAAW;CAC3E,MAAM,kBAAkB,KAAK,IAAI,GAAG,CAAC,QAAQ,KAAK,KAAK;CAEvD,OACE,KAAK,KAAK,SAAS,GACnB,gBAAgB,iBAAiB,QAAQ,YAAY,SAAS,GAC9D,gBAAgB,iBAAiB,QAAQ,YAAY,SAAS;;;;;;;;;;;AAalE,SAAgB,wBACd,OACA,MACA,kBAA+E,GAM/E;CACA,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,OAAO,CAAC;CACpE,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,OAAO,CAAC;CACpE,MAAM,YAAY,cAAc,OAAO,eAAe,MAAM,WAAW,CAAC;CACxE,MAAM,kBAAkB,mBAAmB,UAAU;CACrD,MAAM,WAAW,YAAY,UAAU;CACvC,MAAM,WAAW,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW;CAC/E,MAAM,kBACJ,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa;CACpE,MAAM,mBACJ,OAAO,oBAAoB,WAAW,kBAAkB,gBAAgB;CAC1E,MAAM,kBACJ,OAAO,oBAAoB,WAAW,kBAAkB,gBAAgB;CAC1E,MAAM,sBACJ,OAAO,oBAAoB,WACvB,kBACC,gBAAgB,YAAY,gBAAgB;CACnD,MAAM,sBAAsB,KAAK,IAC/B,WAAW,iBACX,kBAAkB,iBACnB;CACD,MAAM,YAAY,KAAK,KAAK,kBAAkB,IAAI,oBAAoB;CACtE,MAAM,kBAAkB,uBAAuB,WAAW,SAAS;CACnE,MAAM,iBAAiB,gBAAgB,SAAS;CAChD,MAAM,oBAAoB,KAAK,IAC7B,kBAAkB,kBAClB,iBAAiB,oBAClB;CAED,OAAO;EACL;EACA;EACA;EACA,iBAAiB,KAAK,IAAI,IAAI,YAAY,qBAAqB,EAAE;EAClE;;;;;;;;AASH,SAAgB,4BACd,OACA,MACA,kBAAkB,GAMlB;CACA,MAAM,YAAY,cAAc,OAAO,mBAAmB,MAAM,OAAO,CAAC;CACxE,MAAM,YAAY,cAAc,OAAO,mBAAmB,MAAM,OAAO,CAAC;CACxE,MAAM,WAAW,YAAY,UAAU;CACvC,MAAM,kBACJ,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa;CACpE,MAAM,kBAAkB,mBAAmB,UAAU;CACrD,MAAM,iBAAiB,OAAO,UAAU,WAAW,WAAW,UAAU,SAAS,KAAA;CACjF,MAAM,oBACJ,+BAA+B,IAAI,KAAK,IAAI,mBAAmB,KAAA;CACjE,MAAM,YAAY,oBACb,iBACD,KAAK,KAAK,kBAAkB,IAAI,KAAK,IAAI,UAAU,gBAAgB,GAAG,gBAAgB;CAC1F,MAAM,iBAAiB,gBAAgB,SAAS;CAEhD,OAAO;EACL;EACA;EACA,iBAAiB,KAAK,IACpB,IACC,YAAY,KAAK,IAAI,UAAU,eAAe,GAAG,mBAAmB,EACtE;EACD;EACD;;;AAIH,SAAgB,mBAAmB,WAAsB,iBAAoC;CAC3F,OAAO;EACL,GAAG;EACH,YAAY;EACb"}
+{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { fontMetrics } from '../../../generated/fontMetrics';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n// Covers common native font boxes (roughly 1.2em) plus pixel-rounding headroom.\nconst UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\n/** Base icon size for an IconButton size layer. */\nfunction getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number {\n  return getIconSize(getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle);\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getMetricHeight(value: number, unitsPerEm: number, fontSize: number): number {\n  return Math.ceil((Math.max(0, value) / unitsPerEm) * fontSize);\n}\n\nfunction getSafeLabelLineHeight(textStyle: TextStyle, fallbackFontSize: number): number {\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : fallbackFontSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const metrics =\n    typeof textStyle.fontFamily === 'string' ? fontMetrics[textStyle.fontFamily] : undefined;\n\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));\n  }\n\n  const metricsLineHeight =\n    getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);\n\n  return Math.max(tokenLineHeight, metricsLineHeight);\n}\n\n/** Safe line box for the icon font's em square plus any bbox overflow. */\nexport function getSafeIconCell(fontSize: number): number {\n  const metrics = fontMetrics['uds-icons'];\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);\n  }\n\n  const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);\n  const overflowBelowEm = Math.max(0, -metrics.bbox.minY);\n\n  return (\n    Math.ceil(fontSize) +\n    getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize)\n  );\n}\n\n/**\n * Safe native content metrics while retaining the token-derived target control height.\n *\n * `fontScaleFactor` pre-scales container metrics only. A single number keeps\n * the legacy linear behavior; distinct label/icon factors let Android 14+\n * geometry follow its size-dependent nonlinear font curve. The returned\n * `labelLineHeight`/`iconCellHeight` stay unscaled because native Text applies\n * the same cap.\n */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n  fontScaleFactor: number | { label: number; icon: number; iconCell?: number } = 1,\n): {\n  minHeight: number;\n  labelLineHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n} {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const labelScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.label;\n  const iconScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.icon;\n  const iconCellScaleFactor =\n    typeof fontScaleFactor === 'number'\n      ? fontScaleFactor\n      : (fontScaleFactor.iconCell ?? fontScaleFactor.icon);\n  const targetContentHeight = Math.max(\n    iconSize * iconScaleFactor,\n    tokenLineHeight * labelScaleFactor,\n  );\n  const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);\n  const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);\n  const iconCellHeight = getSafeIconCell(iconSize);\n  const safeContentHeight = Math.max(\n    labelLineHeight * labelScaleFactor,\n    iconCellHeight * iconCellScaleFactor,\n  );\n\n  return {\n    minHeight,\n    labelLineHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2),\n  };\n}\n\n/**\n * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.\n *\n * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit\n * token height stays fixed, with padding absorbing the scaled content.\n */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n  fontScaleFactor = 1,\n): {\n  minHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n  hasExplicitHeight: boolean;\n} {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconButtonIconSize(theme, size);\n  const tokenLineHeight =\n    typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : iconSize;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n  const hasExplicitHeight =\n    SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined;\n  const minHeight = hasExplicitHeight\n    ? (explicitHeight as number)\n    : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);\n  const iconCellHeight = getSafeIconCell(iconSize);\n\n  return {\n    minHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(\n      0,\n      (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2,\n    ),\n    hasExplicitHeight,\n  };\n}\n\n/** Apply the metric-safe line height after the token typography styles. */\nexport function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: labelLineHeight,\n  };\n}\n\nexport { getIconButtonIconSize };\n"],"mappings":"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"}

package/dist/components/Button.cjs

@@ -89,7 +89,7 @@ function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap })
 */
 const Button = (0, react.memo)(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	const baseMetrics = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size), [theme, size]);
 	const labelScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);

package/dist/components/Button.js

@@ -86,7 +86,7 @@ function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap })
 */
 const Button = memo(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const { theme } = useUnistyles();
 	const baseMetrics = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);
 	const labelScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","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';\n// eslint-disable-next-line uds/no-use-unistyles -- button control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { ResolvedControlFontScalingProvider } from '../fontScaling/FontScalingContext';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getButtonControlMetrics, getButtonTextStyle } from './Button/buttonTheme';\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  iconCellHeight,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  iconCellHeight: 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      minHeight: iconCellHeight,\n      justifyContent: 'center' 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  /**\n   * Caps how far the label and icons grow with the OS text-size setting; the\n   * button grows to fit the scaled content. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\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/Button';\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  maxFontSizeMultiplier,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  // Inside a control, \"no cap resolved\" must force-uncap (0) rather than let\n  // the label's own variant default or an inherited cap apply.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n  const { theme } = useUnistyles();\n  const baseMetrics = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);\n  const labelScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);\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  const iconScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, iconSize);\n  const iconCellScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    baseMetrics.iconCellHeight,\n  );\n  const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(\n    () =>\n      getButtonControlMetrics(theme, size, {\n        label: labelScaleFactor,\n        icon: iconScaleFactor,\n        iconCell: iconCellScaleFactor,\n      }),\n    [theme, size, labelScaleFactor, iconScaleFactor, iconCellScaleFactor],\n  );\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      <ResolvedControlFontScalingProvider maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n        {children}\n      </ResolvedControlFontScalingProvider>\n    ) : (\n      <Text\n        numberOfLines={1}\n        textAlign=\"center\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={getButtonTextStyle(buttonStyles.text, labelLineHeight)}\n      >\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  // Containers pre-scale by the capped factor; icon styles stay unscaled and\n  // native grows them by the same capped multiplier.\n  const scaledIconSize = Math.round(iconSize * iconScaleFactor);\n  const scaledIconCellHeight = Math.ceil(iconCellHeight * iconCellScaleFactor);\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot\n      visible={showLoading || showStartIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      {showLoading ? (\n        <ActivityIndicator size={scaledIconSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot\n      visible={showEndIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      { minHeight, paddingVertical },\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, minHeight, paddingVertical, 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":";;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAS,uBAAuB,QAA4B,OAAuB;AACjF;CACA,IAAI,CAAC,QACH,OAAO;CAET,IAAI,SAAS,GACX,OAAO;CAET,IAAI,SAAS,GACX,OAAO;CAGT,OAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;EAE5F,OAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;AAYJ,SAAS,iBAAiB,EACxB,UACA,SACA,UACA,gBACA,OAOC;CAGD,MAAM,WAAW,sBACT,WAAW,UAAU,IAAI,GAAG,qBAAqB,EACvD,CAAC,QAAQ,CACV;CAED,MAAM,gBAAgB,uBAAuB;EAE3C,MAAM,aAAa,WAAW;EAS9B,OAAO;GACL,OATY,YAAY,SAAS,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,WAAW,CAS1D;GACL,SALc,YAAY,SAAS,OAAO,CAAC,IAAK,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,QAKrD;GACP,WAAW,CAAC,EAAE,OALF,YAAY,SAAS,OAAO,CAAC,IAAK,EAAE,EAAE,CAAC,IAAK,EAAE,EAAE,QAKzC,EAAE,CAAC;GACtB,UAAU;GACV,WAAW;GACX,gBAAgB;GACjB;GACD;CAEF,OAAO,oBAAC,SAAS,MAAV;EAAe,OAAO;EAAgB;EAAyB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFxE,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,UAAU,WACV,OAAO,MACP,cAAc,WACd,WACA,SACA,SACA,UACA,OAAO,QACP,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,uBACA,WACA,YACA,KACA,GAAG,SACW;CACd,MAAM,gBAAgB,CAAC;CAIvB,MAAM,gCACJ,yBAAyB,WAAW,sBAAsB,IAAI;CAEhE,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,cAAc,cAAc,wBAAwB,OAAO,KAAK,EAAE,CAAC,OAAO,KAAK,CAAC;CACtF,MAAM,mBAAmB,aAAa,+BAA+B,YAAY,gBAAgB;CAGjG,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,aAAa,YAAY;EAAE;EAAM;EAAS;EAAU;EAAS,CAAC;CAG9D,MAAM,YAAY,aAAa,KAAK;CACpC,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,kBAAkB,aAAa,+BAA+B,SAAS;CAC7E,MAAM,sBAAsB,aAC1B,+BACA,YAAY,eACb;CACD,MAAM,EAAE,WAAW,iBAAiB,gBAAgB,oBAAoB,cAEpE,wBAAwB,OAAO,MAAM;EACnC,OAAO;EACP,MAAM;EACN,UAAU;EACX,CAAC,EACJ;EAAC;EAAO;EAAM;EAAkB;EAAiB;EAAoB,CACtE;CAGD,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAmE;EAClE,WAAW,KAAK;EAChB,IAAI,eACF,MAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;EAEpE,YAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAoE;EACnE,WAAW,MAAM;EACjB,IAAI,eACF,MAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;EAEpE,aAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAGD,MAAM,eACJ,aACC,eAAe,SAAS,GACvB,oBAAC,oCAAD;EAAoC,uBAAuB;EACxD;EACkC,CAAA,GAErC,oBAACA,QAAD;EACE,eAAe;EACf,WAAU;EACV,uBAAuB;EACvB,OAAO,mBAAmB,aAAa,MAAM,gBAAgB;EAE5D;EACI,CAAA;CAGX,MAAM,YAAY,eAAe;EAAE;EAAU,MAAM;EAAS,GAAG,CAAC,UAAU,QAAQ,CAAC;CAInF,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,iBAAiB,uBAAuB;EAI5C,MAAM,gBAFa,cAAc,MAAM,WAEN,kBADW,QAAQ,iBACC;EAErD,OAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GAEnC,GAAI,iBAAiB,EACnB,WAAW,uBAAuB,eAAe,cAAc,MAAM,EACtE;GACF;GACD;CAGF,MAAM,cAAc,CAAC,CAAC;CACtB,MAAM,gBAAgB,CAAC,CAAC,aAAa,CAAC;CACtC,MAAM,cAAc,CAAC,CAAC,WAAW,CAAC;CAElC,MAAM,gBAAiB,aAAa,KAAK,iBAA8B;CAIvE,MAAM,iBAAiB,KAAK,MAAM,WAAW,gBAAgB;CAC7D,MAAM,uBAAuB,KAAK,KAAK,iBAAiB,oBAAoB;CAG5E,MAAM,eACJ,oBAAC,kBAAD;EACE,SAAS,eAAe;EACxB,UAAU;EACV,gBAAgB;EAChB,KAAK;YAEJ,cACC,oBAAC,mBAAD;GAAmB,MAAM;GAAgB,OAAO,aAAa,KAAK;GAAS,CAAA,GAE3E,oBAAC,UAAD;GACE,MAAM;GACN,MAAM;GACN,SAAS;GACT,uBAAuB;GACvB,OAAO,CAAC,aAAa,MAAM,EAAE,YAAY,gBAAgB,CAAC;GAC1D,CAAA;EAEa,CAAA;CAIrB,MAAM,aACJ,oBAAC,kBAAD;EACE,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,KAAK;YAEL,oBAAC,UAAD;GACE,MAAM;GACN,MAAM;GACN,SAAS;GACT,uBAAuB;GACvB,OAAO,CAAC,aAAa,MAAM,EAAE,YAAY,gBAAgB,CAAC;GAC1D,CAAA;EACe,CAAA;CAGrB,MAAM,aAAa,cACX;EACJ,aAAa;EACb;GAAE;GAAW;GAAiB;EAC9B;EACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;EACpD,EACD;EAAC,aAAa;EAAM;EAAW;EAAiB;EAAgB;EAAO;EAAQ,CAChF;CAGD,OACE,qBAAC,mBAAD;EACO;EACK;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,cAAa;EACb,OAAO;EACP,GAAI;YAfN;GAiBG;GACA;GACA;GACiB;;EAEtB;AAEF,OAAO,cAAc"}
+{"version":3,"file":"Button.js","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';\n// eslint-disable-next-line uds/no-use-unistyles -- button control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { ResolvedControlFontScalingProvider } from '../fontScaling/FontScalingContext';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getButtonControlMetrics, getButtonTextStyle } from './Button/buttonTheme';\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  iconCellHeight,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  iconCellHeight: 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      minHeight: iconCellHeight,\n      justifyContent: 'center' 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  /**\n   * Caps how far the label and icons grow with the OS text-size setting; the\n   * button grows to fit the scaled content. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\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/Button';\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  maxFontSizeMultiplier,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  // Inside a control, \"no cap resolved\" must force-uncap (0) rather than let\n  // the label's own variant default or an inherited cap apply.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  const { theme } = useUnistyles();\n  const baseMetrics = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);\n  const labelScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);\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  const iconScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, iconSize);\n  const iconCellScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    baseMetrics.iconCellHeight,\n  );\n  const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(\n    () =>\n      getButtonControlMetrics(theme, size, {\n        label: labelScaleFactor,\n        icon: iconScaleFactor,\n        iconCell: iconCellScaleFactor,\n      }),\n    [theme, size, labelScaleFactor, iconScaleFactor, iconCellScaleFactor],\n  );\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      <ResolvedControlFontScalingProvider maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n        {children}\n      </ResolvedControlFontScalingProvider>\n    ) : (\n      <Text\n        numberOfLines={1}\n        textAlign=\"center\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={getButtonTextStyle(buttonStyles.text, labelLineHeight)}\n      >\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  // Containers pre-scale by the capped factor; icon styles stay unscaled and\n  // native grows them by the same capped multiplier.\n  const scaledIconSize = Math.round(iconSize * iconScaleFactor);\n  const scaledIconCellHeight = Math.ceil(iconCellHeight * iconCellScaleFactor);\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot\n      visible={showLoading || showStartIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      {showLoading ? (\n        <ActivityIndicator size={scaledIconSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot\n      visible={showEndIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      { minHeight, paddingVertical },\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, minHeight, paddingVertical, 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/Checkbox.cjs

@@ -5,6 +5,7 @@ const require_index = require("../motion-tokens/dist/index.cjs");
 const require_motion = require("../motion.cjs");
 const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
 const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
+const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 const require_components_Icon = require("./Icon.cjs");
 const require_components_Pressable = require("./Pressable.cjs");
 const require_components_FormLabel = require("./FormLabel.cjs");
@@ -55,7 +56,7 @@ const VARIANT_ERROR_MAP = {
 */
 const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
 	const uid = `uds-checkbox-${(0, react.useId)()}`;
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = (0, react.useState)(false);
@@ -98,6 +99,7 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof boxBaseSize === "number" ? boxBaseSize : void 0);
 	const markScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, _yahoo_uds_icons_tokens.ICON_SIZE_MAP.sm);
 	const scaledMarkSize = Math.round(_yahoo_uds_icons_tokens.ICON_SIZE_MAP.sm * markScaleFactor);
+	const hasScaledLayout = fontScaleFactor !== 1;
 	const rootStyle = (0, react.useMemo)(() => [generated_styles.checkboxStyles.root, { opacity: disabled ? .5 : 1 }], [generated_styles.checkboxStyles.root, disabled]);
 	const checkboxBoxStyle = (0, react.useMemo)(() => {
 		const { width, height, borderRadius } = generated_styles.checkboxStyles.checkbox;
@@ -129,7 +131,7 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 			required,
 			showRequiredAsterisk: required,
 			hasError,
-			flexShrink: "1",
+			flexShrink: hasScaledLayout ? "1" : void 0,
 			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.checkboxStyles.text
 		});
@@ -137,6 +139,7 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 		label,
 		required,
 		hasError,
+		hasScaledLayout,
 		resolvedMaxFontSizeMultiplier,
 		generated_styles.checkboxStyles.text
 	]);
@@ -153,8 +156,8 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 		disabled,
 		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 		alignItems: "center",
-		alignSelf: "stretch",
-		minHeight: 52,
+		alignSelf: hasScaledLayout ? "stretch" : "flex-start",
+		minHeight: hasScaledLayout ? 52 : void 0,
 		accessibilityRole: "checkbox",
 		accessibilityState: a11yState,
 		accessibilityLabel: typeof label === "string" ? label : void 0,
@@ -167,7 +170,10 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 				size: "sm",
 				dangerouslySetSize: scaledMarkSize,
 				allowFontScaling: false,
-				style: generated_styles.checkboxStyles.checkboxIcon
+				style: [generated_styles.checkboxStyles.checkboxIcon, markScaleFactor !== 1 ? {
+					fontSize: scaledMarkSize,
+					lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledMarkSize)
+				} : void 0]
 			})
 		}), labelContent]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAsBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;;;;;;EAe9B,qBAAA;EAbA;EAeA,QAAA,IAAY,OAAA;AAAA;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAuBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;;;;;;EAe9B,qBAAA;EAbA;EAeA,QAAA,IAAY,OAAA;AAAA;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAsBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;;;;;;EAe9B,qBAAA;EAbA;EAeA,QAAA,IAAY,OAAA;AAAA;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAuBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;;;;;;EAe9B,qBAAA;EAbA;EAeA,QAAA,IAAY,OAAA;AAAA;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;cAqDxB,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Checkbox.js

@@ -3,6 +3,7 @@ import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
 import { BUTTON_SPRING_CONFIG } from "../motion.js";
 import { useFontScale } from "../fontScaling/useFontScale.js";
 import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
+import { getSafeIconCell } from "./Button/buttonTheme.js";
 import { Icon } from "./Icon.js";
 import { Pressable } from "./Pressable.js";
 import { FormLabel } from "./FormLabel.js";
@@ -52,7 +53,7 @@ const VARIANT_ERROR_MAP = {
 */
 const Checkbox = memo(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
 	const uid = `uds-checkbox-${useId()}`;
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = useState(false);
@@ -95,6 +96,7 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, typeof boxBaseSize === "number" ? boxBaseSize : void 0);
 	const markScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, ICON_SIZE_MAP.sm);
 	const scaledMarkSize = Math.round(ICON_SIZE_MAP.sm * markScaleFactor);
+	const hasScaledLayout = fontScaleFactor !== 1;
 	const rootStyle = useMemo(() => [checkboxStyles.root, { opacity: disabled ? .5 : 1 }], [checkboxStyles.root, disabled]);
 	const checkboxBoxStyle = useMemo(() => {
 		const { width, height, borderRadius } = checkboxStyles.checkbox;
@@ -126,7 +128,7 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 			required,
 			showRequiredAsterisk: required,
 			hasError,
-			flexShrink: "1",
+			flexShrink: hasScaledLayout ? "1" : void 0,
 			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: checkboxStyles.text
 		});
@@ -134,6 +136,7 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 		label,
 		required,
 		hasError,
+		hasScaledLayout,
 		resolvedMaxFontSizeMultiplier,
 		checkboxStyles.text
 	]);
@@ -150,8 +153,8 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 		disabled,
 		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 		alignItems: "center",
-		alignSelf: "stretch",
-		minHeight: 52,
+		alignSelf: hasScaledLayout ? "stretch" : "flex-start",
+		minHeight: hasScaledLayout ? 52 : void 0,
 		accessibilityRole: "checkbox",
 		accessibilityState: a11yState,
 		accessibilityLabel: typeof label === "string" ? label : void 0,
@@ -164,7 +167,10 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 				size: "sm",
 				dangerouslySetSize: scaledMarkSize,
 				allowFontScaling: false,
-				style: checkboxStyles.checkboxIcon
+				style: [checkboxStyles.checkboxIcon, markScaleFactor !== 1 ? {
+					fontSize: scaledMarkSize,
+					lineHeight: getSafeIconCell(scaledMarkSize)
+				} : void 0]
 			})
 		}), labelContent]
 	});