jfs-components 0.0.37 → 0.0.38

package/src/components/CardFeedback/CardFeedback.tsx

@@ -1,12 +1,13 @@
-import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import IconComponent from '../../icons/Icon';
+import React, { createContext, useContext, isValidElement, cloneElement } from 'react'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+// Internal Icon component usage is deprecated but kept for backward compatibility
+import IconComponent from '../../icons/Icon'
 
 /**
  * Context to share 'modes' with child components.
  */
-const CardFeedbackContext = createContext<{ modes?: Record<string, any> }>({});
+const CardFeedbackContext = createContext<{ modes?: Record<string, any> }>({})
 
 export interface CardFeedbackProps {
     /**
@@ -38,13 +39,13 @@ export function CardFeedback({
         'Context': 'Nudge&Alert',
         'Semantic Intent': 'System',
         ...propModes,
-    };
+    }
     // Container Tokens
-    const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9';
-    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12');
-    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8');
-    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12');
-    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12');
+    const backgroundColor = getVariableByName('cardFeedback/background', modes) || '#dbf0d9'
+    const radius = parseFloat(getVariableByName('cardFeedback/radius', modes) || '12')
+    const gap = parseFloat(getVariableByName('cardFeedback/gap', modes) || '8')
+    const paddingHorizontal = parseFloat(getVariableByName('cardFeedback/padding/horizontal', modes) || '12')
+    const paddingVertical = parseFloat(getVariableByName('cardFeedback/padding/vertical', modes) || '12')
 
     const containerStyle: ViewStyle = {
         backgroundColor,
@@ -56,7 +57,7 @@ export function CardFeedback({
         minHeight: 59,
         alignItems: 'flex-start',
         flexDirection: 'column',
-    };
+    }
 
     return (
         <CardFeedbackContext.Provider value={{ modes }}>
@@ -64,7 +65,7 @@ export function CardFeedback({
                 {children}
             </View>
         </CardFeedbackContext.Provider>
-    );
+    )
 }
 
 // ----------------------------------------------------------------------------
@@ -75,39 +76,45 @@ export function CardFeedback({
  * Icon Wrapper
  * Tokens: cardFeedback/icon/size, appearanceFeedback/cardFeedback/icon/color
  */
-export function Icon({ children, style, modes: propModes, icon }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any>; icon?: string }) {
-    const context = useContext(CardFeedbackContext);
-    const modes = propModes || context.modes || {};
+export function Icon({ children, style, modes: propModes, icon, iconName }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any>; icon?: React.ReactNode; iconName?: string }) {
+    const context = useContext(CardFeedbackContext)
+    const modes = propModes || context.modes || {}
 
-    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20');
+    const size = parseFloat(getVariableByName('cardFeedback/icon/size', modes) || '20')
     // Color for the icon itself
-    const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes);
-    console.log(color);
+    const color = getVariableByName('appearanceFeedback/cardFeedback/icon/color', modes)
+    console.log(color)
     const containerStyle: ViewStyle = {
         width: size,
         height: size,
         justifyContent: 'center',
         alignItems: 'center',
         overflow: 'hidden',
-    };
+    }
 
     // Pass modes to children (e.g., icon components that accept modes)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } })
         }
