jfs-components 0.1.34 → 0.1.36

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.34] - 2026-07-21
+
+- `jfs-extract-modes` now automatically loads `FIGMA_ACCESS_TOKEN` from the
+  consuming project's root `.env` without overriding a token exported in the
+  shell. `dotenv` is now an explicit runtime dependency.
+- Simplified `D2C.md` for use as a Cursor slash command: clearer input handling,
+  ancestor-mode inheritance (`inheritedFromAncestors` + path merges), accurate
+  `unresolved` reasons, verify-before-invent component APIs, and practical
+  visual QA (fix implementation diffs; report environment-only diffs).
+- Added focused tests for `.env` precedence and extracted mode diagnostics.
+- Ignore local `.env` / `.env.*` secrets in git (keep `.env.example` allowed).
+
+---
+
 ## [0.1.33] - 2026-07-20
 
 - **Use [`D2C.md`](./D2C.md) for Design-to-Code.** This is the playbook we want agents and consumers to follow when implementing a Figma screen with `jfs-components`. It ships in the npm package (see `package.json` `files`) so it is available at `node_modules/jfs-components/D2C.md` after install. The workflow is mandatory end-to-end: Figma MCP (`get_design_context` + `get_screenshot`) → mode extraction via `npx jfs-extract-modes` (REST API; Dev seat / file-read token is enough) → build with exact modes → visual QA against the Figma screenshot. Point Cursor rules / agent instructions at this file rather than inventing a parallel D2C process.

package/D2C.md

@@ -1,118 +1,113 @@
-# D2C — Design to Code (jfs-components)
+# D2C — Design to Code with jfs-components
 
-You are implementing a screen from a Figma design using the `jfs-components`
-library. The user has pasted a Figma link. Follow this workflow exactly, in
-order. Do not skip steps and do not improvise substitutes for them.
+Implement the supplied Figma design using the installed `jfs-components`
+package. Follow all four stages in order.
 
-## Step 1 — Pull the design through the Figma MCP
+## Input
 
-Extract `fileKey` and `nodeId` from the pasted URL
-(`https://www.figma.com/design/<fileKey>/...?node-id=<a>-<b>` → nodeId is
-`<a>:<b>`).
+Use the Figma URL supplied after `/D2C` or in the user's latest message. If no
+Figma URL was supplied, ask for one before doing anything else.
 
-1. Call `get_design_context` for the node. This gives you the component
-   structure, layout, props, variants, text content, and Code Connect hints.
-2. Call `get_screenshot` for the same node and keep the image. This is the
-   visual ground truth you will QA against in Step 4.
+## 1. Read the design
 
-The Figma MCP gives you almost everything — except one thing: the **variable
-modes explicitly set on each layer**. Those are invisible to the MCP and they
-change how components render (size, emphasis, appearance, color mode, etc.).
-That is what Step 2 is for.
+1. Call the Figma MCP `get_design_context` for the linked node.
+2. Call `get_screenshot` for the same node. Keep it as the visual reference for
+   final QA.
+3. Follow Code Connect mappings, design annotations, and provided assets. If
+   Figma supplies an image or SVG URL, use it directly; do not create a
+   placeholder or install an icon package.
 
-## Step 2 — Extract the modes (mandatory, never skip)
+If the Figma MCP is unavailable or cannot read the node, report the blocker and
+stop. Do not recreate the design from the URL or from assumptions.
 
-Run the mode extractor that ships with this package. It needs a Figma personal
-access token with plain file-read access (a view-only / Dev seat token works;
-no Enterprise scopes, no edit access):
+## 2. Extract and resolve explicit modes
+
+From the consuming project's root, run:
 
 ```bash
-export FIGMA_ACCESS_TOKEN=figd_...
-npx jfs-extract-modes "<the pasted Figma URL>" --out modes.json
+npx jfs-extract-modes "<figma-url>" --out modes.json
 ```
 
-If `npx` cannot find the bin (e.g. unusual monorepo setup), call the script by
-its path inside the installed package:
+The CLI automatically loads `FIGMA_ACCESS_TOKEN` from the project-root `.env`.
+An already exported shell value takes precedence. The token only needs the
+Figma `file_content:read` scope. Never print, log, or ask the user to paste the
+token into chat.
 
-```bash
-node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
-```
+If the token is missing, stop and direct the user to `[Open .env](.env)` and
+add `FIGMA_ACCESS_TOKEN=` if needed. To create a token: in Figma's file browser,
+open the account menu → **Settings** → **Security** → **Personal access
+tokens** → **Generate new token**, choose an expiration, grant only
+`file_content:read`, generate it, and copy it immediately into `.env`. Figma
+shows the value only once. Use the
+[official PAT documentation](https://developers.figma.com/docs/rest-api/personal-access-tokens/)
+if the UI has changed. Never create or overwrite a token value yourself.
 
-The output is a flat list — one entry per layer that has explicit modes:
+If the bin is unavailable in a nonstandard monorepo, run:
 
-```json
-{
-  "modes": [
-    { "layer": "Icon Button", "nodeId": "1:10638",
-      "path": "CC / Unsub > AppBar > Slot 2 > Icon Button",
-      "modes": { "Button / Size": "S", "Emphasis": "Low", "AppearanceBrand": "Neutral" } }
-  ]
-}
+```bash
+node node_modules/jfs-components/scripts/extract-figma-modes.js "<figma-url>" --out modes.json
 ```
 
-Rules for using it:
+Resolve the effective modes for each represented component as follows:
 
-- Children inherit ancestor modes unless they set their own. To get the
-  effective modes of any layer, merge every entry whose `path` is a prefix of
-  that layer's path, top-down.
-- Correlate entries with the Figma MCP structure by layer name and position;
-  use `nodeId` when two layers share a name.
-- If the output contains an `unresolved` array, STOP and report it to the user
-  before building. It means the packaged variables JSON is out of date and the
-  screen cannot be built faithfully. Do not guess missing modes.
+1. Start with `inheritedFromAncestors`, when present.
+2. Find every `modes` entry whose `path` is the component's path or an ancestor
+   of it.
+3. Merge those entries from root to leaf; deeper entries override inherited
+   values.
+4. Match by layer name and position, using `nodeId` to disambiguate duplicate
+   names.
 
-## Step 3 — Build the screen
+If `unresolved` is present, report every item and its exact `reason`, then stop
+before implementation because mode fidelity cannot be guaranteed:
 
-Implement with `jfs-components` components, mapping Figma component names to
-library exports.
+- `local collection` means the design uses a file-local collection that the
+  packaged library data cannot resolve.
+- `key not in variables JSON` or `mode not in collection` means the packaged
+  design-token JSON is out of date.
 
-**Modes are non-negotiable.** Apply every extracted mode exactly as given —
-collection name → mode name, on exactly the layer (or subtree) the extractor
-reported. There is zero tolerance for inconsistency here:
+Do not guess or silently omit an unresolved mode.
 
-- Do not substitute a "close enough" mode (`Emphasis: Medium` is not
-  `Emphasis: Low`).
-- Do not drop modes that seem redundant — if the design sets
-  `AppearanceBrand: Neutral` on one Icon Button and `Appearance: Primary` on
-  another, those are different and intentional.
-- Do not apply a child's modes to its parent or vice versa.
+## 3. Implement
 
-For everything else (spacing, order, text, icons, variants, props), follow the
-Figma MCP output one-to-one. Reuse existing screens in the consuming app as
-convention references for file placement, navigation registration, and asset
-handling.
+Before editing, inspect the installed package's exports/types and the consuming
+app's existing screens. Reuse its file placement, navigation, styling, and
+asset conventions. Never invent a `jfs-components` component or prop.
 
-## Step 4 — QA against the design (mandatory, never skip)
+- Prefer mapped `jfs-components` over rebuilding them from primitives.
+- Apply extracted collection/mode pairs exactly through each component's
+  `modes` prop.
+- Put a mode on the closest code component that represents the reported Figma
+  layer or subtree. Preserve parent inheritance and child overrides; never
+  flatten a child override into its parent.
+- Do not substitute similar-looking modes, remove apparently redundant modes,
+  or move modes between layers.
+- Match Figma content, order, visibility, variants, spacing, and assets.
 
-After the screen compiles and renders, you MUST verify it visually against the
-Step 1 screenshot:
+Run the consuming app's existing typecheck, tests, or build command relevant to
+the changed screen and fix implementation errors.
 
-- **Native app:** use the mobile MCP — launch the app, navigate to the new
-  screen, and take a screenshot (`mobile_take_screenshot`).
-- **Web deployment:** use the browser tooling — navigate to the deployed/dev
-  URL and take a screenshot.
+## 4. Render and visually verify
 
-Compare your screenshot with the Figma screenshot side by side. Check:
+Render the implemented screen on the target platform and capture it with the
+available mobile or browser tooling. Compare it with the Figma screenshot for:
 
-1. Component sizes and emphasis levels (these are where wrong modes show up)
-2. Colors / appearance (brand vs neutral vs secondary treatments)
-3. Spacing, padding, and gaps
-4. Text content and truncation
-5. Icon choices and visibility (some layers in the design are hidden)
+1. component size, variant, and emphasis;
+2. color and appearance;
+3. spacing, padding, alignment, and gaps;
+4. text, wrapping, and truncation; and
+5. icons, imagery, and layer visibility.
 
-If there is ANY visible difference, fix it and re-screenshot. Repeat until the
-implementation matches the design. Typical root causes, in order of
-likelihood: a mode applied to the wrong layer, a missing mode (falling back to
-the collection default), a wrong variant, a wrong icon.
+Fix every implementation-caused difference and capture the screen again.
+Platform or environment differences that cannot be fixed in code, such as a
+missing system font or renderer-specific antialiasing, must be identified
+explicitly rather than hidden.
 
-## Summary contract
+If no suitable render or screenshot tooling is available, do not claim visual
+completion. Report what remains to be checked and give the exact manual run and
+comparison steps.
 
-| Step | Tool | Skippable? |
-|---|---|---|
-| Design context + screenshot | Figma MCP | No |
-| Mode extraction | `npx jfs-extract-modes` | No |
-| Build | jfs-components | — |
-| Visual QA loop | Mobile MCP or browser | No |
+## Completion report
 
-Report back to the user with: the screen file(s) created, the modes applied per
-layer, and the final QA screenshot comparison.
+Report the files changed, the effective modes applied to each component, the
+validation commands and results, and the final visual comparison status.

package/lib/commonjs/components/LottiePlayer/LottiePlayer.js

@@ -27,8 +27,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
-  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('video/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('video/height', modes)) || DEFAULT_SIZE;
   return {
     width,
     height
@@ -55,8 +55,8 @@ function resolveSize(size, modes) {
  * 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.
  *
@@ -67,7 +67,7 @@ function resolveSize(size, modes) {
  *
  * <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/commonjs/components/LottiePlayer/LottiePlayer.web.js

@@ -18,8 +18,8 @@ function resolveSize(size, modes) {
     height: size
   };
   if (size && typeof size === 'object') return size;
-  const width = Number((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
-  const height = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
+  const width = Number((0, _figmaVariablesResolver.getVariableByName)('video/width', modes)) || DEFAULT_SIZE;
+  const height = Number((0, _figmaVariablesResolver.getVariableByName)('video/height', modes)) || DEFAULT_SIZE;
   return {
     width,
     height

package/lib/commonjs/components/PageHero/PageHero.js

@@ -13,16 +13,24 @@ var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// 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;
 /**
  * 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
@@ -33,21 +41,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   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,
@@ -65,34 +71,49 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
   const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
 
-  // 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((0, _figmaVariablesResolver.getVariableByName)('media/width', modes));
-  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('media/height', modes));
-  const eyebrowColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes);
-  const eyebrowFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes);
-  const eyebrowFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes));
-  const eyebrowFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes);
-  const eyebrowLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes));
-  const headlineColor = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes);
-  const headlineFontFamily = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes);
-  const headlineFontSize = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes));
-  const headlineFontWeight = (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes);
-  const headlineLineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', 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((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', 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((0, _figmaVariablesResolver.getVariableByName)('video/width', modes)) || MEDIA_FALLBACK;
+  const mediaHeight = Number((0, _figmaVariablesResolver.getVariableByName)('video/height', modes)) || MEDIA_FALLBACK;
+  const eyebrowStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/eyebrow/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const headlineStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/headline/lineHeight', modes)),
+    textAlign: 'center',
+    width: '100%'
+  }), [modes]);
+  const supportingTextStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/supportingText/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
+  const bodyStyle = (0, _react.useMemo)(() => ({
+    color: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/color', modes),
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontFamily', modes),
+    fontSize: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontSize', modes)),
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/fontWeight', modes)),
+    lineHeight: Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/body/lineHeight', modes)),
+    textAlign: 'center'
+  }), [modes]);
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',
-    paddingHorizontal,
     gap,
     width: '100%'
   };
@@ -102,34 +123,6 @@ function PageHero({
     gap: textWrapGap,
     width: '100%'
   };
-  const eyebrowStyle = {
-    color: eyebrowColor,
-    fontFamily: eyebrowFontFamily,
-    fontSize: eyebrowFontSize,
-    fontWeight: String(eyebrowFontWeight),
-    lineHeight: eyebrowLineHeight,
-    textAlign: 'center'
-  };
-  const headlineStyle = {
-    color: headlineColor,
-    fontFamily: headlineFontFamily,
-    fontSize: headlineFontSize,
-    fontWeight: String(headlineFontWeight),
-    lineHeight: headlineLineHeight,
-    textAlign: 'center',
-    width: '100%'
-  };
-  const supportingTextStyle = {
-    color: '#ffffff',
-    fontFamily: 'System',
-    fontSize: 12,
-    fontWeight: '500',
-    lineHeight: supportingTextLineHeight,
-    textAlign: 'center'
-  };
-  const buttonWrapStyle = {
-    width: '100%'
-  };
   const buttonContent = (0, _react.useMemo)(() => {
     if (buttonSlot !== undefined && buttonSlot !== null) {
       return (0, _reactUtils.cloneChildrenWithModes)(buttonSlot, modes);
@@ -141,20 +134,16 @@ 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 = (0, _react.useMemo)(() => {
     if (media === undefined || media === null) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -168,22 +157,30 @@ function PageHero({
       children: (0, _reactUtils.cloneChildrenWithModes)(media, modes)
     });
   }, [media, mediaWidth, mediaHeight, modes]);
+  const hasEyebrow = showEyebrow && !!eyebrow;
+  const hasHeadline = !!headline;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     testID: testID,
-    children: [mediaContent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [mediaContent, hasEyebrow || hasHeadline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: textWrapStyle,
-      children: [eyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      children: [hasEyebrow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: eyebrowStyle,
         children: eyebrow
-      }) : null, headline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }) : null, hasHeadline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: headlineStyle,
         children: headline
       }) : null]
-    }), showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    }) : null, showSupportingText && supportingText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: supportingTextStyle,
       children: supportingText
+    }) : null, showBody && body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: bodyStyle,
+      children: body
     }) : null, buttonContent]
   });
 }
+const FULL_WIDTH = {
+  width: '100%'
+};
 var _default = exports.default = PageHero;