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

package/dist/components/Chip/ChipBase.cjs

@@ -20,14 +20,29 @@ const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const interactionState = pressed ? "pressed" : "rest";
 	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier);
+	const rootLayerStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
+		interactionState,
+		kind,
+		size,
+		theme,
+		toggleState,
+		variant
+	]);
+	const textLayerStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState), [
+		interactionState,
+		kind,
+		size,
+		theme,
+		toggleState,
+		variant
+	]);
+	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, (typeof textLayerStyle.lineHeight === "number" ? textLayerStyle.lineHeight : void 0) ?? (typeof textLayerStyle.fontSize === "number" ? textLayerStyle.fontSize : void 0));
 	const rootStyle = (0, react.useMemo)(() => {
-		const layerStyle = require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState);
-		const scaledLayer = fontScaleFactor !== 1 && typeof layerStyle.height === "number" ? { height: Math.round(layerStyle.height * fontScaleFactor) } : void 0;
+		const scaledLayer = fontScaleFactor !== 1 && typeof rootLayerStyle.height === "number" ? { height: Math.round(rootLayerStyle.height * fontScaleFactor) } : void 0;
 		const resolvedMaxWidth = maxWidth === 200 ? Math.round(maxWidth * fontScaleFactor) : maxWidth;
 		return [
 			chipStaticStyles.root,
-			layerStyle,
+			rootLayerStyle,
 			scaledLayer,
 			minWidth === void 0 ? void 0 : { minWidth },
 			resolvedMaxWidth === void 0 ? void 0 : { maxWidth: resolvedMaxWidth },
@@ -37,24 +52,12 @@ const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT
 	}, [
 		disabled,
 		fontScaleFactor,
-		interactionState,
-		kind,
 		maxWidth,
 		minWidth,
-		size,
-		style,
-		theme,
-		toggleState,
-		variant
-	]);
-	const textStyle = (0, react.useMemo)(() => [chipStaticStyles.text, require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState)], [
-		interactionState,
-		kind,
-		size,
-		theme,
-		toggleState,
-		variant
+		rootLayerStyle,
+		style
 	]);
+	const textStyle = (0, react.useMemo)(() => [chipStaticStyles.text, textLayerStyle], [textLayerStyle]);
 	const iconStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "icon", interactionState), [
 		interactionState,
 		kind,

package/dist/components/Chip/ChipBase.js

@@ -18,14 +18,29 @@ const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STA
 	const [pressed, setPressed] = useState(false);
 	const interactionState = pressed ? "pressed" : "rest";
 	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
-	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);
+	const rootLayerStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
+		interactionState,
+		kind,
+		size,
+		theme,
+		toggleState,
+		variant
+	]);
+	const textLayerStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState), [
+		interactionState,
+		kind,
+		size,
+		theme,
+		toggleState,
+		variant
+	]);
+	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, (typeof textLayerStyle.lineHeight === "number" ? textLayerStyle.lineHeight : void 0) ?? (typeof textLayerStyle.fontSize === "number" ? textLayerStyle.fontSize : void 0));
 	const rootStyle = useMemo(() => {
-		const layerStyle = getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState);
-		const scaledLayer = fontScaleFactor !== 1 && typeof layerStyle.height === "number" ? { height: Math.round(layerStyle.height * fontScaleFactor) } : void 0;
+		const scaledLayer = fontScaleFactor !== 1 && typeof rootLayerStyle.height === "number" ? { height: Math.round(rootLayerStyle.height * fontScaleFactor) } : void 0;
 		const resolvedMaxWidth = maxWidth === 200 ? Math.round(maxWidth * fontScaleFactor) : maxWidth;
 		return [
 			chipStaticStyles.root,
-			layerStyle,
+			rootLayerStyle,
 			scaledLayer,
 			minWidth === void 0 ? void 0 : { minWidth },
 			resolvedMaxWidth === void 0 ? void 0 : { maxWidth: resolvedMaxWidth },
@@ -35,24 +50,12 @@ const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STA
 	}, [
 		disabled,
 		fontScaleFactor,
-		interactionState,
-		kind,
 		maxWidth,
 		minWidth,
-		size,
-		style,
-		theme,
-		toggleState,
-		variant
-	]);
-	const textStyle = useMemo(() => [chipStaticStyles.text, getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState)], [
-		interactionState,
-		kind,
-		size,
-		theme,
-		toggleState,
-		variant
+		rootLayerStyle,
+		style
 	]);
