jfs-components 0.0.71 → 0.0.72

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type CircularProgressBarProps } from '../CircularProgressBar/CircularProgressBar';
+type CardFinancialConditionBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
+    /** Title text shown in the header. */
+    title?: string;
+    /** Body / description shown below the title. */
+    body?: string;
+    /** Progress score for the circular indicator. Forwarded to CircularProgressBar. */
+    value?: number;
+    /** Visual state of the circular indicator. Forwarded to CircularProgressBar. */
+    progressState?: CircularProgressBarProps['state'];
+    /** Optional formatted value label for the active state. */
+    valueLabel?: string;
+    /** Show the bottom advisory nudge. */
+    showNudge?: boolean;
+    /** Body text for the default nudge. Use `\n` to add a second line. */
+    nudgeBody?: string;
+    /** Show the bottom divider above the action button. */
+    showDivider?: boolean;
+    /** Show the action button at the bottom of the card. */
+    showButton?: boolean;
+    /** Label for the default action button. */
+    buttonLabel?: string;
+    /** Callback for the default action button press. */
+    onPressButton?: () => void;
+    /** Slot replacing the default circular progress bar. Receives `modes` recursively. */
+    progressSlot?: React.ReactNode;
+    /** Slot replacing the default Nudge. Receives `modes` recursively. */
+    nudgeSlot?: React.ReactNode;
+    /** Slot replacing the default action button. Receives `modes` recursively. */
+    buttonSlot?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and child components. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Header row style override. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Title text style override. */
+    titleStyle?: StyleProp<TextStyle>;
+    /** Body text style override. */
+    bodyStyle?: StyleProp<TextStyle>;
+    /** Accessibility label for the whole card. */
+    accessibilityLabel?: string;
+};
+declare function CardFinancialCondition({ title, body, value, progressState, valueLabel, showNudge, nudgeBody, showDivider, showButton, buttonLabel, onPressButton, progressSlot, nudgeSlot, buttonSlot, modes: propModes, style, headerStyle, titleStyle, bodyStyle, accessibilityLabel, ...rest }: CardFinancialConditionProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CardFinancialCondition>;
+export default _default;
+//# sourceMappingURL=CardFinancialCondition.d.ts.map

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { type UnifiedSource } from '../../utils/MediaSource';
+type InstitutionBadgeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>;
+export type InstitutionBadgeProps = InstitutionBadgeBaseProps & {
+    /** Visible label for the institution (e.g. bank name). */
+    label?: string;
+    /**
+     * Unified avatar source. Accepts a remote URI (raster or `.svg`), an
+     * inline SVG XML string, a `require()` asset, an SVG React component,
+     * or an already-rendered React element. Smart-detects raster vs SVG so
+     * the same prop works on iOS, Android and web. See {@link UnifiedSource}.
+     * Ignored when `avatarSlot` is provided.
+     */
+    source?: UnifiedSource;
+    /** Slot replacing the default Avatar (e.g. for monogram avatars). Receives `modes` recursively. */
+    avatarSlot?: React.ReactNode;
+    /** Design token modes forwarded to token lookups and the Avatar slot. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Label style override. */
+    labelStyle?: StyleProp<TextStyle>;
+    /** Accessibility label. Defaults to `label`. */
+    accessibilityLabel?: string;
+};
+declare function InstitutionBadge({ label, source, avatarSlot, modes: propModes, style, labelStyle, accessibilityLabel, ...rest }: InstitutionBadgeProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof InstitutionBadge>;
+export default _default;
+//# sourceMappingURL=InstitutionBadge.d.ts.map

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

@@ -0,0 +1,30 @@
+import { ViewStyle, StyleProp } from 'react-native';
+export interface RadioProps {
+    /**
+     * Whether the radio is selected.
+     */
+    selected?: boolean;
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Function to call when the radio is pressed.
+     */
+    onPress?: () => void;
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Custom style for the radio container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing.
+     */
+    testID?: string;
+}
+export declare function Radio({ selected, disabled, onPress, modes, style, testID, }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

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

@@ -1,30 +1,22 @@
-import { ViewStyle, StyleProp } from 'react-native';
-export interface RadioButtonProps {
-    /**
-     * Whether the radio button is selected.
-     */
-    selected?: boolean;
-    /**
-     * Whether the radio button is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Function to call when the radio button is pressed.
-     */
-    onPress?: () => void;
-    /**
-     * Modes object for design-token resolution.
-     */
-    modes?: Record<string, any>;
-    /**
-     * Custom style for the radio button container.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Test ID for testing.
-     */
-    testID?: string;
-}
-export declare function RadioButton({ selected, disabled, onPress, modes, style, testID, }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated `RadioButton` has been renamed to `Radio`.
+ *
+ * This file is kept as a backward-compatibility shim for teams that may be
+ * importing `RadioButton` directly from this deep path:
+ *
+ *   import RadioButton from 'jfs-components/src/components/RadioButton/RadioButton'
+ *   import { RadioButton, RadioButtonProps } from '...'
+ *
+ * The recommended public import is now:
+ *
+ *   import { Radio, type RadioProps } from 'jfs-components'
+ *
+ * Going forward, this component is called `Radio`. This shim only re-exports
+ * the new `Radio` component under the old `RadioButton` names; please migrate
+ * existing usages to `Radio` at your earliest convenience.
+ */
+import { Radio, type RadioProps } from '../Radio/Radio';
+export type RadioButtonProps = RadioProps;
+export declare const RadioButton: typeof Radio;
 export default RadioButton;
 //# sourceMappingURL=RadioButton.d.ts.map

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

@@ -12,6 +12,7 @@ export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
 export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/CardFeedback';
+export { default as CardFinancialCondition, type CardFinancialConditionProps } from './CardFinancialCondition/CardFinancialCondition';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -65,8 +66,14 @@ export { default as ButtonGroup, type ButtonGroupProps } from './ButtonGroup/But
 export { default as CardProviderInfo, type CardProviderInfoProps } from './CardProviderInfo/CardProviderInfo';
 export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSelect';
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
+export { default as InstitutionBadge, type InstitutionBadgeProps } from './InstitutionBadge/InstitutionBadge';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps, type SupportTextStatus } from './SupportText/SupportTextIcon';
+export { default as Radio, type RadioProps } from './Radio/Radio';
+/**
+ * @deprecated Use `Radio` instead. `RadioButton` is kept as an alias for
+ * backward compatibility and will be removed in a future major release.
+ */
 export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as Tabs, type TabsProps } from './Tabs/Tabs';

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-30T09:22:52.462Z
+ * Generated: 2026-05-04T12:27:11.660Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -97,8 +97,8 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
 function resolveCardAdvisoryTokens(modes: Record<string, any>): 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), 16)
