jfs-components 0.1.12 → 0.1.18

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.18] - 2026-06-29
+
+- **Fix:** Remove `@react-native-masked-view/masked-view` — fixes `Element type is invalid` crash on New Architecture (`ProductMerchandisingCard` image cards, `AvatarGroup`, `GlassFill` progressive blur). All masking now uses `react-native-svg` (no new peer deps; consumers can drop `masked-view` if added as a workaround).
+- `ProductMerchandisingCard` — footer image blur via SVG `FeGaussianBlur` + gradient mask (cross-platform, no per-platform `blurRadius` tuning).
+- `AvatarGroup` — overlap cutout via SVG `Mask` + `ForeignObject`.
+- `GlassFill` — progressive blur via stacked `BlurView` bands; no-native-blur fallback uses SVG gradient scrim.
+
+---
+
+## [0.1.16] - 2026-06-26
+
+- Added `CarouselCardAccounts` — horizontally scrollable account-card strip built on `Carousel` with token-driven gap and snap-aligned card slots.
+- Added `ScrollArea` — token-aware scroll container with `direction` (`vertical` / `horizontal` / `both`), padding props, and hidden scroll indicators by default.
+- Shared `boxShadow` utility — cross-platform drop-shadow helper (`boxShadow`, `parseBoxShadow`, `supportsNativeBoxShadow`) with legacy iOS/Android fallback for pre–RN 0.76; exported from the package barrel. Adopted by `Drawer`, `Dropdown`, `Checkbox`, `Radio`, `Toggle`, and `ActionFooter`.
+- Library-wide token audit — removed hardcoded `|| fallback` defaults from component token resolution so missing tokens are visible at runtime; added `npm run audit:tokens` (`scripts/audit-tokens.js`) to verify every referenced Figma variable exists and resolves before publish.
+- `Text` / `Title` — new `singleLine` prop to force single-line layout (web uses `whiteSpace: nowrap` so text overflows instead of wrapping inside constrained parents).
+- `Button` — web label no-wrap fix for pill buttons in tight flex layouts.
+- `Drawer` — title-wrap padding driven by `drawer/titleWrap/padding/*` tokens; layered shadow routed through shared `boxShadow`.
+- `SavingsGoalSummary` — optional `label` caption above the percentage value with dedicated `savingsGoalSummary/label/*` and `savingsGoalSummary/value/*` typography tokens.
+- Icons — 73 new icons (analytics, documents, network/connectivity, folders, and related glyphs); refreshed icon registry.
+- Figma/token sync pass; refreshed `.token-metadata.json`, `figma-modes.generated.ts`, and Coin Variables tokens.
+
+---
+
 ## [0.1.12] - 2026-06-22
 
 - Added `Stack` — token-driven vertical/horizontal layout container with `equalHeight` / `fullWidth` stretch enforcement, mode cascade to children, and `injectChildStyle` for cross-axis alignment that children cannot override.

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -8,12 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 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); }
-const IS_WEB = _reactNative.Platform.OS === 'web';
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -42,27 +41,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 = _reactNative.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 = (0, _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
@@ -171,7 +154,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW
+      ...SHADOW
     };
     const slot = {
       flexDirection: 'row',
@@ -208,7 +191,7 @@ function ActionFooter({
     });
   }, [children, modes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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/commonjs/components/ActionTile/ActionTile.js

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

package/lib/commonjs/components/AmountInput/AmountInput.js

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

package/lib/commonjs/components/AreaLineChart/AreaLineChart.js

@@ -727,7 +727,7 @@ function ChartTooltip({
   const bg = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes) ?? '#0f0d0a';
   const paddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
   const paddingV = toNumber((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
-  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('radius', modes), 8);
+  const radius = 8;
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes) ?? '#ffffff';
   if (items.length === 0) return null;
 
@@ -805,7 +805,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes) {
   return (0, _react.useMemo)(() => {
-    const color = (0, _figmaVariablesResolver.getVariableByName)('axisItem/color', modes) ?? '#000000';
+    const color = (0, _figmaVariablesResolver.getVariableByName)('axisItem/fg', modes) ?? '#000000';
     const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('axisItem/fontFamily', modes) ?? 'JioType Var';
     const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('axisItem/fontSize', modes), 12);
     const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('axisItem/lineHeight', modes), 16);

package/lib/commonjs/components/Attached/Attached.js

@@ -129,7 +129,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = (0, _react.useMemo)(() => {
     const borderColor = (0, _figmaVariablesResolver.getVariableByName)('attached/slot/border', modes);
-    const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('attached/slot/borderWidth', modes) || '0');
+    const borderWidth = parseFloat((0, _figmaVariablesResolver.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/commonjs/components/Avatar/Avatar.js

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

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -4,30 +4,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+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");
 var _jsxRuntime = require("react/jsx-runtime");
 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function AvatarGroup({
   modes = _reactUtils.EMPTY_MODES,
   children,
   style,
   ...rest
 }) {
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes) || 0;
-  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
-  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/left', modes) || 0;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/right', modes) || 0;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/top', modes) || 0;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/bottom', modes) || 0;
+  // Stable, collision-free base for the per-avatar SVG mask ids so multiple
+  // groups on one screen (and multiple avatars in a group) never clash.
+  const rawId = (0, _react.useId)();
+  const maskBaseId = `avatargroup-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes);
+  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes);
+  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/right', modes);
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/top', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/bottom', modes);
   const validChildren = (0, _reactUtils.flattenChildren)(children);
   const totalChildren = validChildren.length;
 
@@ -47,7 +49,11 @@ function AvatarGroup({
     y: r
   };
 
-  // Native Mask Path
+  // Native mask path: the full avatar square MINUS a circular hole where the
+  // next (overlapping) avatar sits. Drawn as a single `evenodd` path so the
+  // hole is cut out of the square. Filled WHITE because react-native-svg's
+  // `<Mask>` is a *luminance* mask (white = visible, black/absent = hidden) —
+  // the inverse of the old `@react-native-masked-view` alpha convention.
   const rectPath = `M 0 0 h ${avatarSizeInt} v ${avatarSizeInt} h -${avatarSizeInt} z`;
   const circlePath = `M ${holeCenter.x},${holeCenter.y} m -${holeRadius},0 a ${holeRadius},${holeRadius} 0 1,0 ${holeRadius * 2},0 a ${holeRadius},${holeRadius} 0 1,0 -${holeRadius * 2},0`;
   const maskPath = `${rectPath} ${circlePath}`;
@@ -105,25 +111,40 @@ function AvatarGroup({
         }, index);
       }
 
-      // Native MaskedView
+      // Native: mask the avatar with react-native-svg instead of the
+      // unmaintained `@react-native-masked-view/masked-view`, whose
+      // legacy `requireNativeComponent('RNCMaskedView')` resolves to a
+      // plain object (crashing "Element type is invalid") under the New
+      // Architecture interop. react-native-svg ships a Fabric/codegen
+      // `<Mask>` + `<ForeignObject>` that resolves on both architectures;
+      // the avatar is hosted inside the `<ForeignObject>` and revealed
+      // through the luminance mask.
+      const maskId = `${maskBaseId}-${index}`;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: wrapperStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: {
-            flex: 1,
-            height: '100%'
-          },
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-            height: "100%",
-            width: "100%",
-            viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-              d: maskPath,
-              fill: "black",
-              fillRule: "evenodd"
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+          height: "100%",
+          width: "100%",
+          viewBox: `0 0 ${avatarSizeInt} ${avatarSizeInt}`,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Mask, {
+              id: maskId,
+              maskUnits: "userSpaceOnUse",
+              maskContentUnits: "userSpaceOnUse",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+                d: maskPath,
+                fill: "white",
+                fillRule: "evenodd"
+              })
             })
-          }),
-          children: clonedChild
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.ForeignObject, {
+            x: "0",
+            y: "0",
+            width: avatarSizeInt,
+            height: avatarSizeInt,
+            mask: `url(#${maskId})`,
+            children: clonedChild
+          })]
         })
       }, index);
     })

