jfs-components 0.1.8 → 0.1.17

package/lib/module/components/ActionFooter/ActionFooter.js

@@ -4,10 +4,9 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import { Animated, Keyboard, View, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import IconButton from '../IconButton/IconButton';
 import { jsx as _jsx } from "react/jsx-runtime";
-const IS_WEB = Platform.OS === 'web';
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -36,27 +35,11 @@ const STRETCH_STYLE = {
   minWidth: 0
 };
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = Platform.select({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: {
-      width: 0,
-      height: -12
-    },
-    shadowOpacity: 0.16,
-    shadowRadius: 24
-  },
-  android: {
-    elevation: 16
-  },
-  default: {}
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = boxShadow('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
+  elevation: 16
 });
-const WEB_SHADOW = IS_WEB ? {
-  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-} : null;
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -165,7 +148,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW
+      ...SHADOW
     };
     const slot = {
       flexDirection: 'row',
@@ -202,7 +185,7 @@ function ActionFooter({
     });
   }, [children, modes]);
   return /*#__PURE__*/_jsx(Animated.View, {
-    style: [containerStyle, WEB_SHADOW, style,
+    style: [containerStyle, style,
     // Counter-translate by the keyboard height on Android so `adjustResize`
     // can't lift the footer above the keyboard (no-op on iOS/web where the
     // value stays at 0).

package/lib/module/components/ActionTile/ActionTile.js

@@ -29,18 +29,18 @@ export default function ActionTile({
   };
 
   // Resolve tokens
-  const backgroundColor = getVariableByName('actionTile/background', modes) || '#ffffff';
-  const gap = Number(getVariableByName('actionTile/gap', modes)) || 8;
-  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes)) || 12;
-  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes)) || 16;
-  const radius = Number(getVariableByName('actionTile/radius', modes)) || 16;
+  const backgroundColor = getVariableByName('actionTile/background', modes);
+  const gap = Number(getVariableByName('actionTile/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('actionTile/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('actionTile/padding/vertical', modes));
+  const radius = Number(getVariableByName('actionTile/radius', modes));
 
   // Text tokens
-  const textColor = getVariableByName('actionTile/foreground', modes) || '#0d0d0f';
-  const fontSize = Number(getVariableByName('actionTile/fontSize', modes)) || 14;
-  const fontFamily = getVariableByName('actionTile/fontFamily', modes) || 'JioType Var';
-  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes) || '500';
-  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes)) || 17;
+  const textColor = getVariableByName('actionTile/foreground', modes);
+  const fontSize = Number(getVariableByName('actionTile/fontSize', modes));
+  const fontFamily = getVariableByName('actionTile/fontFamily', modes);
+  const fontWeightStr = getVariableByName('actionTile/fontWeight', modes);
+  const lineHeight = Number(getVariableByName('actionTile/lineHeight', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,

package/lib/module/components/AllocationComparisonChart/AllocationComparisonChart.js

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native';
 import Svg, { Line } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -61,7 +61,8 @@ function SegmentBar({
   baselineHeightPx,
   baselineLabel,
   showMarker,
-  theme
+  theme,
+  disableTruncation
 }) {
   const {
     barWidth,
@@ -88,7 +89,7 @@ function SegmentBar({
     },
     accessibilityLabel: segment.accessibilityLabel,
     children: [showValueLabel ? /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: labelStyle,
       children: segment.valueLabel
     }) : null, /*#__PURE__*/_jsx(View, {
@@ -134,7 +135,7 @@ function SegmentBar({
               strokeDasharray: "2 2"
             })
           }), isShown(baselineLabel) ? /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [labelStyle, {
               marginLeft: 6
             }],
@@ -143,7 +144,7 @@ function SegmentBar({
         }) : null]
       }) : null
     }), /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: labelStyle,
       children: segment.label
     })]
@@ -180,7 +181,8 @@ function AllocationComparisonChart({
   style,
   chartStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -284,7 +286,8 @@ function AllocationComparisonChart({
           baselineHeightPx: baselineHeightPx,
           baselineLabel: baselineLabel,
           showMarker: showMarker,
-          theme: theme
+          theme: theme,
+          disableTruncation: disableTruncation
         }, segment.key ?? `segment-${index}`);
       })
     })]

package/lib/module/components/AmountInput/AmountInput.js

