jfs-components 0.0.37 → 0.0.38

package/src/components/IconButton/IconButton.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from 'react'
 import {
   Pressable,
   type AccessibilityState,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
+import React, { useState, isValidElement, cloneElement } from 'react'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 
 type IconButtonProps = SafePressableProps & {
+  icon?: React.ReactNode;
+  /**
+   * Deprecated: Use icon prop instead
+   */
   iconName?: string;
   modes?: Record<string, any>;
   onPress?: () => void;
@@ -23,13 +26,13 @@ type IconButtonProps = SafePressableProps & {
    */
   isToggle?: boolean;
   /**
-   * Icon to display when isToggle is true and isActive is true
+   * Icon element to display when isToggle is true and isActive is true
    */
-  activeIcon?: string;
+  activeIcon?: React.ReactNode;
   /**
-   * Icon to display when isToggle is true and isActive is false
+   * Icon element to display when isToggle is true and isActive is false
    */
-  inactiveIcon?: string; // Fixed typo in previous thought, user said "inactive icon"
+  inactiveIcon?: React.ReactNode; // Fixed typo in previous thought, user said "inactive icon"
   /**
    * Whether the toggle button is in active state (only used when isToggle is true)
    */
@@ -48,7 +51,8 @@ type IconButtonProps = SafePressableProps & {
  * 
  * @component
  * @param {Object} props - Component props
- * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {React.ReactNode} [props.icon] - The icon element to display
+ * @param {string} [props.iconName] - DEPRECATED: The name of the icon to display from the icon registry
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
  * @param {Function} [props.onPress] - Callback function called when the button is pressed
  * @param {boolean} [props.disabled=false] - Whether the button is disabled
@@ -73,7 +77,8 @@ type IconButtonProps = SafePressableProps & {
  * ```
  */
 function IconButton({
-  iconName = "ic_card",
+  icon,
+  iconName,
   modes = {},
   onPress,
   disabled = false,
@@ -99,7 +104,7 @@ function IconButton({
     ...modes,
     'isToggle': isToggle,
     'isActive': isActive,
-  };
+  }
 
   // Resolve design tokens using only the Figma-defined base tokens for Icon Button (node 72:14)
   const radius = getVariableByName('iconButton/radius', componentModes) ?? 9999
@@ -110,15 +115,17 @@ function IconButton({
   const iconColor = getVariableByName('iconButton/icon/color', componentModes) ?? '#0f0d0a'
   const iconSize = getVariableByName('iconButton/icon/size', componentModes) ?? 18
 
+  // Determine which icon to display
   // Determine which icon to display
   // If isToggle is yes, use active/inactive icons based on isActive state
-  // Otherwise use standard iconName
-  let finalIconName = iconName;
+  // Otherwise use standard icon
+  let finalIcon = icon
+
   if (isToggle) {
     if (isActive && activeIcon) {
-      finalIconName = activeIcon;
+      finalIcon = activeIcon
     } else if (!isActive && inactiveIcon) {
-      finalIconName = inactiveIcon;
+      finalIcon = inactiveIcon
     }
   }
 
@@ -143,7 +150,7 @@ function IconButton({
   }
 
   // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+  const defaultAccessibilityLabel = accessibilityLabel || (iconName ? iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()) : undefined)
 
   // Get web platform support props
   const webProps = usePressableWebSupport({
@@ -205,13 +212,15 @@ function IconButton({
       }}
       {...webProps}
     >
-      <Icon
-        name={finalIconName}
-        size={iconSize}
-        color={iconColor}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      />
+      {isValidElement(finalIcon) ? cloneElement(finalIcon as React.ReactElement<any>, {
+        size: iconSize,
+        width: iconSize,
+        height: iconSize,
+        color: iconColor,
+        fill: iconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      }) : null}
     </Pressable>
   )
 }

package/src/components/IconCapsule/IconCapsule.tsx

@@ -1,11 +1,11 @@
-import React from 'react'
+
+import React, { isValidElement, cloneElement } from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import Icon from '../../icons/Icon'
 
 type IconCapsuleProps = {
-  iconName?: string;
+  icon?: React.ReactNode;
   modes?: Record<string, any>;
   accessibilityLabel?: string;
   accessibilityRole?: string;
@@ -19,28 +19,27 @@ type IconCapsuleProps = {
  * 
  * @component
  * @param {Object} props - Component props
- * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {React.ReactNode} [props.icon] - The icon element to render (e.g., <IconAdd /> or <Icon name="..." />)
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
- * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, defaults to iconName
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers.
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
  * 
  * @example
- * ```jsx
- * // Default icon (ic_card)
- * <IconCapsule modes={{}} />
+ * // With explicit icon component
+ * <IconCapsule icon={<IconAdd />} modes={{}} />
  * 
- * // Custom icon
- * <IconCapsule iconName="ic_rupee" modes={{}} />
+ * // With legacy icon component (if needed)
+ * <IconCapsule icon={<Icon name="ic_rupee" />} modes={{}} />
  * 
  * // With appearance mode
- * <IconCapsule modes={{"Appearance": "Secondary"}} />
+ * <IconCapsule modes={{"Appearance": "Secondary"}} icon={<IconAdd />} />
  * 
  * // With accessibility label
- * <IconCapsule iconName="ic_card" accessibilityLabel={undefined} />
+ * <IconCapsule icon={<IconAdd />} accessibilityLabel="Add Card" />
  * ```
  */
 function IconCapsule({
-  iconName = "ic_card",
+  icon,
   modes: propModes = {},
   accessibilityLabel,
   accessibilityRole = "image",
@@ -73,26 +72,25 @@ function IconCapsule({
     justifyContent: 'center',
   }
 
-  // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+  // Generate default accessibility label if not provided
+  const defaultAccessibilityLabel = accessibilityLabel
 
   return (
     <View
       style={containerStyle}
       accessibilityRole={accessibilityRole}
-      accessibilityLabel={undefined}
+      accessibilityLabel={defaultAccessibilityLabel}
       {...rest}
     >
-      <Icon
-        name={iconName}
-        size={iconSize}
-        color={iconColor}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      />
+      {isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+        size: iconSize, // Support legacy Icon component
+        width: iconSize,
+        height: iconSize,
+        fill: iconColor,
+        color: iconColor, // Support both fill and color props
+      }) : null}
     </View>
   )
 }
 
 export default IconCapsule
-

package/src/components/InputSearch/InputSearch.tsx

@@ -100,7 +100,7 @@ export default function InputSearch({
     // Actually, usually search inputs show clear button when there is text, regardless of focus, OR only when focused.
     // Given the user said "when user is focused or typing in the input, then it's active", I will link 'Active' mode to focus.
     // For the clear button, I'll show it if there is a value.
-    const hasValue = value && value.length > 0;
+    const hasValue = value && value.length > 0
 
     const handleClear = () => {
         if (onChangeText) {

package/src/components/MediaCard/MediaCard.tsx

@@ -1,13 +1,13 @@
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform, Image } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Button, { type ButtonProps } from '../Button/Button';
-import Avatar, { type AvatarProps } from '../Avatar/Avatar';
+import React, { createContext, useContext, isValidElement, cloneElement } from 'react'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform, Image } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Button, { type ButtonProps } from '../Button/Button'
+import Avatar, { type AvatarProps } from '../Avatar/Avatar'
 
 /**
  * Context to share 'modes' with child components.
  */
-const MediaCardContext = createContext<{ modes?: Record<string, any> }>({});
+const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
 
 export interface MediaCardProps {
     /**
@@ -41,8 +41,8 @@ export function MediaCard({
     style,
 }: MediaCardProps) {
     // Container Tokens
-    const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24');
-    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0');
+    const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
+    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0')
     // Dimensions from Figma: w=369, h=308. We can make it flexible or default to these?
     // Usually components should be flexible, but stories will constrain them.
     // Figma context shows fixed/hug behavior. Let's start with flex container.
@@ -56,11 +56,11 @@ export function MediaCard({
         // However, to match "Maximize existing component usage", we follow patterns.
         // We'll trust the parent layout or style prop for width/height.
         minHeight: 308, // inferred from Figma height as a good default or minimum
-    };
+    }
 
     const mediaWithModes = isValidElement(media)
         ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
-        : media;
+        : media
 
     return (
         <MediaCardContext.Provider value={{ modes }}>
@@ -74,7 +74,7 @@ export function MediaCard({
                 {children}
             </View>
         </MediaCardContext.Provider>
-    );
+    )
 }
 
 // ----------------------------------------------------------------------------
@@ -91,7 +91,7 @@ export function Header({ children, style }: { children?: React.ReactNode; style?
         <View style={[{ padding: 16, flex: 1 }, style]}>
             {children}
         </View>
-    );
+    )
 }
 
 /**
@@ -99,14 +99,14 @@ export function Header({ children, style }: { children?: React.ReactNode; style?
  * Tokens: cardMedia/title/*
  */
 export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    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) || '#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 textStyle: TextStyle = {
         color,
@@ -114,9 +114,9 @@ export function Title({ children, style, modes: propModes }: { children?: React.
         fontFamily,
         lineHeight,
         fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
+    }
 
-    return <Text style={[textStyle, style]}>{children}</Text>;
+    return <Text style={[textStyle, style]}>{children}</Text>
 }
 
 /**
@@ -124,20 +124,20 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * Tokens: cardMedia/footer/*, glass/minimal, blur/minimal
  */
 export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(MediaCardContext)
+    const modes = propModes || context.modes || {}
 
     // Tokens
-    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) || '24')
+    const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16')
+    const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12')
 
     // Glass Effect
     // Figma:
     // blur/minimal/background: "#1414174a"
     // blur/minimal: 29
-    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a';
-    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29');
+    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a'
+    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29')
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
@@ -149,13 +149,13 @@ export function Footer({ children, style, modes: propModes }: { children?: React
         // Web-specific backdrop filter for glass effect
         // @ts-ignore
         ...(Platform.OS === 'web' ? { backdropFilter: `blur(${blurRadius}px)` } : {}),
-    };
+    }
 
     return (
         <View style={[containerStyle, style]}>
             {children}
         </View>
-    );
+    )
 }
 
 /**
@@ -163,20 +163,20 @@ export function Footer({ children, style, modes: propModes }: { children?: React
  * Tokens: cardMedia/footer/title/*
  */
 export function FooterTitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    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) || '#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'
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
             {children}
         </Text>
-    );
+    )
 }
 
 /**
@@ -184,27 +184,27 @@ export function FooterTitle({ children, style, modes: propModes }: { children?:
  * Tokens: cardMedia/footer/subtitle/*
  */
 export function FooterSubtitle({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(MediaCardContext);
-    const modes = propModes || context.modes || {};
+    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) || '#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'
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
             {children}
         </Text>
-    );
+    )
 }
 
 // Attach sub-components
-MediaCard.Header = Header;
-MediaCard.Title = Title;
-MediaCard.Footer = Footer;
-MediaCard.FooterTitle = FooterTitle;
-MediaCard.FooterSubtitle = FooterSubtitle;
+MediaCard.Header = Header
+MediaCard.Title = Title
+MediaCard.Footer = Footer
+MediaCard.FooterTitle = FooterTitle
+MediaCard.FooterSubtitle = FooterSubtitle
 
-export default MediaCard;
+export default MediaCard

package/src/components/NavArrow/NavArrow.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
+import React, { isValidElement, cloneElement } from 'react'
 import { View, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import Icon from '../../icons/Icon'
 
 type NavArrowDirection = 'Back' | 'Forward' | 'Down'
 
@@ -14,6 +13,11 @@ type NavArrowProps = {
   style?: ViewStyle
   /** Accessibility label for the arrow */
   accessibilityLabel?: string
+  /**
+   * The icon element to display.
+   * Should be a ReactNode (e.g. <IconChevronRight />)
+   */
+  icon?: React.ReactNode
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel'>
 
 /**
@@ -40,6 +44,7 @@ export default function NavArrow({
   modes = {},
   style,
   accessibilityLabel,
+  icon,
   ...rest
 }: NavArrowProps) {
   // Resolve design tokens
@@ -92,21 +97,14 @@ export default function NavArrow({
       accessibilityLabel={undefined}
       {...rest}
     >
-      <Icon
-        name={iconName}
-        size={24} // Internal icon size is fixed/clipped by container in design but Icon requires a size
-        color={iconColor}
-        style={{
-          // Center the larger icon within the small container if needed,
-          // though flex center on container handles this.
-          // If the container is 6x10 and icon is 24, we might want to ensure it doesn't affect layout
-          // but Flexbox 'center' centers the content.
-          // However, if the icon component has its own frame, it might overflow.
-          // React Native View has overflow: 'hidden' by default if borderRadius is set? No.
-          // We might want overflow: 'hidden' if strictly following design clip.
-          // Figma design had "overflow-clip" class.
-        }}
-      />
+
+      {isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+        size: 24,
+        width: 24,
+        height: 24,
+        color: iconColor,
+        fill: iconColor,
+      }) : null}
     </View>
   )
 }

package/src/components/RechargeCard/RechargeCard.tsx

@@ -1,10 +1,10 @@
-import React, { isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
-import ButtonGroup from '../ButtonGroup/ButtonGroup';
-import AvatarGroup from '../AvatarGroup/AvatarGroup';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import MoneyValue from '../MoneyValue/MoneyValue';
-import Button from '../Button/Button';
+import React, { isValidElement, cloneElement } from 'react'
+import { View, Text, StyleSheet, type ViewStyle } from 'react-native'
+import ButtonGroup from '../ButtonGroup/ButtonGroup'
+import AvatarGroup from '../AvatarGroup/AvatarGroup'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import MoneyValue from '../MoneyValue/MoneyValue'
+import Button from '../Button/Button'
 
 
 type RechargeCardProps = {
@@ -66,55 +66,55 @@ export default function RechargeCard({
     style,
 }: RechargeCardProps) {
     // Container Tokens
-    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
-    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) || 328, 10);
+    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff'
+    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) || 328, 10)
 
     // Header Tokens
-    const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
-    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) || 4, 10)
+    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d'
+    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'
 
     // 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) || 0, 10)
+    const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10)
 
     // Spec Label Tokens
-    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
-    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) || '#13002d'
+    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'
 
     // Spec Value Tokens
-    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
-    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) || '#310064'
+    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'
 
     // Disclaimer Tokens
-    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
-    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) || '#22004a'
+    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'
 
     // Button Group Tokens
     // Handled by ButtonGroup component directly
 
     // Helpers
-    const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
+    const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight
 
     // Pass modes to subscription children (e.g. AvatarGroup)
     // Now encapsulated, so we just pass children to AvatarGroup
-    const hasSubscriptions = React.Children.count(subscriptionContent) > 0;
+    const hasSubscriptions = React.Children.count(subscriptionContent) > 0
 
 
     return (
@@ -235,5 +235,5 @@ export default function RechargeCard({
                 {actions}
             </ButtonGroup>
         </View>
-    );
+    )
 }