-        return child;
-    });
+        return child
+    })
 
     return (
         <View style={[containerStyle, style]}>
-            {icon ? (
-                <IconComponent name={icon} size={size} color={color} />
+            {(icon || iconName) ? (
+                isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+                    size,
+                    color,
+                    modes: { ...modes, ...((icon as React.ReactElement<any>).props.modes || {}) }
+                }) : (
+                    iconName ? <IconComponent name={iconName} size={size} color={color} /> : null
+                )
             ) : (
                 childrenWithModes
             )}
         </View>
-    );
+    )
 }
 
 /**
@@ -116,24 +123,24 @@ export function Icon({ children, style, modes: propModes, icon }: { children?: R
  * Tokens: cardFeedback/text/gap
  */
 export function Content({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
-    const context = useContext(CardFeedbackContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardFeedbackContext)
+    const modes = propModes || context.modes || {}
 
-    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8');
+    const gap = parseFloat(getVariableByName('cardFeedback/text/gap', modes) || '8')
 
     // Pass modes to children (Title, Body, etc.)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } })
         }
-        return child;
-    });
+        return child
+    })
 
     return (
         <View style={[{ gap, width: '100%' }, style]}>
             {childrenWithModes}
         </View>
-    );
+    )
 }
 
 /**
@@ -141,14 +148,14 @@ export function Content({ children, style, modes: propModes }: { children?: Reac
  * Tokens: cardFeedback/title/*
  */
 export function Title({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(CardFeedbackContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardFeedbackContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14');
-    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17');
-    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500';
+    const color = getVariableByName('cardFeedback/title/color', modes) || '#0f0d0a'
+    const fontSize = parseFloat(getVariableByName('cardFeedback/title/fontSize', modes) || '14')
+    const fontFamily = getVariableByName('cardFeedback/title/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/title/lineHeight', modes) || '17')
+    const fontWeight = getVariableByName('cardFeedback/title/fontWeight', modes) || '500'
 
     const textStyle: TextStyle = {
         color,
@@ -156,9 +163,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>
 }
 
 /**
@@ -166,14 +173,14 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * Tokens: cardFeedback/body/*
  */
 export function Body({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<TextStyle>; modes?: Record<string, any> }) {
-    const context = useContext(CardFeedbackContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardFeedbackContext)
+    const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14';
-    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16');
-    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400';
+    const color = getVariableByName('cardFeedback/body/color', modes) || '#1f1a14'
+    const fontSize = parseFloat(getVariableByName('cardFeedback/body/fontSize', modes) || '12')
+    const fontFamily = getVariableByName('cardFeedback/body/fontFamily', modes) || 'JioType Var'
+    const lineHeight = parseFloat(getVariableByName('cardFeedback/body/lineHeight', modes) || '16')
+    const fontWeight = getVariableByName('cardFeedback/body/fontWeight', modes) || '400'
 
     const textStyle: TextStyle = {
         color,
@@ -181,9 +188,9 @@ export function Body({ children, style, modes: propModes }: { children?: React.R
         fontFamily,
         lineHeight,
         fontWeight: fontWeight as TextStyle['fontWeight'],
-    };
+    }
 
-    return <Text style={[textStyle, style]}>{children}</Text>;
+    return <Text style={[textStyle, style]}>{children}</Text>
 }
 
 /**
@@ -191,31 +198,31 @@ export function Body({ children, style, modes: propModes }: { children?: React.R
  * Tokens: cardFeedback/actionSlot/gap
  */
 export function Action({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
-    const context = useContext(CardFeedbackContext);
-    const modes = propModes || context.modes || {};
+    const context = useContext(CardFeedbackContext)
+    const modes = propModes || context.modes || {}
 
-    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0');
+    const gap = parseFloat(getVariableByName('cardFeedback/actionSlot/gap', modes) || '0')
 
     // "Maximise existing component usage" -> Pass modes to children (Buttons)
     const childrenWithModes = React.Children.map(children, child => {
         if (isValidElement(child)) {
-            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } });
+            return cloneElement(child as React.ReactElement<{ modes?: Record<string, any> }>, { modes: { ...(child.props as any).modes, ...modes } })
         }
-        return child;
-    });
+        return child
+    })
 
     return (
         <View style={[{ gap, flexDirection: 'row', flexWrap: 'wrap' }, style]}>
             {childrenWithModes}
         </View>
-    );
+    )
 }
 
 // Attach sub-components
-CardFeedback.Icon = Icon;
-CardFeedback.Content = Content;
-CardFeedback.Title = Title;
-CardFeedback.Body = Body;
-CardFeedback.Action = Action;
+CardFeedback.Icon = Icon
+CardFeedback.Content = Content
+CardFeedback.Title = Title
+CardFeedback.Body = Body
+CardFeedback.Action = Action
 
-export default CardFeedback;
+export default CardFeedback

