jfs-components 0.0.74 → 0.0.77

package/src/components/Button/Button.tsx

@@ -14,6 +14,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -54,6 +56,13 @@ export type ButtonProps = SafePressableProps & {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * Explicit per-instance loading override. When `true`, the button renders
+   * as a pill-shaped skeleton of the same size; when `false`, the
+   * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+   * the group.
+   */
+  loading?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -224,6 +233,7 @@ function ButtonImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  loading,
   ...rest
 }: ButtonProps) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -248,6 +258,12 @@ function ButtonImpl({
     [modes, disabled]
   )
 
+  // Skeleton context — read unconditionally so React's hook order stays
+  // stable. The actual short-circuit return happens AFTER all remaining
+  // hooks have been called below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Active label color: base by default; hover override (web-only) when hovered.
   // Press color is intentionally NOT applied to the label on native — applying
   // it would require a React render per touch and re-introduce the flicker.
@@ -354,6 +370,30 @@ function ButtonImpl({
     }
   }
 
+  if (isLoading) {
+    const { container, baseLabel, iconSize, accessoryOffset } = tokens
+    const paddingHorizontal = (container.paddingHorizontal as number) ?? 20
+    const paddingVertical = (container.paddingVertical as number) ?? 12
+    const lineHeight = (baseLabel.lineHeight as number) ?? 19
+    const fontSize = (baseLabel.fontSize as number) ?? 16
+    const labelText = typeof label === 'string' ? label : 'Button'
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(labelText.length, 4) * charWidth
+    const hasAccessory = !!(leading || trailing || icon)
+    const accessoryWidth = hasAccessory ? iconSize + accessoryOffset * 2 : 0
+    const skeletonWidth = paddingHorizontal * 2 + labelWidth + accessoryWidth
+    const skeletonHeight = paddingVertical * 2 + lineHeight
+    return (
+      <Skeleton
+        kind="other"
+        width={skeletonWidth}
+        height={skeletonHeight}
+        style={style as any}
+        modes={modes}
+      />
+    )
+  }
+
   return (
     <Pressable
       accessibilityRole="button"

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/LottiePlayer/LottiePlayer.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { getNativeLottieView } from './loadNativeLottieView'
+
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+export type LottieAnimationSource = Record<string, unknown>
+
+export type LottiePlayerProps = {
+  /**
+   * Parsed Lottie animation JSON. Use `require('./animation.json')` in React
+   * Native or `import animation from './animation.json'` on web.
+   *
+   * URI sources (`{ uri: '...' }`) are intentionally not accepted here — web
+   * Lottie players require the animation data to be pre-parsed. Fetch and
+   * parse the JSON yourself before passing it in if you need a remote source.
+   */
+  source: LottieAnimationSource
+  /**
+   * 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
+   * exposes `L | M | S` modes (117 / 70 / 20) — pass
+   * `modes={{ 'Media / Output': 'M' }}` to render at 70×70, etc.
+   */
+  size?: number | { width: number; height: number }
+  /** Play the animation on mount. Defaults to `true`. */
+  autoPlay?: boolean
+  /** Loop the animation. Defaults to `true`. */
+  loop?: boolean
+  /** Mode configuration for design-token theming. */
+  modes?: Record<string, any>
+  /** Style overrides applied to the underlying view. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label. Lottie is decorative by default. */
+  accessibilityLabel?: string
+  testID?: string
+}
+
+const DEFAULT_SIZE = 117
+
+function resolveSize(
+  size: LottiePlayerProps['size'],
+  modes: Record<string, any>
+) {
+  if (typeof size === 'number') return { width: size, height: size }
+  if (size && typeof size === 'object') return size
+  const width =
+    Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE
+  const height =
+    Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE
+  return { width, height }
+}
+
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * 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
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID,
+}: LottiePlayerProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const { width, height } = useMemo(
+    () => resolveSize(size, modes),
+    [size, modes]
+  )
+
+  const NativeLottieView = useMemo(() => getNativeLottieView(), [])
+
+  return (
+    <View
+      style={[{ width, height }, style]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden={accessibilityLabel ? undefined : true}
+      importantForAccessibility={accessibilityLabel ? 'auto' : 'no'}
+    >
+      <NativeLottieView
+        source={source}
+        autoPlay={autoPlay}
+        loop={loop}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </View>
+  )
+}
+
+export default React.memo(LottiePlayer)

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

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { getWebLottieView } from './loadWebLottieView'
+
+export type LottieAnimationSource = Record<string, unknown>
+
+export type LottiePlayerProps = {
+  source: LottieAnimationSource
+  size?: number | { width: number; height: number }
+  autoPlay?: boolean
+  loop?: boolean
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+  accessibilityLabel?: string
+  testID?: string
+}
+
+const DEFAULT_SIZE = 117
+
+function resolveSize(
+  size: LottiePlayerProps['size'],
+  modes: Record<string, any>
+) {
+  if (typeof size === 'number') return { width: size, height: size }
+  if (size && typeof size === 'object') return size
+  const width =
+    Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE
+  const height =
+    Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE
+  return { width, height }
+}
+
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID,
+}: LottiePlayerProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const { width, height } = useMemo(
+    () => resolveSize(size, modes),
+    [size, modes]
+  )
+
+  const WebLottieView = useMemo(() => getWebLottieView(), [])
+
+  return (
+    <div
+      style={{
+        width,
+        height,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...(style as React.CSSProperties),
+      }}
+      data-testid={testID}
+      aria-label={accessibilityLabel}
+      aria-hidden={accessibilityLabel ? undefined : true}
+    >
+      <WebLottieView
+        animationData={source}
+        autoplay={autoPlay}
+        loop={loop}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  )
+}
+
+export default React.memo(LottiePlayer)

