jfs-components 0.1.12 → 0.1.17

package/src/components/MoneyValue/MoneyValue.tsx

@@ -115,20 +115,20 @@ function MoneyValue({
   }, [value, negative, hidden])
 
   // Resolve typography and layout tokens from Figma
-  const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
+  const textColor = getVariableByName('moneyValue/text/color', modes)
 
-  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes) || 14
-  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes) || 18
+  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes)
+  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes)
 
-  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes) || 14
-  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes) || 18
+  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes)
+  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes)
 
-  const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes) || 500
+  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/src/components/NavArrow/NavArrow.tsx

@@ -58,19 +58,19 @@ interface NavArrowTokens {
 
 function resolveNavArrowTokens(modes: Modes): NavArrowTokens {
   const iconColor =
-    (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
+    (getVariableByName('navArrow/icon/color', modes) as string)
 
-  const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6
-  const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10
+  const widthToken = Number(getVariableByName('navArrow/width', modes))
+  const heightToken = Number(getVariableByName('navArrow/height', modes))
   const borderRadius =
-    Number(getVariableByName('navArrow/radius', modes)) || 0
+    Number(getVariableByName('navArrow/radius', modes))
   const backgroundColor =
-    (getVariableByName('navArrow/background', modes) as string) || 'transparent'
+    (getVariableByName('navArrow/background', modes) as string)
 
-  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4
-  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8
+  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes))
+  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes))
   const strokeWeight =
-    Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
+    Number(getVariableByName('navArrow/icon/strokeWeight', modes))
 
   return {
     iconColor,

package/src/components/NoteInput/NoteInput.tsx

@@ -51,20 +51,20 @@ const NoteInput = forwardRef<RNTextInput, NoteInputProps>(function NoteInput({
     const inputRef = useRef<RNTextInput>(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() as TextStyle['fontWeight'] : fontWeightRaw as TextStyle['fontWeight']
 
-    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: ViewStyle = {
         flexDirection: 'row',

package/src/components/Nudge/Nudge.tsx

@@ -63,28 +63,28 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
 }
 
 function resolveNudgeTokens(modes: Modes): NudgeTokens {
-  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 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) || '#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 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: {
@@ -143,7 +143,7 @@ function resolveNudgeTokens(modes: Modes): NudgeTokens {
       width: '100%',
     },
     detailSlotStyle: {
-      gap: getVariableByName('slot/gap', modes) || 8,
+      gap: getVariableByName('slot/gap', modes),
       width: '100%',
     },
     titleTextStyle: {
@@ -160,8 +160,8 @@ function resolveNudgeTokens(modes: Modes): NudgeTokens {
       lineHeight: bodyLineHeight as number,
       fontWeight: bodyFontWeight,
     },
-    iconColor: (getVariableByName('appearance/nudge/icon/color', modes) || '#5d00b5') as string,
-    iconSize: (getVariableByName('nudge/icon/size', modes) || 20) as number,
+    iconColor: (getVariableByName('appearance/nudge/icon/color', modes)) as string,
+    iconSize: (getVariableByName('nudge/icon/size', modes)) as number,
     startSlotGap: startSlotGap as number,
   }
 }

package/src/components/OTP/OTP.tsx

@@ -456,19 +456,19 @@ 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) as string) || '#000000'
-    const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes)) || 24
-    const digitFontFamily = (getVariableByName('pinSlot/digit/fontFamily', modes) as string) || 'JioType Var'
-    const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes)) || 29
-    const digitFontWeight = (getVariableByName('pinSlot/digit/fontWeight', modes) as string) || '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) as string)
+    const digitFontSize = Number(getVariableByName('pinSlot/digit/fontSize', modes))
+    const digitFontFamily = (getVariableByName('pinSlot/digit/fontFamily', modes) as string)
+    const digitLineHeight = Number(getVariableByName('pinSlot/digit/lineHeight', modes))
+    const digitFontWeight = (getVariableByName('pinSlot/digit/fontWeight', modes) as string)
+    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
@@ -478,7 +478,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Idle',
-            }) as string) || '#303338',
+            }) as string),
         [modes],
     )
     const activeUnderlineColor = useMemo(
@@ -486,7 +486,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Active',
-            }) as string) || '#5d00b5',
+            }) as string),
         [modes],
     )
     const errorUnderlineColor = useMemo(
@@ -494,7 +494,7 @@ function OTP({
             (getVariableByName('PinSlot/underline/color', {
                 ...modes,
                 'Input/PINSlot  States': 'Error',
-            }) as string) || '#d92d20',
+            }) as string),
         [modes],
     )
 

package/src/components/PageHero/PageHero.tsx

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

package/src/components/PaymentFeedback/PaymentFeedback.tsx

@@ -44,33 +44,33 @@ export default function PaymentFeedback({
   const { modes: globalModes } = useTokens()
   const modes = { ...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: ViewStyle = {
     flexDirection: 'column',

package/src/components/Popup/Popup.tsx

@@ -133,7 +133,7 @@ const Popup = forwardRef<PopupRef, PopupProps>(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/src/components/ProgressBadge/ProgressBadge.tsx

@@ -62,9 +62,9 @@ function ProgressBadge({
 }: ProgressBadgeProps) {
     // Resolve layout tokens
     const backgroundColor =
-        getVariableByName('progressBadge/background', modes) || '#ffffff'
+        getVariableByName('progressBadge/background', modes)
     const progressColor =
-        getVariableByName('progressBadge/progress/color', modes) || '#ebebed'
+        getVariableByName('progressBadge/progress/color', modes)
     const gap = getVariableByName('progressBadge/gap', modes) ?? 12
     const paddingHorizontal =
         getVariableByName('progressBadge/padding/horizontal', modes) ?? 16
@@ -76,7 +76,7 @@ function ProgressBadge({
 
     // Resolve typography tokens
     const fontFamily =
-        getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium'
+        getVariableByName('progressBadge/fontFamily', modes)
     const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500
     const fontWeight =
         typeof fontWeightRaw === 'number'
@@ -85,11 +85,11 @@ function ProgressBadge({
     const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14
     const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17
     const textColor =
-        getVariableByName('progressBadge/foreground', modes) || '#000000'
+        getVariableByName('progressBadge/foreground', modes)
 
     // Resolve icon tokens
     const iconColor =
-        getVariableByName('progressBadge/icon/color', modes) || '#f50030'
+        getVariableByName('progressBadge/icon/color', modes)
     const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18
 
     const containerStyle: ViewStyle = {

package/src/components/Radio/Radio.tsx

@@ -3,13 +3,13 @@ import {
     Pressable,
     View,
     StyleSheet,
-    Platform,
     ViewStyle,
     DimensionValue,
     StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
@@ -61,9 +61,9 @@ export const Radio = forwardRef<View, RadioProps>(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')
@@ -101,7 +101,7 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
     // ---- Colors & Border ----
 
     const resolveColor = (path: string, fallback: string) => {
-        return getVariableByName(path, modes) || fallback
+        return getVariableByName(path, modes)
     }
 
     // Background Color
@@ -155,10 +155,9 @@ export const Radio = forwardRef<View, RadioProps>(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: ViewStyle = {

package/src/components/RechargeCard/RechargeCard.tsx

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