jfs-components 0.1.12 → 0.1.17

package/lib/commonjs/components/NoteInput/NoteInput.js

@@ -30,19 +30,19 @@ const NoteInput = /*#__PURE__*/(0, _react.forwardRef)(function NoteInput({
   const inputRef = (0, _react.useRef)(null);
 
   // Resolve tokens from Figma Design
-  const foreground = (0, _figmaVariablesResolver.getVariableByName)('noteInput/foreground', modes) || '#0d0d0f';
-  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontSize', modes) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontFamily', modes) || 'JioType Var';
-  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('noteInput/lineHeight', modes) || 16;
-  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontWeight', modes) || 700;
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('noteInput/foreground', modes);
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontSize', modes);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontFamily', modes);
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('noteInput/lineHeight', modes);
+  const fontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('noteInput/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('noteInput/gap', modes) || 0; // 4 in some files, 0 in context
-  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/horizontal', modes) || 17;
-  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/vertical', modes) || 9;
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('noteInput/radius', modes) || 999;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/size', modes) || 1;
-  const background = (0, _figmaVariablesResolver.getVariableByName)('noteInput/background', modes) || '#ebebed';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/color', modes) || 'rgba(255,255,255,0)';
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('noteInput/gap', modes); // 4 in some files, 0 in context
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/horizontal', modes);
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('noteInput/padding/vertical', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('noteInput/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/size', modes);
+  const background = (0, _figmaVariablesResolver.getVariableByName)('noteInput/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('noteInput/border/color', modes);
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',

package/lib/commonjs/components/Nudge/Nudge.js

@@ -20,25 +20,25 @@ function toFontWeight(value, fallback) {
   return fallback;
 }
 function resolveNudgeTokens(modes) {
-  const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes) || '#f5f5f5';
-  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes) || 12;
-  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes) || 12;
-  const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes) || 12;
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes) || 6;
-  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes) || '#0d0d0f';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes) || 14;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes) || 'System';
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes) || 15;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('nudge/background', modes);
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('nudge/radius', modes);
+  const paddingH = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/horizontal', modes);
+  const paddingV = (0, _figmaVariablesResolver.getVariableByName)('nudge/padding/vertical', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('nudge/gap', modes);
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/color', modes);
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontSize', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontFamily', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/title/lineHeight', modes);
   const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/title/fontWeight', modes), '700');
-  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes) || '#1a1c1f';
-  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes) || 12;
-  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes) || 'System';
-  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes) || 16;
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/color', modes);
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontSize', modes);
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontFamily', modes);
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/body/lineHeight', modes);
   const bodyFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('nudge/body/fontWeight', modes), '500');