package/lib/commonjs/components/Badge/Badge.js

@@ -34,20 +34,20 @@ function Badge({
   // 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 = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes) || '#d8effe';
-  const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes) || '#ffffff26';
-  const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes) || '#ffffff';
-  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
-  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes)) || 12;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes) || undefined;
-  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes) || '600';
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/horizontal', modes)) || 6;
-  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes)) || 4;
-  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes)) || 4;
-  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes);
+  const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes);
+  const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes);
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes);
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes));
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes));
+  const lineHeight = Number((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes)) || 29)));
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number((0, _figmaVariablesResolver.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.

package/lib/commonjs/components/BenefitCard/BenefitCard.js

@@ -13,6 +13,9 @@ var _Text = _interopRequireDefault(require("../Text/Text"));
 var _ListItem = _interopRequireDefault(require("../ListItem/ListItem"));
 var _Divider = _interopRequireDefault(require("../Divider/Divider"));
 var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _TextSegment = _interopRequireDefault(require("../TextSegment/TextSegment"));
 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); }
@@ -44,8 +47,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function BenefitCard({
   headerTitle = 'You will earn',
   headerItem,
+  headerItems,
+  header,
   showHeader = true,
-  bodyTitle = 'Upgrade to JioFinance+ and earn more',
+  bodyTitle,
+  bodyHeader,
   items,
   children,
   buttonLabel = 'Upgrade',
@@ -60,11 +66,16 @@ function BenefitCard({
 }) {
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
 
-  // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-  const listItemModes = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => ({
     AppearanceBrand: 'Secondary',
     ...modes
@@ -78,6 +89,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 = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Neutral',
+    ...cascadeModes
+  }), [cascadeModes]);
   const renderItem = (item, key) => {
     const leading = item.leading ?? (item.icon != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       iconName: item.icon,
@@ -95,23 +113,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__*/(0, _jsxRuntime.jsxs)(_reactNative.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 = (0, _reactUtils.cloneChildrenWithModes)(headerListSource, cascadeModes);
+  const headerNode = showHeader ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.section,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.cardHeader,
       children: [headerTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: tokens.title,
         children: headerTitle
-      }) : null, headerItem != null ? renderItem(headerItem, 'header-item') : null]
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: tokens.listWrap,
+        children: headerListNodes
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       modes: modes
     })]
   }) : null;