+	const textStyle = useMemo(() => [chipStaticStyles.text, textLayerStyle], [textLayerStyle]);
 	const iconStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "icon", interactionState), [
 		interactionState,
 		kind,

package/dist/components/Chip/ChipBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBase.js","names":["Text"],"sources":["../../../src/components/Chip/ChipBase.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- chip toggle styles need variant + active token lookups\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { IconSlot } from '../IconSlot';\nimport { Text } from '../Text';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipBaseProps, ChipInteractionState, ChipSize, ChipVariant } from './types';\n\nconst DEFAULT_CHIP_SIZE: ChipSize = 'md';\nconst DEFAULT_CHIP_VARIANT: ChipVariant = 'primary';\nconst DEFAULT_MAX_WIDTH = 200;\nconst DEFAULT_TOGGLE_STATE = 'off';\n\nconst ChipBase = memo(function ChipBase({\n  kind,\n  toggleState = DEFAULT_TOGGLE_STATE,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  minWidth,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  startIcon,\n  endIcon,\n  endContent,\n  disabled = false,\n  pressable = false,\n  maxFontSizeMultiplier,\n  onPress,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  style,\n  ref,\n  ...viewProps\n}: ChipBaseProps) {\n  const { theme } = useUnistyles();\n  const [pressed, setPressed] = useState(false);\n  const interactionState: ChipInteractionState = pressed ? 'pressed' : 'rest';\n\n  // One capped factor governs the label, icons, and the chip's fixed height.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n    const layerStyle = getMergedChipLayerStyle(\n      theme,\n      kind,\n      variant,\n      size,\n      toggleState,\n      'root',\n      interactionState,\n    ) as ViewStyle;\n    // The chip's fixed height grows with its capped content; the default max\n    // width grows too so capped labels don't truncate earlier than today. An\n    // explicit maxWidth/minWidth from the consumer is respected as-is.\n    const scaledLayer =\n      fontScaleFactor !== 1 && typeof layerStyle.height === 'number'\n        ? { height: Math.round(layerStyle.height * fontScaleFactor) }\n        : undefined;\n    const resolvedMaxWidth =\n      maxWidth === DEFAULT_MAX_WIDTH ? Math.round(maxWidth * fontScaleFactor) : maxWidth;\n\n    return [\n      chipStaticStyles.root,\n      layerStyle,\n      scaledLayer,\n      minWidth === undefined ? undefined : { minWidth },\n      resolvedMaxWidth === undefined ? undefined : { maxWidth: resolvedMaxWidth },\n      disabled ? chipStaticStyles.disabled : undefined,\n      style,\n    ];\n  }, [\n    disabled,\n    fontScaleFactor,\n    interactionState,\n    kind,\n    maxWidth,\n    minWidth,\n    size,\n    style,\n    theme,\n    toggleState,\n    variant,\n  ]);\n\n  const textStyle = useMemo<StyleProp<TextStyle>>(\n    () => [\n      chipStaticStyles.text,\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'rootText',\n        interactionState,\n      ) as TextStyle,\n    ],\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'icon',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n\n  const content = (\n    <>\n      {startIcon ? (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={iconStyle}\n        />\n      ) : null}\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={textStyle}\n      >\n        {children}\n      </Text>\n      {endContent ??\n        (endIcon ? (\n          <IconSlot\n            icon={endIcon}\n            variant=\"fill\"\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={iconStyle}\n          />\n        ) : null)}\n    </>\n  );\n\n  if (pressable) {\n    return (\n      <Pressable\n        ref={ref}\n        accessibilityRole={accessibilityRole}\n        accessibilityState={{ disabled, ...accessibilityState }}\n        disabled={disabled}\n        onPress={disabled ? undefined : onPress}\n        onPressIn={() => setPressed(true)}\n        onPressOut={() => setPressed(false)}\n        {...viewProps}\n        style={rootStyle}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      ref={ref}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ disabled, ...accessibilityState }}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {content}\n    </View>\n  );\n});\n\nChipBase.displayName = 'ChipBase';\n\nconst chipStaticStyles = StyleSheet.create({\n  disabled: {\n    opacity: 0.5,\n  },\n  root: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  },\n  text: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n});\n\nexport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT, DEFAULT_MAX_WIDTH };\n"],"mappings":";;;;;;;;;;;AAaA,MAAM,oBAA8B;AACpC,MAAM,uBAAoC;AAC1C,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,WAAW,KAAK,SAAS,SAAS,EACtC,MACA,cAAc,sBACd,UAAU,sBACV,OAAA,MACA,UACA,WAAA,KACA,WACA,SACA,YACA,WAAW,OACX,YAAY,OACZ,uBACA,SACA,mBACA,oBACA,UACA,OACA,KACA,GAAG,aACa;CAChB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,mBAAyC,UAAU,YAAY;CAGrE,MAAM,gCACJ,yBAAyB,WAAW,sBAAsB,IAAI;CAChE,MAAM,kBAAkB,aAAa,8BAA8B;CAEnE,MAAM,YAAY,cAAoC;EACpD,MAAM,aAAa,wBACjB,OACA,MACA,SACA,MACA,aACA,QACA,iBACD;EAID,MAAM,cACJ,oBAAoB,KAAK,OAAO,WAAW,WAAW,WAClD,EAAE,QAAQ,KAAK,MAAM,WAAW,SAAS,gBAAgB,EAAE,GAC3D,KAAA;EACN,MAAM,mBACJ,aAAA,MAAiC,KAAK,MAAM,WAAW,gBAAgB,GAAG;EAE5E,OAAO;GACL,iBAAiB;GACjB;GACA;GACA,aAAa,KAAA,IAAY,KAAA,IAAY,EAAE,UAAU;GACjD,qBAAqB,KAAA,IAAY,KAAA,IAAY,EAAE,UAAU,kBAAkB;GAC3E,WAAW,iBAAiB,WAAW,KAAA;GACvC;GACD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,cACV,CACJ,iBAAiB,MACjB,wBACE,OACA,MACA,SACA,MACA,aACA,YACA,iBACD,CACF,EACD;EAAC;EAAkB;EAAM;EAAM;EAAO;EAAa;EAAQ,CAC5D;CAED,MAAM,YAAY,cAEd,wBACE,OACA,MACA,SACA,MACA,aACA,QACA,iBACD,EACH;EAAC;EAAkB;EAAM;EAAM;EAAO;EAAa;EAAQ,CAC5D;CAED,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA;EACG,YACC,oBAAC,UAAD;GACE,MAAM;GACN,SAAQ;GACR,uBAAuB;GACvB,OAAO;GACP,CAAA,GACA;EACJ,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACR,eAAe;GACf,uBAAuB;GACvB,OAAO;GAEN;GACI,CAAA;EACN,eACE,UACC,oBAAC,UAAD;GACE,MAAM;GACN,SAAQ;GACR,uBAAuB;GACvB,OAAO;GACP,CAAA,GACA;EACL,EAAA,CAAA;CAGL,IAAI,WACF,OACE,oBAAC,WAAD;EACO;EACc;EACnB,oBAAoB;GAAE;GAAU,GAAG;GAAoB;EAC7C;EACV,SAAS,WAAW,KAAA,IAAY;EAChC,iBAAiB,WAAW,KAAK;EACjC,kBAAkB,WAAW,MAAM;EACnC,GAAI;EACJ,OAAO;YAEN;EACS,CAAA;CAIhB,OACE,oBAAC,MAAD;EACO;EACc;EACnB,oBAAoB;GAAE;GAAU,GAAG;GAAoB;EACvD,GAAI;EACJ,OAAO;YAEN;EACI,CAAA;EAET;AAEF,SAAS,cAAc;AAEvB,MAAM,mBAAmB,WAAW,OAAO;CACzC,UAAU,EACR,SAAS,IACV;CACD,MAAM;EACJ,YAAY;EACZ,WAAW;EACX,eAAe;EACf,UAAU;EACX;CACD,MAAM;EACJ,YAAY;EACZ,WAAW;EACZ;CACF,CAAC"}
+{"version":3,"file":"ChipBase.js","names":["Text"],"sources":["../../../src/components/Chip/ChipBase.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- chip toggle styles need variant + active token lookups\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { IconSlot } from '../IconSlot';\nimport { Text } from '../Text';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipBaseProps, ChipInteractionState, ChipSize, ChipVariant } from './types';\n\nconst DEFAULT_CHIP_SIZE: ChipSize = 'md';\nconst DEFAULT_CHIP_VARIANT: ChipVariant = 'primary';\nconst DEFAULT_MAX_WIDTH = 200;\nconst DEFAULT_TOGGLE_STATE = 'off';\n\nconst ChipBase = memo(function ChipBase({\n  kind,\n  toggleState = DEFAULT_TOGGLE_STATE,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  minWidth,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  startIcon,\n  endIcon,\n  endContent,\n  disabled = false,\n  pressable = false,\n  maxFontSizeMultiplier,\n  onPress,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  style,\n  ref,\n  ...viewProps\n}: ChipBaseProps) {\n  const { theme } = useUnistyles();\n  const [pressed, setPressed] = useState(false);\n  const interactionState: ChipInteractionState = pressed ? 'pressed' : 'rest';\n\n  // One capped factor governs the label, icons, and the chip's fixed height.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const rootLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'root',\n        interactionState,\n      ) as ViewStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const textLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'rootText',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    (typeof textLayerStyle.lineHeight === 'number' ? textLayerStyle.lineHeight : undefined) ??\n      (typeof textLayerStyle.fontSize === 'number' ? textLayerStyle.fontSize : undefined),\n  );\n\n  const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n    // The chip's fixed height grows with its capped content; the default max\n    // width grows too so capped labels don't truncate earlier than today. An\n    // explicit maxWidth/minWidth from the consumer is respected as-is.\n    const scaledLayer =\n      fontScaleFactor !== 1 && typeof rootLayerStyle.height === 'number'\n        ? { height: Math.round(rootLayerStyle.height * fontScaleFactor) }\n        : undefined;\n    const resolvedMaxWidth =\n      maxWidth === DEFAULT_MAX_WIDTH ? Math.round(maxWidth * fontScaleFactor) : maxWidth;\n\n    return [\n      chipStaticStyles.root,\n      rootLayerStyle,\n      scaledLayer,\n      minWidth === undefined ? undefined : { minWidth },\n      resolvedMaxWidth === undefined ? undefined : { maxWidth: resolvedMaxWidth },\n      disabled ? chipStaticStyles.disabled : undefined,\n      style,\n    ];\n  }, [disabled, fontScaleFactor, maxWidth, minWidth, rootLayerStyle, style]);\n\n  const textStyle = useMemo<StyleProp<TextStyle>>(\n    () => [chipStaticStyles.text, textLayerStyle],\n    [textLayerStyle],\n  );\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'icon',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n\n  const content = (\n    <>\n      {startIcon ? (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={iconStyle}\n        />\n      ) : null}\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={textStyle}\n      >\n        {children}\n      </Text>\n      {endContent ??\n        (endIcon ? (\n          <IconSlot\n            icon={endIcon}\n            variant=\"fill\"\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={iconStyle}\n          />\n        ) : null)}\n    </>\n  );\n\n  if (pressable) {\n    return (\n      <Pressable\n        ref={ref}\n        accessibilityRole={accessibilityRole}\n        accessibilityState={{ disabled, ...accessibilityState }}\n        disabled={disabled}\n        onPress={disabled ? undefined : onPress}\n        onPressIn={() => setPressed(true)}\n        onPressOut={() => setPressed(false)}\n        {...viewProps}\n        style={rootStyle}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      ref={ref}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ disabled, ...accessibilityState }}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {content}\n    </View>\n  );\n});\n\nChipBase.displayName = 'ChipBase';\n\nconst chipStaticStyles = StyleSheet.create({\n  disabled: {\n    opacity: 0.5,\n  },\n  root: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  },\n  text: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n});\n\nexport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT, DEFAULT_MAX_WIDTH };\n"],"mappings":"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"}

package/dist/components/Icon.cjs

@@ -29,9 +29,10 @@ const MulticolorIcon = (0, react.memo)(function MulticolorIcon({ name, size = DE
 	const { rt } = (0, react_native_unistyles.useUnistyles)();
 	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
 	const pixelSize = _yahoo_uds_icons_tokens.ICON_SIZE_MAP[size];
+	const baseSize = dangerouslySetSize ?? pixelSize;
 	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1);
-	const renderedSize = Math.round((dangerouslySetSize ?? pixelSize) * fontScaleFactor);
+	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1, baseSize);
+	const renderedSize = Math.round(baseSize * fontScaleFactor);
 	const svgKey = `${name}-${colorScheme}-${pixelSize}`;
 	const svgContent = _yahoo_uds_icons_svgMap.svgMap[svgKey];
 	if (!svgContent) {
@@ -114,12 +115,12 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, siz
 				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(pixelSize)
 			},
 			generated_styles.styles.foundation,
+			style,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
 				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(dangerouslySetSize)
-			} : void 0,
-			style
+			} : void 0
 		], [
 			dangerouslySetColor,
 			dangerouslySetSize,

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

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

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

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

package/dist/components/Icon.js

@@ -27,9 +27,10 @@ const MulticolorIcon = memo(function MulticolorIcon({ name, size = DEFAULT_PROPS
 	const { rt } = useUnistyles();
 	const colorScheme = rt.themeName === "dark" ? "dark" : "light";
 	const pixelSize = ICON_SIZE_MAP[size];
+	const baseSize = dangerouslySetSize ?? pixelSize;
 	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
-	const fontScaleFactor = useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1);
-	const renderedSize = Math.round((dangerouslySetSize ?? pixelSize) * fontScaleFactor);
+	const fontScaleFactor = useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1, baseSize);
+	const renderedSize = Math.round(baseSize * fontScaleFactor);
 	const svgKey = `${name}-${colorScheme}-${pixelSize}`;
 	const svgContent = svgMap[svgKey];
 	if (!svgContent) {
@@ -112,12 +113,12 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 				lineHeight: getSafeIconCell(pixelSize)
 			},
 			styles.foundation,
+			style,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
 				lineHeight: getSafeIconCell(dangerouslySetSize)
-			} : void 0,
-			style
+			} : void 0
 		], [
 			dangerouslySetColor,
 			dangerouslySetSize,

package/dist/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  /**\n   * Caps how far the icon grows with the OS text-size setting. Applies to both\n   * font glyphs and multicolor SVGs. Set null to remove the cap; override\n   * app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  allowFontScaling = true,\n  accessible,\n  accessibilityElementsHidden,\n  accessibilityHint,\n  accessibilityLabel = name,\n  accessibilityRole = 'image',\n  accessibilityState,\n  accessibilityValue,\n  importantForAccessibility,\n  testID,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const fontScaleFactor = useFontScale(allowFontScaling ? resolvedMaxFontSizeMultiplier : 1);\n  const renderedSize = Math.round((dangerouslySetSize ?? pixelSize) * fontScaleFactor);\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View\n      accessible={accessible}\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityHint={accessibilityHint}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      accessibilityValue={accessibilityValue}\n      importantForAccessibility={importantForAccessibility}\n      testID={testID}\n      style={styles.foundation as ViewProps['style']}\n    >\n      <SvgXml\n        xml={svgContent}\n        width={renderedSize}\n        height={renderedSize}\n        viewBox={`0 0 ${pixelSize} ${pixelSize}`}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Native scales fontSize and lineHeight together under the cap, so the\n  // glyph cell grows proportionally; glyph selection stays at pixelSize.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n        fontSize: pixelSize,\n        lineHeight: getSafeIconCell(pixelSize),\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: getSafeIconCell(dangerouslySetSize),\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":"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"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  /**\n   * Caps how far the icon grows with the OS text-size setting. Applies to both\n   * font glyphs and multicolor SVGs. Set null to remove the cap; override\n   * app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  allowFontScaling = true,\n  accessible,\n  accessibilityElementsHidden,\n  accessibilityHint,\n  accessibilityLabel = name,\n  accessibilityRole = 'image',\n  accessibilityState,\n  accessibilityValue,\n  importantForAccessibility,\n  testID,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const baseSize = dangerouslySetSize ?? pixelSize;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const fontScaleFactor = useFontScale(\n    allowFontScaling ? resolvedMaxFontSizeMultiplier : 1,\n    baseSize,\n  );\n  const renderedSize = Math.round(baseSize * fontScaleFactor);\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View\n      accessible={accessible}\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityHint={accessibilityHint}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      accessibilityValue={accessibilityValue}\n      importantForAccessibility={importantForAccessibility}\n      testID={testID}\n      style={styles.foundation as ViewProps['style']}\n    >\n      <SvgXml\n        xml={svgContent}\n        width={renderedSize}\n        height={renderedSize}\n        viewBox={`0 0 ${pixelSize} ${pixelSize}`}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Native scales fontSize and lineHeight together under the cap, so the\n  // glyph cell grows proportionally; glyph selection stays at pixelSize.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n        fontSize: pixelSize,\n        lineHeight: getSafeIconCell(pixelSize),\n      },\n      styles.foundation,\n      style,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: getSafeIconCell(dangerouslySetSize),\n          }\n        : undefined,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":"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"}

package/dist/components/Input.cjs

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
 const require_components_HStack = require("./HStack.cjs");
+const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
 const require_components_Text = require("./Text.cjs");
 const require_components_InputHelpText = require("./InputHelpText.cjs");
@@ -47,8 +49,9 @@ let lodash_es = require("lodash-es");
 * @see {@link Checkbox} for boolean selections
 * @see {@link Radio} for single-select options
 */
-const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, ref, ...textInputProps }) {
+const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, maxFontSizeMultiplier, ref, ...textInputProps }) {
 	const uid = `uds-input-${(0, react.useId)()}`;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
 	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ?? "");
 	const [isFocused, setIsFocused] = (0, react.useState)(false);
 	const isControlled = controlledValue !== void 0;