-  const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes) || 4;
-  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes) || 8;
-  const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes) || 20;
-  const startSlotGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/startSlot/gap', modes) || 4;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/text/gap', modes);
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/gap', modes);
+  const contentMinHeight = (0, _figmaVariablesResolver.getVariableByName)('nudge/content/minHeight', modes);
+  const startSlotGap = (0, _figmaVariablesResolver.getVariableByName)('nudge/startSlot/gap', modes);
   return {
     containerBaseStyle: {
       backgroundColor: background,
@@ -96,7 +96,7 @@ function resolveNudgeTokens(modes) {
       width: '100%'
     },
     detailSlotStyle: {
-      gap: (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes) || 8,
+      gap: (0, _figmaVariablesResolver.getVariableByName)('slot/gap', modes),
       width: '100%'
     },
     titleTextStyle: {
@@ -113,8 +113,8 @@ function resolveNudgeTokens(modes) {
       lineHeight: bodyLineHeight,
       fontWeight: bodyFontWeight
     },
-    iconColor: (0, _figmaVariablesResolver.getVariableByName)('appearance/nudge/icon/color', modes) || '#5d00b5',
-    iconSize: (0, _figmaVariablesResolver.getVariableByName)('nudge/icon/size', modes) || 20,
+    iconColor: (0, _figmaVariablesResolver.getVariableByName)('appearance/nudge/icon/color', modes),
+    iconSize: (0, _figmaVariablesResolver.getVariableByName)('nudge/icon/size', modes),
     startSlotGap: startSlotGap
   };
 }

package/lib/commonjs/components/OTP/OTP.js

@@ -327,18 +327,18 @@ function OTP({
   }, [isDisabled]);
 
   // --- Token resolution (state-independent tokens resolved once) ---
-  const otpGap = Number((0, _figmaVariablesResolver.getVariableByName)('otp/gap', modes)) || 36;
-  const otpPaddingH = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/horizontal', modes)) || 8;
-  const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes)) || 8;
-  const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes)) || 48;
-  const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes)) || 8;
-  const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes) || '#000000';
-  const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes)) || 24;
-  const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes) || 'JioType Var';
-  const digitLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/lineHeight', modes)) || 29;
-  const digitFontWeight = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontWeight', modes) || '500';
-  const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes)) || 2;
-  const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes)) || 1;
+  const otpGap = Number((0, _figmaVariablesResolver.getVariableByName)('otp/gap', modes));
+  const otpPaddingH = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/horizontal', modes));
+  const otpPaddingV = Number((0, _figmaVariablesResolver.getVariableByName)('otp/padding/vertical', modes));
+  const slotWidth = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/width', modes));
+  const slotGap = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/gap', modes));
+  const digitColor = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/color', modes);
+  const digitFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontSize', modes));
+  const digitFontFamily = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontFamily', modes);
+  const digitLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/lineHeight', modes));
+  const digitFontWeight = (0, _figmaVariablesResolver.getVariableByName)('pinSlot/digit/fontWeight', modes);
+  const underlineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/height', modes));
+  const underlineRadius = Number((0, _figmaVariablesResolver.getVariableByName)('pinSlot/underline/radius', modes));
 
   // --- Resolve the three underline colors ONCE per render. We then
   // animate between idle ↔ active per-slot using interpolation; the
@@ -346,15 +346,15 @@ function OTP({
   const idleUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Idle'
-  }) || '#303338', [modes]);
+  }), [modes]);
   const activeUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Active'
-  }) || '#5d00b5', [modes]);
+  }), [modes]);
   const errorUnderlineColor = (0, _react.useMemo)(() => (0, _figmaVariablesResolver.getVariableByName)('PinSlot/underline/color', {
     ...modes,
     'Input/PINSlot  States': 'Error'
-  }) || '#d92d20', [modes]);
+  }), [modes]);
 
   // --- Per-slot underline highlight animations ---
   //

package/lib/commonjs/components/PageHero/PageHero.js

@@ -64,31 +64,31 @@ function PageHero({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes)) || 16;
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes)) || 0;
-  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes)) || 8;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
+  const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
 
   // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
   // Tokens fall back to 117 when not defined in the variables collection,
   // so the layout stays stable on consumers that haven't tokenized this yet.
-  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes)) || 117;
-  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes)) || 117;
-  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes) || '#ffffff';
-  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes) || 'System';
-  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)) || 18;
-  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes) || 700;
-  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)) || 20;
-  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes) || '#ffffff';
-  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes) || 'System';
-  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)) || 29;
-  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes) || 900;
-  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)) || 29;
+  const mediaWidth = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
+  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes);
+  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes);
+  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes));
+  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes);
+  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes));
+  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes);
+  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes);
+  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes));
+  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes);
+  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes));
 
   // Only `lineHeight` is tokenized for the supporting text in the Figma source.
   // Color, font size and weight are inline literals in the design (12px medium
   // white) — we mirror that here so the visual stays faithful when no token
   // exists.
-  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)) || 16;
+  const supportingTextLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

package/lib/commonjs/components/PaymentFeedback/PaymentFeedback.js

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

package/lib/commonjs/components/Popup/Popup.js

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

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

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

package/lib/commonjs/components/Radio/Radio.js

@@ -8,6 +8,7 @@ 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 _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); }
 // ---------------------------------------------------------------------------
@@ -32,9 +33,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
   const [pressed, setPressed] = (0, _react.useState)(false);
 
   // ---- Dimensions ----
