jfs-components 0.1.34 → 0.1.35

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

@@ -23,10 +23,10 @@ export type LottiePlayerProps = {
      * Override the rendered size. Pass a number for a square box, or
      * `{ width, height }` for non-square.
      *
-     * When omitted, size is resolved from the `media/width` and `media/height`
-     * design tokens (default `117 × 117`). The `Media / Output` collection
+     * When omitted, size is resolved from the `video/width` and `video/height`
+     * design tokens (default `117 × 117`). The `Video / Output` collection
      * exposes `L | M | S` modes (117 / 70 / 20) — pass
-     * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+     * `modes={{ 'Video / Output': 'M' }}` to render at 70×70, etc.
      */
     size?: number | {
         width: number;
@@ -64,8 +64,8 @@ export type LottiePlayerProps = {
  * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
  *
  * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
- * `media/width` and `media/height` from the Figma variables resolver, so the
- * animation matches the surrounding component's `Media / Output` mode
+ * `video/width` and `video/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Video / Output` mode
  * automatically. This is the same sizing contract `PageHero` and
  * `LottieIntroBlock` use for their `media` slots.
  *
@@ -76,7 +76,7 @@ export type LottiePlayerProps = {
  *
  * <LottiePlayer source={animation} />                    // 117 × 117 (default)
  * <LottiePlayer source={animation} size={70} />          // 70 × 70
- * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <LottiePlayer source={animation} modes={{ 'Video / Output': 'S' }} />  // 20 × 20
  * <PageHero media={<LottiePlayer source={animation} />} />
  * ```
  */

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

@@ -4,12 +4,18 @@ import type { Modes } from '../../design-tokens';
 export type PageHeroProps = {
     /** Small eyebrow text shown above the headline. */
     eyebrow?: string;
+    /** Whether to render the eyebrow line. */
+    showEyebrow?: boolean;
     /** Main headline text. Centered and bold. */
     headline?: string;
-    /** Optional supporting text shown below the headline. */
+    /** Supporting text shown directly below the headline (e.g. price). */
     supportingText?: string;
     /** Whether to render the supporting text. */
     showSupportingText?: boolean;
+    /** Optional second supporting line shown below `supportingText`. */
+    body?: string;
+    /** Whether to render the body line. */
+    showBody?: boolean;
     /** Label for the default action button. Ignored when `buttonSlot` is provided. */
     buttonLabel?: string;
     /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
@@ -17,9 +23,10 @@ export type PageHeroProps = {
     /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
     showButton?: boolean;
     /**
-     * Optional slot to fully override the action button.
-     * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
-     * `modes` are automatically cascaded into this slot.
+     * Optional slot to fully override the action button area (e.g. a
+     * `ButtonGroup` with several buttons). When provided, `showButton`,
+     * `buttonLabel`, and `onButtonPress` are ignored. `modes` are automatically
+     * cascaded into this slot.
      */
     buttonSlot?: React.ReactNode;
     /**
@@ -27,16 +34,18 @@ export type PageHeroProps = {
      *
      * Intentionally typed as `React.ReactNode` so the consumer can bring any
      * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
-     * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
-     * from `react-native-svg`, a `<Video />` from `react-native-video`, a
-     * gradient view, or a custom illustration. The library deliberately does
-     * NOT wrap Lottie / video runtimes (they require native modules + pod
-     * autolinking on every consumer's app), so PageHero just allocates a
-     * token-sized container and lets the slot render whatever it wants.
+     * (`LottiePlayer` / `lottie-react-native`), an `<SvgXml />` from
+     * `react-native-svg`, a `<Video />` from `react-native-video`, a gradient
+     * view, or a custom illustration. The library deliberately does NOT wrap
+     * Lottie / video runtimes (they require native modules + pod autolinking on
+     * every consumer's app), so PageHero just allocates a token-sized container
+     * and lets the slot render whatever it wants.
      *
-     * The slot is rendered inside a `width × height` box driven by
-     * `media/width` and `media/height` tokens (default 117×117). `modes` are
-     * automatically cascaded into the slot via `cloneChildrenWithModes`.
+     * The slot is rendered inside a `width × height` box driven by the
+     * `video/width` and `video/height` tokens from the `Video / Output`
+     * collection (`L | M | S` → 117 / 70 / 20; default `L` = 117×117).
+     * `modes` are automatically cascaded into the slot via
+     * `cloneChildrenWithModes`.
      */
     media?: React.ReactNode;
     /** Mode configuration for design-token theming. */
@@ -49,12 +58,16 @@ export type PageHeroProps = {
  * PageHero displays a centered hero block typically used at the top of a page
  * or feature screen. It contains an optional media slot (illustration / image
  * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
- * headline, an optional supporting line (e.g. price / timeline), and an
- * optional action button.
+ * headline, an optional supporting line (e.g. price), an optional body line
+ * (e.g. timeline), and an optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. Slots cascade the active `modes` to their children
- * through `cloneChildrenWithModes`.
+ * `getVariableByName` (Figma node 4453:2348 — "Page Hero"). Text colors react
+ * to the `Page type` (`MainPage | SubPage | JioPlus`) and `Color Mode`
+ * (`Light | Dark`) collections; type scale reacts to `PageHero Size`
+ * (`M | S`); the media box reacts to `Video / Output` (`L | M | S`). Slots
+ * cascade the active `modes` to their children through
+ * `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -65,16 +78,11 @@ export type PageHeroProps = {
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
- *   media={
- *     <Image
- *       imageSource={require('./assets/upgrade.png')}
- *       width={117}
- *       height={117}
- *     />
- *   }
+ *   modes={{ 'Page type': 'JioPlus' }}
+ *   media={<LottiePlayer source={animation} />}
  * />
  * ```
  */
-declare function PageHero({ eyebrow, headline, supportingText, showSupportingText, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
+declare function PageHero({ eyebrow, showEyebrow, headline, supportingText, showSupportingText, body, showBody, buttonLabel, onButtonPress, showButton, buttonSlot, media, modes: propModes, style, testID, }: PageHeroProps): import("react/jsx-runtime").JSX.Element;
 export default PageHero;
 //# sourceMappingURL=PageHero.d.ts.map

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -33,6 +33,7 @@ export declare const FIGMA_MODES: {
     readonly "BankAccountCard / Output": readonly ["Default"];
     readonly "Benefit Card": readonly ["Default"];
     readonly Blur: readonly ["Default"];
+    readonly "Border Boolean": readonly ["False", "True"];
     readonly "bottomNav / Output": readonly ["Default"];
     readonly "BottomNavItem / Output": readonly ["Default"];
     readonly "BottomNavItem / State": readonly ["Idle", "Active"];
@@ -47,6 +48,8 @@ export declare const FIGMA_MODES: {
     readonly "Card / Output": readonly ["Default"];
     readonly "Card Apperance": readonly ["Default", "Plain"];
     readonly "Card Feedback / Output": readonly ["Default"];
+    readonly "Card Tab / output": readonly ["Default"];
+    readonly "Card Tab State": readonly ["Default", "Active"];
     readonly "Card.Media": readonly ["Default"];
     readonly "Card/CTA / Output": readonly ["Default"];
     readonly "Card/Insight": readonly ["Default"];
@@ -112,6 +115,9 @@ export declare const FIGMA_MODES: {
     readonly "Emphasis / DataViz": readonly ["High", "Medium", "Low"];
     readonly "EmptyState / Output": readonly ["Default"];
     readonly "ExpandableCheckbox / Output": readonly ["Default"];
+    readonly "Favorite Toggle Color": readonly ["Default", "Active"];
+    readonly "Favorite Toggle Size": readonly ["S", "M", "L"];
+    readonly "Favorite Toggle/ output": readonly ["Default"];
     readonly "Feedback / Output": readonly ["Default"];
     readonly "filterBar / Output": readonly ["Default"];
     readonly "FinancialConditionCard / Output": readonly ["Default"];
@@ -122,9 +128,13 @@ export declare const FIGMA_MODES: {
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
     readonly "Grid / Output": readonly ["Default"];
+    readonly "Grid Gap": readonly ["S", "M"];
     readonly "Handle Boolean": readonly ["True", "False"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
+    readonly "hello Jio / Output": readonly ["Default"];
+    readonly "Hello Jio Input Size": readonly ["M", "L"];
+    readonly "Hello Jio Input State": readonly ["Idle", "Active"];
     readonly "HeroSection / Output": readonly ["Default"];
     readonly "Holdings card / Output": readonly ["Default"];
     readonly "HStack / Output": readonly ["Default"];
@@ -175,6 +185,7 @@ export declare const FIGMA_MODES: {
     readonly "Page Hero / Output": readonly ["Default"];
     readonly "Page type": readonly ["MainPage", "SubPage", "JioPlus"];
     readonly "PageHero / Output": readonly ["Default"];
+    readonly "PageHero Size": readonly ["M", "S"];
     readonly "PaymnetFeedback / Output": readonly ["Default"];
     readonly "PDP cc card": readonly ["Default"];
     readonly peekOffset: readonly ["Medium", "Small", "Large", "None"];
@@ -196,6 +207,7 @@ export declare const FIGMA_MODES: {
     readonly "RangeTrack / Output": readonly ["Default"];
     readonly "Rating / Output": readonly ["Default"];
     readonly "Rating Star / Output": readonly ["Default"];
+    readonly "Rating Star Size": readonly ["S", "M", "L"];
     readonly "Rating Star State": readonly ["idle", "selected"];
     readonly "RechargeCard / Output": readonly ["Default"];
     readonly rotfl: readonly ["Default"];
@@ -240,7 +252,7 @@ export declare const FIGMA_MODES: {
     readonly "Tabs / Output": readonly ["Default"];
     readonly TestimonialsCard: readonly ["Default"];
     readonly "Text / Output": readonly ["Default"];
-    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
+    readonly "Text Appearance": readonly ["Neutral", "Primary", "Secondary", "Tertiary", "Success", "Warning", "Error"];
     readonly "Text Sizes": readonly ["Medium", "Small", "Large"];
     readonly "textInput / Output": readonly ["Default"];
     readonly "TextSegment / Output": readonly ["Default"];
@@ -259,6 +271,7 @@ export declare const FIGMA_MODES: {
     readonly "TransationDetails / Output": readonly ["Default"];
     readonly "UPI Handle / Output": readonly ["Default"];
     readonly "UPI Handle Image": readonly ["True", "False"];
+    readonly "valueBack metric": readonly ["Default"];
     readonly "ValueBar / Output": readonly ["Default"];
     readonly "Video / Output": readonly ["L", "M", "S"];
     readonly "VStack / Output": readonly ["Default"];

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-07-20T11:16:24.422Z
+ * Generated: 2026-07-20T12:46:13.819Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/LottiePlayer/LottiePlayer.tsx

@@ -29,10 +29,10 @@ export type LottiePlayerProps = {
    * Override the rendered size. Pass a number for a square box, or
    * `{ width, height }` for non-square.
    *
-   * When omitted, size is resolved from the `media/width` and `media/height`
-   * design tokens (default `117 × 117`). The `Media / Output` collection
+   * When omitted, size is resolved from the `video/width` and `video/height`
+   * design tokens (default `117 × 117`). The `Video / Output` collection
    * exposes `L | M | S` modes (117 / 70 / 20) — pass
-   * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+   * `modes={{ 'Video / Output': 'M' }}` to render at 70×70, etc.
    */
   size?: number | { width: number; height: number }
   /** Play the animation on mount. Defaults to `true`. */
@@ -57,9 +57,9 @@ function resolveSize(
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size
   const width =
-    Number(getVariableByName('media/width', modes))
+    Number(getVariableByName('video/width', modes)) || DEFAULT_SIZE
   const height =
-    Number(getVariableByName('media/height', modes))
+    Number(getVariableByName('video/height', modes)) || DEFAULT_SIZE
   return { width, height }
 }
 
@@ -83,8 +83,8 @@ function resolveSize(
  * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
  *
  * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
- * `media/width` and `media/height` from the Figma variables resolver, so the
- * animation matches the surrounding component's `Media / Output` mode
+ * `video/width` and `video/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Video / Output` mode
  * automatically. This is the same sizing contract `PageHero` and
  * `LottieIntroBlock` use for their `media` slots.
  *
@@ -95,7 +95,7 @@ function resolveSize(
  *
  * <LottiePlayer source={animation} />                    // 117 × 117 (default)
  * <LottiePlayer source={animation} size={70} />          // 70 × 70
- * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <LottiePlayer source={animation} modes={{ 'Video / Output': 'S' }} />  // 20 × 20
  * <PageHero media={<LottiePlayer source={animation} />} />
  * ```
  */

package/src/components/LottiePlayer/LottiePlayer.web.tsx

@@ -28,9 +28,9 @@ function resolveSize(
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size
   const width =
-    Number(getVariableByName('media/width', modes))
+    Number(getVariableByName('video/width', modes)) || DEFAULT_SIZE
   const height =
-    Number(getVariableByName('media/height', modes))
+    Number(getVariableByName('video/height', modes)) || DEFAULT_SIZE
   return { width, height }
 }
 

package/src/components/PageHero/PageHero.tsx

@@ -12,15 +12,26 @@ import Button from '../Button/Button'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
+// Figma media frame is 117×117 ("Video / Output" L). Used when the token
+// collection is missing from a consumer's variables JSON so the media slot
+// never collapses to 0.
+const MEDIA_FALLBACK = 117
+
 export type PageHeroProps = {
   /** Small eyebrow text shown above the headline. */
   eyebrow?: string
+  /** Whether to render the eyebrow line. */
+  showEyebrow?: boolean
   /** Main headline text. Centered and bold. */
   headline?: string
-  /** Optional supporting text shown below the headline. */
+  /** Supporting text shown directly below the headline (e.g. price). */
   supportingText?: string
   /** Whether to render the supporting text. */
   showSupportingText?: boolean
+  /** Optional second supporting line shown below `supportingText`. */
+  body?: string
+  /** Whether to render the body line. */
+  showBody?: boolean
   /** Label for the default action button. Ignored when `buttonSlot` is provided. */
   buttonLabel?: string
   /** Press handler for the default action button. Ignored when `buttonSlot` is provided. */
@@ -28,9 +39,10 @@ export type PageHeroProps = {
   /** Whether to render the default action button. Ignored when `buttonSlot` is provided. */
   showButton?: boolean
   /**
-   * Optional slot to fully override the action button.
-   * When provided, `showButton`, `buttonLabel`, and `onButtonPress` are ignored.
-   * `modes` are automatically cascaded into this slot.
+   * Optional slot to fully override the action button area (e.g. a
+   * `ButtonGroup` with several buttons). When provided, `showButton`,
+   * `buttonLabel`, and `onButtonPress` are ignored. `modes` are automatically
+   * cascaded into this slot.
    */
   buttonSlot?: React.ReactNode
   /**
@@ -38,16 +50,18 @@ export type PageHeroProps = {
    *
    * Intentionally typed as `React.ReactNode` so the consumer can bring any
    * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
-   * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
-   * from `react-native-svg`, a `<Video />` from `react-native-video`, a
-   * gradient view, or a custom illustration. The library deliberately does
-   * NOT wrap Lottie / video runtimes (they require native modules + pod
-   * autolinking on every consumer's app), so PageHero just allocates a
-   * token-sized container and lets the slot render whatever it wants.
+   * (`LottiePlayer` / `lottie-react-native`), an `<SvgXml />` from
+   * `react-native-svg`, a `<Video />` from `react-native-video`, a gradient
+   * view, or a custom illustration. The library deliberately does NOT wrap
+   * Lottie / video runtimes (they require native modules + pod autolinking on
+   * every consumer's app), so PageHero just allocates a token-sized container
+   * and lets the slot render whatever it wants.
    *
-   * The slot is rendered inside a `width × height` box driven by
-   * `media/width` and `media/height` tokens (default 117×117). `modes` are
-   * automatically cascaded into the slot via `cloneChildrenWithModes`.
+   * The slot is rendered inside a `width × height` box driven by the
+   * `video/width` and `video/height` tokens from the `Video / Output`
+   * collection (`L | M | S` → 117 / 70 / 20; default `L` = 117×117).
+   * `modes` are automatically cascaded into the slot via
+   * `cloneChildrenWithModes`.
    */
   media?: React.ReactNode
   /** Mode configuration for design-token theming. */
@@ -61,12 +75,16 @@ export type PageHeroProps = {
  * PageHero displays a centered hero block typically used at the top of a page
  * or feature screen. It contains an optional media slot (illustration / image
  * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
- * headline, an optional supporting line (e.g. price / timeline), and an
- * optional action button.
+ * headline, an optional supporting line (e.g. price), an optional body line
+ * (e.g. timeline), and an optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. Slots cascade the active `modes` to their children
- * through `cloneChildrenWithModes`.
+ * `getVariableByName` (Figma node 4453:2348 — "Page Hero"). Text colors react
+ * to the `Page type` (`MainPage | SubPage | JioPlus`) and `Color Mode`
+ * (`Light | Dark`) collections; type scale reacts to `PageHero Size`
+ * (`M | S`); the media box reacts to `Video / Output` (`L | M | S`). Slots
+ * cascade the active `modes` to their children through
+ * `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -77,21 +95,19 @@ export type PageHeroProps = {
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
- *   media={
- *     <Image
- *       imageSource={require('./assets/upgrade.png')}
- *       width={117}
- *       height={117}
- *     />
- *   }
+ *   modes={{ 'Page type': 'JioPlus' }}
+ *   media={<LottiePlayer source={animation} />}
  * />
  * ```
  */
 function PageHero({
   eyebrow = 'Upgrade to JioFinance+',
+  showEyebrow = true,
   headline = 'Resume earning cashback, extra points, and 1% gold',
   supportingText = '₹999/year · ₹0 until 2027',
   showSupportingText = true,
+  body,
+  showBody = true,
   buttonLabel = 'Renew for free',
   onButtonPress,
   showButton = true,
@@ -108,51 +124,99 @@ function PageHero({
   )
 
   const gap = Number(getVariableByName('PageHero/gap', modes))
-  const paddingHorizontal =
-    Number(getVariableByName('PageHero/padding/horizontal', modes))
+  const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes))
 
-  const textWrapGap =
-    Number(getVariableByName('PageHero/textWrap/gap', modes))
+  // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
+  // `Video / Output` collection (L=117, M=70, S=20). Falls back to 117 when
+  // the collection is absent so the slot never collapses to 0×0.
+  const mediaWidth =
+    Number(getVariableByName('video/width', modes)) || MEDIA_FALLBACK
+  const mediaHeight =
+    Number(getVariableByName('video/height', modes)) || MEDIA_FALLBACK
 
-  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
-  // Tokens fall back to 117 when not defined in the variables collection,
-  // so the layout stays stable on consumers that haven't tokenized this yet.
-  const mediaWidth = Number(getVariableByName('media/width', modes))
-  const mediaHeight = Number(getVariableByName('media/height', modes))
+  const eyebrowStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/eyebrow/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/eyebrow/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/eyebrow/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/eyebrow/lineHeight', modes)
+      ),
+      textAlign: 'center',
+    }),
+    [modes]
+  )
 
-  const eyebrowColor =
-    getVariableByName('PageHero/eyebrow/color', modes)
-  const eyebrowFontFamily =
-    getVariableByName('PageHero/eyebrow/fontFamily', modes)
-  const eyebrowFontSize =
-    Number(getVariableByName('PageHero/eyebrow/fontSize', modes))
-  const eyebrowFontWeight =
-    getVariableByName('PageHero/eyebrow/fontWeight', modes)
-  const eyebrowLineHeight =
-    Number(getVariableByName('PageHero/eyebrow/lineHeight', modes))
+  const headlineStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/headline/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/headline/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/headline/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/headline/lineHeight', modes)
+      ),
+      textAlign: 'center',
+      width: '100%',
+    }),
+    [modes]
+  )
 
-  const headlineColor =
-    getVariableByName('PageHero/headline/color', modes)
-  const headlineFontFamily =
-    getVariableByName('PageHero/headline/fontFamily', modes)
-  const headlineFontSize =
-    Number(getVariableByName('PageHero/headline/fontSize', modes))
-  const headlineFontWeight =
-    getVariableByName('PageHero/headline/fontWeight', modes)
-  const headlineLineHeight =
-    Number(getVariableByName('PageHero/headline/lineHeight', modes))
+  const supportingTextStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName(
+        'PageHero/supportingText/color',
+        modes
+      ) as string,
+      fontFamily: getVariableByName(
+        'PageHero/supportingText/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(
+        getVariableByName('PageHero/supportingText/fontSize', modes)
+      ),
+      fontWeight: String(
+        getVariableByName('PageHero/supportingText/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(
+        getVariableByName('PageHero/supportingText/lineHeight', modes)
+      ),
+      textAlign: 'center',
+    }),
+    [modes]
+  )
 
