jfs-components 0.1.12 → 0.1.18

package/lib/module/components/PaymentFeedback/PaymentFeedback.js

@@ -25,29 +25,29 @@ export default function PaymentFeedback({
     ...globalModes,
     ...propModes
   };
-  const containerGap = Number(getVariableByName('paymnetFeedback/container/gap', modes)) || 46;
-  const messageGap = Number(getVariableByName('paymnetFeedback/message/gap', modes)) || 12;
-  const titleColor = getVariableByName('paymnetFeedback/title/color', modes) || '#0d0d0f';
-  const titleFontSize = Number(getVariableByName('paymnetFeedback/title/fontSize', modes)) || 36;
-  const titleFontFamily = getVariableByName('paymnetFeedback/title/fontFamily', modes) || 'JioType Var';
-  const titleLineHeight = Number(getVariableByName('paymnetFeedback/title/lineHeight', modes)) || 36;
-  const titleFontWeight = getVariableByName('paymnetFeedback/title/fontWeight', modes) || '900';
-  const subtitleColor = getVariableByName('paymnetFeedback/subtitle/color', modes) || '#24262b';
-  const subtitleFontSize = Number(getVariableByName('paymnetFeedback/subtitle/fontSize', modes)) || 16;
-  const subtitleFontFamily = getVariableByName('paymnetFeedback/subtitle/fontFamily', modes) || 'JioType Var';
-  const subtitleLineHeight = Number(getVariableByName('paymnetFeedback/subtitle/lineHeight', modes)) || 19;
-  const subtitleFontWeight = getVariableByName('paymnetFeedback/subtitle/fontWeight', modes) || '500';
-  const bodyColor = getVariableByName('paymnetFeedback/body/color', modes) || '#24262b';
-  const bodyFontSize = Number(getVariableByName('paymnetFeedback/body/fontSize', modes)) || 14;
-  const bodyFontFamily = getVariableByName('paymnetFeedback/body/fontFamily', modes) || 'JioType Var';
-  const bodyLineHeight = Number(getVariableByName('paymnetFeedback/body/lineHeight', modes)) || 17;
-  const bodyFontWeight = getVariableByName('paymnetFeedback/body/fontWeight', modes) || '500';
-  const detailsColor = getVariableByName('paymnetFeedback/details/color', modes) || '#24262b';
-  const detailsFontSize = Number(getVariableByName('paymnetFeedback/details/fontSize', modes)) || 14;
-  const detailsFontFamily = getVariableByName('paymnetFeedback/details/fontFamily', modes) || 'JioType Var';
-  const detailsLineHeight = Number(getVariableByName('paymnetFeedback/details/lineHeight', modes)) || 17;
-  const detailsFontWeight = getVariableByName('paymnetFeedback/details/fontWeight', modes) || '500';
-  const detailsParagraphSpacing = Number(getVariableByName('paymnetFeedback/details/paragraphSpacing', modes)) || 4;
+  const containerGap = Number(getVariableByName('paymnetFeedback/container/gap', modes));
+  const messageGap = Number(getVariableByName('paymnetFeedback/message/gap', modes));
+  const titleColor = getVariableByName('paymnetFeedback/title/color', modes);
+  const titleFontSize = Number(getVariableByName('paymnetFeedback/title/fontSize', modes));
+  const titleFontFamily = getVariableByName('paymnetFeedback/title/fontFamily', modes);
+  const titleLineHeight = Number(getVariableByName('paymnetFeedback/title/lineHeight', modes));
+  const titleFontWeight = getVariableByName('paymnetFeedback/title/fontWeight', modes);
+  const subtitleColor = getVariableByName('paymnetFeedback/subtitle/color', modes);
+  const subtitleFontSize = Number(getVariableByName('paymnetFeedback/subtitle/fontSize', modes));
+  const subtitleFontFamily = getVariableByName('paymnetFeedback/subtitle/fontFamily', modes);
+  const subtitleLineHeight = Number(getVariableByName('paymnetFeedback/subtitle/lineHeight', modes));
+  const subtitleFontWeight = getVariableByName('paymnetFeedback/subtitle/fontWeight', modes);
+  const bodyColor = getVariableByName('paymnetFeedback/body/color', modes);
+  const bodyFontSize = Number(getVariableByName('paymnetFeedback/body/fontSize', modes));
+  const bodyFontFamily = getVariableByName('paymnetFeedback/body/fontFamily', modes);
+  const bodyLineHeight = Number(getVariableByName('paymnetFeedback/body/lineHeight', modes));
+  const bodyFontWeight = getVariableByName('paymnetFeedback/body/fontWeight', modes);
+  const detailsColor = getVariableByName('paymnetFeedback/details/color', modes);
+  const detailsFontSize = Number(getVariableByName('paymnetFeedback/details/fontSize', modes));
+  const detailsFontFamily = getVariableByName('paymnetFeedback/details/fontFamily', modes);
+  const detailsLineHeight = Number(getVariableByName('paymnetFeedback/details/lineHeight', modes));
+  const detailsFontWeight = getVariableByName('paymnetFeedback/details/fontWeight', modes);
+  const detailsParagraphSpacing = Number(getVariableByName('paymnetFeedback/details/paragraphSpacing', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/module/components/Popup/Popup.js

@@ -83,7 +83,7 @@ const Popup = /*#__PURE__*/forwardRef(function Popup({
     });
     return () => anim.stop();
   }, [isOpen, modalVisible, slideY, backdropAnim, maxBackdropOpacity, animationDuration]);
-  const background = getVariableByName('popup/background', modes) || '#ffffff';
+  const background = getVariableByName('popup/background', modes);
   const paddingH = getVariableByName('popup/padding/horizontal', modes) ?? 0;
   const paddingTopVal = getVariableByName('popup/padding/top', modes) ?? 0;
   const paddingBottomVal = getVariableByName('popup/padding/bottom', modes) ?? 24;

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -1,9 +1,8 @@
 "use strict";
 
 import React, { useId, useMemo } from 'react';
-import { View, Text, Pressable, StyleSheet, Platform, Image as RNImage } from 'react-native';
-import MaskedView from '@react-native-masked-view/masked-view';
-import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Stop, Rect, Mask, Filter, FeGaussianBlur, Image as SvgImage } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import Avatar from '../Avatar/Avatar';
@@ -65,7 +64,9 @@ function ProductMerchandisingCard({
   const rawId = useId();
   const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
   const scrimId = `pmc-footer-scrim-${safeId}`;
+  const blurGradientId = `pmc-footer-blurgrad-${safeId}`;
   const blurMaskId = `pmc-footer-blurmask-${safeId}`;
+  const blurFilterId = `pmc-footer-blurfilter-${safeId}`;
   const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource]);
   const tokens = useMemo(() => resolveTokens(modes), [modes]);
   const containerStyle = {
@@ -159,57 +160,63 @@ function ProductMerchandisingCard({
       children: [normalizedImageSource != null ? /*#__PURE__*/_jsx(View, {
         style: StyleSheet.absoluteFill,
         pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(MaskedView, {
-          style: StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/_jsxs(Svg, {
-            width: "100%",
-            height: "100%",
-            children: [/*#__PURE__*/_jsx(Defs, {
-              children: /*#__PURE__*/_jsxs(LinearGradient, {
-                id: blurMaskId,
-                x1: "0",
-                y1: "0",
-                x2: "0",
-                y2: "1",
-                children: [/*#__PURE__*/_jsx(Stop, {
-                  offset: "0",
-                  stopColor: "#000000",
-                  stopOpacity: 0
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "0.35",
-                  stopColor: "#000000",
-                  stopOpacity: 0.5
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "0.7",
-                  stopColor: "#000000",
-                  stopOpacity: 0.92
-                }), /*#__PURE__*/_jsx(Stop, {
-                  offset: "1",
-                  stopColor: "#000000",
-                  stopOpacity: 1
-                })]
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/_jsxs(Defs, {
+            children: [/*#__PURE__*/_jsx(Filter, {
+              id: blurFilterId,
+              x: "-15%",
+              y: "-15%",
+              width: "130%",
+              height: "130%",
+              children: /*#__PURE__*/_jsx(FeGaussianBlur, {
+                stdDeviation: tokens.imageBlurStdDeviation,
+                edgeMode: "duplicate"
+              })
+            }), /*#__PURE__*/_jsxs(LinearGradient, {
+              id: blurGradientId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx(Stop, {
+                offset: "0",
+                stopColor: "#ffffff",
+                stopOpacity: 0
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.35",
+                stopColor: "#ffffff",
+                stopOpacity: 0.5
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.7",
+                stopColor: "#ffffff",
+                stopOpacity: 0.92
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "1",
+                stopColor: "#ffffff",
+                stopOpacity: 1
+              })]
+            }), /*#__PURE__*/_jsx(Mask, {
+              id: blurMaskId,
+              children: /*#__PURE__*/_jsx(Rect, {
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                fill: `url(#${blurGradientId})`
               })
-            }), /*#__PURE__*/_jsx(Rect, {
-              x: "0",
-              y: "0",
-              width: "100%",
-              height: "100%",
-              fill: `url(#${blurMaskId})`
             })]
-          }),
-          children: /*#__PURE__*/_jsx(RNImage, {
-            source: normalizedImageSource,
-            blurRadius: tokens.imageBlurRadius,
-            resizeMode: "cover",
-            style: {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              width: '100%',
-              height
-            }
-          })
+          }), /*#__PURE__*/_jsx(SvgImage, {
+            href: normalizedImageSource,
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            preserveAspectRatio: "xMidYMid slice",
+            filter: `url(#${blurFilterId})`,
+            mask: `url(#${blurMaskId})`
+          })]
         })
       }) : /*#__PURE__*/_jsx(GlassFill, {
         tint: "dark",
@@ -328,19 +335,16 @@ function resolveTokens(modes) {
   const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
   const sbWeight = asStr(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 = 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))
-  });
+  // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
+  // an identical Gaussian on iOS, Android and web — so unlike the old
+  // `Image.blurRadius` path it needs no per-platform tuning. `stdDeviation` is
+  // roughly half a perceptual "blur radius", so we scale the `blur/minimal`
+  // token down to land on the same subtle frosted strength as the design.
+  const imageBlurStdDeviation = Math.max(4, Math.round(blurRadius * 0.35));
   return {
     radius,
     blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
-    imageBlurRadius,
+    imageBlurStdDeviation,
     header: {
       flexDirection: 'row',
       alignItems: 'flex-start',

package/lib/module/components/ProgressBadge/ProgressBadge.js

@@ -33,8 +33,8 @@ function ProgressBadge({
   ...rest
 }) {
   // Resolve layout tokens
-  const backgroundColor = getVariableByName('progressBadge/background', modes) || '#ffffff';
-  const progressColor = getVariableByName('progressBadge/progress/color', modes) || '#ebebed';
+  const backgroundColor = getVariableByName('progressBadge/background', modes);
+  const progressColor = getVariableByName('progressBadge/progress/color', modes);
   const gap = getVariableByName('progressBadge/gap', modes) ?? 12;
   const paddingHorizontal = getVariableByName('progressBadge/padding/horizontal', modes) ?? 16;
   const paddingVertical = getVariableByName('progressBadge/padding/vertical', modes) ?? 6;
@@ -42,15 +42,15 @@ function ProgressBadge({
   const descriptionGap = getVariableByName('progressBadge/description/gap', modes) ?? 8;
 
   // Resolve typography tokens
-  const fontFamily = getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium';
+  const fontFamily = getVariableByName('progressBadge/fontFamily', modes);
   const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500;
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14;
   const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17;
-  const textColor = getVariableByName('progressBadge/foreground', modes) || '#000000';
+  const textColor = getVariableByName('progressBadge/foreground', modes);
 
   // Resolve icon tokens
-  const iconColor = getVariableByName('progressBadge/icon/color', modes) || '#f50030';
+  const iconColor = getVariableByName('progressBadge/icon/color', modes);
   const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18;
   const containerStyle = {
     backgroundColor,

package/lib/module/components/Radio/Radio.js

@@ -1,9 +1,10 @@
 "use strict";
 
 import React, { forwardRef, useState } from 'react';
-import { Pressable, View, Platform } from 'react-native';
+import { Pressable, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 
 // ---------------------------------------------------------------------------
 // Props
@@ -27,9 +28,9 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
   const [pressed, setPressed] = useState(false);
 
   // ---- Dimensions ----
-  const widthStr = getVariableByName('radio/width', modes) || '18';
-  const heightStr = getVariableByName('radio/height', modes) || '18';
-  const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10';
+  const widthStr = getVariableByName('radio/width', modes);
+  const heightStr = getVariableByName('radio/height', modes);
+  const selectorSizeStr = getVariableByName('radio/selector/size', modes);
   const width = parseFloat(widthStr?.toString() || '18');
   const height = parseFloat(heightStr?.toString() || '18');
   const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
@@ -66,7 +67,7 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
   // ---- Colors & Border ----
 
   const resolveColor = (path, fallback) => {
-    return getVariableByName(path, modes) || fallback;
+    return getVariableByName(path, modes);
   };
 
   // Background Color
@@ -120,10 +121,9 @@ export const Radio = /*#__PURE__*/forwardRef(function Radio({
     backgroundColor,
     justifyContent: 'center',
     alignItems: 'center',
-    // Web shadow (ring)
-    ...(Platform.OS === 'web' && shadowSize > 0 ? {
-      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
-    } : {})
+    // Focus/selected glow ring. Rendered via the unified boxShadow helper
+    // so it works on web + RN 0.76+ and degrades gracefully on older RN.
+    ...(shadowSize > 0 ? boxShadow(`0px 0px 0px ${shadowSize}px ${shadowColor}`) : {})
   };
   const selectorStyle = {
     width: selectorSize,

package/lib/module/components/RechargeCard/RechargeCard.js

@@ -39,47 +39,47 @@ export default function RechargeCard({
   style
 }) {
   // Container Tokens (defaults mirror Figma node 2235:937).
-  const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
-  const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
-  const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
-  const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
-  const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
-  const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
-  const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
+  const backgroundColor = getVariableByName('rechargeCard/background', modes);
+  const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes), 10);
+  const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes), 10);
+  const gap = parseInt(getVariableByName('rechargeCard/gap', modes), 10);
+  const radius = parseInt(getVariableByName('rechargeCard/radius', modes), 10);
+  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes), 10);
+  const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes), 10);
+  const strokeColor = getVariableByName('rechargeCard/stroke/color', modes);
 
   // Header Tokens
-  const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
-  const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
-  const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
-  const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
-  const titleFontWeight = getVariableByName('rechargeCard/title/fontWeight', modes) || '700';
+  const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes), 10);
+  const titleColor = getVariableByName('rechargeCard/title/color', modes);
+  const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes), 10);
+  const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes);
+  const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes), 10);
+  const titleFontWeight = getVariableByName('rechargeCard/title/fontWeight', modes);
 
   // Specs Tokens
-  const specsGap = parseInt(getVariableByName('rechargeCard/specs/gap', modes) || 0, 10);
-  const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
+  const specsGap = parseInt(getVariableByName('rechargeCard/specs/gap', modes), 10);
+  const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes), 10);
 
   // Spec Label Tokens
-  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
-  const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
-  const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
-  const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
-  const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
+  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes);
+  const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes), 10);
+  const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes);
+  const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes), 10);
+  const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes);
 
   // Spec Value Tokens
