jfs-components 0.0.74 → 0.0.78

package/src/components/FormField/FormField.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import {
   View,
   Text,
+  Pressable,
   TextInput as RNTextInput,
   type StyleProp,
   type TextInputProps as RNTextInputProps,
@@ -346,6 +347,16 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false)
   const interactive = !isDisabled && !isReadOnly
 
+  // Ref to the native input so tapping anywhere in the input row (padding,
+  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
+  // "two taps to open the keyboard" issue caused by the row intercepting the
+  // initial touch.
+  const inputRef = useRef<RNTextInput>(null)
+  const focusInput = useCallback(() => {
+    if (!interactive) return
+    inputRef.current?.focus()
+  }, [interactive])
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -541,7 +552,11 @@ function FormField({
         </View>
       )}
 
-      <View style={[inputRowStyle, inputStyle]}>
+      <Pressable
+        style={[inputRowStyle, inputStyle]}
+        onPress={focusInput}
+        accessible={false}
+      >
         {processedLeading != null && (
           <View
             accessibilityElementsHidden
@@ -551,6 +566,7 @@ function FormField({
           </View>
         )}
         <RNTextInput
+          ref={inputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -578,7 +594,7 @@ function FormField({
             {processedTrailing}
           </View>
         )}
-      </View>
+      </Pressable>
 
       {supportLabel != null && supportLabel !== '' && (
         <SupportText

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -0,0 +1,414 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
+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 Disclaimer from '../Disclaimer/Disclaimer'
+import IconButton from '../IconButton/IconButton'
+import ActionFooter from '../ActionFooter/ActionFooter'
+
+// ---------------------------------------------------------------------------
+// Forced modes
+//
+// `FullscreenModal` always themes itself with the `context5: 'Fullscreen Modal'`
+// collection mode. This is what flips the section / list-item / hero text
+// tokens to their white-on-dark values (see the Figma "Fullscreen Modal"
+// context). It is intentionally NON-overridable: callers can pass any other
+// modes (Color Mode, AppearanceBrand, …) but never context5. The frozen
+// object keeps its identity stable so the token resolver's per-modes cache
+// stays hot, and so `cloneChildrenWithModes` can use it as the
+// always-wins `forcedModes` argument.
+// ---------------------------------------------------------------------------
+const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({ context5: 'Fullscreen Modal' })
+
+// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
+// Module scope so the wrapped component identity is stable across renders.
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
+
+// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
+// its full width is preserved and the media keeps a fixed aspect ratio (it is
+// cropped, never scaled or squished, like a `cover` background). When no
+// explicit `heroMinHeight` is given, the hero collapses to this fraction of
+// its resting height.
+const HERO_MIN_HEIGHT_RATIO = 0.45
+
+export type FullscreenModalProps = {
+  /** Small eyebrow line above the headline. */
+  eyebrow?: string
+  /** Large hero headline. */
+  headline?: string
+  /** Supporting paragraph shown below the headline. */
+  supportingText?: string
+  /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
+  priceText?: string
+  /**
+   * Media rendered full-bleed behind the hero text and driven by the parallax
+   * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
+   * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
+   * (`heroHeight` tall, full modal width) and let it `cover` so that as the
+   * hero collapses in height the art is cropped, never distorted. `modes` are
+   * cascaded into it.
+   */
+  heroMedia?: React.ReactNode
+  /** Resting height of the hero region. Defaults to 420. */
+  heroHeight?: number
+  /**
+   * Collapsed height the hero shrinks to at full scroll. Defaults to
+   * `heroHeight * 0.45`. Only the height changes — the width is always full.
+   */
+  heroMinHeight?: number
+  /** Enable the scroll-driven hero collapse. Defaults to true. */
+  parallax?: boolean
+  /** Whether to render the floating close button (top-right). Defaults to true. */
+  showClose?: boolean
+  /** Press handler for the close button. */
+  onClose?: () => void
+  /** Accessibility label for the close button. */
+  closeAccessibilityLabel?: string
+  /**
+   * Fully custom footer content rendered inside the sticky `ActionFooter`.
+   * When provided, `primaryActionLabel` / `disclaimer` are ignored.
+   */
+  footer?: React.ReactNode
+  /** Label for the default primary action button in the footer. */
+  primaryActionLabel?: string
+  /** Press handler for the default primary action button. */
+  onPrimaryAction?: () => void
+  /** Disclaimer text shown below the default primary action button. */
+  disclaimer?: string
+  /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
+  backgroundColor?: string
+  /** Body content (typically `Section`s). `modes` are cascaded automatically. */
+  children?: React.ReactNode
+  /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+  modes?: Record<string, any>
+  /** Style overrides for the outer container. */
+  style?: StyleProp<ViewStyle>
+  /** Style overrides for the scroll body wrapper (the dark content area). */
+  contentContainerStyle?: StyleProp<ViewStyle>
+  testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Hero text — the eyebrow / headline / supporting / price block. Built inline
+// (rather than reusing <PageHero>) so we can render BOTH a supporting
+// paragraph AND a price line with the exact PageHero token gaps, and overlay
+// it on the parallax media without PageHero's media/button scaffolding.
+// ---------------------------------------------------------------------------
+type HeroTextProps = {
+  eyebrow?: string
+  headline?: string
+  supportingText?: string
+  priceText?: string
+  modes: Record<string, any>
+}
+
+function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroTextProps) {
+  const styles = useMemo(() => {
+    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+
+    const eyebrowStyle: TextStyle = {
+      color: (getVariableByName('PageHero/eyebrow/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      textAlign: 'center',
+    }
+    const headlineStyle: TextStyle = {
+      color: (getVariableByName('PageHero/headline/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      textAlign: 'center',
+      width: '100%',
+    }
+    const supportingTextStyle: TextStyle = {
+      color: (getVariableByName('PageHero/supportingText/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      textAlign: 'center',
+    }
+    const priceTextStyle: TextStyle = {
+      color: (getVariableByName('PageHero/body/color', modes) as string) || '#ffffff',
+      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string) || 'System',
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      textAlign: 'center',
+    }
+
+    return {
+      container: { width: '100%', alignItems: 'center', gap } as ViewStyle,
+      textWrap: { width: '100%', alignItems: 'center', gap: textWrapGap } as ViewStyle,
+      eyebrowStyle,
+      headlineStyle,
+      supportingTextStyle,
+      priceTextStyle,
+    }
+  }, [modes])
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrap}>
+        {eyebrow ? <Text style={styles.eyebrowStyle}>{eyebrow}</Text> : null}
+        {headline ? <Text style={styles.headlineStyle}>{headline}</Text> : null}
+      </View>
+      {supportingText ? <Text style={styles.supportingTextStyle}>{supportingText}</Text> : null}
+      {priceText ? <Text style={styles.priceTextStyle}>{priceText}</Text> : null}
+    </View>
+  )
+}
+
+/**
+ * FullscreenModal — a full-screen takeover surface with a parallax media hero,
+ * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ *
+ * The component always themes itself with `context5: 'Fullscreen Modal'`
+ * (non-overridable) so every nested component (Section, ListItem, Button,
+ * Disclaimer, …) resolves the white-on-dark "fullscreen modal" token values.
+ * That mode is cascaded into `children`, the footer, and the hero text via
+ * `cloneChildrenWithModes` / the merged `modes` object.
+ *
+ * ### Parallax
+ * As the user scrolls up, the hero collapses by **height only** (from
+ * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
+ * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
+ * the collapsing clip, so it keeps a perfect aspect ratio the whole time
+ * (never scaled or squished). Because it collapses slower than the content
+ * scrolls, the media lags behind for the parallax depth cue. Disable with
+ * `parallax={false}`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FullscreenModal
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Get more from your money."
+ *   supportingText="JioFinance+ is your upgraded financial experience…"
+ *   priceText="₹999/year · ₹0 until 2027"
+ *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   primaryActionLabel="Upgrade for free"
+ *   disclaimer="By upgrading, we'll check your eligibility with Experian."
+ *   onPrimaryAction={() => upgrade()}
+ *   onClose={() => navigation.goBack()}
+ * >
+ *   <Section title="Key Benefits" slotDirection="column" slot={…} />
+ *   <Section title="Compare plans" slotDirection="column" slot={…} />
+ * </FullscreenModal>
+ * ```
+ */
+function FullscreenModal({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Get more from your money.',
+  supportingText = 'JioFinance+ is your upgraded financial experience, designed to work harder in the background so your money works smarter in real life.',
+  priceText = '₹999/year · ₹0 until 2027',
+  heroMedia,
+  heroHeight = 420,
+  heroMinHeight,
+  parallax = true,
+  showClose = true,
+  onClose,
+  closeAccessibilityLabel = 'Close',
+  footer,
+  primaryActionLabel = 'Upgrade for free',
+  onPrimaryAction,
+  disclaimer = "By upgrading, we'll check your eligibility with Experian.",
+  backgroundColor = '#0f0d0a',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentContainerStyle,
+  testID,
+}: FullscreenModalProps) {
+  const { modes: globalModes } = useTokens()
+
+  // context5 is appended last so it always wins, regardless of what the
+  // caller (or the global theme) passes.
+  const modes = useMemo(
+    () => ({ ...globalModes, ...propModes, ...FULLSCREEN_MODAL_FORCED_MODES }),
+    [globalModes, propModes]
+  )
+
+  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
+
+  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO)
+
+  const scrollY = useSharedValue(0)
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollY.value = event.contentOffset.y
+  })
+
+  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
+  // never changes and the media inside is pinned full-size at the top, so the
+  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
+  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
+  // hero never grows past its resting height.
+  const heroAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(
+      scrollY.value,
+      [0, heroHeight],
+      [heroHeight, minHeight],
+      Extrapolation.CLAMP
+    )
+    return { height }
+  })
+
+  const processedHeroMedia = useMemo(
+    () =>
+      heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
+    [heroMedia, modes]
+  )
+
+  const processedChildren = useMemo(
+    () =>
+      children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
+    [children, modes]
+  )
+
+  // The clip is full-width and top-pinned; its height is what animates. Width
+  // is intentionally never animated.
+  const heroClipBaseStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      overflow: 'hidden',
+    }),
+    []
+  )
+
+  // The media sits at a fixed full-size box pinned to the top of the clip, so
+  // the collapsing clip crops it from the bottom (cover) instead of resizing
+  // it. Full width, fixed height — a perfect, constant aspect ratio.
+  const heroMediaWrapStyle = useMemo<ViewStyle>(
+    () => ({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: heroHeight,
+      alignItems: 'stretch',
+    }),
+    [heroHeight]
+  )
+
+  const heroTextRegionStyle = useMemo<ViewStyle>(
+    () => ({
+      height: heroHeight,
+      justifyContent: 'flex-end',
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+    }),
+    [heroHeight]
+  )
+
+  const bodyStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      {
+        backgroundColor,
+        gap: rootGap,
+        paddingTop: rootGap,
+        paddingBottom: 24,
+      },
+      contentContainerStyle,
+    ],
+    [backgroundColor, rootGap, contentContainerStyle]
+  )
+
+  const heroClip = (
+    <Animated.View
+      style={[heroClipBaseStyle, parallax ? heroAnimatedStyle : { height: heroHeight }]}
+      pointerEvents="none"
+    >
+      <View style={heroMediaWrapStyle}>{processedHeroMedia}</View>
+    </Animated.View>
+  )
+
+  // Footer: a fully custom node, or the default Button + Disclaimer column.
+  let footerContent: React.ReactNode = null
+  if (footer) {
+    footerContent = footer
+  } else if (primaryActionLabel) {
+    footerContent = (
+      <View style={footerColumnStyle}>
+        <Button
+          label={primaryActionLabel}
+          modes={modes}
+          style={fullWidthStyle}
+          {...(onPrimaryAction ? { onPress: onPrimaryAction } : {})}
+        />
+        {disclaimer ? <Disclaimer disclaimer={disclaimer} modes={modes} /> : null}
+      </View>
+    )
+  }
+
+  return (
+    <View style={[rootStyle, { backgroundColor }, style]} testID={testID}>
+      {processedHeroMedia ? heroClip : null}
+
+      <AnimatedScrollView
+        style={scrollViewStyle}
+        contentContainerStyle={scrollContentStyle}
+        showsVerticalScrollIndicator={false}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      >
+        <View style={heroTextRegionStyle}>
+          <HeroText
+            eyebrow={eyebrow}
+            headline={headline}
+            supportingText={supportingText}
+            priceText={priceText}
+            modes={modes}
+          />
+        </View>
+        <View style={bodyStyle}>{processedChildren}</View>
+      </AnimatedScrollView>
+
+      {footerContent ? (
+        <ActionFooter modes={modes}>{footerContent}</ActionFooter>
+      ) : null}
+
+      {showClose ? (
+        <IconButton
+          iconName="ic_close"
+          modes={modes}
+          accessibilityLabel={closeAccessibilityLabel}
+          style={closeButtonStyle}
+          {...(onClose ? { onPress: onClose } : {})}
+        />
+      ) : null}
+    </View>
+  )
+}
+
+// Module-scope style constants — never re-allocated per render.
+const rootStyle: ViewStyle = { flex: 1, width: '100%', position: 'relative' }
+const scrollViewStyle: ViewStyle = { flex: 1 }
+const scrollContentStyle: ViewStyle = { flexGrow: 1 }
+const footerColumnStyle: ViewStyle = { width: '100%', gap: 8 }
+const fullWidthStyle: ViewStyle = { width: '100%' }
+const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }
+
+export default FullscreenModal