@@ -73,30 +76,47 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 		readonly: readOnly,
 		invalid: hasError
 	});
+	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, (typeof generated_styles.inputStyles.inputWrapperStatic.lineHeight === "number" ? generated_styles.inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof generated_styles.inputStyles.inputWrapperStatic.fontSize === "number" ? generated_styles.inputStyles.inputWrapperStatic.fontSize : void 0));
 	const computedPlaceholderColor = placeholderTextColor ?? generated_styles.inputStyles.inputPlaceholder.color;
 	const rootStyle = (0, react.useMemo)(() => [{
 		width,
 		opacity: disabled ? .5 : 1
 	}], [width, disabled]);
-	const inputWrapperStyle = (0, react.useMemo)(() => [
-		generated_styles.inputStyles.inputWrapper,
-		generated_styles.inputStyles.inputWrapperStatic,
-		generated_styles.inputStyles.inputWrapperDynamic,
-		{
-			flexDirection: "row",
-			alignItems: "center"
-		}
-	], [
+	const inputWrapperStyle = (0, react.useMemo)(() => {
+		const { gap, paddingVertical } = generated_styles.inputStyles.inputWrapperStatic;
+		const scaledMetrics = fontScaleFactor === 1 ? void 0 : {
+			...typeof gap === "number" && { gap: Math.round(gap * fontScaleFactor) },
+			...typeof paddingVertical === "number" && { paddingVertical: Math.round(paddingVertical * fontScaleFactor) }
+		};
+		return [
+			generated_styles.inputStyles.inputWrapper,
+			generated_styles.inputStyles.inputWrapperStatic,
+			generated_styles.inputStyles.inputWrapperDynamic,
+			scaledMetrics,
+			{
+				flexDirection: "row",
+				alignItems: "center"
+			}
+		];
+	}, [
+		fontScaleFactor,
 		generated_styles.inputStyles.inputWrapper,
 		generated_styles.inputStyles.inputWrapperStatic,
 		generated_styles.inputStyles.inputWrapperDynamic
 	]);
-	const textInputStyle = (0, react.useMemo)(() => [generated_styles.inputStyles.input, {
-		flex: 1,
-		includeFontPadding: false,
-		textAlignVertical: "center",
-		paddingVertical: 0
-	}], [generated_styles.inputStyles.input]);
+	const textInputStyle = (0, react.useMemo)(() => {
+		const inputHeight = generated_styles.inputStyles.input.height;
+		return [
+			generated_styles.inputStyles.input,
+			typeof inputHeight === "number" ? { height: Math.round(inputHeight * fontScaleFactor) } : void 0,
+			{
+				flex: 1,
+				includeFontPadding: false,
+				textAlignVertical: "center",
+				paddingVertical: 0
+			}
+		];
+	}, [fontScaleFactor, generated_styles.inputStyles.input]);
 	const labelContent = (0, react.useMemo)(() => {
 		if (!label) return null;
 		const content = (0, lodash_es.isFunction)(label) ? label() : label;
@@ -105,9 +125,11 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 			alignItems: "flex-end",
 			spacingBottom: "2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 				style: generated_styles.inputStyles.label,
 				children: content
 			}), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 				style: generated_styles.inputStyles.labelRequired,
 				children: "*"
 			})]