-  // Only `lineHeight` is tokenized for the supporting text in the Figma source.
-  // Color, font size and weight are inline literals in the design (12px medium
-  // white) — we mirror that here so the visual stays faithful when no token
-  // exists.
-  const supportingTextLineHeight =
-    Number(getVariableByName('PageHero/supportingText/lineHeight', modes))
+  const bodyStyle = useMemo<TextStyle>(
+    () => ({
+      color: getVariableByName('PageHero/body/color', modes) as string,
+      fontFamily: getVariableByName(
+        'PageHero/body/fontFamily',
+        modes
+      ) as string,
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(
+        getVariableByName('PageHero/body/fontWeight', modes)
+      ) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
+      textAlign: 'center',
+    }),
+    [modes]
+  )
 
   const containerStyle: ViewStyle = {
     flexDirection: 'column',
     alignItems: 'center',
-    paddingHorizontal,
     gap,
     width: '100%',
   }
@@ -164,38 +228,6 @@ function PageHero({
     width: '100%',
   }
 
-  const eyebrowStyle: TextStyle = {
-    color: eyebrowColor as string,
-    fontFamily: eyebrowFontFamily as string,
-    fontSize: eyebrowFontSize,
-    fontWeight: String(eyebrowFontWeight) as TextStyle['fontWeight'],
-    lineHeight: eyebrowLineHeight,
-    textAlign: 'center',
-  }
-
-  const headlineStyle: TextStyle = {
-    color: headlineColor as string,
-    fontFamily: headlineFontFamily as string,
-    fontSize: headlineFontSize,
-    fontWeight: String(headlineFontWeight) as TextStyle['fontWeight'],
-    lineHeight: headlineLineHeight,
-    textAlign: 'center',
-    width: '100%',
-  }
-
-  const supportingTextStyle: TextStyle = {
-    color: '#ffffff',
-    fontFamily: 'System',
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: supportingTextLineHeight,
-    textAlign: 'center',
-  }
-
-  const buttonWrapStyle: ViewStyle = {
-    width: '100%',
-  }
-
   const buttonContent = useMemo<React.ReactNode>(() => {
     if (buttonSlot !== undefined && buttonSlot !== null) {
       return cloneChildrenWithModes(buttonSlot, modes)
@@ -208,21 +240,17 @@ function PageHero({
         label={buttonLabel}
         onPress={onButtonPress}
         modes={modes}
-        style={buttonWrapStyle}
+        style={FULL_WIDTH}
       />
     )
-  // buttonWrapStyle is a literal object created above; it is intentionally
-  // omitted from deps because its identity changes on every render but its
-  // shape never does.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
 
   // Sized container for the media slot. Always rendered when `media` is
-  // provided, so the slot has a predictable box (matches Figma frame
-  // 4540:7845 — 117×117 by default) even if the inner element omits its
-  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
-  // `clipsContent` so a slightly oversized illustration doesn't break
-  // the centered layout.
+  // provided, so the slot has a predictable box (Figma frame 4540:7845 —
+  // 117×117 at `Video / Output = L`) even if the inner element omits its own
+  // width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break the
+  // centered layout.
   const mediaContent = useMemo<React.ReactNode>(() => {
     if (media === undefined || media === null) return null
     return (
@@ -240,19 +268,27 @@ function PageHero({
     )
   }, [media, mediaWidth, mediaHeight, modes])
 
+  const hasEyebrow = showEyebrow && !!eyebrow
+  const hasHeadline = !!headline
+
   return (
     <View style={[containerStyle, style]} testID={testID}>
       {mediaContent}
-      <View style={textWrapStyle}>
-        {eyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
-        {headline ? <Text style={headlineStyle}>{headline}</Text> : null}
-      </View>
+      {hasEyebrow || hasHeadline ? (
+        <View style={textWrapStyle}>
+          {hasEyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
+          {hasHeadline ? <Text style={headlineStyle}>{headline}</Text> : null}
+        </View>
+      ) : null}
       {showSupportingText && supportingText ? (
         <Text style={supportingTextStyle}>{supportingText}</Text>
       ) : null}
+      {showBody && body ? <Text style={bodyStyle}>{body}</Text> : null}
       {buttonContent}
     </View>
   )
 }
 
+const FULL_WIDTH: ViewStyle = { width: '100%' }
+
 export default PageHero