@@ -28,9 +28,9 @@ const AmountInput = /*#__PURE__*/forwardRef(function AmountInput({
   };
 
   // Resolve tokens
-  const gap = Number(getVariableByName('amountInput/gap', modes)) || 16;
-  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes)) || 0;
+  const gap = Number(getVariableByName('amountInput/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('amountInput/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('amountInput/padding/vertical', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/AreaLineChart/AreaLineChart.js

@@ -5,7 +5,7 @@ import { PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react
 import Svg, { Circle, Line, Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 import { buildAreaPath, buildLineSegments, createLinearScale, extent, nearestIndex, niceTicks, resolvePoints } from './chartMath';
 
@@ -116,7 +116,8 @@ function AreaLineChart({
   modes: propModes = EMPTY_MODES,
   style,
   children,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -236,8 +237,9 @@ function AreaLineChart({
     formatX,
     formatY,
     showDots,
-    modes
-  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes]);
+    modes,
+    disableTruncation
+  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes, disableTruncation]);
   const isMultiSeries = resolvedSeries.length > 1;
   const resolvedFormatValue = formatValue ?? (v => formatY(v));
   return /*#__PURE__*/_jsx(ChartContext.Provider, {
@@ -378,7 +380,8 @@ function ChartYAxis({
     yScale,
     yTicks,
     formatY,
-    modes
+    modes,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatY;
@@ -406,7 +409,7 @@ function ChartYAxis({
           },
           children: showLabels ? /*#__PURE__*/_jsx(Text, {
             style: typo.style,
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: format(t)
           }) : null
         }, `yl-${t}`);
@@ -457,7 +460,8 @@ function ChartXAxis({
     formatX,
     modes,
     activeIndex,
-    setActiveIndex
+    setActiveIndex,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatX;
@@ -503,7 +507,7 @@ function ChartXAxis({
             color: activeColor,
             fontWeight: '700'
           } : null],
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: format(label, i)
         });
         return /*#__PURE__*/_jsx(View, {
@@ -716,7 +720,7 @@ function ChartTooltip({
   const bg = getVariableByName('tooltip/background', modes) ?? '#0f0d0a';
   const paddingH = toNumber(getVariableByName('tooltip/padding/horizontal', modes), 12);
   const paddingV = toNumber(getVariableByName('tooltip/padding/vertical', modes), 8);
-  const radius = toNumber(getVariableByName('radius', modes), 8);
+  const radius = 8;
   const labelColor = getVariableByName('tooltip/label/color', modes) ?? '#ffffff';
   if (items.length === 0) return null;
 
@@ -794,7 +798,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes) {
   return useMemo(() => {
-    const color = getVariableByName('axisItem/color', modes) ?? '#000000';
+    const color = getVariableByName('axisItem/fg', modes) ?? '#000000';
     const fontFamily = getVariableByName('axisItem/fontFamily', modes) ?? 'JioType Var';
     const fontSize = toNumber(getVariableByName('axisItem/fontSize', modes), 12);
     const lineHeight = toNumber(getVariableByName('axisItem/lineHeight', modes), 16);

package/lib/module/components/Attached/Attached.js

@@ -124,7 +124,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = useMemo(() => {
     const borderColor = getVariableByName('attached/slot/border', modes);
-    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes) || '0');
+    const borderWidth = parseFloat(getVariableByName('attached/slot/borderWidth', modes));
     if (!borderColor || !(borderWidth > 0)) return null;
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/lib/module/components/Avatar/Avatar.js

@@ -51,17 +51,17 @@ const monogramContainerStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveAvatarTokens(modes, isMonogram) {
-  const size = getVariableByName('avatar/size', modes) || 29;
-  const radiusRaw = getVariableByName('avatar/radius', modes) || 9999;
-  const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff';
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const labelColor = getVariableByName('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = getVariableByName('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes) || 500;
+  const size = getVariableByName('avatar/size', modes);
+  const radiusRaw = getVariableByName('avatar/radius', modes);
+  const backgroundColor = getVariableByName('avatar/background', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const labelColor = getVariableByName('avatar/label/color', modes);
+  const labelFontSize = getVariableByName('avatar/label/fontSize', modes);
+  const labelLineHeight = getVariableByName('avatar/label/lineHeight', modes);
+  const labelFontWeightRaw = getVariableByName('avatar/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes) || 'Inter';
+  const labelFontFamily = getVariableByName('avatar/label/fontFamily', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

package/lib/module/components/AvatarGroup/AvatarGroup.js

@@ -13,15 +13,15 @@ function AvatarGroup({
   style,
   ...rest
 }) {
-  const gap = getVariableByName('avatarGroup/gap', modes) || 0;
-  const avatarSize = getVariableByName('avatar/size', modes) || 29;
-  const avatarRadius = getVariableByName('avatar/radius', modes) || 9999;
-  const borderSize = getVariableByName('avatar/border/size', modes) || 1;
-  const borderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes) || 0;
-  const paddingRight = getVariableByName('avatarGroup/padding/right', modes) || 0;
-  const paddingTop = getVariableByName('avatarGroup/padding/top', modes) || 0;
-  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes) || 0;
+  const gap = getVariableByName('avatarGroup/gap', modes);
+  const avatarSize = getVariableByName('avatar/size', modes);
+  const avatarRadius = getVariableByName('avatar/radius', modes);
+  const borderSize = getVariableByName('avatar/border/size', modes);
+  const borderColor = getVariableByName('avatar/border/color', modes);
+  const paddingLeft = getVariableByName('avatarGroup/padding/left', modes);
+  const paddingRight = getVariableByName('avatarGroup/padding/right', modes);
+  const paddingTop = getVariableByName('avatarGroup/padding/top', modes);
+  const paddingBottom = getVariableByName('avatarGroup/padding/bottom', modes);
   const validChildren = flattenChildren(children);
   const totalChildren = validChildren.length;
 

package/lib/module/components/Badge/Badge.js

@@ -3,30 +3,46 @@
 import React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Skeleton from '../../skeleton/Skeleton';
 import { useSkeleton } from '../../skeleton/SkeletonGroup';
-import { jsx as _jsx } from "react/jsx-runtime";
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }) {
-  // Resolve token values (fall back to sensible defaults)
-  const backgroundColor = getVariableByName('badge/color/background', modes) || '#d8effe';
-  const labelColor = getVariableByName('badge/color/label', modes) || '#000000';
-  const fontSize = Number(getVariableByName('badge/label/fontSize', modes)) || 12;
-  const fontFamily = getVariableByName('badge/fontFamily', modes) || undefined;
-  const fontWeight = getVariableByName('badge/label/fontWeight', modes) || '600';
-  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes)) || 6;
-  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes)) || 4;
-  const borderRadius = Number(getVariableByName('badge/radius', modes)) || 4;
-  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const isGlass = type === 'glass';
+  const hasLeading = leading != null;
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
+  const backgroundColor = getVariableByName('badge/color/background', modes);
+  const glassBackground = getVariableByName('badge/glass/color/background', modes);
+  const glassLabelColor = getVariableByName('badge/glass/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : getVariableByName('badge/color/label', modes);
+  const fontSize = Number(getVariableByName('badge/label/fontSize', modes));
+  const fontFamily = getVariableByName('badge/fontFamily', modes);
+  const fontWeight = getVariableByName('badge/label/fontWeight', modes);
+  const paddingHorizontal = Number(getVariableByName('badge/padding/horizontal', modes));
+  const paddingVertical = Number(getVariableByName('badge/padding/vertical', modes));
+  const borderRadius = Number(getVariableByName('badge/radius', modes));
+  const lineHeight = Number(getVariableByName('badge/label/lineHeight', modes));
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes)))));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -49,13 +65,25 @@ function Badge({
   }
   const Container = onPress ? Pressable : View;
   const containerStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? {
+      flexDirection: 'row',
+      gap: 4
+    } : null),
+    ...(isGlass ? {
+      overflow: 'hidden'
+    } : null),
     ...(style || {})
   };
   const textStyle = {
@@ -68,19 +96,30 @@ function Badge({
     ...(labelStyle || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || label;
-  return /*#__PURE__*/_jsx(Container, {
+  return /*#__PURE__*/_jsxs(Container, {
     style: containerStyle,
     accessibilityRole: onPress ? 'button' : 'text',
     accessibilityLabel: undefined,
     onPress: onPress,
     ...rest,
-    children: /*#__PURE__*/_jsx(Text, {
+    children: [isGlass ? /*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: glassIntensity ?? blurIntensity,
+      overlayColor: glassOverlayColor ?? glassBackground,
+      androidTintWash: false
+    }) : null, hasLeading ? /*#__PURE__*/_jsx(View, {
+      style: LEADING_WRAP,
+      children: leading
+    }) : null, /*#__PURE__*/_jsx(Text, {
       style: textStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...resolveTruncation(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: false,
       children: label
-    })
+    })]
   });
 }
+const LEADING_WRAP = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 export default Badge;

package/lib/module/components/BenefitCard/BenefitCard.js

@@ -9,6 +9,9 @@ import Text from '../Text/Text';
 import ListItem from '../ListItem/ListItem';
 import Divider from '../Divider/Divider';
 import Button from '../Button/Button';
+import Nudge from '../Nudge/Nudge';
+import Avatar from '../Avatar/Avatar';
+import TextSegment from '../TextSegment/TextSegment';
 
 /**
  * A single benefit row rendered with the shared `ListItem` primitive: a
@@ -38,8 +41,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 function BenefitCard({
   headerTitle = 'You will earn',
   headerItem,
+  headerItems,
+  header,
   showHeader = true,
-  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  bodyTitle,
+  bodyHeader,
   items,
   children,
   buttonLabel = 'Upgrade',
@@ -54,11 +60,16 @@ function BenefitCard({
 }) {
   const tokens = useMemo(() => resolveTokens(modes), [modes]);
 
-  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-  const listItemModes = useMemo(() => ({
+  // Component-level modes. `List Item Style: Minimal` and `Nudge padding: None`
+  // are BenefitCard's own defaults: they live on the card and cascade down into
+  // every child (the list-wrap rows and the upsell nudge) rather than being
+  // threaded onto each individual item. Consumer `modes` always win.
+  const cascadeModes = useMemo(() => ({
     'List Item Style': 'Minimal',
+    'Nudge padding': 'None',
     ...modes
   }), [modes]);
+  // Sub-element modes layer their own specifics on top of the consumer modes.
   const iconModes = useMemo(() => ({
     AppearanceBrand: 'Secondary',
     ...modes
@@ -72,6 +83,13 @@ function BenefitCard({
     'Button / Size': 'S',
     ...modes
   }), [modes]);
+  // The upsell nudge keeps a white/transparent background (`AppearanceBrand:
+  // Neutral` → `nudge/background: #ffffff`); its `Nudge padding: None` cascades
+  // in from `cascadeModes` so it sits flush with the card.
+  const nudgeModes = useMemo(() => ({
+    AppearanceBrand: 'Neutral',
+    ...cascadeModes
+  }), [cascadeModes]);
   const renderItem = (item, key) => {
     const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/_jsx(Icon, {
       iconName: item.icon,
@@ -89,23 +107,60 @@ function BenefitCard({
       title: item.title,
       leading: leading,
       trailing: trailing,
-      onPress: item.onPress,
-      modes: listItemModes
+      onPress: item.onPress
     }, key);
   };
-  const headerNode = showHeader && (headerTitle != null || headerItem != null) ? /*#__PURE__*/_jsxs(View, {
+
+  // Header "list wrap" — slot-based. Precedence: `header` slot > `headerItems`
+  // array > legacy single `headerItem` > Figma default rows. The component-level
+  // `cascadeModes` are pushed into the whole group at once, so individual rows
+  // never carry their own list-item modes.
+  const headerListSource = header ? header : (headerItems ?? (headerItem ? [headerItem] : DEFAULT_HEADER_ITEMS)).map((item, index) => renderItem(item, `header-${index}`));
+  const headerListNodes = cloneChildrenWithModes(headerListSource, cascadeModes);
+  const headerNode = showHeader ? /*#__PURE__*/_jsxs(View, {
     style: styles.section,
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.cardHeader,
       children: [headerTitle != null ? /*#__PURE__*/_jsx(RNText, {
         style: tokens.title,
         children: headerTitle
-      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+      }) : null, /*#__PURE__*/_jsx(View, {
+        style: tokens.listWrap,
+        children: headerListNodes
+      })]
     }), /*#__PURE__*/_jsx(Divider, {
       modes: modes
     })]
   }) : null;
-  const bodyList = children ? cloneChildrenWithModes(children, listItemModes) : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+
+  // Body "header" slot (between the divider and the body list). Precedence:
+  // explicit `bodyHeader` slot > legacy `bodyTitle` text > Figma upsell nudge.
+  const bodyHeaderNode = bodyHeader === null || bodyHeader === false ? null : bodyHeader !== undefined ? renderSlot(bodyHeader, cascadeModes) : bodyTitle != null ? /*#__PURE__*/_jsx(RNText, {
+    style: tokens.title,
+    children: bodyTitle
+  }) : /*#__PURE__*/_jsx(Nudge, {
+    type: "inline-compact",
+    modes: {
+      ...nudgeModes,
+      ...cascadeModes
+    },
+    startSlot: DEFAULT_UPSELL_AVATAR,
+    children: /*#__PURE__*/_jsx(TextSegment, {
+      modes: cascadeModes,
+      segments: [{
+        text: 'Upgrade to '
+      }, {
+        text: 'JioFinance+',
+        modes: {
+          'Text Appearance': 'Primary'
+        }
+      }, {
+        text: ' and earn more'
+      }]
+    })
+  });
+  const bodyListSource = children ? children : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index));
+  const bodyList = cloneChildrenWithModes(bodyListSource, cascadeModes);
   const ctaNode = button ?? /*#__PURE__*/_jsx(Button, {
     label: buttonLabel,
     modes: ctaModes,
@@ -116,15 +171,9 @@ function BenefitCard({
     width
   }), [tokens.container, width]);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [headerNode, /*#__PURE__*/_jsxs(View, {
-      style: tokens.body,
-      children: [bodyTitle != null ? /*#__PURE__*/_jsx(RNText, {
-        style: tokens.title,
-        children: bodyTitle
-      }) : null, /*#__PURE__*/_jsx(View, {
-        style: tokens.listWrap,
-        children: bodyList
-      })]
+    children: [headerNode, bodyHeaderNode, /*#__PURE__*/_jsx(View, {
+      style: tokens.listWrap,
+      children: bodyList
     }), showButton ? ctaNode : null]
   });
   if (onPress) {
@@ -183,10 +232,6 @@ function resolveTokens(modes) {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
-    body: {
-      alignSelf: 'stretch',
-      gap
-    },
     listWrap: {
       alignSelf: 'stretch',
       gap
@@ -202,6 +247,26 @@ function resolveTokens(modes) {
     }
   };
 }
+
+// Cascades `modes` into a slot node and unwraps a single child so the slot can
+// be rendered inline without an extra fragment.
+function renderSlot(node, modes) {
+  const processed = cloneChildrenWithModes(node, modes);
+  return processed.length === 1 ? processed[0] : processed;
+}
+
+// Figma reference rows for the header list wrap (two highlighted "JioPoints"
+// rows). Used only when no `header` slot / `headerItems` / legacy `headerItem`
+// is supplied.
+const DEFAULT_HEADER_ITEMS = [{
+  icon: 'ic_jewellery_diamond',
+  title: 'JioPoints',
+  trailingText: 'Up to 2000 pts'
+}, {
+  icon: 'ic_jewellery_diamond',
+  title: 'JioPoints',
+  trailingText: 'Up to 2000 pts'
+}];
 const DEFAULT_ITEMS = [{
   icon: 'ic_card',
   title: 'Up to ₹5000 cashback'
@@ -209,6 +274,15 @@ const DEFAULT_ITEMS = [{
   icon: 'ic_card',
   title: '25% extra JioPoints'
 }];
+
+// Start-slot avatar for the default upsell nudge. `modes` cascade in from the
+// nudge (XS keeps it compact next to the inline message).
+const DEFAULT_UPSELL_AVATAR = /*#__PURE__*/_jsx(Avatar, {
+  style: "Image",
+  modes: {
+    'Avatar Size': 'XS'
+  }
+});
 const styles = StyleSheet.create({
   section: {
     alignSelf: 'stretch',

package/lib/module/components/BottomNav/BottomNav.js

@@ -37,8 +37,8 @@ function BottomNav({
   };
 
   // Resolve container styling tokens
-  const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff';
-  const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1';
+  const backgroundColor = getVariableByName('bottomNav/background', modes);
+  const borderColor = getVariableByName('bottomNav/border/color', modes);
   const borderWidth = getVariableByName('bottomNav/border/width', modes) ?? 1;
   const paddingTop = getVariableByName('bottomNav/padding/top', modes) ?? 10;
   const paddingBottom = getVariableByName('bottomNav/padding/bottom', modes) ?? 23;