@@ -115,6 +137,7 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 	}, [
 		label,
 		required,
+		resolvedMaxFontSizeMultiplier,
 		generated_styles.inputStyles.label,
 		generated_styles.inputStyles.labelRequired
 	]);
@@ -123,17 +146,27 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: startIcon,
 			variant: "outline",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.inputStyles.startIcon
 		});
-	}, [startIcon, generated_styles.inputStyles.startIcon]);
+	}, [
+		startIcon,
+		resolvedMaxFontSizeMultiplier,
+		generated_styles.inputStyles.startIcon
+	]);
 	const endIconContent = (0, react.useMemo)(() => {
 		if (!endIcon) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: endIcon,
 			variant: "outline",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.inputStyles.endIcon
 		});
-	}, [endIcon, generated_styles.inputStyles.endIcon]);
+	}, [
+		endIcon,
+		resolvedMaxFontSizeMultiplier,
+		generated_styles.inputStyles.endIcon
+	]);
 	const helpTextContent = (0, react.useMemo)(() => {
 		if (!helpText) return null;
 		const content = (0, lodash_es.isFunction)(helpText) ? helpText() : helpText;
@@ -145,6 +178,7 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 			readOnly,
 			hasError,
 			pressed: isFocused,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			children: content
 		});
 	}, [
@@ -154,6 +188,7 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 		helperTextIcon,
 		isFocused,
 		readOnly,
+		resolvedMaxFontSizeMultiplier,
 		size,
 		valueState
 	]);
