jfs-components 0.1.8 → 0.1.12

package/lib/commonjs/components/DonutChart/DonutChart.js

@@ -133,7 +133,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -231,7 +232,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [{
@@ -242,7 +243,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -69,7 +69,8 @@ function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -138,7 +139,7 @@ function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "ic_confirm",

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -161,7 +161,8 @@ const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
+  onBlur,
+  disableTruncation
 }, ref) {
   // ---------------- Modes ----------------
   const {
@@ -548,7 +549,7 @@ const DropdownInput = /*#__PURE__*/(0, _react.forwardRef)(function DropdownInput
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -64,6 +64,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
@@ -136,7 +137,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/commonjs/components/FormField/FormField.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _Form = require("../Form/Form");
@@ -208,6 +209,21 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = (0, _react.useRef)(null);
+  const rootRef = (0, _react.useRef)(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = (0, _react.useMemo)(() => (0, _reactUtils.mergeRefs)(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  (0, _webPlatformUtils.useWebOutsidePress)(rootRef, (0, _react.useCallback)(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -290,7 +306,30 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(_reactNative.Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -327,6 +366,7 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -347,7 +387,7 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-        ref: ref,
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,

package/lib/commonjs/components/Gauge/Gauge.js

@@ -41,7 +41,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = _reactNative.StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,

package/lib/commonjs/components/HoldingsCard/HoldingsCard.js

@@ -39,7 +39,8 @@ function HoldingsCard({
   onPress,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
   const containerFill = (0, _figmaVariablesResolver.getVariableByName)('holdingsCard/container/fill', modes) || '#fef4e5';
@@ -191,7 +192,7 @@ function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/commonjs/components/InstitutionBadge/InstitutionBadge.js

@@ -88,6 +88,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -124,7 +125,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     })]
   });

package/lib/commonjs/components/ListGroup/ListGroup.js

@@ -48,6 +48,7 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
@@ -100,7 +101,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/commonjs/components/ListItem/ListItem.js

@@ -191,6 +191,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = (0, _react.useMemo)(() => resolveListItemTokens(modes), [modes]);
@@ -245,7 +246,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -278,7 +279,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/MediaCard/MediaCard.js

@@ -14,7 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _Image = _interopRequireDefault(require("../Image/Image"));
-var _GlassFill = _interopRequireDefault(require("./GlassFill"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -198,7 +198,9 @@ function Footer({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',

package/lib/commonjs/components/MetricLegendItem/MetricLegendItem.js

@@ -27,7 +27,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -92,7 +93,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/commonjs/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -81,7 +81,8 @@ function CalendarGlyph({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,7 +127,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -188,7 +189,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -245,6 +247,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),

package/lib/commonjs/components/PoweredByLabel/PoweredByLabel.js

@@ -62,7 +62,8 @@ function PoweredByLabel({
   style,
   textStyle,
   imageStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -127,7 +128,7 @@ function PoweredByLabel({
       style: [labelTextStyle, textStyle],
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     }), renderImage()]
   });

package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
@@ -13,10 +14,16 @@ var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
 var _Badge = _interopRequireDefault(require("../Badge/Badge"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Image = _interopRequireDefault(require("../Image/Image"));
-var _GlassFill = _interopRequireDefault(require("./GlassFill"));
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function normalizeImageSource(src) {
+  if (src == null) return undefined;
+  return typeof src === 'string' ? {
+    uri: src
+  } : src;
+}
 /**
  * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
  * with a top header (avatar + badge) and a bottom **glass footer** that
@@ -57,11 +64,15 @@ function ProductMerchandisingCard({
   height = 223,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
-  // Unique gradient id so multiple cards on one (web) document never collide.
+  // Unique gradient ids so multiple cards on one (web) document never collide.
   const rawId = (0, _react.useId)();
-  const scrimId = `pmc-footer-scrim-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
+  const scrimId = `pmc-footer-scrim-${safeId}`;
+  const blurMaskId = `pmc-footer-blurmask-${safeId}`;
+  const normalizedImageSource = (0, _react.useMemo)(() => normalizeImageSource(imageSource), [imageSource]);
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
   const containerStyle = {
     height,
@@ -98,21 +109,25 @@ function ProductMerchandisingCard({
     monogram: avatarMonogram,
     modes: avatarModes
   }) : null;
-  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+
+  // The footer "special badge" is now the shared <Badge type="glass">. The
+  // hardcoded literals that defined its look (warm frosted overlay, gentle
+  // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+  // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+  // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+  // instantiation renders byte-for-byte the same as before.
+  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+    type: "glass",
+    label: specialBadgeLabel,
+    leading: specialBadgeIcon,
+    glassOverlayColor: SPECIAL_BADGE_BG,
+    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    modes: modes,
     style: styles.specialBadge,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
-      tint: "light",
-      intensity: SPECIAL_BADGE_INTENSITY,
-      overlayColor: SPECIAL_BADGE_BG,
-      style: styles.specialBadgeFill
-    }), specialBadgeIcon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.specialBadgeIcon,
-      children: specialBadgeIcon
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: tokens.specialBadgeText,
-      numberOfLines: 1,
-      children: specialBadgeLabel
-    })]
+    labelStyle: tokens.specialBadgeText,
+    ...(disableTruncation != null ? {
+      disableTruncation
+    } : null)
   }) : null);
 
   // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
@@ -147,7 +162,62 @@ function ProductMerchandisingCard({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: tokens.footer,
       pointerEvents: "box-none",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      children: [normalizedImageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: _reactNative.StyleSheet.absoluteFill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+            width: "100%",
+            height: "100%",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+                id: blurMaskId,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0",
+                  stopColor: "#000000",
+                  stopOpacity: 0
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0.35",
+                  stopColor: "#000000",
+                  stopOpacity: 0.5
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "0.7",
+                  stopColor: "#000000",
+                  stopOpacity: 0.92
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                  offset: "1",
+                  stopColor: "#000000",
+                  stopOpacity: 1
+                })]
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: `url(#${blurMaskId})`
+            })]
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
+            source: normalizedImageSource,
+            blurRadius: tokens.imageBlurRadius,
+            resizeMode: "cover",
+            style: {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: '100%',
+              height
+            }
+          })
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
         tint: "dark",
         intensity: tokens.blurIntensity,
         progressive: true
@@ -188,11 +258,11 @@ function ProductMerchandisingCard({
           style: tokens.textWrap,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: tokens.title,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: title
           }), subtitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: tokens.subtitle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: subtitle
           }) : null]
         }), footerCta]
@@ -263,9 +333,20 @@ function resolveTokens(modes) {
   const sbSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
   const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
   const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+
+  // `Image.blurRadius` is interpreted differently per platform — iOS applies a
+  // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
+  // numeric radius — so we tune each platform to land on the same perceived
+  // "minimal" frosted strength as the Figma design.
+  const imageBlurRadius = _reactNative.Platform.select({
+    ios: Math.max(6, Math.round(blurRadius * 0.5)),
+    android: Math.max(12, Math.round(blurRadius * 0.95)),
+    default: Math.max(8, Math.round(blurRadius * 0.6))
+  });
   return {
     radius,
     blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+    imageBlurRadius,
     header: {
       flexDirection: 'row',
       alignItems: 'flex-start',
@@ -329,23 +410,16 @@ const styles = _reactNative.StyleSheet.create({
     // the intended fade strength.
     opacity: 0.9
   },
+  // Overrides layered on top of <Badge type="glass">. Badge already supplies
+  // the row layout + 4px gap (when a leading icon is present), `overflow:
+  // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
+  // pin the special badge's literal Figma box (6/2 padding, 4px radius)
+  // regardless of the badge size tokens resolved by the active modes.
   specialBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
     paddingHorizontal: 6,
     paddingVertical: 2,
-    borderRadius: 4,
-    overflow: 'hidden',
-    alignSelf: 'flex-start'
-  },
-  specialBadgeFill: {
     borderRadius: 4
   },
-  specialBadgeIcon: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   pressed: {
     opacity: 0.92
   }

package/lib/commonjs/components/ProductOverview/ProductOverview.js

@@ -29,7 +29,8 @@ const ProductOverview = ({
   stats = DEFAULT_STATS,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  children
+  children,
+  disableTruncation
 }) => {
   const padding = (0, _figmaVariablesResolver.getVariableByName)('productOverview/padding', modes) ?? 24;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('productOverview/gap', modes) ?? 12;
@@ -133,11 +134,11 @@ const ProductOverview = ({
         },
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: statValueStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: stat.value
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: statLabelStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: stat.label
         })]
       }, `${stat.label}-${index}`))

package/lib/commonjs/components/ProgressBadge/ProgressBadge.js

@@ -34,6 +34,7 @@ function ProgressBadge({
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   // Resolve layout tokens
@@ -119,8 +120,7 @@ function ProgressBadge({
         importantForAccessibility: "no"
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [textStyle, textStyleOverride],
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: taskName

package/lib/commonjs/components/ProjectionMarker/ProjectionMarker.js

@@ -58,7 +58,8 @@ function ProjectionMarker({
   badgeStyle,
   durationStyle,
   rateStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/color', modes) ?? '#000000';
   const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
@@ -90,7 +91,7 @@ function ProjectionMarker({
     if (isTextValue(value)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [titleTextStyle, overrideStyle],
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: value
       });
     }

package/lib/commonjs/components/Section/Section.js

@@ -380,6 +380,7 @@ function Section({
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   // Focus and hover are still mirrored in React because they are visible,
@@ -415,7 +416,7 @@ function Section({
       style: headerWrapStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: tokens.titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: title
@@ -425,7 +426,7 @@ function Section({
       })]
     }), showSupportText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: tokens.supportTextStyle,
-      numberOfLines: 2,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 2),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: supportText