jfs-components 0.1.0 → 0.1.8

package/src/components/Avatar/Avatar.tsx

@@ -16,6 +16,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
 
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
 
@@ -63,7 +64,7 @@ interface AvatarTokens {
   monogramTextStyle: TextStyle;
 }
 
-function resolveAvatarTokens(modes: Record<string, any>, isMonogram: boolean): AvatarTokens {
+function resolveAvatarTokens(modes: Modes, isMonogram: boolean): AvatarTokens {
   const size = (getVariableByName('avatar/size', modes) || 29) as number
   const radiusRaw = (getVariableByName('avatar/radius', modes) || 9999) as number
   const backgroundColor = getVariableByName('avatar/background', modes) || '#dbcfff'
@@ -131,7 +132,7 @@ function resolveAvatarTokens(modes: Record<string, any>, isMonogram: boolean): A
 export type AvatarProps = {
   monogram?: string;
   style?: 'Image' | 'Monogram';
-  modes?: Record<string, any>;
+  modes?: Modes;
   imageSource?: ImageSourcePropType | string;
   accessibilityLabel?: string;
   onPress?: () => void;

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -4,9 +4,10 @@ import MaskedView from '@react-native-masked-view/masked-view';
 import Svg, { Path } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 type AvatarGroupProps = {
-    modes?: Record<string, any>;
+    modes?: Modes;
     children?: React.ReactNode;
     style?: ViewStyle;
 } & React.ComponentProps<typeof View>;

package/src/components/Badge/Badge.tsx

@@ -10,12 +10,13 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
   label?: string
   /** Modes used to resolve design tokens (e.g. Appearance, Size) */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional press handler to make the badge interactive */
   onPress?: () => void
   accessibilityLabel?: string

package/src/components/Balance/Balance.tsx

@@ -2,7 +2,16 @@ import React from 'react'
 import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import MoneyValue from '../MoneyValue/MoneyValue'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+// The Balance design renders its money value at the 36 px / 900-weight scale.
+// The `moneyValue/*` tokens alias into the `Context3` collection, where the
+// `Balance & Cards` mode supplies those larger values. Applied *before* the
+// caller's `modes` so any consumer can still override individual keys.
+const DEFAULT_MONEY_VALUE_MODES: Record<string, string> = {
+    Context3: 'Balance & Cards',
+}
 
 export type BalanceProps = {
     /**
@@ -23,7 +32,7 @@ export type BalanceProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */
@@ -58,7 +67,7 @@ function Balance({
     // Title styles
     const titleColor = getVariableByName('balance/title/foreground', modes) ?? '#0c0d10'
     const titleFontSize = getVariableByName('balance/title/fontSize', modes) ?? 14
-    const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'System'
+    const titleFontFamily = getVariableByName('balance/title/fontFamily', modes) ?? 'JioType Var'
     const titleLineHeight = getVariableByName('balance/title/lineHeight', modes) ?? 18
     const titleFontWeightValue = getVariableByName('balance/title/fontWeight', modes) ?? 500
     const titleFontWeight = typeof titleFontWeightValue === 'number'
@@ -79,13 +88,10 @@ function Balance({
         fontWeight: titleFontWeight as any,
     }
 
-    // Handle slot children or default content
-    const content = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, { modes } as any)
-        }
-        return child
-    })
+    // The money value renders at the Balance & Cards scale. Merge the default
+    // context mode first so the caller's `modes` can still override it, and
+    // force that context onto any slotted children so custom money values match.
+    const moneyValueModes: Modes = { ...DEFAULT_MONEY_VALUE_MODES, ...modes }
 
     return (
         <View style={[containerStyle, style]} data-node-id="1986:6203">
@@ -93,12 +99,12 @@ function Balance({
                 {title}
             </Text>
             {children ? (
-                content
+                cloneChildrenWithModes(children, modes, DEFAULT_MONEY_VALUE_MODES)
             ) : (
                 <MoneyValue
                     value={amount}
                     currency={currency}
-                    modes={modes}
+                    modes={moneyValueModes}
                 />
             )}
         </View>

package/src/components/BenefitCard/BenefitCard.tsx

@@ -0,0 +1,309 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text as RNText,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import Text from '../Text/Text'
+import ListItem from '../ListItem/ListItem'
+import Divider from '../Divider/Divider'
+import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single benefit row rendered with the shared `ListItem` primitive: a
+ * leading icon, a title and an optional right-aligned trailing value.
+ */
+export interface BenefitCardItem {
+    /** Registry icon name for the leading glyph (e.g. `'ic_jewellery_diamond'`). */
+    icon?: string
+    /** Per-item override for the leading icon color. Defaults to the brand token. */
+    iconColor?: string
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode
+    /** Row title (e.g. `"JioPoints"`). */
+    title: string
+    /** Optional right-aligned trailing value (e.g. `"Up to 2000 pts"`). */
+    trailingText?: string
+    /** Full override for the trailing node. Takes precedence over `trailingText`. */
+    trailing?: React.ReactNode
+    /** Makes the row pressable. */
+    onPress?: () => void
+}
+
+export interface BenefitCardProps {
+    /** Header section title (e.g. `"You will earn"`). */
+    headerTitle?: string
+    /**
+     * Highlighted item shown directly under the header title (icon + title +
+     * optional trailing value). Rendered above the divider.
+     */
+    headerItem?: BenefitCardItem
+    /**
+     * Toggles the whole header section (title + item + divider). Mirrors the
+     * Figma `showHeader` property. Defaults to `true`.
+     */
+    showHeader?: boolean
+    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    bodyTitle?: string
+    /**
+     * Body benefit rows. Ignored when `children` is provided (the slot wins).
+     */
+    items?: BenefitCardItem[]
+    /**
+     * Real slot for the body "list wrap". When provided, these children render
+     * instead of `items`; `modes` (plus the `List Item Style: Minimal` style)
+     * cascade into every child automatically.
+     */
+    children?: React.ReactNode
+    /** CTA button label. Defaults to `"Upgrade"`. */
+    buttonLabel?: string
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /**
+     * Toggles the CTA button. Mirrors the Figma `showButton` property.
+     * Defaults to `true`.
+     */
+    showButton?: boolean
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * BenefitCard — Figma node 5352:1077 ("Benefit Card").
+ *
+ * A white, rounded card that summarises the rewards a user will earn. It is
+ * composed entirely from the shared design-system primitives so it stays in
+ * sync with the rest of the library:
+ *
+ *  - **Header** — a section title + a single highlighted {@link ListItem}
+ *    (leading `Icon`, title, right-aligned trailing value) followed by a
+ *    `Divider`.
+ *  - **Body** — a section title + a column of benefit {@link ListItem}s. The
+ *    list is a real slot: pass `children` to fully control it, or `items` for
+ *    the declarative path.
+ *  - **CTA** — a small {@link Button} (Figma `Button / Size = S`).
+ *
+ * The list rows resolve through the `List Item Style: Minimal` mode (12px /
+ * regular title, 4px gap, no padding) and the leading icons use the
+ * `AppearanceBrand: Secondary` brand color, exactly matching the design. All
+ * three defaults can be overridden via `modes`.
+ */
+function BenefitCard({
+    headerTitle = 'You will earn',
+    headerItem,
+    showHeader = true,
+    bodyTitle = 'Upgrade to JioFinance+ and earn more',
+    items,
+    children,
+    buttonLabel = 'Upgrade',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 344,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: BenefitCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // Sub-component modes. Consumer-supplied `modes` always win via spread order.
+    const listItemModes = useMemo<Modes>(() => ({ 'List Item Style': 'Minimal', ...modes }), [modes])
+    const iconModes = useMemo<Modes>(() => ({ AppearanceBrand: 'Secondary', ...modes }), [modes])
+    const trailingTextModes = useMemo<Modes>(
+        () => ({ 'Text Sizes': 'Small', Weight: 'Regular', ...modes }),
+        [modes]
+    )
+    const ctaModes = useMemo<Modes>(() => ({ 'Button / Size': 'S', ...modes }), [modes])
+
+    const renderItem = (item: BenefitCardItem, key: React.Key) => {
+        const leading =
+            item.leading ??
+            (item.icon != null ? (
+                <Icon iconName={item.icon} color={item.iconColor} modes={iconModes} />
+            ) : null)
+
+        const trailing =
+            item.trailing ??
+            (item.trailingText != null ? (
+                <Text modes={trailingTextModes}>{item.trailingText}</Text>
+            ) : undefined)
+
+        return (
+            <ListItem
+                key={key}
+                layout="Horizontal"
+                navArrow={false}
+                showSupportText={false}
+                title={item.title}
+                leading={leading}
+                trailing={trailing}
+                onPress={item.onPress}
+                modes={listItemModes}
+            />
+        )
+    }
+
+    const headerNode =
+        showHeader && (headerTitle != null || headerItem != null) ? (
+            <View style={styles.section}>
+                <View style={styles.cardHeader}>
+                    {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
+                    {headerItem != null ? renderItem(headerItem, 'header-item') : null}
+                </View>
+                <Divider modes={modes} />
+            </View>
+        ) : null
+
+    const bodyList = children
+        ? cloneChildrenWithModes(children, listItemModes)
+        : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index))
+
+    const ctaNode = button ?? (
+        <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    const content = (
+        <>
+            {headerNode}
+            <View style={tokens.body}>
+                {bodyTitle != null ? <RNText style={tokens.title}>{bodyTitle}</RNText> : null}
+                <View style={tokens.listWrap}>{bodyList}</View>
+            </View>
+            {showButton ? ctaNode : null}
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? headerTitle ?? bodyTitle}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// The "card header" inner gap (title -> highlighted item) is a fixed 4px in
+// the Figma node and has no dedicated token.
+const CARD_HEADER_GAP = 4
+
+interface ResolvedTokens {
+    container: ViewStyle
+    body: ViewStyle
+    listWrap: ViewStyle
+    title: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('benefitCard/background', modes), '#ffffff')
+    const paddingHorizontal = asNum(getVariableByName('benefitCard/padding/horizontal', modes), 12)
+    const paddingVertical = asNum(getVariableByName('benefitCard/padding/vertical', modes), 12)
+    const radius = asNum(getVariableByName('benefitCard/radius', modes), 12)
+    const gap = asNum(getVariableByName('benefitCard/gap', modes), 8)
+
+    const titleColor = asStr(getVariableByName('benefitCard/title/foreground', modes), '#000000')
+    const titleSize = asNum(getVariableByName('benefitCard/title/fontsize', modes), 14)
+    const titleFamily = asStr(getVariableByName('benefitCard/title/fontFamily', modes), 'JioType Var')
+    const titleWeight = asStr(getVariableByName('benefitCard/title/fontWeight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            paddingHorizontal,
+            paddingVertical,
+            borderRadius: radius,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+        },
+        body: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        listWrap: {
+            alignSelf: 'stretch',
+            gap,
+        },
+        title: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: 20,
+            letterSpacing: -0.5,
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_ITEMS: BenefitCardItem[] = [
+    { icon: 'ic_card', title: 'Up to ₹5000 cashback' },
+    { icon: 'ic_card', title: '25% extra JioPoints' },
+]
+
+const styles = StyleSheet.create({
+    section: {
+        alignSelf: 'stretch',
+        gap: 8,
+    },
+    cardHeader: {
+        alignSelf: 'stretch',
+        gap: CARD_HEADER_GAP,
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default BenefitCard

package/src/components/BottomNav/BottomNav.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import BottomNavItem from '../BottomNavItem/BottomNavItem'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type BottomNavProps = {
   /**
@@ -20,7 +21,7 @@ type BottomNavProps = {
    */
   children?: React.ReactNode;
 
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -15,11 +15,12 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type BottomNavItemProps = SafePressableProps & {
   iconName?: string;
   label?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -51,7 +52,7 @@ interface BottomNavItemTokens {
 }
 
 function resolveBottomNavItemTokens(
-  modes: Record<string, any>,
+  modes: Modes,
   disabled: boolean,
   iconColorOverride?: string,
   iconSizeOverride?: number,

package/src/components/BrandChip/BrandChip.tsx

@@ -12,6 +12,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Avatar from '../Avatar/Avatar'
+import type { Modes } from '../../design-tokens'
 
 export type BrandChipProps = {
   /** Visible label (e.g. `"Axis Bank • 0245"`). */
@@ -30,7 +31,7 @@ export type BrandChipProps = {
   /** Optional press handler — when provided, the chip becomes a `Pressable`. */
   onPress?: () => void
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Label style override. */
@@ -64,7 +65,7 @@ const toFontWeight = (
   return fallback
 }
 
-function resolveBrandChipTokens(modes: Record<string, any>): BrandChipTokens {
+function resolveBrandChipTokens(modes: Modes): BrandChipTokens {
   const background =
     (getVariableByName('brandChip/background', modes) as string | null) ??
     '#ffffff'

package/src/components/BubbleChart/BubbleChart.tsx

@@ -7,6 +7,7 @@ import {
     type ViewStyle,
 } from 'react-native'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 import ClusterBubble, {
     type ClusterBubbleLabelDirection,
     type ClusterBubbleLabelPlacement,
@@ -78,7 +79,7 @@ export type BubbleChartProps = {
     /** Notified when a bubble is pressed. Makes every bubble pressable. */
     onBubblePress?: (datum: BubbleDatum, index: number) => void
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the whole chart. */

package/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
+import type { Modes } from '../../design-tokens'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -44,7 +45,7 @@ export type ButtonProps = SafePressableProps & {
    * Takes precedence over `trailing` if both are provided.
    */
   icon?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -112,7 +113,7 @@ interface ButtonTokens {
   accessoryOffset: number;
 }
 
-function resolveButtonTokens(modes: Record<string, any>, disabled: boolean): ButtonTokens {
+function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
   const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
   const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
   const borderWidth = getVariableByName('button/border/size', modes)

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -7,6 +7,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
 import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
 
 export type ButtonGroupProps = {
     /**
@@ -18,7 +19,7 @@ export type ButtonGroupProps = {
      * Mode configuration for design tokens (e.g., {"Button / Size": "M", "Appearance": "high"})
      * These modes are passed down to all child components.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Additional styles for the container
      */

package/src/components/Card/Card.tsx

@@ -2,13 +2,14 @@ import React, { createContext, useContext, isValidElement, cloneElement, useMemo
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 /**
  * Context to share 'modes' with child components like Card.Title and Card.SupportText.
  * This ensures that nested components can resolve their tokens correctly without 
  * needing explicit mode prop passing for every child.
  */
-const CardContext = createContext<{ modes?: Record<string, any> }>({});
+const CardContext = createContext<{ modes?: Modes }>({});
 
 export interface CardProps {
     /**
@@ -28,7 +29,7 @@ export interface CardProps {
     /**
      * Modes object for token resolution (e.g. { "Mode": "Dark" }).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Aspect ratio for the media slot container.
      * Default is based on Figma design 154/116 (~1.328).
@@ -151,7 +152,7 @@ export function Card({
 export interface CardTextProps {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 
 /**

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -12,6 +12,7 @@ import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
 import Nudge from '../Nudge/Nudge'
+import type { Modes } from '../../design-tokens'
 
 type CardAdvisoryBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -41,7 +42,7 @@ export type CardAdvisoryProps = CardAdvisoryBaseProps & {
   /** Optional slot replacing the bottom nudge. Receives `modes` recursively. */
   nudgeSlot?: React.ReactNode
   /** Design token modes forwarded to token lookups and child components. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional container style override. */
   style?: StyleProp<ViewStyle>
   /** Optional main content row style override. */
@@ -94,7 +95,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
   return fallback
 }
 
-function resolveCardAdvisoryTokens(modes: Record<string, any>): CardAdvisoryTokens {
+function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
   const width = toNumber(getVariableByName('cardAdvisory/width', modes), 360)
   const gap = toNumber(getVariableByName('cardAdvisory/gap', modes), 16)
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)

package/src/components/CardBankAccount/CardBankAccount.tsx

@@ -12,6 +12,7 @@ import Badge from '../Badge/Badge'
 import Button from '../Button/Button'
 import InstitutionBadge from '../InstitutionBadge/InstitutionBadge'
 import type { UnifiedSource } from '../../utils/MediaSource'
+import type { Modes } from '../../design-tokens'
 
 export type CardBankAccountItem = {
     /** Left-aligned label text (e.g. "Account type"). */
@@ -74,7 +75,7 @@ export type CardBankAccountProps = {
      * out of the box. Caller-supplied modes are merged on top and can
      * override any of the default keys.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Container style override. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the card region. */

package/src/components/CardCTA/CardCTA.tsx

@@ -8,12 +8,13 @@ import Button from '../Button/Button'
 import Badge from '../Badge/Badge'
 import ButtonGroup from '../ButtonGroup/ButtonGroup'
 import IconButton from '../IconButton/IconButton'
+import type { Modes } from '../../design-tokens'
 
 export type CardCTAType = 'cta' | 'rating'
 
 const optionalTokenAvailability = new Map<string, boolean>()
 
-function getOptionalVariableByName<T>(name: string, modes: Record<string, any>, fallback: T): T {
+function getOptionalVariableByName<T>(name: string, modes: Modes, fallback: T): T {
     let isAvailable = optionalTokenAvailability.get(name)
 
     if (isAvailable === undefined) {
@@ -50,7 +51,7 @@ export type CardCTAProps = {
     /** Callback for the default dislike action */
     onPressDislike?: () => void;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot: replaces the default icon area (right side) */
     iconSlot?: React.ReactNode;
     /** Slot: replaces the default Button */