package/src/components/IconButton/IconButton.tsx

@@ -12,6 +12,8 @@ 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 { UnifiedSource } from '../../utils/MediaSource'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 type IconButtonProps = SafePressableProps & {
   /** Built-in icon name from the registry (default state). */
@@ -65,6 +67,12 @@ type IconButtonProps = SafePressableProps & {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * same-size pill-shaped skeleton instead of the button. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -155,6 +163,7 @@ function IconButton({
   inactiveIcon,
   inactiveSource,
   isActive = false,
+  loading,
   ...rest
 }: IconButtonProps) {
   // Merge explicit props with modes for token resolution. Memoize the merged
@@ -174,6 +183,11 @@ function IconButton({
     [componentModes, disabled]
   )
 
+  // Hook called unconditionally — short-circuit below comes AFTER all hooks
+  // to keep React's hook order stable across renders.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
 
@@ -271,6 +285,19 @@ function IconButton({
     [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]
   )
 
+  if (isLoading) {
+    const size = tokens.baseContainerStyle.width as number
+    return (
+      <Skeleton
+        kind="other"
+        width={size}
+        height={size}
+        style={style as any}
+        modes={componentModes}
+      />
+    )
+  }
+
   return (
     <Pressable
       accessibilityRole="button"

package/src/components/Image/Image.tsx

@@ -8,6 +8,8 @@ import {
   type ViewStyle,
   type ImageResizeMode,
 } from 'react-native'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type ImageProps = {
   /**
@@ -52,6 +54,13 @@ export type ImageProps = {
     | 'no'
     | 'no-hide-descendants'
     | undefined
+  /**
+   * Explicit per-instance loading override. When `true`, the image renders as
+   * a skeleton placeholder at the same box size; when `false`, the
+   * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+   * the group.
+   */
+  loading?: boolean | undefined
 }
 
 function normalizeSource(
@@ -94,6 +103,7 @@ function Image({
   accessibilityLabel,
   accessibilityElementsHidden,
   importantForAccessibility,
+  loading,
 }: ImageProps) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource])
 
@@ -112,6 +122,21 @@ function Image({
     return s
   }, [ratio, width, height, borderRadius])
 
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    // Match the loaded image's exact box. If height is unknown but a ratio
+    // is set, the skeleton uses `aspectRatio` the same way the loaded image
+    // would, so layout never jumps when the load resolves.
+    const skeletonStyle: ViewStyle = {
+      width: (width ?? '100%') as ViewStyle['width'],
+      ...(height != null
+        ? { height: height as number }
+        : { aspectRatio: ratio }),
+    }
+    return <Skeleton kind="image" style={skeletonStyle} />
+  }
+
   if (!source) {
     return <View style={[layoutStyle, style as StyleProp<ViewStyle>]} />
   }

package/src/components/ListItem/ListItem.tsx

@@ -72,8 +72,19 @@ interface ListItemTokens {
 }
 
 function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
+  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // We do NOT inject an `AppearanceBrand` default here: slot content such as
+  // Buttons or Badges carry their own intended appearance, so forcing one onto
+  // them would be surprising.
   const resolvedModes = { ...modes, Context: 'ListItem' }
 
+  // Modes used to resolve the ListItem's OWN title + support text. Within this
+  // component, `AppearanceBrand` only affects `listItem/title/color` and
+  // `listItem/supportText/color`, so the text defaults to the "Neutral"
+  // appearance (in both Vertical and Horizontal layouts). A caller-supplied
+  // `AppearanceBrand` still wins; `Context` is always forced to 'ListItem'.
+  const textModes = { AppearanceBrand: 'Neutral', ...modes, Context: 'ListItem' }
+
   const gap = (getVariableByName('listItem/gap', resolvedModes) ?? 8) as number
   const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0
   const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0
@@ -81,19 +92,19 @@ function resolveListItemTokens(modes: Record<string, any>): ListItemTokens {
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
   const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
 
-  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System'
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700
+  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a'
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System'
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
-  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14'
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System'
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500
+  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14'
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System'
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500
   const supportFontWeight =
     typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw