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

package/dist/components/Checkbox.cjs

@@ -3,12 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 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");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../generated/styles");
+let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 //#region src/components/Checkbox.tsx
@@ -50,8 +54,9 @@ const VARIANT_ERROR_MAP = {
 * @see {@link Radio} for single-select options
 * @see {@link Switch} for binary toggles
 */
-const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+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);
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = (0, react.useState)(false);
@@ -90,15 +95,33 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 		disabled,
 		pressed
 	});
+	const boxBaseSize = generated_styles.checkboxStyles.checkbox.width;
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof boxBaseSize === "number" ? boxBaseSize : void 0);
+	const markScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(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 checkboxBoxStyle = (0, react.useMemo)(() => {
+		const { width, height, borderRadius } = generated_styles.checkboxStyles.checkbox;
+		const scaledBox = fontScaleFactor !== 1 && typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor),
+			...typeof borderRadius === "number" && { borderRadius: Math.round(borderRadius * fontScaleFactor) }
+		} : void 0;
+		return [
+			generated_styles.checkboxStyles.checkbox,
+			scaledBox,
+			{
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			checkboxAnimatedStyle
+		];
+	}, [
 		generated_styles.checkboxStyles.checkbox,
-		{
-			alignItems: "center",
-			justifyContent: "center"
-		},
+		fontScaleFactor,
 		checkboxAnimatedStyle
-	], [generated_styles.checkboxStyles.checkbox, checkboxAnimatedStyle]);
+	]);
 	const labelContent = (0, react.useMemo)(() => {
 		if (!label) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
@@ -108,12 +131,16 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 			required,
 			showRequiredAsterisk: required,
 			hasError,
+			flexShrink: hasScaledLayout ? "1" : void 0,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.checkboxStyles.text
 		});
 	}, [
 		label,
 		required,
 		hasError,
+		hasScaledLayout,
+		resolvedMaxFontSizeMultiplier,
 		generated_styles.checkboxStyles.text
 	]);
 	const a11yState = (0, react.useMemo)(() => ({
@@ -129,7 +156,8 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 		disabled,
 		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 		alignItems: "center",
-		alignSelf: "flex-start",
+		alignSelf: hasScaledLayout ? "stretch" : "flex-start",
+		minHeight: hasScaledLayout ? 52 : void 0,
 		accessibilityRole: "checkbox",
 		accessibilityState: a11yState,
 		accessibilityLabel: typeof label === "string" ? label : void 0,
@@ -140,7 +168,12 @@ const Checkbox = (0, react.memo)(function Checkbox({ label, labelPosition = "sta
 			children: showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 				name: iconName,
 				size: "sm",
-				style: generated_styles.checkboxStyles.checkboxIcon
+				dangerouslySetSize: scaledMarkSize,
+				allowFontScaling: false,
+				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

@@ -14,6 +14,13 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
   disabled?: boolean;
   /** Whether the checkbox is required */
   required?: boolean;
+  /**
+   * Caps how far the box, checkmark, and label grow with the OS text-size
+   * setting; all three scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Callback fired when the checked state changes */
   onChange?: (checked: boolean) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAmBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,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

@@ -14,6 +14,13 @@ interface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps
   disabled?: boolean;
   /** Whether the checkbox is required */
   required?: boolean;
+  /**
+   * Caps how far the box, checkmark, and label grow with the OS text-size
+   * setting; all three scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Callback fired when the checked state changes */
   onChange?: (checked: boolean) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../../src/components/Checkbox.tsx"],"mappings":";;;;;;;UAmBU,aAAA,SAAsB,IAAA,CAAK,SAAA,YAAqB,sBAAA;;EAExD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR8B;EAU9B,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

@@ -1,12 +1,16 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
 import { BUTTON_SPRING_CONFIG } from "../motion.js";
+import { useComponentFontScale } 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";
 import { memo, useCallback, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { checkboxStyles } from "../../generated/styles";
+import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
 import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
 //#region src/components/Checkbox.tsx
 const VARIANT_ERROR_MAP = {
@@ -47,8 +51,9 @@ const VARIANT_ERROR_MAP = {
 * @see {@link Radio} for single-select options
 * @see {@link Switch} for binary toggles
 */
-const Checkbox = memo(function Checkbox({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+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);
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = useState(false);
@@ -87,15 +92,33 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 		disabled,
 		pressed
 	});
+	const boxBaseSize = checkboxStyles.checkbox.width;
+	const fontScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof boxBaseSize === "number" ? boxBaseSize : void 0);
+	const markScaleFactor = useComponentFontScale(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 checkboxBoxStyle = useMemo(() => {
+		const { width, height, borderRadius } = checkboxStyles.checkbox;
+		const scaledBox = fontScaleFactor !== 1 && typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor),
+			...typeof borderRadius === "number" && { borderRadius: Math.round(borderRadius * fontScaleFactor) }
+		} : void 0;
+		return [
+			checkboxStyles.checkbox,
+			scaledBox,
+			{
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			checkboxAnimatedStyle
+		];
+	}, [
 		checkboxStyles.checkbox,
-		{
-			alignItems: "center",
-			justifyContent: "center"
-		},
+		fontScaleFactor,
 		checkboxAnimatedStyle
-	], [checkboxStyles.checkbox, checkboxAnimatedStyle]);
+	]);
 	const labelContent = useMemo(() => {
 		if (!label) return null;
 		return /* @__PURE__ */ jsx(FormLabel, {
@@ -105,12 +128,16 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 			required,
 			showRequiredAsterisk: required,
 			hasError,
+			flexShrink: hasScaledLayout ? "1" : void 0,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: checkboxStyles.text
 		});
 	}, [
 		label,
 		required,
 		hasError,
+		hasScaledLayout,
+		resolvedMaxFontSizeMultiplier,
 		checkboxStyles.text
 	]);
 	const a11yState = useMemo(() => ({
@@ -126,7 +153,8 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 		disabled,
 		flexDirection: labelPosition === "start" ? "row" : "row-reverse",
 		alignItems: "center",
-		alignSelf: "flex-start",
+		alignSelf: hasScaledLayout ? "stretch" : "flex-start",
+		minHeight: hasScaledLayout ? 52 : void 0,
 		accessibilityRole: "checkbox",
 		accessibilityState: a11yState,
 		accessibilityLabel: typeof label === "string" ? label : void 0,
@@ -137,7 +165,12 @@ const Checkbox = memo(function Checkbox({ label, labelPosition = "start", varian
 			children: showIcon && /* @__PURE__ */ jsx(Icon, {
 				name: iconName,
 				size: "sm",
-				style: checkboxStyles.checkboxIcon
+				dangerouslySetSize: scaledMarkSize,
+				allowFontScaling: false,
+				style: [checkboxStyles.checkboxIcon, markScaleFactor !== 1 ? {
+					fontSize: scaledMarkSize,
+					lineHeight: getSafeIconCell(scaledMarkSize)
+				} : void 0]
 			})
 		}), labelContent]
 	});

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { FormLabel } from './FormLabel';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(\n    () => [\n      checkboxStyles.checkbox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ],\n    [checkboxStyles.checkbox, checkboxAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    return (\n      <FormLabel\n        color=\"inherit\"\n        variant=\"inherit\"\n        label={label}\n        required={required}\n        showRequiredAsterisk={required}\n        hasError={hasError}\n        style={checkboxStyles.text}\n      />\n    );\n  }, [label, required, hasError, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && <Icon name={iconName} size=\"sm\" style={checkboxStyles.checkboxIcon} />}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,oBAAmE;CACvE,SAAS;CACT,WAAW;CACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCD,MAAM,WAAW,KAAK,SAAS,SAAS,EAEtC,OACA,gBAAgB,SAChB,SAAS,cAAc,WACvB,OAAO,MACP,SAAS,aACT,UACA,cAEA,gBACA,UACA,UACA,UACA,KACA,GAAG,aACa;CAEhB,MAAM,MAAM,gBADQ,OACmB;CAGvC,MAAM,eAAe,gBAAgB,KAAA;CACrC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,eAAe,cAAe,kBAAkB,MACjD;CACD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAG7C,MAAM,UAAU,eAAe,cAAc;CAG7C,MAAM,aAAiC,cAAc;EACnD,IAAI,YAAY,iBACd,OAAO;EAET,OAAO,UAAU,YAAY;IAC5B,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,eAAe,kBAAkB,UAAU;CAC5D,MAAM,WAAW,eAAe;CAGhC,MAAM,gBAAgB,CAAC;CAGvB,MAAM,gBAAgB,sBAElB,gBACI,WAAW,UAAU,cAAc,OAAO,cAAc,MAAM,qBAAqB,GACnF,cAAc,MACpB,CAAC,SAAS,cAAc,CACzB;CAED,MAAM,wBAAwB,wBAAwB,EACpD,WAAW,CAAC,EAAE,OAAO,cAAc,OAAO,CAAC,EAC5C,EAAE;CAGH,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,MAAM,aAAa,YAAY,kBAAkB,OAAO,CAAC;EAEzD,IAAI,CAAC,cACH,mBAAmB,WAAW;EAGhC,WAAW,WAAW;IACrB;EAAC;EAAU;EAAS;EAAc;EAAS,CAAC;CAE/C,MAAM,gBAAgB,kBAAkB;EACtC,WAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;EACvC,WAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,eAAqC,WACvC,kBAAkB,eAClB;CAEJ,eAAe,YAAY;EACzB;EACA,SAAS;EACT,OAAO;EACP;EACA;EACD,CAAC;CAEF,MAAM,YAAY,cACV,CAAC,eAAe,MAAM,EAAE,SAAS,WAAW,KAAM,GAAG,CAAC,EAC5D,CAAC,eAAe,MAAM,SAAS,CAChC;CAED,MAAM,mBAAmB,cACjB;EACJ,eAAe;EACf;GAAE,YAAY;GAAmB,gBAAgB;GAAmB;EACpE;EACD,EACD,CAAC,eAAe,UAAU,sBAAsB,CACjD;CAGD,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,OACH,OAAO;EAGT,OACE,oBAAC,WAAD;GACE,OAAM;GACN,SAAQ;GACD;GACG;GACV,sBAAsB;GACZ;GACV,OAAO,eAAe;GACtB,CAAA;IAEH;EAAC;EAAO;EAAU;EAAU,eAAe;EAAK,CAAC;CAEpD,MAAM,YAAY,eACT;EACL;EACA,SACE,eAAe,YACX,OACA,eAAe,kBACZ,UACD;EACT,GACD,CAAC,UAAU,WAAW,CACvB;CAGD,OACE,qBAAC,WAAD;EACO;EACL,UAAU;EACV,SAAS;EACT,WAAW;EACX,YAAY;EACF;EACV,eAAe,kBAAkB,UAAU,QAAQ;EACnD,YAAW;EACX,WAAU;EACV,mBAAkB;EAClB,oBAAoB;EACpB,oBAAoB,OAAO,UAAU,WAAW,QAAQ,KAAA;EACxD,GAAI;EACJ,OAAO;YAdT,CAgBE,oBAAC,SAAS,MAAV;GAAe,OAAO;aACnB,YAAY,oBAAC,MAAD;IAAM,MAAM;IAAU,MAAK;IAAK,OAAO,eAAe;IAAgB,CAAA;GACrE,CAAA,EAEf,aACS;;EAEd;AAEF,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { useComponentFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getSafeIconCell } from './Button/buttonTheme';\nimport { FormLabel } from './FormLabel';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /**\n   * Caps how far the box, checkmark, and label grow with the OS text-size\n   * setting; all three scale by the same factor. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  maxFontSizeMultiplier,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  // One resolved cap governs box, checkmark, and label. Android may resolve a\n  // slightly different nonlinear factor for each base size.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  const checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const boxBaseSize = checkboxStyles.checkbox.width;\n  const fontScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof boxBaseSize === 'number' ? boxBaseSize : undefined,\n  );\n  // The check/minus glyph is drawn at the 'sm' icon size; use its own native\n  // Android curve before disabling native scaling on the manually-sized glyph.\n  const markScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, ICON_SIZE_MAP.sm);\n  const scaledMarkSize = Math.round(ICON_SIZE_MAP.sm * markScaleFactor);\n  const hasScaledLayout = fontScaleFactor !== 1;\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(() => {\n    // The box grows by the capped factor to keep containing the checkmark.\n    // borderWidth stays fixed (stroke weight doesn't scale in the OS's own\n    // controls either).\n    const { width, height, borderRadius } = checkboxStyles.checkbox;\n    const scaledBox =\n      fontScaleFactor !== 1 && typeof width === 'number' && typeof height === 'number'\n        ? {\n            width: Math.round(width * fontScaleFactor),\n            height: Math.round(height * fontScaleFactor),\n            ...(typeof borderRadius === 'number' && {\n              borderRadius: Math.round(borderRadius * fontScaleFactor),\n            }),\n          }\n        : undefined;\n\n    return [\n      checkboxStyles.checkbox,\n      scaledBox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ];\n  }, [checkboxStyles.checkbox, fontScaleFactor, checkboxAnimatedStyle]);\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    return (\n      <FormLabel\n        color=\"inherit\"\n        variant=\"inherit\"\n        label={label}\n        required={required}\n        showRequiredAsterisk={required}\n        hasError={hasError}\n        flexShrink={hasScaledLayout ? '1' : undefined}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={checkboxStyles.text}\n      />\n    );\n  }, [\n    label,\n    required,\n    hasError,\n    hasScaledLayout,\n    resolvedMaxFontSizeMultiplier,\n    checkboxStyles.text,\n  ]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf={hasScaledLayout ? 'stretch' : 'flex-start'}\n      minHeight={hasScaledLayout ? 52 : undefined}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && (\n          <Icon\n            name={iconName}\n            size=\"sm\"\n            // Size the mark from the same factor that scaled the box, with\n            // native scaling off: letting the box scale in JS while the glyph\n            // scaled natively left the two to round independently (and to\n            // disagree outright under Android's non-linear scaling), which\n            // drifted the mark off-centre as sizes grew.\n            dangerouslySetSize={scaledMarkSize}\n            allowFontScaling={false}\n            style={[\n              checkboxStyles.checkboxIcon,\n              markScaleFactor !== 1\n                ? {\n                    fontSize: scaledMarkSize,\n                    lineHeight: getSafeIconCell(scaledMarkSize),\n                  }\n                : undefined,\n            ]}\n          />\n        )}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip/ChipBase.cjs

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
+const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
+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_Chip_chipTheme = require("./chipTheme.cjs");
@@ -13,30 +15,20 @@ const DEFAULT_CHIP_SIZE = "md";
 const DEFAULT_CHIP_VARIANT = "primary";
 const DEFAULT_MAX_WIDTH = 200;
 const DEFAULT_TOGGLE_STATE = "off";
-const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STATE, variant = DEFAULT_CHIP_VARIANT, size = "md", minWidth, maxWidth = 200, startIcon, endIcon, endContent, disabled = false, pressable = false, onPress, accessibilityRole, accessibilityState, children, style, ref, ...viewProps }) {
+const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STATE, variant = DEFAULT_CHIP_VARIANT, size = "md", minWidth, maxWidth = 200, startIcon, endIcon, endContent, disabled = false, pressable = false, maxFontSizeMultiplier, onPress, accessibilityRole, accessibilityState, children, style, ref, ...viewProps }) {
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const interactionState = pressed ? "pressed" : "rest";
-	const rootStyle = (0, react.useMemo)(() => [
-		chipStaticStyles.root,
-		require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState),
-		minWidth === void 0 ? void 0 : { minWidth },
-		maxWidth === void 0 ? void 0 : { maxWidth },
-		disabled ? chipStaticStyles.disabled : void 0,
-		style
-	], [
-		disabled,
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
+	const rootLayerStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
 		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)], [
+	const textLayerStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState), [
 		interactionState,
 		kind,
 		size,
@@ -44,6 +36,28 @@ const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT
 		toggleState,
 		variant
 	]);
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, (typeof textLayerStyle.lineHeight === "number" ? textLayerStyle.lineHeight : void 0) ?? (typeof textLayerStyle.fontSize === "number" ? textLayerStyle.fontSize : void 0));
+	const rootStyle = (0, react.useMemo)(() => {
+		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,
+			rootLayerStyle,
+			scaledLayer,
+			minWidth === void 0 ? void 0 : { minWidth },
+			resolvedMaxWidth === void 0 ? void 0 : { maxWidth: resolvedMaxWidth },
+			disabled ? chipStaticStyles.disabled : void 0,
+			style
+		];
+	}, [
+		disabled,
+		fontScaleFactor,
+		maxWidth,
+		minWidth,
+		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,
@@ -56,18 +70,21 @@ const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT
 		startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: startIcon,
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: iconStyle
 		}) : null,
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: textStyle,
 			children
 		}),
 		endContent ?? (endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 			icon: endIcon,
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: iconStyle
 		}) : null)
 	] });

package/dist/components/Chip/ChipBase.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBase.d.cts","names":[],"sources":["../../../src/components/Chip/ChipBase.tsx"],"mappings":";;;;;;cAWM,iBAAA,EAAmB,QAAA;AAAA,cACnB,oBAAA,EAAsB,WAAA;AAAA,cACtB,iBAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"ChipBase.d.cts","names":[],"sources":["../../../src/components/Chip/ChipBase.tsx"],"mappings":";;;;;;cAaM,iBAAA,EAAmB,QAAA;AAAA,cACnB,oBAAA,EAAsB,WAAA;AAAA,cACtB,iBAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Chip/ChipBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBase.d.ts","names":[],"sources":["../../../src/components/Chip/ChipBase.tsx"],"mappings":";;;;;;cAWM,iBAAA,EAAmB,QAAA;AAAA,cACnB,oBAAA,EAAsB,WAAA;AAAA,cACtB,iBAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}
+{"version":3,"file":"ChipBase.d.ts","names":[],"sources":["../../../src/components/Chip/ChipBase.tsx"],"mappings":";;;;;;cAaM,iBAAA,EAAmB,QAAA;AAAA,cACnB,oBAAA,EAAsB,WAAA;AAAA,cACtB,iBAAA;AAAA,cAGA,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Chip/ChipBase.js

@@ -1,4 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
 import { IconSlot } from "../IconSlot.js";
 import { Text as Text$1 } from "../Text.js";
 import { getMergedChipLayerStyle } from "./chipTheme.js";
@@ -11,30 +13,20 @@ const DEFAULT_CHIP_SIZE = "md";
 const DEFAULT_CHIP_VARIANT = "primary";
 const DEFAULT_MAX_WIDTH = 200;
 const DEFAULT_TOGGLE_STATE = "off";
-const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STATE, variant = DEFAULT_CHIP_VARIANT, size = "md", minWidth, maxWidth = 200, startIcon, endIcon, endContent, disabled = false, pressable = false, onPress, accessibilityRole, accessibilityState, children, style, ref, ...viewProps }) {
+const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STATE, variant = DEFAULT_CHIP_VARIANT, size = "md", minWidth, maxWidth = 200, startIcon, endIcon, endContent, disabled = false, pressable = false, maxFontSizeMultiplier, onPress, accessibilityRole, accessibilityState, children, style, ref, ...viewProps }) {
 	const { theme } = useUnistyles();
 	const [pressed, setPressed] = useState(false);
 	const interactionState = pressed ? "pressed" : "rest";
-	const rootStyle = useMemo(() => [
-		chipStaticStyles.root,
-		getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState),
-		minWidth === void 0 ? void 0 : { minWidth },
-		maxWidth === void 0 ? void 0 : { maxWidth },
-		disabled ? chipStaticStyles.disabled : void 0,
-		style
-	], [
-		disabled,
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
+	const rootLayerStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
 		interactionState,
 		kind,
-		maxWidth,
-		minWidth,
 		size,
-		style,
 		theme,
 		toggleState,
 		variant
 	]);