-  const bodyList = children ? (0, _reactUtils.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: tokens.title,
+    children: bodyTitle
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+    type: "inline-compact",
+    modes: {
+      ...nudgeModes,
+      ...cascadeModes
+    },
+    startSlot: DEFAULT_UPSELL_AVATAR,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextSegment.default, {
+      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 = (0, _reactUtils.cloneChildrenWithModes)(bodyListSource, cascadeModes);
   const ctaNode = button ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     label: buttonLabel,
     modes: ctaModes,
@@ -122,15 +177,9 @@ function BenefitCard({
     width
   }), [tokens.container, width]);
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [headerNode, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: tokens.body,
-      children: [bodyTitle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: tokens.title,
-        children: bodyTitle
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: tokens.listWrap,
-        children: bodyList
-      })]
+    children: [headerNode, bodyHeaderNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: tokens.listWrap,
+      children: bodyList
     }), showButton ? ctaNode : null]
   });
   if (onPress) {
@@ -189,10 +238,6 @@ function resolveTokens(modes) {
       flexDirection: 'column',
       alignItems: 'flex-start'
     },
-    body: {
-      alignSelf: 'stretch',
-      gap
-    },
     listWrap: {
       alignSelf: 'stretch',
       gap
@@ -208,6 +253,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 = (0, _reactUtils.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'
@@ -215,6 +280,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__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+  style: "Image",
+  modes: {
+    'Avatar Size': 'XS'
+  }
+});
 const styles = _reactNative.StyleSheet.create({
   section: {
     alignSelf: 'stretch',

package/lib/commonjs/components/BottomNav/BottomNav.js

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

package/lib/commonjs/components/BottomNavItem/BottomNavItem.js

@@ -29,13 +29,13 @@ const focusOverlayStyle = {
 };
 function resolveBottomNavItemTokens(modes, disabled, iconColorOverride, iconSizeOverride) {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/gap', modes) ?? 6;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontFamily', modes);
   const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/fontSize', modes) ?? 11;
   const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/lineHeight', modes) ?? 14;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes) || '#0d0d0f';
-  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes) || '#ad8545';
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/label/color', modes);
+  const resolvedIconColor = iconColorOverride || (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/color', modes);
   const resolvedIconSize = iconSizeOverride ?? (0, _figmaVariablesResolver.getVariableByName)('bottomNavItem/icon/size', modes) ?? 24;
   return {
     baseContainerStyle: {