-  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
-  const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
-  const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
-  const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
-  const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
+  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes);
+  const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes), 10);
+  const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes);
+  const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes), 10);
+  const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes);
 
   // Disclaimer Tokens
-  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
-  const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
-  const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
-  const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
-  const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
+  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes);
+  const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes), 10);
+  const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes);
+  const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes), 10);
+  const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes);
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)

package/lib/module/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -1,11 +1,10 @@
 "use strict";
 
 import React, { useMemo } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import { formatIndianNumber } from '../../utils/number-utils';
-import Title from '../Title/Title';
 import LinearProgress from '../LinearProgress/LinearProgress';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
@@ -57,6 +56,7 @@ const DEFAULT_TARGET = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+  label,
   currency = '₹',
   current = DEFAULT_CURRENT,
   target = DEFAULT_TARGET,
@@ -64,6 +64,7 @@ function SavingsGoalSummary({
   modes = EMPTY_MODES,
   style,
   titleStyle,
+  labelStyle,
   legendStyle
 }) {
   // Merge caller modes on top of the defaults so callers can override
@@ -111,6 +112,40 @@ function SavingsGoalSummary({
   const percentageLabel = `${Math.round(resolvedProgress * 100)}%`;
   const gap = getVariableByName('savingsGoalSummary/gap', mergedModes) ?? 23;
   const legendGap = getVariableByName('savingsGoalSummary/legend/gap', mergedModes) ?? 16;
+
+  // Percentage value typography — driven by the dedicated
+  // `savingsGoalSummary/value/*` tokens (Figma 29 / 900) rather than the
+  // generic `Title` tokens, so the value matches the design exactly.
+  const valueFontSize = getVariableByName('savingsGoalSummary/value/fontSize', mergedModes) ?? 29;
+  const valueFontFamily = getVariableByName('savingsGoalSummary/value/fontFamily', mergedModes) ?? 'JioType Var';
+  const valueRawLineHeight = getVariableByName('savingsGoalSummary/value/lineHeight', mergedModes) ?? 29;
+  // The value tokens ship with `lineHeight === fontSize` (29/29); clamp to
+  // ~1.2x so descenders never clip on native (same guard `Title` uses).
+  const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2));
+  const valueFontWeight = String(getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
+  const valueColor = getVariableByName('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+
+  // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+  // (Figma 12 / 400). Only rendered when a `label` is supplied.
+  const labelFontSize = getVariableByName('savingsGoalSummary/label/fontSize', mergedModes) ?? 12;
+  const labelFontFamily = getVariableByName('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
+  const labelLineHeight = getVariableByName('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
+  const labelFontWeight = String(getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
+  const labelColor = getVariableByName('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+    style: [{
+      color: labelColor,
+      fontFamily: labelFontFamily,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+      width: '100%'
+    }, labelStyle],
+    children: label
+  }) : (() => {
+    const processed = cloneChildrenWithModes(label, mergedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  })();
   const customLegend = children ? cloneChildrenWithModes(children, mergedModes) : null;
   const defaultLegend = !customLegend && (current || target) ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [current && /*#__PURE__*/_jsx(MetricLegendItem, {
@@ -133,12 +168,22 @@ function SavingsGoalSummary({
       gap,
       alignItems: 'stretch'
     }, style],
-    accessibilityLabel: `Savings goal progress, ${percentageLabel}`,
-    children: [/*#__PURE__*/_jsx(Title, {
-      title: percentageLabel,
-      modes: mergedModes,
-      style: TITLE_CONTAINER_STYLE,
-      textStyle: titleStyle
+    accessibilityLabel: typeof label === 'string' ? `${label}, ${percentageLabel}` : `Savings goal progress, ${percentageLabel}`,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: HEADER_GROUP_STYLE,
+      children: [labelNode, /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: valueColor,
+          fontFamily: valueFontFamily,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          fontWeight: valueFontWeight,
+          width: '100%'
+        }, titleStyle],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: percentageLabel
+      })]
     }), /*#__PURE__*/_jsx(LinearProgress, {
       value: resolvedProgress,
       modes: mergedModes
@@ -166,10 +211,12 @@ function formatLegendValue(value, currency) {
   });
 }
 
-// Neutralise the `Title` component's default page-level padding so it sits
-// flush inside the summary card (the parent container owns spacing via `gap`).
-const TITLE_CONTAINER_STYLE = {
-  paddingHorizontal: 0,
-  paddingVertical: 0
+// Groups the optional caption ("Credit usage") tightly above the percentage
+// value. The parent container owns the larger spacing to the bar via `gap`,
+// so this only needs the small label→value gap.
+const HEADER_GROUP_STYLE = {
+  width: '100%',
+  gap: 2,
+  alignItems: 'flex-start'
 };
 export default SavingsGoalSummary;

package/lib/module/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { ScrollView } from 'react-native';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+
+/**
+ * Axis (or axes) along which the content can be scrolled.
+ *
+ * - `vertical` (default) — content taller than the viewport scrolls up/down.
+ * - `horizontal` — content wider than the viewport scrolls left/right.
+ * - `both` — content larger on either axis scrolls in both directions
+ *   (implemented as a horizontal `ScrollView` nested in a vertical one).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Build a padding style fragment, letting the more specific props win over the
+ * broader ones (`paddingTop` > `paddingVertical` > `padding`). Only defined
+ * values are emitted so consumer `contentContainerStyle` overrides survive.
+ */
+function resolvePadding({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft
+}) {
+  const top = paddingTop ?? paddingVertical ?? padding;
+  const right = paddingRight ?? paddingHorizontal ?? padding;
+  const bottom = paddingBottom ?? paddingVertical ?? padding;
+  const left = paddingLeft ?? paddingHorizontal ?? padding;
+  const style = {};
+  if (top != null) style.paddingTop = top;
+  if (right != null) style.paddingRight = right;
+  if (bottom != null) style.paddingBottom = bottom;
+  if (left != null) style.paddingLeft = left;
+  return style;
+}
+
+/**
+ * ScrollArea — a transparent, size-constrained viewport that makes content
+ * larger than itself smoothly scrollable (Figma node 6319:46886).
+ *
+ * It has no background of its own; constrain its size through `style`
+ * (`height`, `maxHeight`, or `flex`) and drop any over-sized content inside.
+ *
+ * @example
+ * // Vertical (default): a tall column inside a fixed-height window.
+ * <ScrollArea style={{ height: 240 }}>
+ *   <LongContent />
+ * </ScrollArea>
+ *
+ * @example
+ * // Horizontal: a wide row of cards inside a full-width window.
+ * <ScrollArea direction="horizontal">
+ *   <Card /> <Card /> <Card />
+ * </ScrollArea>
+ */
+export const ScrollArea = /*#__PURE__*/forwardRef(function ScrollArea({
+  children,
+  direction = 'vertical',
+  showScrollIndicator = false,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  style,
+  contentContainerStyle,
+  modes = EMPTY_MODES,
+  scrollEventThrottle = 16,
+  ...rest
+}, ref) {
+  const paddingStyle = resolvePadding({
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft
+  });
+
+  // Cascade modes into every child so slotted tokens resolve correctly.
+  const content = cloneChildrenWithModes(children, modes);
+  if (direction === 'both') {
+    // Outer vertical scroll, inner horizontal scroll. Padding lives on the
+    // inner content container so it scrolls with the content on both axes.
+    return /*#__PURE__*/_jsx(ScrollView, {
+      ref: ref,
+      style: style,
+      showsVerticalScrollIndicator: showScrollIndicator,
+      scrollEventThrottle: scrollEventThrottle,
+      ...rest,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: showScrollIndicator,
+        scrollEventThrottle: scrollEventThrottle,
+        contentContainerStyle: [paddingStyle, contentContainerStyle],
+        children: content
+      })
+    });
+  }
+  const isHorizontal = direction === 'horizontal';
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: ref,
+    horizontal: isHorizontal,
+    style: style,
+    showsVerticalScrollIndicator: isHorizontal ? undefined : showScrollIndicator,
+    showsHorizontalScrollIndicator: isHorizontal ? showScrollIndicator : undefined,
+    scrollEventThrottle: scrollEventThrottle,
+    contentContainerStyle: [paddingStyle, contentContainerStyle],
+    ...rest,
+    children: content
+  });
+});
+export default ScrollArea;