jfs-components 0.1.12 → 0.1.17

package/lib/module/components/LottiePlayer/LottiePlayer.js

@@ -22,8 +22,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number(getVariableByName('media/width', modes));
+  const height = Number(getVariableByName('media/height', modes));
   return {
     width,
     height

package/lib/module/components/LottiePlayer/LottiePlayer.web.js

@@ -13,8 +13,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
-  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  const width = Number(getVariableByName('media/width', modes));
+  const height = Number(getVariableByName('media/height', modes));
   return {
     width,
     height

package/lib/module/components/MediaCard/MediaCard.js

@@ -34,7 +34,7 @@ export function MediaCard({
   modes = EMPTY_MODES,
   style
 }) {
-  const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
+  const radius = parseFloat(getVariableByName('cardMedia/radius', modes));
   const containerStyle = {
     borderRadius: radius,
     overflow: 'hidden',
@@ -102,11 +102,11 @@ export function Title({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52');
-  const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68');
-  const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900';
+  const color = getVariableByName('cardMedia/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes);
   const textStyle = {
     color,
     fontSize,
@@ -150,9 +150,9 @@ export function Footer({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24');
-  const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16');
-  const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12');
+  const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes));
+  const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes));
+  const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes));
 
   // Figma tokens:
   //   blur/minimal/background -> tint laid over the live blur, also used
@@ -163,8 +163,8 @@ export function Footer({
   //                              with the previous expo-blur scale) and
   //                              maps it internally — here we convert the
   //                              token's radius to that intensity scale.
-  const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
-  const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
+  const glassBgColor = getVariableByName('blur/minimal/background', modes);
+  const blurRadius = parseFloat(getVariableByName('blur/minimal', modes));
   const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)));
 
   // Pick the iOS/Android material tint from "Contrast Context" mode so the
@@ -213,11 +213,11 @@ export function FooterTitle({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff';
-  const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14');
-  const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16');
-  const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800';
+  const color = getVariableByName('cardMedia/footer/title/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes);
   return /*#__PURE__*/_jsx(Text, {
     style: [{
       color,
@@ -241,11 +241,11 @@ export function FooterSubtitle({
 }) {
   const context = useContext(MediaCardContext);
   const modes = propModes || context.modes || {};
-  const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1';
-  const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12');
-  const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var';
-  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14');
-  const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400';
+  const color = getVariableByName('cardMedia/footer/subtitle/color', modes);
+  const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes));
+  const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes);
+  const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes));
+  const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes);
   return /*#__PURE__*/_jsx(Text, {
     style: [{
       color,

package/lib/module/components/MessageField/MessageField.js

@@ -45,13 +45,13 @@ function firstError(error) {
 function useMessageFieldTokens(modes) {
   return useMemo(() => {
     const wrapperGap = toNumber(getVariableByName('messageField/gap', modes), 8);
-    const labelColor = getVariableByName('messageField/label/foreground', modes) || '#000000';
-    const labelFontFamily = getVariableByName('messageField/label/fontFamily', modes) || 'JioType Var';
+    const labelColor = getVariableByName('messageField/label/foreground', modes);
+    const labelFontFamily = getVariableByName('messageField/label/fontFamily', modes);
     const labelFontSize = toNumber(getVariableByName('messageField/label/fontSize', modes), 14);
     const labelLineHeight = toNumber(getVariableByName('messageField/label/lineHeight', modes), 17);
     const labelFontWeight = toFontWeight(getVariableByName('messageField/label/fontWeight', modes), '500');
-    const textareaBackground = getVariableByName('messageField/textarea/background', modes) || '#ffffff';
-    const textareaBorderColor = getVariableByName('messageField/textarea/border/color', modes) || '#b5b6b7';
+    const textareaBackground = getVariableByName('messageField/textarea/background', modes);
+    const textareaBorderColor = getVariableByName('messageField/textarea/border/color', modes);
     const textareaBorderSize = toNumber(getVariableByName('messageField/textarea/border/size', modes), 1.5);
     const textareaRadius = toNumber(getVariableByName('messageField/textarea/radius', modes), 8);
     const textareaPadding = toNumber(getVariableByName('messageField/textarea/padding', modes), 12);
@@ -64,13 +64,13 @@ function useMessageFieldTokens(modes) {
     // the `FormField States` cascade once typed-state tokens land. We
     // never re-route this through another token (e.g. the counter
     // color) because that conflates two semantically distinct tokens.
-    const inputTextColor = getVariableByName('messageField/text/foreground', modes) || '#707275';
-    const inputFontFamily = getVariableByName('messageField/text/fontFamily', modes) || 'JioType Var';
+    const inputTextColor = getVariableByName('messageField/text/foreground', modes);
+    const inputFontFamily = getVariableByName('messageField/text/fontFamily', modes);
     const inputFontSize = toNumber(getVariableByName('messageField/text/fontSize', modes), 16);
     const inputLineHeight = toNumber(getVariableByName('messageField/text/lineHeight', modes), 21);
     const inputFontWeight = toFontWeight(getVariableByName('messageField/text/fontWeight', modes), '400');
-    const counterColor = getVariableByName('messageField/maxLength/foreground', modes) || '#24262b';
-    const counterFontFamily = getVariableByName('messageField/maxLength/fontFamily', modes) || 'JioType Var';
+    const counterColor = getVariableByName('messageField/maxLength/foreground', modes);
+    const counterFontFamily = getVariableByName('messageField/maxLength/fontFamily', modes);
     const counterFontSize = toNumber(getVariableByName('messageField/maxLength/fontSize', modes), 14);
     const counterLineHeight = toNumber(getVariableByName('messageField/maxLength/lineHeight', modes), 18);
     const counterFontWeight = toFontWeight(getVariableByName('messageField/maxLength/fontWeight', modes), '400');

package/lib/module/components/MoneyValue/MoneyValue.js

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

package/lib/module/components/NavArrow/NavArrow.js

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

package/lib/module/components/NoteInput/NoteInput.js

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

package/lib/module/components/Nudge/Nudge.js

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

package/lib/module/components/OTP/OTP.js

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

package/lib/module/components/PageHero/PageHero.js

@@ -58,31 +58,31 @@ function PageHero({
     ...globalModes,
     ...propModes
   }), [globalModes, propModes]);
-  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
-  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0;
-  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+  const gap = Number(getVariableByName('PageHero/gap', modes));
+  const paddingHorizontal = Number(getVariableByName('PageHero/padding/horizontal', modes));
+  const textWrapGap = Number(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(getVariableByName('media/width', modes)) || 117;
-  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117;
-  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff';
-  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System';
-  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18;
-  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700;
-  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20;
-  const headlineColor = getVariableByName('PageHero/headline/color', modes) || '#ffffff';
-  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes) || 'System';
-  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29;
-  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes) || 900;
-  const headlineLineHeight = Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29;
+  const mediaWidth = Number(getVariableByName('media/width', modes));
+  const mediaHeight = Number(getVariableByName('media/height', modes));
+  const eyebrowColor = getVariableByName('PageHero/eyebrow/color', modes);
+  const eyebrowFontFamily = getVariableByName('PageHero/eyebrow/fontFamily', modes);
+  const eyebrowFontSize = Number(getVariableByName('PageHero/eyebrow/fontSize', modes));
+  const eyebrowFontWeight = getVariableByName('PageHero/eyebrow/fontWeight', modes);
+  const eyebrowLineHeight = Number(getVariableByName('PageHero/eyebrow/lineHeight', modes));
+  const headlineColor = getVariableByName('PageHero/headline/color', modes);
+  const headlineFontFamily = getVariableByName('PageHero/headline/fontFamily', modes);
+  const headlineFontSize = Number(getVariableByName('PageHero/headline/fontSize', modes));
+  const headlineFontWeight = getVariableByName('PageHero/headline/fontWeight', modes);
+  const headlineLineHeight = Number(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(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16;
+  const supportingTextLineHeight = Number(getVariableByName('PageHero/supportingText/lineHeight', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

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/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,