jfs-components 0.1.12 → 0.1.18

package/lib/commonjs/components/MoneyValue/MoneyValue.js

@@ -92,14 +92,14 @@ function MoneyValue({
   }, [value, negative, hidden]);
 
   // Resolve typography and layout tokens from Figma
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes) || '#0f0d0a';
-  const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes) || 14;
-  const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes) || 18;
-  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes) || 14;
-  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes) || 18;
-  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes) || 500;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/text/color', modes);
+  const currencyFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/fontSize', modes);
+  const currencyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/currency/lineHeight', modes);
+  const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/fontSize', modes);
+  const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/value/lineHeight', modes);
+  const fontWeightValue = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontWeight', modes);
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes) || 'System';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/fontFamily', modes);
   const gap = (0, _figmaVariablesResolver.getVariableByName)('moneyValue/gap', modes) ?? 4;
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes

package/lib/commonjs/components/NavArrow/NavArrow.js

@@ -23,14 +23,14 @@ const touchTargetStyle = {
   justifyContent: 'center'
 };
 function resolveNavArrowTokens(modes) {
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes) || '#24262b';
-  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
-  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
-  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
-  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
-  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
-  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/color', modes);
+  const widthToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes));
+  const heightToken = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes));
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes));
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes);
+  const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes));
+  const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes));
+  const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes));
   return {
     iconColor,
     iconWidth,

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/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
 var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
@@ -71,7 +70,9 @@ function ProductMerchandisingCard({
   const rawId = (0, _react.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 = (0, _react.useMemo)(() => normalizeImageSource(imageSource), [imageSource]);
   const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
   const containerStyle = {
@@ -165,57 +166,63 @@ function ProductMerchandisingCard({
       children: [normalizedImageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: _reactNative.StyleSheet.absoluteFill,
         pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
-          style: _reactNative.StyleSheet.absoluteFill,
-          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
-            width: "100%",
-            height: "100%",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
-                id: blurMaskId,
-                x1: "0",
-                y1: "0",
-                x2: "0",
-                y2: "1",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0",
-                  stopColor: "#000000",
-                  stopOpacity: 0
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0.35",
-                  stopColor: "#000000",
-                  stopOpacity: 0.5
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "0.7",
-                  stopColor: "#000000",
-                  stopOpacity: 0.92
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
-                  offset: "1",
-                  stopColor: "#000000",
-                  stopOpacity: 1
-                })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Defs, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Filter, {
+              id: blurFilterId,
+              x: "-15%",
+              y: "-15%",
+              width: "130%",
+              height: "130%",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.FeGaussianBlur, {
+                stdDeviation: tokens.imageBlurStdDeviation,
+                edgeMode: "duplicate"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
+              id: blurGradientId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0",
+                stopColor: "#ffffff",
+                stopOpacity: 0
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.35",
+                stopColor: "#ffffff",
+                stopOpacity: 0.5
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "0.7",
+                stopColor: "#ffffff",
+                stopOpacity: 0.92
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+                offset: "1",
+                stopColor: "#ffffff",
+                stopOpacity: 1
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Mask, {
+              id: blurMaskId,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+                x: "0",
+                y: "0",
+                width: "100%",
+                height: "100%",
+                fill: `url(#${blurGradientId})`
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
-              x: "0",
-              y: "0",
-              width: "100%",
-              height: "100%",
-              fill: `url(#${blurMaskId})`
             })]
-          }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-            source: normalizedImageSource,
-            blurRadius: tokens.imageBlurRadius,
-            resizeMode: "cover",
-            style: {
-              position: 'absolute',
-              left: 0,
-              right: 0,
-              bottom: 0,
-              width: '100%',
-              height
-            }
-          })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Image, {
+            href: normalizedImageSource,
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            preserveAspectRatio: "xMidYMid slice",
+            filter: `url(#${blurFilterId})`,
+            mask: `url(#${blurMaskId})`
+          })]
         })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
         tint: "dark",
@@ -334,19 +341,16 @@ function resolveTokens(modes) {
   const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
   const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
 
-  // `Image.blurRadius` is interpreted differently per platform — iOS applies a
-  // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
-  // numeric radius — so we tune each platform to land on the same perceived
-  // "minimal" frosted strength as the Figma design.
-  const imageBlurRadius = _reactNative.Platform.select({
-    ios: Math.max(6, Math.round(blurRadius * 0.5)),
-    android: Math.max(12, Math.round(blurRadius * 0.95)),
-    default: Math.max(8, Math.round(blurRadius * 0.6))
-  });
+  // 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/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,