jfs-components 0.0.73 → 0.0.77

package/src/components/LottiePlayer/loadWebLottieView.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import type { CSSProperties } from 'react'
+
+/** Props we forward to the underlying web Lottie view. */
+export type WebLottieViewProps = {
+  animationData: Record<string, unknown>
+  autoplay?: boolean
+  loop?: boolean
+  style?: CSSProperties
+}
+
+const INSTALL_HINT =
+  'LottiePlayer requires lottie-react in your app.\n' +
+  '  npm install lottie-react'
+
+function resolveWebLottieModuleName() {
+  return ['lottie', '-react'].join('')
+}
+
+function LottieUnavailable(props: WebLottieViewProps) {
+  React.useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`)
+    }
+  }, [])
+
+  return (
+    <div
+      style={{
+        ...props.style,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 196, 0, 0.12)',
+        border: '1px solid rgba(255, 196, 0, 0.45)',
+        borderRadius: 8,
+        padding: 8,
+        color: '#8a6d00',
+        fontSize: 11,
+        textAlign: 'center',
+        lineHeight: '15px',
+      }}
+    >
+      {typeof __DEV__ !== 'undefined' && __DEV__ ? INSTALL_HINT : null}
+    </div>
+  )
+}
+
+let cachedView: React.ComponentType<WebLottieViewProps> | undefined
+
+export function getWebLottieView(): React.ComponentType<WebLottieViewProps> {
+  if (cachedView !== undefined) return cachedView
+
+  try {
+    const mod = require(resolveWebLottieModuleName()) as {
+      default?: React.ComponentType<WebLottieViewProps>
+    }
+    cachedView = mod.default ?? LottieUnavailable
+  } catch {
+    cachedView = LottieUnavailable
+  }
+
+  return cachedView
+}

package/src/components/PageHero/PageHero.tsx

@@ -0,0 +1,257 @@
+import React, { useMemo } 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 Button from '../Button/Button'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type PageHeroProps = {
+  /** Small eyebrow text shown above the headline. */
+  eyebrow?: string
+  /** Main headline text. Centered and bold. */
+  headline?: string
+  /** Optional supporting text shown below the headline. */
+  supportingText?: string
+  /** Whether to render the supporting text. */
+  showSupportingText?: boolean
+  /** Label for the default action button. Ignored when `buttonSlot` is provided. */
+  buttonLabel?: string
+  /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
+  onButtonPress?: () => void
+  /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
+  showButton?: boolean
+  /**
+   * Optional slot to fully override the action button.
+   * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
+   * `modes` are automatically cascaded into this slot.
+   */
+  buttonSlot?: React.ReactNode
+  /**
+   * Optional media element shown above the text block (eyebrow + headline).
+   *
+   * Intentionally typed as `React.ReactNode` so the consumer can bring any
+   * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
+   * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
+   * from `react-native-svg`, a `<Video />` from `react-native-video`, a
+   * gradient view, or a custom illustration. The library deliberately does
+   * NOT wrap Lottie / video runtimes (they require native modules + pod
+   * autolinking on every consumer's app), so PageHero just allocates a
+   * token-sized container and lets the slot render whatever it wants.
+   *
+   * The slot is rendered inside a `width × height` box driven by
+   * `media/width` and `media/height` tokens (default 117×117). `modes` are
+   * automatically cascaded into the slot via `cloneChildrenWithModes`.
+   */
+  media?: React.ReactNode
+  /** Mode configuration for design-token theming. */
+  modes?: Record<string, any>
+  /** Style overrides applied to the outer container. */
+  style?: StyleProp<ViewStyle>
+  testID?: string
+}
+
+/**
+ * PageHero displays a centered hero block typically used at the top of a page
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
+ *
+ * All visual values are resolved from Figma design tokens via
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PageHero
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Resume earning cashback, extra points, and 1% gold"
+ *   supportingText="₹999/year · ₹0 until 2027"
+ *   buttonLabel="Renew for free"
+ *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+function PageHero({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Resume earning cashback, extra points, and 1% gold',
+  supportingText = '₹999/year · ₹0 until 2027',
+  showSupportingText = true,
+  buttonLabel = 'Renew for free',
+  onButtonPress,
+  showButton = true,
+  buttonSlot,
+  media,
+  modes: propModes = EMPTY_MODES,
+  style,
+  testID,
+}: PageHeroProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
+  const paddingHorizontal =
+    Number(getVariableByName('PageHero/padding/horizontal', modes)) || 0
+
+  const textWrapGap =
+    Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+
+  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
+  // Tokens fall back to 117 when not defined in the variables collection,
+  // so the layout stays stable on consumers that haven't tokenized this yet.
+  const mediaWidth = Number(getVariableByName('media/width', modes)) || 117
+  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117
+
+  const eyebrowColor =
+    getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff'
+  const eyebrowFontFamily =
+    getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System'
+  const eyebrowFontSize =
+    Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18
+  const eyebrowFontWeight =
+    getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700
+  const eyebrowLineHeight =
+    Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20
+
+  const headlineColor =
+    getVariableByName('PageHero/headline/color', modes) || '#ffffff'
+  const headlineFontFamily =
+    getVariableByName('PageHero/headline/fontFamily', modes) || 'System'
+  const headlineFontSize =
+    Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29
+  const headlineFontWeight =
+    getVariableByName('PageHero/headline/fontWeight', modes) || 900
+  const headlineLineHeight =
+    Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29
+
+  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
+  // Color, font size and weight are inline literals in the design (12px medium
+  // white) — we mirror that here so the visual stays faithful when no token
+  // exists.
+  const supportingTextLineHeight =
+    Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    paddingHorizontal,
+    gap,
+    width: '100%',
+  }
+
+  const textWrapStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: textWrapGap,
+    width: '100%',
+  }
+
+  const eyebrowStyle: TextStyle = {
+    color: eyebrowColor as string,
+    fontFamily: eyebrowFontFamily as string,
+    fontSize: eyebrowFontSize,
+    fontWeight: String(eyebrowFontWeight) as TextStyle['fontWeight'],
+    lineHeight: eyebrowLineHeight,
+    textAlign: 'center',
+  }
+
+  const headlineStyle: TextStyle = {
+    color: headlineColor as string,
+    fontFamily: headlineFontFamily as string,
+    fontSize: headlineFontSize,
+    fontWeight: String(headlineFontWeight) as TextStyle['fontWeight'],
+    lineHeight: headlineLineHeight,
+    textAlign: 'center',
+    width: '100%',
+  }
+
+  const supportingTextStyle: TextStyle = {
+    color: '#ffffff',
+    fontFamily: 'System',
+    fontSize: 12,
+    fontWeight: '500',
+    lineHeight: supportingTextLineHeight,
+    textAlign: 'center',
+  }
+
+  const buttonWrapStyle: ViewStyle = {
+    width: '100%',
+  }
+
+  const buttonContent = useMemo<React.ReactNode>(() => {
+    if (buttonSlot !== undefined && buttonSlot !== null) {
+      return cloneChildrenWithModes(buttonSlot, modes)
+    }
+    if (!showButton) {
+      return null
+    }
+    return (
+      <Button
+        label={buttonLabel}
+        onPress={onButtonPress}
+        modes={modes}
+        style={buttonWrapStyle}
+      />
+    )
+  // buttonWrapStyle is a literal object created above; it is intentionally
+  // omitted from deps because its identity changes on every render but its
+  // shape never does.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
+
+  // Sized container for the media slot. Always rendered when `media` is
+  // provided, so the slot has a predictable box (matches Figma frame
+  // 4540:7845 — 117×117 by default) even if the inner element omits its
+  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break
+  // the centered layout.
+  const mediaContent = useMemo<React.ReactNode>(() => {
+    if (media === undefined || media === null) return null
+    return (
+      <View
+        style={{
+          width: mediaWidth,
+          height: mediaHeight,
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {cloneChildrenWithModes(media, modes)}
+      </View>
+    )
+  }, [media, mediaWidth, mediaHeight, modes])
+
+  return (
+    <View style={[containerStyle, style]} testID={testID}>
+      {mediaContent}
+      <View style={textWrapStyle}>
+        {eyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
+        {headline ? <Text style={headlineStyle}>{headline}</Text> : null}
+      </View>
+      {showSupportingText && supportingText ? (
+        <Text style={supportingTextStyle}>{supportingText}</Text>
+      ) : null}
+      {buttonContent}
+    </View>
+  )
+}
+
+export default PageHero

package/src/components/PoweredByLabel/PoweredByLabel.tsx

@@ -0,0 +1,221 @@
+import React, { useMemo } from 'react'
+import {
+    Text,
+    View,
+    type ImageStyle,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import MediaSource, { type UnifiedSource } from '../../utils/MediaSource'
+
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+const DEFAULT_LOGO: UnifiedSource = require('./finvu.png')
+
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator'
+const DEFAULT_IMAGE_WIDTH = 33
+const DEFAULT_IMAGE_HEIGHT = 12
+
+export type PoweredByLabelProps = {
+    /**
+     * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
+     * to match the Figma reference.
+     */
+    label?: string
+    /**
+     * Brand logo source. Accepts any {@link UnifiedSource} — remote URI, SVG
+     * XML string, `require()` asset, SVG React component, or React element.
+     * Defaults to the bundled FINVU logo so the component renders correctly
+     * without any caller-provided image.
+     *
+     * Ignored when `imageSlot` is provided.
+     */
+    imageSource?: UnifiedSource
+    /**
+     * Rendered width of the logo in px. Defaults to `33` to match Figma.
+     */
+    imageWidth?: number
+    /**
+     * Rendered height of the logo in px. Defaults to `12` to match Figma.
+     */
+    imageHeight?: number
+    /**
+     * Replace the default `Image` entirely (e.g. with a vector logo,
+     * `BrandChip`, or custom layout). Receives `modes` recursively.
+     * Overrides `imageSource`.
+     */
+    imageSlot?: React.ReactNode
+    /**
+     * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
+     */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Label text style override. */
+    textStyle?: StyleProp<TextStyle>
+    /** Logo image style override (size/resize behaviour, etc.). */
+    imageStyle?: StyleProp<ImageStyle>
+    /**
+     * Accessibility label. Defaults to the visible `label` so the brand image
+     * (which is decorative) does not need to be announced separately.
+     */
+    accessibilityLabel?: string
+}
+
+const toNumber = (value: unknown, fallback: number): number => {
+    if (typeof value === 'number') return Number.isFinite(value) ? value : fallback
+    if (typeof value === 'string') {
+        const parsed = Number(value)
+        return Number.isFinite(parsed) ? parsed : fallback
+    }
+    return fallback
+}
+
+const toFontWeight = (
+    value: unknown,
+    fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+    if (typeof value === 'string') return value as TextStyle['fontWeight']
+    return fallback
+}
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+    label = DEFAULT_LABEL,
+    imageSource,
+    imageWidth = DEFAULT_IMAGE_WIDTH,
+    imageHeight = DEFAULT_IMAGE_HEIGHT,
+    imageSlot,
+    modes: propModes = EMPTY_MODES,
+    style,
+    textStyle,
+    imageStyle,
+    accessibilityLabel,
+}: PoweredByLabelProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(
+        () =>
+            globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+                ? EMPTY_MODES
+                : { ...globalModes, ...propModes },
+        [globalModes, propModes]
+    )
+
+    const background =
+        (getVariableByName('poweredByLabel/background', modes) as string | null) ??
+        '#f5f5f5'
+    const foreground =
+        (getVariableByName('poweredByLabel/foreground', modes) as string | null) ??
+        '#191b1e'
+    const fontFamily =
+        (getVariableByName('poweredByLabel/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const fontSize = toNumber(getVariableByName('poweredByLabel/fontSize', modes), 10)
+    const lineHeight = toNumber(
+        getVariableByName('poweredByLabel/lineHeight', modes),
+        12
+    )
+    const fontWeight = toFontWeight(
+        getVariableByName('poweredByLabel/fontWeight', modes),
+        '400'
+    )
+    const gap = toNumber(getVariableByName('poweredByLabel/gap', modes), 10)
+    const paddingHorizontal = toNumber(
+        getVariableByName('poweredByLabel/padding/horizontal', modes),
+        16
+    )
+    const paddingVertical = toNumber(
+        getVariableByName('poweredByLabel/padding/vertical', modes),
+        6
+    )
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: background,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        // Hug content horizontally so the pill does not stretch to fill the
+        // parent (matches Badge, BrandChip, etc.). Override via `style` if
+        // you want it full-width (e.g. inside a card footer).
+        alignSelf: 'flex-start',
+    }
+
+    const labelTextStyle: TextStyle = {
+        color: foreground,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        textAlign: 'center',
+        flexShrink: 1,
+    }
+
+    const renderImage = (): React.ReactNode => {
+        if (imageSlot !== undefined && imageSlot !== null) {
+            const processed = cloneChildrenWithModes(imageSlot, modes)
+            if (processed.length === 0) return null
+            return processed.length === 1 ? processed[0] : processed
+        }
+
+        const resolvedSource: UnifiedSource =
+            (imageSource as UnifiedSource | undefined) ?? DEFAULT_LOGO
+
+        return (
+            <MediaSource
+                source={resolvedSource}
+                width={imageWidth}
+                height={imageHeight}
+                resizeMode="contain"
+                style={imageStyle}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+            />
+        )
+    }
+
+    return (
+        <View
+            accessibilityRole="text"
+            accessibilityLabel={accessibilityLabel ?? label}
+            style={[containerStyle, style]}
+        >
+            <Text
+                style={[labelTextStyle, textStyle]}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+                numberOfLines={1}
+            >
+                {label}
+            </Text>
+            {renderImage()}
+        </View>
+    )
+}
+
+export default PoweredByLabel

package/src/components/RechargeCard/RechargeCard.tsx

@@ -1,11 +1,26 @@
-import React, { isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import React from 'react';
+import { View, Text, type ViewStyle } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import Button from '../Button/Button';
+
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
+const DEFAULT_BUTTON_GROUP_MODES: Record<string, string> = {
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S',
+    Emphasis: 'High',
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES: Record<string, string> = {
+    Context3: 'Balance & Cards',
+};
 
 
 export type RechargeCardProps = {
@@ -66,17 +81,19 @@ export default function RechargeCard({
     modes = EMPTY_MODES,
     style,
 }: RechargeCardProps) {
-    // Container Tokens
-    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+    // 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) || 328, 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';
 
     // Header Tokens
     const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+    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);
@@ -87,30 +104,26 @@ export default function RechargeCard({
     const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
 
     // Spec Label Tokens
-    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+    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';
 
     // Spec Value Tokens
-    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+    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';
 
     // Disclaimer Tokens
-    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+    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';
 
-    // Button Group Tokens
-    // Handled by ButtonGroup component directly
-
-    // Helpers
     const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
 
     // Pass modes to subscription children (e.g. AvatarGroup)
@@ -125,6 +138,8 @@ export default function RechargeCard({
             paddingVertical,
             gap,
             borderRadius: radius,
+            borderWidth: strokeWidth,
+            borderColor: strokeColor,
             minWidth,
             alignItems: 'flex-start',
         }, style]}>
@@ -142,7 +157,7 @@ export default function RechargeCard({
                 <MoneyValue
                     value={price}
                     currency="₹"
-                    modes={modes}
+                    modes={{ ...DEFAULT_MONEY_VALUE_MODES, ...modes }}
                 />
             </View>
 
@@ -224,15 +239,8 @@ export default function RechargeCard({
                 {disclaimer}
             </Text>
 
-            {/* Button Group */}
-            <ButtonGroup
-                modes={{
-                    ...modes,
-                    "Appearance.Brand": "Secondary",
-                    "Button / Size": "S",
-                    "Emphasis": "High"
-                }}
-            >
+            {/* Button Group: defaults are overridable via the consumer's `modes` */}
+            <ButtonGroup modes={{ ...DEFAULT_BUTTON_GROUP_MODES, ...modes }}>
                 {actions}
             </ButtonGroup>
         </View>