package/src/components/ChipGroup/ChipGroup.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { View, type StyleProp, type ViewStyle } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { flattenChildren } from '../../utils/react-utils';
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { flattenChildren } from '../../utils/react-utils'
 
 export type ChipGroupProps = {
     /**
@@ -35,7 +35,7 @@ function ChipGroup({
     testID,
 }: ChipGroupProps) {
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8;
+    const gap = parseInt(getVariableByName('chipGroup/gap', modes), 10) || 8
 
     // --- Styles ---
     const containerStyle: ViewStyle = {
@@ -43,28 +43,28 @@ function ChipGroup({
         alignItems: 'flex-start',
         flexWrap: 'wrap',
         gap: gap,
-    };
+    }
 
     // Flatten children to handle Fragments properly
-    const flatChildren = flattenChildren(children);
+    const flatChildren = flattenChildren(children)
 
     // Clone children to pass `modes` prop
     const childrenWithModes = React.Children.map(flatChildren, (child) => {
         if (React.isValidElement(child)) {
             // Pass merged modes (parent modes + child modes)
-            const element = child as React.ReactElement<any>;
-            const childModes = element.props.modes || {};
-            const mergedModes = { ...modes, ...childModes };
-            return React.cloneElement(element, { modes: mergedModes });
+            const element = child as React.ReactElement<any>
+            const childModes = element.props.modes || {}
+            const mergedModes = { ...modes, ...childModes }
+            return React.cloneElement(element, { modes: mergedModes })
         }
-        return child;
-    });
+        return child
+    })
 
     return (
         <View style={[containerStyle, style]} testID={testID}>
             {childrenWithModes}
         </View>
-    );
+    )
 }
 
-export default ChipGroup;
+export default ChipGroup

package/src/components/ChipSelect/ChipSelect.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
-import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import Icon from '../../icons/Icon';
+import { View, Text, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
+import React, { isValidElement, cloneElement } from 'react'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 
 export type ChipSelectProps = {
     /**
@@ -15,15 +14,22 @@ export type ChipSelectProps = {
      */
     active?: boolean;
     /**
-     * Icon name to display in Idle state (when active is false).
-     * @default "ic_calendar_week"
+     * Icon element to display in Idle state (when active is false).
      */
-    icon?: string;
+    icon?: React.ReactNode;
+    /**
+     * Deprecated: Use icon prop instead
+     */
+    iconName?: string;
     /**
      * Whether to show the close icon in Active state (when active is true).
      * @default true
      */
     close?: boolean;
+    /**
+     * Custom close icon element to display when active is true and close is true.
+     */
+    closeIcon?: React.ReactNode;
     /**
      * Modes for design token resolution.
      */
@@ -49,8 +55,10 @@ export type ChipSelectProps = {
 function ChipSelect({
     label = 'Date',
     active = false,
-    icon = 'ic_calendar_week',
+    icon,
+    iconName,
     close = true,
+    closeIcon,
     modes = {},
     style,
     labelSlot,
@@ -61,26 +69,26 @@ function ChipSelect({
     const resolvedModes = {
         ...modes,
         'ChipSelect State': active ? 'Active' : 'Idle',
-    };
+    }
 
     // --- Token Resolution ---
-    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4;
-    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16;
-    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0;
-    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999;
+    const gap = parseInt(getVariableByName('chipSelect/gap', resolvedModes), 10) || 4
+    const paddingHorizontal = parseInt(getVariableByName('chipSelect/padding/horizontal', resolvedModes), 10) || 16
+    const paddingVertical = parseInt(getVariableByName('chipSelect/padding/vertical', resolvedModes), 10) || 0
+    const radius = parseInt(getVariableByName('chipSelect/radius', resolvedModes), 10) || 999
 
     // Background
-    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5';
+    const backgroundColor = getVariableByName('chipSelect/background', resolvedModes) || '#f5f5f5'
 
     // Text Styles
-    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f';
-    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14;
-    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var';
-    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32;
-    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700';
+    const textColor = getVariableByName('chipSelect/foreground', resolvedModes) || '#0d0d0f'
+    const fontSize = parseInt(getVariableByName('chipSelect/fontSize', resolvedModes), 10) || 14
+    const fontFamily = getVariableByName('chipSelect/fontFamily', resolvedModes) || 'JioType Var'
+    const lineHeight = parseInt(getVariableByName('chipSelect/lineHeight', resolvedModes), 10) || 32
+    const fontWeight = getVariableByName('chipSelect/fontWeight', resolvedModes) || '700'
 
     // Icon Styles
-    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16;
+    const iconSize = parseInt(getVariableByName('chipSelect/icon/size', resolvedModes), 10) || 16
 
     // --- Styles ---
     const containerStyle: ViewStyle = {
@@ -92,7 +100,7 @@ function ChipSelect({
         paddingHorizontal: paddingHorizontal,
         paddingVertical: paddingVertical,
         gap: gap,
-    };
+    }
 
     const textStyle: TextStyle = {
         color: textColor,
@@ -101,18 +109,18 @@ function ChipSelect({
         lineHeight: lineHeight,
         fontWeight: fontWeight as any,
         textAlign: 'center',
-    };
+    }
 
     const renderLabel = () => {
         if (labelSlot) {
             if (React.isValidElement(labelSlot)) {
                 // Pass resolved modes to slot
-                return React.cloneElement(labelSlot as React.ReactElement<any>, { modes: resolvedModes });
+                return React.cloneElement(labelSlot as React.ReactElement<any>, { modes: resolvedModes })
             }
-            return labelSlot;
+            return labelSlot
         }
-        return <Text style={textStyle}>{label}</Text>;
-    };
+        return <Text style={textStyle}>{label}</Text>
+    }
 
     return (
         <TouchableOpacity
@@ -121,18 +129,30 @@ function ChipSelect({
             activeOpacity={0.8}
         >
             {/* Start Icon */}
-            {icon && (
-                <Icon name={icon} size={iconSize} color={textColor} />
+            {(icon || iconName) && (
+                isValidElement(icon) ? cloneElement(icon as React.ReactElement<any>, {
+                    size: iconSize,
+                    width: iconSize,
+                    height: iconSize,
+                    color: textColor,
+                    fill: textColor
+                }) : null
             )}
 
             {renderLabel()}
 
             {/* End/Close Icon (Only when active AND close is true) */}
             {active && close && (
-                <Icon name="ic_close" size={iconSize} color={textColor} />
+                isValidElement(closeIcon) ? cloneElement(closeIcon as React.ReactElement<any>, {
+                    size: iconSize,
+                    width: iconSize,
+                    height: iconSize,
+                    color: textColor,
+                    fill: textColor
+                }) : null
             )}
         </TouchableOpacity>
-    );
+    )
 }
 
-export default ChipSelect;
+export default ChipSelect

package/src/components/CtaCard/CtaCard.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { isValidElement, cloneElement } from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
 import { cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../../icons/Icon'
 
 type CtaCardProps = {
     /**
@@ -17,8 +18,13 @@ type CtaCardProps = {
     body?: string;
     /**
      * Name of the icon to display in the IconCapsule (if iconSlot is not provided)
+     * @deprecated Use icon prop instead
      */
     iconName?: string;
+    /**
+     * Icon element to display in the IconCapsule (if iconSlot is not provided)
+     */
+    icon?: React.ReactNode;
     /**
      * Label for the button (if buttonSlot is not provided)
      */
@@ -67,7 +73,8 @@ type CtaCardProps = {
 function CtaCard({
     title = "Lets create your UPI ID",
     body = "Send and receive money securely.",
-    iconName = "ic_upi_number",
+    iconName,
+    icon,
     buttonLabel = "Get started",
     onPressButton,
     modes: propModes = {},
@@ -81,26 +88,26 @@ function CtaCard({
     const modes = { ...globalModes, ...propModes }
     // --- Token Resolution ---
     // Container
-    const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad';
-    const radius = getVariableByName('ctaCard/radius', modes) || 16;
-    const paddingHorizontal = getVariableByName('ctaCard/padding/horizontal', modes) || 20;
-    const paddingVertical = getVariableByName('ctaCard/padding/vertical', modes) || 23;
-    const gap = getVariableByName('ctaCard/gap', modes) || 16;
+    const backgroundColor = getVariableByName('ctaCard/background', modes) || '#0078ad'
+    const radius = getVariableByName('ctaCard/radius', modes) || 16
+    const paddingHorizontal = getVariableByName('ctaCard/padding/horizontal', modes) || 20
+    const paddingVertical = getVariableByName('ctaCard/padding/vertical', modes) || 23
+    const gap = getVariableByName('ctaCard/gap', modes) || 16
 
     // Content Wrap
-    const contentGap = getVariableByName('ctaCard/content/gap', modes) || 8;
+    const contentGap = getVariableByName('ctaCard/content/gap', modes) || 8
 
     // Title Text
-    const titleColor = getVariableByName('ctaCard/title/color', modes) || '#ffffff';
-    const titleFontFamily = getVariableByName('ctaCard/title/fontFamily', modes) || 'JioType Var';
-    const titleFontSize = getVariableByName('ctaCard/title/fontSize', modes) || 23;
-    const titleLineHeight = getVariableByName('ctaCard/title/lineHeight', modes) || 23;
+    const titleColor = getVariableByName('ctaCard/title/color', modes) || '#ffffff'
+    const titleFontFamily = getVariableByName('ctaCard/title/fontFamily', modes) || 'JioType Var'
+    const titleFontSize = getVariableByName('ctaCard/title/fontSize', modes) || 23
+    const titleLineHeight = getVariableByName('ctaCard/title/lineHeight', modes) || 23
 
     // Body Text
-    const bodyColor = getVariableByName('ctaCard/body/color', modes) || '#ffffff';
-    const bodyFontFamily = getVariableByName('ctaCard/body/fontFamily', modes) || 'JioType Var';
-    const bodyFontSize = getVariableByName('ctaCard/body/fontSize', modes) || 14;
-    const bodyLineHeight = getVariableByName('ctaCard/body/lineHeight', modes) || 17;
+    const bodyColor = getVariableByName('ctaCard/body/color', modes) || '#ffffff'
+    const bodyFontFamily = getVariableByName('ctaCard/body/fontFamily', modes) || 'JioType Var'
+    const bodyFontSize = getVariableByName('ctaCard/body/fontSize', modes) || 14
+    const bodyLineHeight = getVariableByName('ctaCard/body/lineHeight', modes) || 17
 
     // --- Styles ---
     const containerStyle: ViewStyle = {
@@ -112,13 +119,13 @@ function CtaCard({
         alignItems: 'flex-start',
         width: '100%', // Adjust based on layout needs, usually cards take full width available
         overflow: 'hidden',
-    };
+    }
 
     const contentWrapStyle: ViewStyle = {
         gap: contentGap,
         alignItems: 'flex-start',
         width: '100%',
-    };
+    }
 
     const titleStyle: TextStyle = {
         color: titleColor,
@@ -126,7 +133,7 @@ function CtaCard({
         fontSize: titleFontSize,
         lineHeight: titleLineHeight,
         fontWeight: '900', // "Black" in Figma often maps to 900
-    };
+    }
 
     const bodyStyle: TextStyle = {
         color: bodyColor,
@@ -134,18 +141,20 @@ function CtaCard({
         fontSize: bodyFontSize,
         lineHeight: bodyLineHeight,
         fontWeight: '400', // Regular
-    };
+    }
 
 
 
     return (
         <View style={[containerStyle, style]}>
             <View style={contentWrapStyle}>
-                {/* Icon Slot */}
                 {iconSlot ? (
                     cloneChildrenWithModes(iconSlot, modes)
                 ) : (
-                    <IconCapsule iconName={iconName} modes={modes} />
+                    (icon || iconName) && <IconCapsule
+                        icon={isValidElement(icon) ? icon : (iconName ? <Icon name={iconName} /> : undefined)}
+                        modes={modes}
+                    />
                 )}
 
                 {/* Title Slot */}
@@ -174,7 +183,7 @@ function CtaCard({
                 />
             )}
         </View>
-    );
+    )
 }
 
-export default CtaCard;
+export default CtaCard

package/src/components/CtaCard/index.ts

@@ -1 +1 @@
-export { default } from './CtaCard';
+export { default } from './CtaCard'

package/src/components/EmptyState/EmptyState.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
+import Icon from '../../icons/Icon'
 
 export type EmptyStateProps = {
     /**
@@ -112,7 +113,7 @@ function EmptyState({
     }
 
     const defaultIconSlot = useMemo(() => (
-        <IconCapsule modes={modes} />
+        <IconCapsule icon={<Icon name="ic_card" />} modes={modes} />
     ), [modes])
 
     // Checking if iconSlot is passed; if not use default.