jfs-components 0.0.99 → 0.1.2

package/src/components/Screen/Screen.tsx

@@ -8,6 +8,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface ScreenProps {
     /**
@@ -17,7 +18,7 @@ export interface ScreenProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */

package/src/components/Section/Section.tsx

@@ -15,6 +15,7 @@ import IconCapsule from '../IconCapsule/IconCapsule'
 import ListItem from '../ListItem/ListItem'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
 // never applies the "pressed" style. See Button.tsx for the rationale.
@@ -356,7 +357,7 @@ type SectionProps = {
   slot?: React.ReactNode;
   /** Layout direction of the slot's children. Defaults to 'row' (horizontal). */
   slotDirection?: 'row' | 'column';
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
@@ -400,7 +401,7 @@ interface SectionTokens {
   slotGap: number;
 }
 
-function resolveSectionTokens(modes: Record<string, any>): SectionTokens {
+function resolveSectionTokens(modes: Modes): SectionTokens {
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
   const sectionGap = (getVariableByName('section/gap', modes) || 12) as number
   const slotGap = (getVariableByName('slot/gap', modes) || 12) as number
@@ -630,7 +631,7 @@ function Section({
 
 type SectionSlotProps = {
   slot: React.ReactNode;
-  modes: Record<string, any>;
+  modes: Modes;
   direction: 'row' | 'column';
   rowGap: number;
   columnGap: number;
@@ -667,7 +668,7 @@ type BentoToggleRenderState = {
 type SectionBentoProps = {
   navSlot?: React.ReactNode;
   upiSlot?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
@@ -891,7 +892,7 @@ function SectionBento({
 type DefaultBentoToggleProps = {
   expanded: boolean;
   onPress: () => void;
-  modes: Record<string, any>;
+  modes: Modes;
   moreLabel: string;
   lessLabel: string;
   moreIcon: string;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type SegmentedControlItem = {
   key: React.Key
@@ -25,7 +26,7 @@ export type SegmentedControlProps = {
   /** Callback fired when the selected segment changes */
   onSelectionChange?: (key: React.Key) => void
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles */
   style?: StyleProp<ViewStyle>
 }
@@ -39,7 +40,7 @@ function SegmentedControlSegment({
   label: string
   active: boolean
   onPress: () => void
-  modes: Record<string, any>
+  modes: Modes
 }) {
   const resolvedModes = {
     ...modes,

package/src/components/SegmentedTrack/SegmentedTrack.tsx

@@ -7,6 +7,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -39,7 +40,7 @@ export type SegmentedTrackSegmentData = {
      * Per-segment design token mode overrides. Merged on top of the parent
      * `modes` and the per-index Emphasis defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override individual segment styles. */
     style?: StyleProp<ViewStyle>
     /** Per-segment accessibility label. */
@@ -60,7 +61,7 @@ export type SegmentedTrackProps = {
      */
     children?: React.ReactNode
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override the container styles. */
     style?: StyleProp<ViewStyle>
     /** Style applied to every segment (data-driven mode only). */
@@ -83,7 +84,7 @@ type SegmentedTrackSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and the
      * per-index Emphasis defaults injected by the parent `SegmentedTrack`.
      */
-    modes?: Record<string, any> | undefined
+    modes?: Modes | undefined
     /** Override the segment styles. */
     style?: StyleProp<ViewStyle> | undefined
     /** Per-segment accessibility label. */
@@ -216,7 +217,7 @@ function renderSegments({
 }: {
     segments: SegmentedTrackSegmentData[] | undefined
     children: React.ReactNode | undefined
-    modes: Record<string, any>
+    modes: Modes
     segmentStyle: StyleProp<ViewStyle> | undefined
 }): React.ReactNode[] {
     if (children !== undefined && children !== null) {

package/src/components/Slot/Slot.tsx

@@ -3,6 +3,7 @@ import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-nati
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type SlotLayoutDirection = 'vertical' | 'horizontal'
 
@@ -30,7 +31,7 @@ export type SlotProps = ViewProps & {
   /**
    * Mode configuration passed to the token resolver and cascaded to children.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
 }
 

package/src/components/Spinner/Spinner.tsx

@@ -14,6 +14,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import { useReducedMotion } from '../../skeleton/useReducedMotion'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
@@ -52,7 +53,7 @@ export type SpinnerProps = SpinnerBaseProps & {
   /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
   animating?: boolean
   /** Design token modes forwarded to token lookups. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Accessibility label announced to assistive tech. Defaults to "Loading". */

package/src/components/StatGroup/StatGroup.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../utils/react-utils'
 import StatItem from '../StatItem/StatItem'
 import Divider from '../Divider/Divider'
+import type { Modes } from '../../design-tokens'
 
 export type StatGroupItem = {
   /** Stable key for the item. Falls back to the label / index. */
@@ -34,7 +35,7 @@ export type StatGroupProps = {
    */
   children?: React.ReactNode
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
 }
@@ -123,7 +124,7 @@ function renderSlotChildren({
 }: {
   items?: StatGroupItem[]
   children?: React.ReactNode
-  modes: Record<string, any>
+  modes: Modes
 }): React.ReactNode[] {
   let nodes: React.ReactNode[]
 

package/src/components/StatItem/StatItem.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StatItemLabelPosition = 'Top' | 'Bottom'
 
@@ -25,7 +26,7 @@ export type StatItemProps = {
    */
   labelPosition?: StatItemLabelPosition
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
   /** Override the label text styles. */

package/src/components/StatusHero/StatusHero.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import MoneyValue from '../MoneyValue/MoneyValue'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StatusHeroProps = {
   /**
@@ -26,7 +27,7 @@ export type StatusHeroProps = {
   /** Currency symbol or ISO code for the default MoneyValue */
   currency?: string
   /** Mode configuration for design tokens */
-  modes?: Record<string, any>
+  modes?: Modes
   style?: ViewStyle
 }
 

package/src/components/Stepper/Step.tsx

@@ -4,12 +4,13 @@ import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { StepLabel } from './StepLabel'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning'
 
 export type StepProps = {
     children?: React.ReactNode
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
     // Injected by Stepper, or provided manually
     index?: number

package/src/components/Stepper/StepLabel.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type StepLabelProps = {
     title?: string
@@ -9,7 +10,7 @@ export type StepLabelProps = {
     metaText?: string
     subtitle?: boolean
     meta?: boolean
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
 }
 

package/src/components/Stepper/Stepper.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { Step } from './Step'
 import { StepLabel } from './StepLabel'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export { Step, StepLabel }
 export type { StepProps, StepStatus } from './Step'
@@ -11,7 +12,7 @@ export type { StepLabelProps } from './StepLabel'
 
 export type StepperProps = {
     children?: React.ReactNode
-    modes?: Record<string, any>
+    modes?: Modes
     style?: ViewStyle
 }
 

package/src/components/StrengthIndicator/StrengthIndicator.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
@@ -40,7 +41,7 @@ export type StrengthIndicatorProps = {
      */
     confidence?: StrengthIndicatorConfidenceValue
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
 } & Omit<React.ComponentProps<typeof View>, 'style'>

package/src/components/SuggestiveSearch/SuggestiveSearch.tsx

@@ -23,6 +23,7 @@ import { EMPTY_MODES } from '../../utils/react-utils'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Dropdown, { DropdownItem } from '../Dropdown/Dropdown'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -134,7 +135,7 @@ export type SuggestiveSearchProps = {
     /** Replaces `supportText` when `isInvalid` is true. */
     errorMessage?: string
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>
     /** Style overrides for the input row. */
@@ -180,7 +181,7 @@ const defaultFilter = (query: string, option: SuggestiveSearchOption) =>
 // Token resolution
 // ---------------------------------------------------------------------------
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
@@ -261,7 +262,7 @@ function useFormFieldTokens(modes: Record<string, any>) {
     }, [modes])
 }
 
-function useDropdownItemTextTokens(modes: Record<string, any>) {
+function useDropdownItemTextTokens(modes: Modes) {
     return useMemo(() => {
         const foreground =
             (getVariableByName('dropdownItem/foreground', modes) as string) ||

package/src/components/SummaryTile/SummaryTile.tsx

@@ -15,6 +15,7 @@ import NavArrow from '../NavArrow/NavArrow'
 import StrengthIndicator, {
     type StrengthIndicatorConfidenceValue,
 } from '../StrengthIndicator/StrengthIndicator'
+import type { Modes } from '../../design-tokens'
 
 export type SummaryTileProps = {
     /** Bold heading shown at the top-left of the tile. */
@@ -50,7 +51,7 @@ export type SummaryTileProps = {
      */
     onPress?: () => void
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
     /** Override the title text styles. */

package/src/components/SupportText/SupportText.tsx

@@ -4,6 +4,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import SupportTextIcon, { type SupportTextStatus } from './SupportTextIcon';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 export type SupportTextProps = {
     /**
@@ -27,7 +28,7 @@ export type SupportTextProps = {
     /**
      * Modes object for design token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 
     style?: StyleProp<ViewStyle>;
 };

package/src/components/SupportText/SupportTextIcon.tsx

@@ -3,12 +3,13 @@ import { View, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import type { Modes } from '../../design-tokens'
 
 export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 

package/src/components/SwappableAmount/SwappableAmount.tsx

@@ -3,6 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Button from '../Button/Button'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type SwappableAmountProps = {
   /** Large display value (e.g. "49g"). */
@@ -18,7 +19,7 @@ export type SwappableAmountProps = {
   /** Callback when the amount/swap button is pressed. */
   onAmountPress?: () => void
   /** Modes configuration for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: ViewStyle
 }

package/src/components/Tabs/TabItem.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface TabItemProps {
   /** Label text to display */
@@ -18,7 +19,7 @@ export interface TabItemProps {
   /** Callback when this tab item is pressed */
   onPress?: () => void
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles */
   style?: StyleProp<ViewStyle>
   /** Override label text styles */

package/src/components/Tabs/Tabs.tsx

@@ -8,6 +8,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TabItem from './TabItem'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface TabsProps {
   /**
@@ -16,7 +17,7 @@ export interface TabsProps {
    */
   children: React.ReactNode
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * When true, the tabs row scrolls horizontally (useful for many items).
    * @default false

package/src/components/TestimonialsCard/TestimonialsCard.tsx

@@ -0,0 +1,163 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  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 Avatar, { type AvatarProps } from '../Avatar/Avatar'
+import type { Modes } from '../../design-tokens'
+
+export type TestimonialsCardProps = {
+  /**
+   * The testimonial heading, typically the author's name.
+   */
+  title?: string
+  /**
+   * The testimonial body copy.
+   */
+  body?: string
+  /**
+   * Mode configuration passed to the token resolver. Also forwarded to the
+   * Avatar child for consistent theming.
+   */
+  modes?: Modes
+  /**
+   * Optional style overrides for the card container.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Props forwarded to the Avatar component (e.g. a custom `imageSource`).
+   */
+  avatarProps?: Partial<AvatarProps>
+  /**
+   * Accessibility label for the card region. Falls back to a label generated
+   * from the title and body.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
+ * a bold title, and a body paragraph. It is typically used inside a horizontal
+ * carousel of customer testimonials.
+ *
+ * All styling values are resolved from Figma design tokens using the provided
+ * `modes`.
+ *
+ * @example
+ * ```tsx
+ * <TestimonialsCard
+ *   title="Aarav S."
+ *   body="I was dreading renewing my car insurance, but JioFinance made it a breeze."
+ * />
+ * ```
+ */
+function TestimonialsCard({
+  title = 'Title',
+  body = 'I was dreading renewing my car insurance, but JioFinance made it a breeze.',
+  modes = EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel,
+}: TestimonialsCardProps) {
+  // Container tokens
+  const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff'
+  const borderColor = getVariableByName('testimonialsCard/border/color', modes) ?? '#e8e8e8'
+  const radius = getVariableByName('testimonialsCard/radius', modes) ?? 8
+  const gap = getVariableByName('testimonialsCard/gap', modes) ?? 8
+  const paddingHorizontal = getVariableByName('testimonialsCard/padding/horizontal', modes) ?? 12
+  const paddingVertical = getVariableByName('testimonialsCard/padding/vertical', modes) ?? 12
+
+  // Title typography tokens
+  const titleColor = getVariableByName('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f'
+  const titleFontSize = getVariableByName('testimonialsCard/title/fontSize', modes) ?? 14
+  const titleFontFamily = getVariableByName('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var'
+  const titleFontWeightRaw = getVariableByName('testimonialsCard/title/fontWeight', modes) ?? 700
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  // Body typography tokens
+  const bodyColor = getVariableByName('testimonialsCard/title/color', modes) ?? '#010101'
+  const bodyFontSize = getVariableByName('testimonialsCard/subtitle/fontSize', modes) ?? 12
+  const bodyLineHeight = getVariableByName('testimonialsCard/subtitle/lineHeight', modes) ?? 16
+  const bodyFontFamily = getVariableByName('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var'
+  const bodyFontWeightRaw = getVariableByName('testimonialsCard/subtitle/fontWeight', modes) ?? 400
+  const bodyFontWeight =
+    typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
+
+  const containerStyle: ViewStyle = {
+    width: 180,
+    backgroundColor: background as string,
+    borderColor: borderColor as string,
+    borderWidth: 1,
+    borderRadius: radius as number,
+    paddingHorizontal: paddingHorizontal as number,
+    paddingVertical: paddingVertical as number,
+    alignItems: 'flex-start',
+    gap: gap as number,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor as string,
+    fontSize: titleFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: titleFontFamily as string,
+    fontWeight: titleFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const bodyTextStyle: TextStyle = {
+    color: bodyColor as string,
+    fontSize: bodyFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: bodyFontFamily as string,
+    fontWeight: bodyFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {}),
+  }
+
+  const resolvedAccessibilityLabel =
+    accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={resolvedAccessibilityLabel}
+    >
+      <Avatar
+        style="Image"
+        modes={avatarModes}
+        {...avatarProps}
+      />
+      <View style={textContainerStyle}>
+        {!!title && (
+          <Text style={titleTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {title}
+          </Text>
+        )}
+        {!!body && (
+          <Text style={bodyTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {body}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const textContainerStyle: ViewStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4,
+}
+
+export default React.memo(TestimonialsCard)

package/src/components/Text/Text.tsx

@@ -4,6 +4,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'
 
 export type TextProps = {
   /**
@@ -20,7 +21,7 @@ export type TextProps = {
   /** Horizontal alignment of the text. */
   textAlign?: 'Left' | 'Center'
   /** Modes configuration for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style override for the text. */
   style?: StyleProp<TextStyle>
   /** Number of lines to limit the text to. */

package/src/components/TextInput/TextInput.tsx

@@ -3,6 +3,7 @@ import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, ty
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * TextInput component that mirrors the Figma "textInput" component.
@@ -102,7 +103,7 @@ type TextInputProps = {
   leadingIconName?: string;
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   onFocus?: (e: any) => void;
@@ -315,7 +316,7 @@ type TextInputSearchProps = {
   value?: string;
   onChangeText?: (text: string) => void;
   leading?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   inputStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;