package/src/components/LottiePlayer/loadNativeLottieView.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Text, View, type ViewStyle } from 'react-native'
+
+/** Props we forward to the underlying native Lottie view. */
+export type NativeLottieViewProps = {
+  source: Record<string, unknown>
+  autoPlay?: boolean
+  loop?: boolean
+  style?: ViewStyle
+}
+
+const INSTALL_HINT =
+  'LottiePlayer requires lottie-react-native in your app.\n' +
+  '  npm install lottie-react-native\n' +
+  '  cd ios && pod install'
+
+/**
+ * Metro resolves `require('lottie-react-native')` at bundle time even inside
+ * try/catch, which breaks apps that import `jfs-components` without having
+ * the optional peer installed. Splitting the module id into a runtime string
+ * keeps Metro from statically linking it — the native module is loaded only
+ * when present in the consumer's node_modules.
+ */
+function resolveNativeLottieModuleName() {
+  return ['lottie', '-react', '-native'].join('')
+}
+
+function LottieUnavailableView({ style }: Pick<NativeLottieViewProps, 'style'>) {
+  if (__DEV__) {
+    return (
+      <View
+        style={[
+          style,
+          {
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 196, 0, 0.12)',
+            borderWidth: 1,
+            borderColor: 'rgba(255, 196, 0, 0.45)',
+            borderRadius: 8,
+            padding: 8,
+          },
+        ]}
+      >
+        <Text
+          style={{
+            color: '#8a6d00',
+            fontSize: 11,
+            textAlign: 'center',
+            lineHeight: 15,
+          }}
+        >
+          {INSTALL_HINT}
+        </Text>
+      </View>
+    )
+  }
+
+  return <View style={style} />
+}
+
+function LottieUnavailable(props: NativeLottieViewProps) {
+  React.useEffect(() => {
+    if (__DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`)
+    }
+  }, [])
+
+  return <LottieUnavailableView style={props.style} />
+}
+
+let cachedView: React.ComponentType<NativeLottieViewProps> | undefined
+
+export function getNativeLottieView(): React.ComponentType<NativeLottieViewProps> {
+  if (cachedView !== undefined) return cachedView
+
+  try {
+    const mod = require(resolveNativeLottieModuleName()) as {
+      default?: React.ComponentType<NativeLottieViewProps>
+    }
+    cachedView = mod.default ?? LottieUnavailable
+  } catch {
+    cachedView = LottieUnavailable
+  }
+
+  return cachedView
+}

package/src/components/LottiePlayer/loadWebLottieView.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import type { CSSProperties } from 'react'
+
+/** Props we forward to the underlying web Lottie view. */
+export type WebLottieViewProps = {
+  animationData: Record<string, unknown>
+  autoplay?: boolean
+  loop?: boolean
+  style?: CSSProperties
+}
+
+const INSTALL_HINT =
+  'LottiePlayer requires lottie-react in your app.\n' +
+  '  npm install lottie-react'
+
+function resolveWebLottieModuleName() {
+  return ['lottie', '-react'].join('')
+}
+
+function LottieUnavailable(props: WebLottieViewProps) {
+  React.useEffect(() => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      console.warn(`[jfs-components/LottiePlayer] ${INSTALL_HINT}`)
+    }
+  }, [])
+
+  return (
+    <div
+      style={{
+        ...props.style,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 196, 0, 0.12)',
+        border: '1px solid rgba(255, 196, 0, 0.45)',
+        borderRadius: 8,
+        padding: 8,
+        color: '#8a6d00',
+        fontSize: 11,
+        textAlign: 'center',
+        lineHeight: '15px',
+      }}
+    >
+      {typeof __DEV__ !== 'undefined' && __DEV__ ? INSTALL_HINT : null}
+    </div>
+  )
+}
+
+let cachedView: React.ComponentType<WebLottieViewProps> | undefined
+
+export function getWebLottieView(): React.ComponentType<WebLottieViewProps> {
+  if (cachedView !== undefined) return cachedView
+
+  try {
+    const mod = require(resolveWebLottieModuleName()) as {
+      default?: React.ComponentType<WebLottieViewProps>
+    }
+    cachedView = mod.default ?? LottieUnavailable
+  } catch {
+    cachedView = LottieUnavailable
+  }
+
+  return cachedView
+}

package/src/components/PageHero/PageHero.tsx

@@ -32,6 +32,23 @@ export type PageHeroProps = {
    * `modes` are automatically cascaded into this slot.
    */
   buttonSlot?: React.ReactNode
+  /**
+   * Optional media element shown above the text block (eyebrow + headline).
+   *
+   * 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.
+   *
+   * 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`.
+   */
+  media?: React.ReactNode
   /** Mode configuration for design-token theming. */
   modes?: Record<string, any>
   /** Style overrides applied to the outer container. */
@@ -41,12 +58,14 @@ export type PageHeroProps = {
 
 /**
  * PageHero displays a centered hero block typically used at the top of a page
- * or feature screen. It contains an eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * 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.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -57,6 +76,13 @@ 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}
+ *     />
+ *   }
  * />
  * ```
  */
@@ -69,6 +95,7 @@ function PageHero({
   onButtonPress,
   showButton = true,
   buttonSlot,
+  media,
   modes: propModes = EMPTY_MODES,
   style,
   testID,
@@ -86,6 +113,12 @@ function PageHero({
   const textWrapGap =
     Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
 
+  // 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)) || 117
+  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117
+
   const eyebrowColor =
     getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff'
   const eyebrowFontFamily =
@@ -183,8 +216,32 @@ function PageHero({
   // 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.
+  const mediaContent = useMemo<React.ReactNode>(() => {
+    if (media === undefined || media === null) return null
+    return (
+      <View
+        style={{
+          width: mediaWidth,
+          height: mediaHeight,
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {cloneChildrenWithModes(media, modes)}
+      </View>
+    )
+  }, [media, mediaWidth, mediaHeight, modes])
+
   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}