-	const textStyle = useMemo(() => [chipStaticStyles.text, getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState)], [
+	const textLayerStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "rootText", interactionState), [
 		interactionState,
 		kind,
 		size,
@@ -42,6 +34,28 @@ const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STA
 		toggleState,
 		variant
 	]);
+	const fontScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, (typeof textLayerStyle.lineHeight === "number" ? textLayerStyle.lineHeight : void 0) ?? (typeof textLayerStyle.fontSize === "number" ? textLayerStyle.fontSize : void 0));
+	const rootStyle = useMemo(() => {
+		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,
+			rootLayerStyle,
+			scaledLayer,
+			minWidth === void 0 ? void 0 : { minWidth },
+			resolvedMaxWidth === void 0 ? void 0 : { maxWidth: resolvedMaxWidth },
+			disabled ? chipStaticStyles.disabled : void 0,
+			style
+		];
+	}, [
+		disabled,
+		fontScaleFactor,
+		maxWidth,
+		minWidth,
+		rootLayerStyle,
+		style
+	]);
+	const textStyle = useMemo(() => [chipStaticStyles.text, textLayerStyle], [textLayerStyle]);
 	const iconStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "icon", interactionState), [
 		interactionState,
 		kind,
@@ -54,18 +68,21 @@ const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STA
 		startIcon ? /* @__PURE__ */ jsx(IconSlot, {
 			icon: startIcon,
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: iconStyle
 		}) : null,
 		/* @__PURE__ */ jsx(Text$1, {
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: textStyle,
 			children
 		}),
 		endContent ?? (endIcon ? /* @__PURE__ */ jsx(IconSlot, {
 			icon: endIcon,
 			variant: "fill",
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: iconStyle
 		}) : null)
 	] });

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 { 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  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  const rootStyle = useMemo<StyleProp<ViewStyle>>(\n    () => [\n      chipStaticStyles.root,\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'root',\n        interactionState,\n      ) as ViewStyle,\n      minWidth === undefined ? undefined : { minWidth },\n      maxWidth === undefined ? undefined : { maxWidth },\n      disabled ? chipStaticStyles.disabled : undefined,\n      style,\n    ],\n    [\n      disabled,\n      interactionState,\n      kind,\n      maxWidth,\n      minWidth,\n      size,\n      style,\n      theme,\n      toggleState,\n      variant,\n    ],\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 ? <IconSlot icon={startIcon} variant=\"fill\" style={iconStyle} /> : null}\n      <Text color=\"inherit\" variant=\"inherit\" numberOfLines={1} style={textStyle}>\n        {children}\n      </Text>\n      {endContent ??\n        (endIcon ? <IconSlot icon={endIcon} variant=\"fill\" style={iconStyle} /> : 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":";;;;;;;;;AAWA,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,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;CAErE,MAAM,YAAY,cACV;EACJ,iBAAiB;EACjB,wBACE,OACA,MACA,SACA,MACA,aACA,QACA,iBACD;EACD,aAAa,KAAA,IAAY,KAAA,IAAY,EAAE,UAAU;EACjD,aAAa,KAAA,IAAY,KAAA,IAAY,EAAE,UAAU;EACjD,WAAW,iBAAiB,WAAW,KAAA;EACvC;EACD,EACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,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,YAAY,oBAAC,UAAD;GAAU,MAAM;GAAW,SAAQ;GAAO,OAAO;GAAa,CAAA,GAAG;EAC9E,oBAACA,QAAD;GAAM,OAAM;GAAU,SAAQ;GAAU,eAAe;GAAG,OAAO;GAC9D;GACI,CAAA;EACN,eACE,UAAU,oBAAC,UAAD;GAAU,MAAM;GAAS,SAAQ;GAAO,OAAO;GAAa,CAAA,GAAG;EAC3E,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 { useComponentFontScale } 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 = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\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 = useComponentFontScale(\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/Chip/ChipDismissible.cjs

@@ -9,7 +9,7 @@ let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_unistyles = require("react-native-unistyles");
 //#region src/components/Chip/ChipDismissible.tsx
-const ChipDismissible = (0, react.memo)(function ChipDismissible({ onDismiss, dismissButtonAriaLabel = "Dismiss", dismissIcon, disabled = false, variant = require_components_Chip_ChipBase.DEFAULT_CHIP_VARIANT, size = "md", ...props }) {
+const ChipDismissible = (0, react.memo)(function ChipDismissible({ onDismiss, dismissButtonAriaLabel = "Dismiss", dismissIcon, disabled = false, variant = require_components_Chip_ChipBase.DEFAULT_CHIP_VARIANT, size = "md", maxFontSizeMultiplier, ...props }) {
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	const handleDismiss = (0, react.useCallback)(() => {
 		if (!disabled) onDismiss?.();
@@ -24,6 +24,7 @@ const ChipDismissible = (0, react.memo)(function ChipDismissible({ onDismiss, di
 		variant,
 		size,
 		disabled,
+		maxFontSizeMultiplier,
 		endContent: onDismiss ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
 			accessibilityLabel: dismissButtonAriaLabel,
 			accessibilityRole: "button",
@@ -34,6 +35,7 @@ const ChipDismissible = (0, react.memo)(function ChipDismissible({ onDismiss, di
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 				icon: dismissIcon ?? "Cross",
 				variant: "fill",
+				maxFontSizeMultiplier,
 				style: iconStyle
 			})
 		}) : null,

package/dist/components/Chip/ChipDismissible.js

@@ -7,7 +7,7 @@ import { Pressable, StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { useUnistyles } from "react-native-unistyles";
 //#region src/components/Chip/ChipDismissible.tsx
-const ChipDismissible = memo(function ChipDismissible({ onDismiss, dismissButtonAriaLabel = "Dismiss", dismissIcon, disabled = false, variant = DEFAULT_CHIP_VARIANT, size = "md", ...props }) {
+const ChipDismissible = memo(function ChipDismissible({ onDismiss, dismissButtonAriaLabel = "Dismiss", dismissIcon, disabled = false, variant = DEFAULT_CHIP_VARIANT, size = "md", maxFontSizeMultiplier, ...props }) {
 	const { theme } = useUnistyles();
 	const handleDismiss = useCallback(() => {
 		if (!disabled) onDismiss?.();
@@ -22,6 +22,7 @@ const ChipDismissible = memo(function ChipDismissible({ onDismiss, dismissButton
 		variant,
 		size,
 		disabled,
+		maxFontSizeMultiplier,
 		endContent: onDismiss ? /* @__PURE__ */ jsx(Pressable, {
 			accessibilityLabel: dismissButtonAriaLabel,
 			accessibilityRole: "button",
@@ -32,6 +33,7 @@ const ChipDismissible = memo(function ChipDismissible({ onDismiss, dismissButton
 			children: /* @__PURE__ */ jsx(IconSlot, {
 				icon: dismissIcon ?? "Cross",
 				variant: "fill",
+				maxFontSizeMultiplier,
 				style: iconStyle
 			})
 		}) : null,

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

@@ -1 +1 @@
-{"version":3,"file":"ChipDismissible.js","names":[],"sources":["../../../src/components/Chip/ChipDismissible.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { StyleProp, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- dismiss icon must match chip subcomponent tokens\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { IconSlot } from '../IconSlot';\nimport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT } from './ChipBase';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipDismissibleProps } from './types';\n\nconst ChipDismissible = memo(function ChipDismissible({\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  dismissIcon,\n  disabled = false,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  ...props\n}: ChipDismissibleProps) {\n  const { theme } = useUnistyles();\n  const handleDismiss = useCallback(() => {\n    if (!disabled) {\n      onDismiss?.();\n    }\n  }, [disabled, onDismiss]);\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        'dismissible',\n        variant,\n        size,\n        'off',\n        'icon',\n        'rest',\n      ) as TextStyle,\n    [size, theme, variant],\n  );\n\n  return (\n    <ChipBase\n      kind=\"dismissible\"\n      variant={variant}\n      size={size}\n      disabled={disabled}\n      endContent={\n        onDismiss ? (\n          <Pressable\n            accessibilityLabel={dismissButtonAriaLabel}\n            accessibilityRole=\"button\"\n            disabled={disabled}\n            hitSlop={8}\n            onPress={handleDismiss}\n            style={chipDismissibleStyles.button}\n          >\n            <IconSlot icon={dismissIcon ?? 'Cross'} variant=\"fill\" style={iconStyle} />\n          </Pressable>\n        ) : null\n      }\n      {...props}\n    />\n  );\n});\n\nChipDismissible.displayName = 'ChipDismissible';\n\nconst chipDismissibleStyles = StyleSheet.create({\n  button: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport { ChipDismissible };\n"],"mappings":";;;;;;;;;AAWA,MAAM,kBAAkB,KAAK,SAAS,gBAAgB,EACpD,WACA,yBAAyB,WACzB,aACA,WAAW,OACX,UAAU,sBACV,OAAA,MACA,GAAG,SACoB;CACvB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,UACH,aAAa;IAEd,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,YAAY,cAEd,wBACE,OACA,eACA,SACA,MACA,OACA,QACA,OACD,EACH;EAAC;EAAM;EAAO;EAAQ,CACvB;CAED,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACH;EACI;EACV,YACE,YACE,oBAAC,WAAD;GACE,oBAAoB;GACpB,mBAAkB;GACR;GACV,SAAS;GACT,SAAS;GACT,OAAO,sBAAsB;aAE7B,oBAAC,UAAD;IAAU,MAAM,eAAe;IAAS,SAAQ;IAAO,OAAO;IAAa,CAAA;GACjE,CAAA,GACV;EAEN,GAAI;EACJ,CAAA;EAEJ;AAEF,gBAAgB,cAAc;AAE9B,MAAM,wBAAwB,WAAW,OAAO,EAC9C,QAAQ;CACN,YAAY;CACZ,gBAAgB;CACjB,EACF,CAAC"}
+{"version":3,"file":"ChipDismissible.js","names":[],"sources":["../../../src/components/Chip/ChipDismissible.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { StyleProp, TextStyle } from 'react-native';\nimport { Pressable, StyleSheet } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- dismiss icon must match chip subcomponent tokens\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { IconSlot } from '../IconSlot';\nimport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT } from './ChipBase';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipDismissibleProps } from './types';\n\nconst ChipDismissible = memo(function ChipDismissible({\n  onDismiss,\n  dismissButtonAriaLabel = 'Dismiss',\n  dismissIcon,\n  disabled = false,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  maxFontSizeMultiplier,\n  ...props\n}: ChipDismissibleProps) {\n  const { theme } = useUnistyles();\n  const handleDismiss = useCallback(() => {\n    if (!disabled) {\n      onDismiss?.();\n    }\n  }, [disabled, onDismiss]);\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        'dismissible',\n        variant,\n        size,\n        'off',\n        'icon',\n        'rest',\n      ) as TextStyle,\n    [size, theme, variant],\n  );\n\n  return (\n    <ChipBase\n      kind=\"dismissible\"\n      variant={variant}\n      size={size}\n      disabled={disabled}\n      maxFontSizeMultiplier={maxFontSizeMultiplier}\n      endContent={\n        onDismiss ? (\n          <Pressable\n            accessibilityLabel={dismissButtonAriaLabel}\n            accessibilityRole=\"button\"\n            disabled={disabled}\n            hitSlop={8}\n            onPress={handleDismiss}\n            style={chipDismissibleStyles.button}\n          >\n            <IconSlot\n              icon={dismissIcon ?? 'Cross'}\n              variant=\"fill\"\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n              style={iconStyle}\n            />\n          </Pressable>\n        ) : null\n      }\n      {...props}\n    />\n  );\n});\n\nChipDismissible.displayName = 'ChipDismissible';\n\nconst chipDismissibleStyles = StyleSheet.create({\n  button: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n\nexport { ChipDismissible };\n"],"mappings":";;;;;;;;;AAWA,MAAM,kBAAkB,KAAK,SAAS,gBAAgB,EACpD,WACA,yBAAyB,WACzB,aACA,WAAW,OACX,UAAU,sBACV,OAAA,MACA,uBACA,GAAG,SACoB;CACvB,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,CAAC,UACH,aAAa;IAEd,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,YAAY,cAEd,wBACE,OACA,eACA,SACA,MACA,OACA,QACA,OACD,EACH;EAAC;EAAM;EAAO;EAAQ,CACvB;CAED,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACH;EACI;EACa;EACvB,YACE,YACE,oBAAC,WAAD;GACE,oBAAoB;GACpB,mBAAkB;GACR;GACV,SAAS;GACT,SAAS;GACT,OAAO,sBAAsB;aAE7B,oBAAC,UAAD;IACE,MAAM,eAAe;IACrB,SAAQ;IACe;IACvB,OAAO;IACP,CAAA;GACQ,CAAA,GACV;EAEN,GAAI;EACJ,CAAA;EAEJ;AAEF,gBAAgB,cAAc;AAE9B,MAAM,wBAAwB,WAAW,OAAO,EAC9C,QAAQ;CACN,YAAY;CACZ,gBAAgB;CACjB,EACF,CAAC"}