-  const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes) || '18';
-  const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes) || '18';
-  const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes) || '10';
+  const widthStr = (0, _figmaVariablesResolver.getVariableByName)('radio/width', modes);
+  const heightStr = (0, _figmaVariablesResolver.getVariableByName)('radio/height', modes);
+  const selectorSizeStr = (0, _figmaVariablesResolver.getVariableByName)('radio/selector/size', modes);
   const width = parseFloat(widthStr?.toString() || '18');
   const height = parseFloat(heightStr?.toString() || '18');
   const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
@@ -71,7 +72,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
   // ---- Colors & Border ----
 
   const resolveColor = (path, fallback) => {
-    return (0, _figmaVariablesResolver.getVariableByName)(path, modes) || fallback;
+    return (0, _figmaVariablesResolver.getVariableByName)(path, modes);
   };
 
   // Background Color
@@ -125,10 +126,9 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)(function Radio
     backgroundColor,
     justifyContent: 'center',
     alignItems: 'center',
-    // Web shadow (ring)
-    ...(_reactNative.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 ? (0, _shadow.boxShadow)(`0px 0px 0px ${shadowSize}px ${shadowColor}`) : {})
   };
   const selectorStyle = {
     width: selectorSize,

package/lib/commonjs/components/RechargeCard/RechargeCard.js

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

package/lib/commonjs/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -9,7 +9,6 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _numberUtils = require("../../utils/number-utils");
-var _Title = _interopRequireDefault(require("../Title/Title"));
 var _LinearProgress = _interopRequireDefault(require("../LinearProgress/LinearProgress"));
 var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -63,6 +62,7 @@ const DEFAULT_TARGET = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+  label,
   currency = '₹',
   current = DEFAULT_CURRENT,
   target = DEFAULT_TARGET,
@@ -70,6 +70,7 @@ function SavingsGoalSummary({
   modes = _reactUtils.EMPTY_MODES,
   style,
   titleStyle,
+  labelStyle,
   legendStyle
 }) {
   // Merge caller modes on top of the defaults so callers can override
@@ -117,6 +118,40 @@ function SavingsGoalSummary({
   const percentageLabel = `${Math.round(resolvedProgress * 100)}%`;
   const gap = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/gap', mergedModes) ?? 23;
   const legendGap = (0, _figmaVariablesResolver.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 = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontSize', mergedModes) ?? 29;
+  const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontFamily', mergedModes) ?? 'JioType Var';
+  const valueRawLineHeight = (0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900);
+  const valueColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/value/color', mergedModes) ?? '#0d0d0f';
+
+  // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+  // (Figma 12 / 400). Only rendered when a `label` is supplied.
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontSize', mergedModes) ?? 12;
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontFamily', mergedModes) ?? 'JioType Var';
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/lineHeight', mergedModes) ?? 16;
+  const labelFontWeight = String((0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('savingsGoalSummary/label/color', mergedModes) ?? '#0d0d0f';
+  const labelNode = label == null || label === false ? null : typeof label === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [{
+      color: labelColor,
+      fontFamily: labelFontFamily,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+      width: '100%'
+    }, labelStyle],
+    children: label
+  }) : (() => {
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(label, mergedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  })();
   const customLegend = children ? (0, _reactUtils.cloneChildrenWithModes)(children, mergedModes) : null;
   const defaultLegend = !customLegend && (current || target) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [current && /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
@@ -139,12 +174,22 @@ function SavingsGoalSummary({
       gap,
       alignItems: 'stretch'
     }, style],
-    accessibilityLabel: `Savings goal progress, ${percentageLabel}`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
-      title: percentageLabel,
-      modes: mergedModes,
-      style: TITLE_CONTAINER_STYLE,
-      textStyle: titleStyle
+    accessibilityLabel: typeof label === 'string' ? `${label}, ${percentageLabel}` : `Savings goal progress, ${percentageLabel}`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: HEADER_GROUP_STYLE,
+      children: [labelNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [{
+          color: valueColor,
+          fontFamily: valueFontFamily,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          fontWeight: valueFontWeight,
+          width: '100%'
+        }, titleStyle],
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: percentageLabel
+      })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
       value: resolvedProgress,
       modes: mergedModes
@@ -172,10 +217,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'
 };
 var _default = exports.default = SavingsGoalSummary;