jfs-components 0.0.66 → 0.0.67

package/lib/typescript/src/components/Image/Image.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { type ImageSourcePropType, type ImageStyle, type StyleProp, type ViewStyle, type ImageResizeMode } from 'react-native';
+export type ImageProps = {
+    /**
+     * Image source. Accepts the same shapes as React Native's `<Image>` plus a
+     * raw URL string. Naming is intentionally aligned with `Avatar`,
+     * `ProductLabel`, `CardProviderInfo`, etc. so the library has a single,
+     * predictable image-source prop name.
+     */
+    imageSource?: ImageSourcePropType | string | undefined;
+    /**
+     * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
+     * When set, the image lays out using `aspectRatio` so it scales naturally
+     * with whatever width it receives — no need to specify height.
+     *
+     * Equivalent CSS: `aspect-ratio: <ratio>`.
+     */
+    ratio?: number | undefined;
+    /** How the image is fit inside its box. Defaults to `'cover'`. */
+    resizeMode?: ImageResizeMode | undefined;
+    /**
+     * Optional explicit width. If omitted and a `ratio` is set, the image
+     * defaults to `width: '100%'` so it fills its parent.
+     */
+    width?: ViewStyle['width'] | undefined;
+    /** Optional explicit height. Usually you only need `ratio` instead. */
+    height?: ViewStyle['height'] | undefined;
+    /** Border radius applied to the image (clips the underlying raster). */
+    borderRadius?: number | undefined;
+    /** Style merged onto the underlying RN `<Image>`. */
+    style?: StyleProp<ImageStyle> | undefined;
+    /** Accessibility label forwarded to RN `<Image>`. */
+    accessibilityLabel?: string | undefined;
+    /** Hide from the a11y tree (e.g. when image is purely decorative). */
+    accessibilityElementsHidden?: boolean | undefined;
+    importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants' | undefined;
+};
+/**
+ * `Image` — the library's standard raster image primitive.
+ *
+ * Why this exists:
+ *  - Gives consumers a single component for "show an image at a given aspect
+ *    ratio inside a flex container" without having to remember the
+ *    `width:'100%' / height:'100%' / resizeMode:'cover'` boilerplate.
+ *  - Centralizes URL-vs-`{uri}` normalization that several components were
+ *    re-implementing.
+ *  - Uses the same `imageSource` prop name as the rest of the library
+ *    (`Avatar`, `ProductLabel`, `CardProviderInfo`, ...) for a unified API.
+ *
+ * Layout rules:
+ *  - If `ratio` is provided, the image lays out with `aspectRatio: ratio`
+ *    and (unless `width` is given) fills the parent's width.
+ *  - If neither `ratio` nor explicit dimensions are given, the image fills
+ *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
+ *    most common usage in this library (background media, hero images).
+ */
+declare function Image({ imageSource, ratio, resizeMode, width, height, borderRadius, style, accessibilityLabel, accessibilityElementsHidden, importantForAccessibility, }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Image>;
+export default _default;
+//# sourceMappingURL=Image.d.ts.map

package/lib/typescript/src/components/MediaCard/MediaCard.d.ts

@@ -1,9 +1,23 @@
 import React from 'react';
-import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import { type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
 export interface MediaCardProps {
     /**
-     * The background media content (e.g. an Image).
-     * It will be positioned absolutely to cover the card.
+     * Image source for the background media. Same shape as the rest of the
+     * library (`Avatar`, `ProductLabel`, etc.) — accepts a URL string or any
+     * RN `ImageSourcePropType`. The card renders this through the shared
+     * `<Image>` component, so all image-rendering details (normalization,
+     * resize behaviour, `aspectRatio`) live there, not here.
+     */
+    imageSource?: ImageSourcePropType | string | undefined;
+    /**
+     * Width-to-height aspect ratio for the background image when using
+     * `imageSource`, e.g. `16 / 9`. Forwarded to `<Image ratio>`.
+     */
+    ratio?: number | undefined;
+    /**
+     * Escape hatch: a fully custom background node (e.g. a gradient view, a
+     * video). Takes precedence over `imageSource`. Prefer `imageSource` for
+     * the common case of a single background image.
      */
     media?: React.ReactNode;
     /**
@@ -23,8 +37,12 @@ export interface MediaCardProps {
  * MediaCard component implementation from Figma node 1241:4140.
  *
  * Features a background media slot, a large title, and a glass-morphism footer.
+ *
+ * The background can be supplied either as `imageSource` (preferred — uses
+ * the shared `<Image>` primitive under the hood) or as a custom `media` node
+ * for non-image backgrounds.
  */
-export declare function MediaCard({ media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ imageSource, ratio, media, children, modes, style, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaCard {
     var Header: typeof import("./MediaCard").Header;
     var Title: typeof import("./MediaCard").Title;

package/lib/typescript/src/components/index.d.ts

@@ -24,11 +24,12 @@ export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
-export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-04-21T15:09:13.866Z
+ * Generated: 2026-04-22T11:47:15.563Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/CardCTA/CardCTA.tsx

@@ -95,11 +95,22 @@ function CardCTA({
         justifyContent: 'center',
     }
 
+    // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
+    // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
+    // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
+    // its own padding+IconCapsule width when leftWrap's text is long. Once that
+    // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
+    // the IconCapsule against the inner edge, and the icon ends up visually
+    // touching the body text (the wrapper "appears not to exist"). Web hides
+    // this because browsers honor `min-width: auto` on flex items. Use
+    // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
+    // is sized to its content as a floor and only grows for the design's
+    // 3:2 ratio when extra space is available. leftWrap already absorbs tight
+    // space via `flexShrink: 1` + `minWidth: 0`.
     const rightWrapStyle: ViewStyle = {
-        flex: 2,
-        flexShrink: 1,
-        flexBasis: 0,
-        minWidth: 0,
+        flexGrow: 2,
+        flexShrink: 0,
+        flexBasis: 'auto',
         paddingHorizontal: rightPaddingH,
         paddingVertical: rightPaddingV,
         alignItems: 'flex-end',

package/src/components/Image/Image.tsx

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react'
+import {
+  Image as RNImage,
+  View,
+  StyleSheet,
+  type ImageSourcePropType,
+  type ImageStyle,
+  type StyleProp,
+  type ViewStyle,
+  type ImageResizeMode,
+} from 'react-native'
+
+export type ImageProps = {
+  /**
+   * Image source. Accepts the same shapes as React Native's `<Image>` plus a
+   * raw URL string. Naming is intentionally aligned with `Avatar`,
+   * `ProductLabel`, `CardProviderInfo`, etc. so the library has a single,
+   * predictable image-source prop name.
+   */
+  imageSource?: ImageSourcePropType | string | undefined
+  /**
+   * Width-to-height aspect ratio as a number, e.g. `16 / 9`, `1`, `4 / 3`.
+   * When set, the image lays out using `aspectRatio` so it scales naturally
+   * with whatever width it receives — no need to specify height.
+   *
+   * Equivalent CSS: `aspect-ratio: <ratio>`.
+   */
+  ratio?: number | undefined
+  /** How the image is fit inside its box. Defaults to `'cover'`. */
+  resizeMode?: ImageResizeMode | undefined
+  /**
+   * Optional explicit width. If omitted and a `ratio` is set, the image
+   * defaults to `width: '100%'` so it fills its parent.
+   */
+  width?: ViewStyle['width'] | undefined
+  /** Optional explicit height. Usually you only need `ratio` instead. */
+  height?: ViewStyle['height'] | undefined
+  /** Border radius applied to the image (clips the underlying raster). */
+  borderRadius?: number | undefined
+  /** Style merged onto the underlying RN `<Image>`. */
+  style?: StyleProp<ImageStyle> | undefined
+  /** Accessibility label forwarded to RN `<Image>`. */
+  accessibilityLabel?: string | undefined
+  /** Hide from the a11y tree (e.g. when image is purely decorative). */
+  accessibilityElementsHidden?: boolean | undefined
+  importantForAccessibility?:
+    | 'auto'
+    | 'yes'
+    | 'no'
+    | 'no-hide-descendants'
+    | undefined
+}
+
+function normalizeSource(
+  imageSource: ImageProps['imageSource']
+): ImageSourcePropType | undefined {
+  if (imageSource == null) return undefined
+  if (typeof imageSource === 'string') return { uri: imageSource }
+  return imageSource
+}
+
+/**
+ * `Image` — the library's standard raster image primitive.
+ *
+ * Why this exists:
+ *  - Gives consumers a single component for "show an image at a given aspect
+ *    ratio inside a flex container" without having to remember the
+ *    `width:'100%' / height:'100%' / resizeMode:'cover'` boilerplate.
+ *  - Centralizes URL-vs-`{uri}` normalization that several components were
+ *    re-implementing.
+ *  - Uses the same `imageSource` prop name as the rest of the library
+ *    (`Avatar`, `ProductLabel`, `CardProviderInfo`, ...) for a unified API.
+ *
+ * Layout rules:
+ *  - If `ratio` is provided, the image lays out with `aspectRatio: ratio`
+ *    and (unless `width` is given) fills the parent's width.
+ *  - If neither `ratio` nor explicit dimensions are given, the image fills
+ *    its parent (`width: '100%'`, `height: '100%'`) — same default as the
+ *    most common usage in this library (background media, hero images).
+ */
+function Image({
+  imageSource,
+  ratio,
+  resizeMode = 'cover',
+  width,
+  height,
+  borderRadius,
+  style,
+  accessibilityLabel,
+  accessibilityElementsHidden,
+  importantForAccessibility,
+}: ImageProps) {
+  const source = useMemo(() => normalizeSource(imageSource), [imageSource])
+
+  const layoutStyle: ImageStyle = useMemo(() => {
+    const s: ImageStyle = {}
+    if (ratio != null) {
+      s.aspectRatio = ratio
+      s.width = width ?? '100%'
+      if (height != null) s.height = height
+    } else {
+      s.width = width ?? '100%'
+      s.height = height ?? '100%'
+    }
+    if (borderRadius != null) s.borderRadius = borderRadius
+    return s
+  }, [ratio, width, height, borderRadius])
+
+  if (!source) {
+    return <View style={[layoutStyle, style as StyleProp<ViewStyle>]} />
+  }
+
+  return (
+    <RNImage
+      source={source}
+      style={[layoutStyle, style]}
+      resizeMode={resizeMode}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden={accessibilityElementsHidden}
+      importantForAccessibility={importantForAccessibility}
+    />
+  )
+}
+
+export default React.memo(Image)

package/src/components/MediaCard/MediaCard.tsx

@@ -1,81 +1,99 @@
-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 { EMPTY_MODES } from '../../utils/react-utils';
+import React, { createContext, useContext } from 'react'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType, Platform } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Image from '../Image/Image'
+import { EMPTY_MODES } from '../../utils/react-utils'
 
-/**
- * Context to share 'modes' with child components.
- */
-const MediaCardContext = createContext<{ modes?: Record<string, any> }>({});
+const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
 
 export interface MediaCardProps {
     /**
-     * The background media content (e.g. an Image).
-     * It will be positioned absolutely to cover the card.
+     * Image source for the background media. Same shape as the rest of the
+     * library (`Avatar`, `ProductLabel`, etc.) — accepts a URL string or any
+     * RN `ImageSourcePropType`. The card renders this through the shared
+     * `<Image>` component, so all image-rendering details (normalization,
+     * resize behaviour, `aspectRatio`) live there, not here.
+     */
+    imageSource?: ImageSourcePropType | string | undefined
+    /**
+     * Width-to-height aspect ratio for the background image when using
+     * `imageSource`, e.g. `16 / 9`. Forwarded to `<Image ratio>`.
      */
-    media?: React.ReactNode;
+    ratio?: number | undefined
+    /**
+     * Escape hatch: a fully custom background node (e.g. a gradient view, a
+     * video). Takes precedence over `imageSource`. Prefer `imageSource` for
+     * the common case of a single background image.
+     */
+    media?: React.ReactNode
     /**
      * Content to render inside the card (e.g. MediaCard.Title, MediaCard.Footer).
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Record<string, any>
     /**
      * Style overrides for the card container.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>
 }
 
 /**
  * MediaCard component implementation from Figma node 1241:4140.
- * 
+ *
  * Features a background media slot, a large title, and a glass-morphism footer.
+ *
+ * The background can be supplied either as `imageSource` (preferred — uses
+ * the shared `<Image>` primitive under the hood) or as a custom `media` node
+ * for non-image backgrounds.
  */
 export function MediaCard({
+    imageSource,
+    ratio,
     media,
     children,
     modes = EMPTY_MODES,
     style,
 }: MediaCardProps) {
-    // Container Tokens
-    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.
+    const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
+    const gap = parseFloat(getVariableByName('cardMedia/gap', modes) || '0')
 
     const containerStyle: ViewStyle = {
         borderRadius: radius,
         gap,
         overflow: 'hidden',
         position: 'relative',
-        // Default dimensions from Figma if needed, but better to let parent control or use defaults in stories.
-        // 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;
+        minHeight: 308,
+    }
+
+    // `media` wins for back-compat / custom nodes; otherwise we delegate to
+    // the shared <Image> for image-source backgrounds. All raster-rendering
+    // concerns (URL-vs-{uri}, resizeMode, aspect-ratio) live in <Image>.
+    const background = media ?? (
+        imageSource != null ? (
+            <Image
+                imageSource={imageSource}
+                ratio={ratio}
+                resizeMode="cover"
+                accessibilityElementsHidden
+                importantForAccessibility="no"
+            />
+        ) : null
+    )
 
     return (
         <MediaCardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
-                {/* Background Media Layer */}
-                <View style={StyleSheet.absoluteFill}>
-                    {mediaWithModes}
-                </View>
+                {background ? (
+                    <View style={StyleSheet.absoluteFill}>{background}</View>
+                ) : null}
 
-                {/* Content Layer */}
                 {children}
             </View>
         </MediaCardContext.Provider>
-    );
+    )
 }
 
 // ----------------------------------------------------------------------------
@@ -88,11 +106,23 @@ export function MediaCard({
  * Figma: "title wrap" p-[16px]
  */
 export function Header({ children, style }: { children?: React.ReactNode; style?: StyleProp<ViewStyle> }) {
+    // NOTE: the previous `flex: 1` shorthand expanded on Yoga (Android) to
+    // `{ flexGrow: 1, flexShrink: 1, flexBasis: 0 }`. With `flexBasis: 0` the
+    // Header has *no intrinsic floor*, so when MediaCard is placed inside a
+    // height-unbounded parent — e.g. a Carousel slot whose contentContainer
+    // is `alignItems: 'flex-start'` — Yoga's first measurement pass sizes
+    // the Header at 0 and the card's overall height becomes non-deterministic.
+    // On native this manifests as the card "over-stretching" vertically (the
+    // same Yoga foot-gun we fixed in `CardCTA` rightWrap). Web hides it
+    // because browsers honor `min-height: auto` on flex items. Use explicit
+    // `flexGrow / flexShrink: 0 / flexBasis: 'auto'` so the Header is sized
+    // to its content as a floor and only grows to consume the extra space
+    // contributed by `MediaCard`'s `minHeight: 308`.
     return (
-        <View style={[{ padding: 16, flex: 1 }, style]}>
+        <View style={[{ padding: 16, flexGrow: 1, flexShrink: 0, flexBasis: 'auto' }, style]}>
             {children}
         </View>
-    );
+    )
 }
 
 /**
@@ -100,14 +130,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,
@@ -115,9 +145,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>
 }
 
 /**
@@ -125,20 +155,19 @@ 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',
@@ -150,13 +179,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>
-    );
+    )
 }
 
 /**
@@ -164,20 +193,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>
-    );
+    )
 }
 
 /**
@@ -185,27 +214,26 @@ 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/index.ts

@@ -24,11 +24,12 @@ export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as Image, type ImageProps } from './Image/Image';
 export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter, type LinearMeterProps } from './LinearMeter/LinearMeter';
 export { default as ListGroup } from './ListGroup/ListGroup';
 export { default as ListItem } from './ListItem/ListItem';
-export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-04-21T15:09:13.866Z
+ * Generated: 2026-04-22T11:47:15.563Z
  */
 
 // Icon name to SVG data mapping