@@ -178,6 +213,7 @@ const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, en
 						placeholder,
 						placeholderTextColor: computedPlaceholderColor,
 						editable: !disabled && !readOnly,
+						maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 						style: textInputStyle,
 						accessibilityLabel: typeof label === "string" ? label : void 0,
 						accessibilityHint: typeof helpText === "string" ? helpText : void 0,

package/dist/components/Input.d.cts

@@ -10,6 +10,11 @@ import { TextInput, TextInputProps } from "react-native";
 interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
   /** Ref to the underlying TextInput element */
   ref?: Ref<TextInput>;
+  /**
+   * Caps the field text, labels, icons, and geometry at the control scale.
+   * Set null to remove the cap. @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAoBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
+{"version":3,"file":"Input.d.cts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAsBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;EALV;;;;EAUA,qBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAqB;;;;;;;;;;;;;;;cA0CjB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Input.d.ts

@@ -10,6 +10,11 @@ import { TextInput, TextInputProps } from "react-native";
 interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, Omit<TextInputProps, 'style' | 'editable'>, Pick<SizeProps, 'width'> {
   /** Ref to the underlying TextInput element */
   ref?: Ref<TextInput>;
+  /**
+   * Caps the field text, labels, icons, and geometry at the control scale.
+   * Set null to remove the cap. @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
 }
 /**
  * **📦 An input that allows users to enter text and collect data.**

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAoBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAAS;;;;;;;;;;;cA0Cf,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;;;;;;;;UAsBU,UAAA,SAEN,IAAA,CAAK,mBAAA,CAAoB,YAAA,aACzB,IAAA,CAAK,cAAA,yBACL,IAAA,CAAK,SAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,SAAA;EALV;;;;EAUA,qBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;AAAqB;;;;;;;;;;;;;;;cA0CjB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}