-  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 12)
+  const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)
+  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0)
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0)
   const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff'
 

package/src/components/CardFinancialCondition/CardFinancialCondition.tsx

@@ -0,0 +1,366 @@
+import React, { useMemo } from 'react'
+import {
+  Text,
+  View,
+  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 Button from '../Button/Button'
+import CircularProgressBar, {
+  type CircularProgressBarProps,
+} from '../CircularProgressBar/CircularProgressBar'
+import Divider from '../Divider/Divider'
+import Nudge from '../Nudge/Nudge'
+
+type CardFinancialConditionBaseProps = Omit<
+  React.ComponentProps<typeof View>,
+  'children' | 'style'
+>
+
+export type CardFinancialConditionProps = CardFinancialConditionBaseProps & {
+  /** Title text shown in the header. */
+  title?: string
+  /** Body / description shown below the title. */
+  body?: string
+  /** Progress score for the circular indicator. Forwarded to CircularProgressBar. */
+  value?: number
+  /** Visual state of the circular indicator. Forwarded to CircularProgressBar. */
+  progressState?: CircularProgressBarProps['state']
+  /** Optional formatted value label for the active state. */
+  valueLabel?: string
+  /** Show the bottom advisory nudge. */
+  showNudge?: boolean
+  /** Body text for the default nudge. Use `\n` to add a second line. */
+  nudgeBody?: string
+  /** Show the bottom divider above the action button. */
+  showDivider?: boolean
+  /** Show the action button at the bottom of the card. */
+  showButton?: boolean
+  /** Label for the default action button. */
+  buttonLabel?: string
+  /** Callback for the default action button press. */
+  onPressButton?: () => void
+  /** Slot replacing the default circular progress bar. Receives `modes` recursively. */
+  progressSlot?: React.ReactNode
+  /** Slot replacing the default Nudge. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Slot replacing the default action button. Receives `modes` recursively. */
+  buttonSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Header row style override. */
+  headerStyle?: StyleProp<ViewStyle>
+  /** Title text style override. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Body text style override. */
+  bodyStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole card. */
+  accessibilityLabel?: string
+}
+
+interface CardFinancialConditionTokens {
+  containerStyle: ViewStyle
+  headerStyle: ViewStyle
+  textContentStyle: ViewStyle
+  titleStyle: TextStyle
+  bodyStyle: TextStyle
+  nudgeBodyStyle: TextStyle
+  buttonWrapStyle: ViewStyle
+}
+
+const toNumber = (value: unknown, fallback: 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']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+function resolveCardFinancialConditionTokens(
+  modes: Record<string, any>
+): CardFinancialConditionTokens {
+  const background =
+    (getVariableByName('financialConditionCard/background', modes) as string) ||
+    '#ffffff'
+  const radius = toNumber(
+    getVariableByName('financialConditionCard/radius', modes),
+    16
+  )
+  const paddingH = toNumber(
+    getVariableByName('financialConditionCard/padding/horizontal', modes),
+    16
+  )
+  const paddingV = toNumber(
+    getVariableByName('financialConditionCard/padding/vertical', modes),
+    16
+  )
+  const gap = toNumber(
+    getVariableByName('financialConditionCard/gap', modes),
+    8
+  )
+
+  const headerGap = toNumber(
+    getVariableByName('financialConditionCard/header/gap', modes),
+    16
+  )
+  const textContentGap = toNumber(
+    getVariableByName('financialConditionCard/textContent/gap', modes),
+    8
+  )
+
+  const titleColor =
+    (getVariableByName('financialConditionCard/title/color', modes) as string) ||
+    '#0c0d10'
+  const titleFontSize = toNumber(
+    getVariableByName('financialConditionCard/title/fontSize', modes),
+    16
+  )
+  const titleFontFamily =
+    (getVariableByName(
+      'financialConditionCard/title/fontFamily',
+      modes
+    ) as string) || 'JioType Var'
+  const titleLineHeight = toNumber(
+    getVariableByName('financialConditionCard/title/lineHeight', modes),
+    18
+  )
+  const titleFontWeight = toFontWeight(
+    getVariableByName('financialConditionCard/title/fontWeight', modes),
+    '700'
+  )
+
+  const bodyColor =
+    (getVariableByName('financialConditionCard/body/color', modes) as string) ||
+    '#0c0d10'
+  const bodyFontSize = toNumber(
+    getVariableByName('financialConditionCard/body/fontSize', modes),
+    14
+  )
+  const bodyFontFamily =
+    (getVariableByName(
+      'financialConditionCard/body/fontFamily',
+      modes
+    ) as string) || 'JioType Var'
+  const bodyLineHeight = toNumber(
+    getVariableByName('financialConditionCard/body/lineHeight', modes),
+    17
+  )
+  const bodyFontWeight = toFontWeight(
+    getVariableByName('financialConditionCard/body/fontWeight', modes),
+    '400'
+  )
+
+  const nudgeBodyColor =
+    (getVariableByName('nudge/body/color', modes) as string) || '#1a1c1f'
+  const nudgeBodyFontSize = toNumber(
+    getVariableByName('nudge/body/fontSize', modes),
+    12
+  )
+  const nudgeBodyFontFamily =
+    (getVariableByName('nudge/body/fontFamily', modes) as string) || 'JioType Var'
+  const nudgeBodyLineHeight = toNumber(
+    getVariableByName('nudge/body/lineHeight', modes),
+    16
+  )
+  const nudgeBodyFontWeight = toFontWeight(
+    getVariableByName('nudge/body/fontWeight', modes),
+    '500'
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV,
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%',
+    },
+    textContentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: textContentGap,
+      minWidth: 1,
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight,
+    },
+    bodyStyle: {
+      color: bodyColor,
+      fontFamily: bodyFontFamily,
+      fontSize: bodyFontSize,
+      fontWeight: bodyFontWeight,
+      lineHeight: bodyLineHeight,
+    },
+    nudgeBodyStyle: {
+      color: nudgeBodyColor,
+      fontFamily: nudgeBodyFontFamily,
+      fontSize: nudgeBodyFontSize,
+      fontWeight: nudgeBodyFontWeight,
+      lineHeight: nudgeBodyLineHeight,
+    },
+    buttonWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'flex-start',
+    },
+  }
+}
+
+function CardFinancialCondition({
+  title = 'Protection',
+  body = 'Check your coverage and gaps',
+  value = 0,
+  progressState = 'Inactive',
+  valueLabel,
+  showNudge = true,
+  nudgeBody = 'There may be gaps in your health or life cover\nAdd coverage to stay financially secure',
+  showDivider = true,
+  showButton = true,
+  buttonLabel = 'View Details',
+  onPressButton,
+  progressSlot,
+  nudgeSlot,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  headerStyle,
+  titleStyle,
+  bodyStyle,
+  accessibilityLabel,
+  ...rest
+}: CardFinancialConditionProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(
+    () => resolveCardFinancialConditionTokens(modes),
+    [modes]
+  )
+
+  // Match Figma: the action button is the primary call-to-action and uses the
+  // Secondary brand (purple) regardless of the card's overall AppearanceBrand,
+  // while Nudge / CircularProgressBar still follow the user-supplied modes.
+  const buttonModes = useMemo(
+    () => ({ ...modes, AppearanceBrand: 'Secondary' }),
+    [modes]
+  )
+
+  const processedProgressSlot = useMemo(() => {
+    if (!progressSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(progressSlot),
+      modes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [progressSlot, modes])
+
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(nudgeSlot),
+      modes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [nudgeSlot, modes])
+
+  const processedButtonSlot = useMemo(() => {
+    if (!buttonSlot) return null
+    const processed = cloneChildrenWithModes(
+      React.Children.toArray(buttonSlot),
+      buttonModes
+    )
+    return processed.length === 1 ? processed[0] : processed
+  }, [buttonSlot, buttonModes])
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${title}. ${body}.`
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.headerStyle, headerStyle]}>
+        <View style={tokens.textContentStyle}>
+          <Text style={[tokens.titleStyle, titleStyle]}>{title}</Text>
+          <Text style={[tokens.bodyStyle, bodyStyle]}>{body}</Text>
+        </View>
+
+        {processedProgressSlot || (
+          <CircularProgressBar
+            state={progressState}
+            value={value}
+            modes={modes}
+            {...(valueLabel ? { valueLabel } : {})}
+          />
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge type="inline-compact" modes={modes} style={{ width: '100%' }}>
+            <Text style={tokens.nudgeBodyStyle}>{nudgeBody}</Text>
+          </Nudge>
+        )
+      ) : null}
+
+      {showDivider ? <Divider modes={modes} /> : null}
+
+      {showButton ? (
+        <View style={tokens.buttonWrapStyle}>
+          {processedButtonSlot || (
+            <Button
+              label={buttonLabel}
+              modes={buttonModes}
+              {...(onPressButton ? { onPress: onPressButton } : {})}
+            />
+          )}
+        </View>
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CardFinancialCondition)

package/src/components/Carousel/Carousel.tsx

@@ -102,6 +102,10 @@ export function Carousel({
   const containerPaddingV = parseFloat(
     getVariableByName('carousel/padding/vertical', modes) || '0',
   )
+  // Outer container max height per Figma (`carousel/maxHeight`).
+  const maxHeight = parseFloat(
+    getVariableByName('carousel/maxHeight', modes) || '280',
+  )
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
 
@@ -251,6 +255,7 @@ export function Carousel({
   // ---- Render ----
   const outerStyle: ViewStyle = {
     paddingVertical: containerPaddingV,
+    maxHeight,
   }
 
   const contentContainerStyle: ViewStyle = {
@@ -364,21 +369,24 @@ export function Pagination({ modes: propModes, style }: PaginationProps) {
   const modes = propModes || ctxModes || {}
 
   // Token resolution for dots — matches Figma tokens
-  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
-  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
-  const dotSize = 6
-  const dotActiveWidth = 16
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
+  const dotSize = parseFloat(
+    getVariableByName('carousel/pagination/indicator/size', modes) || '6',
+  )
+  const dotActiveWidth = parseFloat(
+    getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16',
+  )
   const dotGap = parseFloat(
     getVariableByName('carousel/pagination/gap', modes) || '4',
   )
   const dotColor =
     (getVariableByName(
-      'carousel/pagination/indicator/inactivecolor',
+      'carousel/pagination/indicator/inactiveColor',
       modes,
     ) as string) || 'rgba(0,0,0,0.3)'
   const dotActiveColor =
     (getVariableByName(
-      'carousel/pagination/indicator/activecolor',
+      'carousel/pagination/indicator/activeColor',
       modes,
     ) as string) || '#170d0a'
   const dotRadius = parseFloat(

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -9,7 +9,7 @@ import {
     type ImageSourcePropType,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import RadioButton from '../RadioButton/RadioButton'
+import Radio from '../Radio/Radio'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 export interface HoldingsCardDetailItem {
@@ -198,7 +198,7 @@ export default function HoldingsCard({
 
                 {/* Pointer events disabled — the whole card is the pressable target */}
                 <View pointerEvents="none">
-                    <RadioButton
+                    <Radio
                         selected={selected}
                         disabled={disabled}
                         modes={modes}