jfs-components 0.1.0 → 0.1.2

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -12,6 +12,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /** Where the value/label text sits relative to the circle. */
 export type ClusterBubbleLabelPlacement = 'inside' | 'outside' | 'auto'
@@ -72,7 +73,7 @@ export type ClusterBubbleProps = {
     /** Style override for the outer container. */
     style?: StyleProp<ViewStyle>
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Accessibility label. Defaults to a `value + label` composite. */
     accessibilityLabel?: string
 }

package/src/components/CoverageBarComparison/CoverageBarComparison.tsx

@@ -12,6 +12,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One entry in the {@link CoverageBarComparisonProps.bars} array.
@@ -54,7 +55,7 @@ export type CoverageBarComparisonItem = {
    * Per-bar design token mode overrides. Merged on top of the parent `modes`
    * and the per-index `Emphasis / DataViz` defaults injected by the parent.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Per-bar accessibility label. */
   accessibilityLabel?: string
 }
@@ -85,7 +86,7 @@ export type CoverageBarComparisonProps = {
    */
   legendGap?: number
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Style applied to the chart row (the bars container). */

package/src/components/CoverageRing/CoverageRing.tsx

@@ -10,6 +10,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Button, { type ButtonProps } from '../Button/Button'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
+import type { Modes } from '../../design-tokens'
 
 type CoverageRingBaseProps = Omit<
   React.ComponentProps<typeof View>,
@@ -73,7 +74,7 @@ export type CoverageRingProps = CoverageRingBaseProps & {
    */
   children?: React.ReactNode
   /** Design token modes forwarded to token lookups and slot children. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Override the support-text style inside the ring. */

package/src/components/DebitCard/DebitCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, typ
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png')
 
@@ -24,7 +25,7 @@ export type DebitCardProps = {
     /** Slot: custom content for the provider logo area (right side of header, after cardType text) */
     providerLogoSlot?: React.ReactNode;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };

package/src/components/Disclaimer/Disclaimer.tsx

@@ -3,10 +3,11 @@ import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'reac
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type DisclaimerProps = {
   disclaimer?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;

package/src/components/Divider/Divider.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type DividerDirection = 'horizontal' | 'vertical'
 
@@ -19,7 +20,7 @@ export type DividerProps = {
   /**
    * Mode configuration passed to the token resolver.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * Optional style overrides for the divider
    */

package/src/components/DonutChart/DonutChart.tsx

@@ -11,6 +11,7 @@ import Svg, { Circle } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -32,7 +33,7 @@ export type DonutChartSegmentData = {
      * Per-segment design token mode overrides. Merged on top of parent
      * `modes` and the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Per-segment accessibility label. */
     accessibilityLabel?: string
 }
@@ -73,7 +74,7 @@ export type DonutChartProps = {
      */
     gap?: number
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
     /** Override default value text styles. */
@@ -142,7 +143,7 @@ function defaultAppearanceFor(index: number) {
  */
 function resolveSegmentColor(
     color: string | undefined,
-    modes: Record<string, any>
+    modes: Modes
 ): string {
     if (color) return color
     return ((getVariableByName('dataViz/bg', modes) as string | null) ?? '#5d00b5')
@@ -176,7 +177,7 @@ type DonutChartSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and
      * the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Per-segment accessibility label. */
     accessibilityLabel?: string
 }
@@ -446,7 +447,7 @@ function buildArcs({
     totalValue: number
     circumference: number
     gapLength: number
-    modes: Record<string, any>
+    modes: Modes
 }): ArcDescriptor[] {
     const arcs: ArcDescriptor[] = []
     const halfGap = gapLength / 2

package/src/components/DonutChartSummary/DonutChartSummary.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import DonutChart, { type DonutChartSegmentData } from '../DonutChart/DonutChart'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One row of the `DonutChartSummary`. Each item drives BOTH a donut
@@ -42,7 +43,7 @@ export type DonutChartSummaryItem = {
      * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
      * `Quinary`, then cycles).
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string
 }
@@ -80,7 +81,7 @@ export type DonutChartSummaryProps = {
      */
     donutGap?: number
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override outer container styles. */
     style?: StyleProp<ViewStyle>
     /** Override the legend container styles. */

package/src/components/Drawer/Drawer.tsx

@@ -15,6 +15,8 @@ import Animated, {
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Overlay from '../Overlay/Overlay'
 
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
@@ -54,7 +56,7 @@ function rubberBand(value: number, min: number, max: number, friction: number =
 
 export type DrawerProps = {
 
-  modes?: Record<string, any>
+  modes?: Modes
   style?: import('react-native').StyleProp<import('react-native').ViewStyle>
   title?: string
   /**
@@ -95,6 +97,19 @@ export type DrawerProps = {
    * expanded), so parent components can react programmatically.
    */
   onStateChange?: (state: 'collapsed' | 'expanded') => void
+  /**
+   * When `true`, renders a full-screen semi-transparent {@link Overlay} scrim
+   * behind the drawer sheet (dimming everything else on screen). Defaults to
+   * `false`, in which case nothing is rendered behind the sheet and behaviour
+   * is unchanged.
+   */
+  showOverlay?: boolean
+  /**
+   * Called when the overlay scrim (the area outside the sheet) is pressed.
+   * Only relevant when `showOverlay` is `true` — typically used to collapse
+   * or dismiss the drawer.
+   */
+  onOverlayPress?: () => void
 }
 
 /**
@@ -132,6 +147,8 @@ function DrawerInner({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange,
+  showOverlay = false,
+  onOverlayPress,
 }: DrawerProps, ref: React.Ref<DrawerHandle>) {
   const { height: screenHeight } = useWindowDimensions()
 
@@ -439,6 +456,9 @@ function DrawerInner({
     // GestureHandlerRootView must wrap the app root; this overlay only needs to
     // let touches fall through where the sheet isn't.
     <View style={[styles.host, style]} pointerEvents="box-none">
+      {/* Full-screen scrim rendered beneath the sheet. Opt-in via `showOverlay`;
+          when disabled nothing renders here and touches still fall through. */}
+      {showOverlay ? <Overlay modes={modes} {...(onOverlayPress ? { onPress: onOverlayPress } : {})} /> : null}
       <GestureDetector gesture={gesture}>
         <Animated.View
           style={[

package/src/components/Dropdown/Dropdown.tsx

@@ -15,6 +15,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -47,7 +48,7 @@ export type DropdownItemProps = {
     /** Optional custom child content (overrides `label`). */
     children?: React.ReactNode
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the item container. */
     style?: StyleProp<ViewStyle>
     /** Style overrides for the item label text. */
@@ -58,7 +59,7 @@ export type DropdownItemProps = {
     accessibilityHint?: string
 }
 
-function useDropdownItemTokens(modes: Record<string, any>) {
+function useDropdownItemTokens(modes: Modes) {
     return useMemo(() => {
         // The `dropdownItem/background` token aliases through the
         // `Dropdown Item State` collection (Idle | Selected), so we resolve
@@ -250,7 +251,7 @@ export type DropdownProps = {
      */
     maxHeight?: number
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the popup container. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the menu surface. */

package/src/components/DropdownInput/DropdownInput.tsx

@@ -27,6 +27,7 @@ import Icon from '../../icons/Icon'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Dropdown, { DropdownItem, type DropdownItemProps } from '../Dropdown/Dropdown'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -131,7 +132,7 @@ export type DropdownInputProps = {
     /** Whether tapping the backdrop closes the menu. */
     closeOnBackdropPress?: boolean
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>
     /** Style overrides for the input row. */
@@ -152,7 +153,7 @@ export type DropdownInputProps = {
 // Token resolution
 // ---------------------------------------------------------------------------
 
-function useChevronTokens(modes: Record<string, any>) {
+function useChevronTokens(modes: Modes) {
     return useMemo(() => {
         const iconSize =
             parseInt(getVariableByName('input/iconSize', modes), 10) || 32
@@ -172,7 +173,7 @@ function toNumber(value: unknown, fallback: number): number {
     return fallback
 }
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
@@ -829,7 +830,7 @@ function DropdownInput({
                 transparent
                 statusBarTranslucent
                 navigationBarTranslucent
-                animationType="fade"
+                animationType="none"
                 onRequestClose={closeMenu}
             >
                 <Pressable

package/src/components/EmptyState/EmptyState.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type EmptyStateProps = {
     /**
@@ -35,7 +36,7 @@ export type EmptyStateProps = {
     /**
      * Mode configuration for theming
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
 import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
 
 export type ExpandableCheckboxProps = {
   /** Long text label rendered next to the checkbox. */
@@ -35,7 +36,7 @@ export type ExpandableCheckboxProps = {
   /** Number of lines to show when collapsed. Defaults to `1`. */
   collapsedLines?: number
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override outer container styles. */
   style?: StyleProp<ViewStyle>
   /** Override the label text styles. */

package/src/components/FilterBar/FilterBar.tsx

@@ -3,12 +3,13 @@ import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TextInput from '../TextInput/TextInput'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type RenderInputArgs = {
   placeholder: string;
   value: string;
   onChangeText?: ((text: string) => void) | undefined;
-  modes: Record<string, any>;
+  modes: Modes;
   accessibilityLabel: string;
   accessibilityHint?: string | undefined;
   onFocus?: (e: any) => void;
@@ -30,7 +31,7 @@ type FilterBarProps = {
    * respect the higher-level FilterBar API.
    */
   renderInput?: (args: RenderInputArgs) => React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/src/components/Form/Form.tsx

@@ -3,6 +3,7 @@ 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 type { Modes } from '../../design-tokens'
 
 type FormContextValue = {
   validationErrors: Record<string, string | string[]>;
@@ -19,7 +20,7 @@ export type FormProps = {
   children: React.ReactNode;
   validationErrors?: Record<string, string | string[]>;
   onSubmit?: () => void;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   testID?: string;

package/src/components/FormField/FormField.tsx

@@ -15,6 +15,7 @@ import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Icon from '../../icons/Icon'
 import { useFormContext } from '../Form/Form'
+import type { Modes } from '../../design-tokens'
 
 export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url'
 
@@ -76,7 +77,7 @@ export type FormFieldProps = {
   /** When true, focuses the input on mount. */
   autoFocus?: boolean
   /** Modes for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style overrides for the outermost wrapper. */
   style?: StyleProp<ViewStyle>
   /** Style overrides for the input row container. */
@@ -116,7 +117,7 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
   return fallback
 }
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
   return useMemo(() => {
     // Wrapper
     const gap = toNumber(getVariableByName('formField/gap', modes), 8)

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo, useRef, useState, useCallback } from 'react'
 import {
   View,
   Text,
   Animated,
+  type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
@@ -16,6 +17,7 @@ import Disclaimer from '../Disclaimer/Disclaimer'
 import IconButton from '../IconButton/IconButton'
 import ActionFooter from '../ActionFooter/ActionFooter'
 import Slot from '../Slot/Slot'
+import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
 // Forced modes
@@ -99,7 +101,7 @@ export type FullscreenModalProps = {
    * and `context5` is always forced to `'Fullscreen Modal'` (non-overridable).
    * The resolved modes cascade to the body, hero media, and the `ActionFooter`.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style overrides for the outer container. */
   style?: StyleProp<ViewStyle>
   /** Style overrides for the transparent body wrapper. */
@@ -118,7 +120,7 @@ type HeroTextProps = {
   headline?: string
   supportingText?: string
   priceText?: string
-  modes: Record<string, any>
+  modes: Modes
 }
 
 function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroTextProps) {
@@ -300,11 +302,57 @@ function FullscreenModal({
   )
   const heroTranslateY = useMemo(() => Animated.multiply(scrollY, -1), [scrollY])
 
-  const processedHeroMedia = useMemo(
-    () =>
-      heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
-    [heroMedia, modes]
-  )
+  // The hero media is a full-bleed background pinned to the top of the modal.
+  // Its wrapper is absolutely positioned (`top/left/right: 0`) so it never
+  // contributes to scroll height. We measure the modal's own width so we can
+  // give the hero media a DEFINITE { width, height } box (see
+  // `processedHeroMedia` below) — relying on the media's own `width: '100%'` +
+  // `aspectRatio` is unreliable inside an indefinite-height absolute box (RN's
+  // `<Image>` falls back to its intrinsic width and leaves a gap), so we size
+  // it explicitly here instead.
+  const [containerWidth, setContainerWidth] = useState(0)
+  const onContainerLayout = useCallback((e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width
+    setContainerWidth((prev) => (prev !== w ? w : prev))
+  }, [])
+
+  const processedHeroMedia = useMemo(() => {
+    if (!heroMedia) return null
+    // Defer rendering the hero until we have measured the modal width. This
+    // matters for image sharpness: React Native decodes a bitmap once, on the
+    // first render, and caches it. If we rendered the media before knowing the
+    // final box, that first decode would be sized/sampled for the wrong box and
+    // the cached (downsampled) bitmap would then just be scaled up — blurry.
+    // Rendering only once the explicit { width, height } box is known means the
+    // very first decode is already full-resolution for the correct box.
+    if (containerWidth <= 0) return null
+    const withModes = cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES)
+
+    // Force the hero to fill the modal width edge to edge, top-aligned, with the
+    // height derived from the media's native aspect ratio.
+    //
+    // Why we inject explicit width/height instead of relying on the media's own
+    // `width: '100%'` + `aspectRatio`: the hero wrapper is absolutely positioned
+    // with an INDEFINITE height, and in that layout context React Native's
+    // `<Image>` falls back to its INTRINSIC width (so a 361px-wide asset renders
+    // 361px wide and leaves a gap on the right) rather than stretching to the
+    // parent. By computing `height = containerWidth / ratio` here and passing a
+    // DEFINITE { width, height } box (which makes `<Image>` skip aspectRatio and
+    // cover-fit into that exact box), the hero always fills the width with the
+    // correct ratio-derived height.
+    return React.Children.map(withModes, (child) => {
+      if (!React.isValidElement(child)) return child
+      const props = child.props as { ratio?: number; width?: unknown; height?: unknown }
+      const ratio = typeof props.ratio === 'number' && props.ratio > 0 ? props.ratio : undefined
+      // Only size media that exposes a numeric `ratio` and hasn't already been
+      // given an explicit box by the caller.
+      if (ratio == null || props.width != null || props.height != null) return child
+      return React.cloneElement(child, {
+        width: containerWidth,
+        height: containerWidth / ratio,
+      } as Partial<typeof props>)
+    })
+  }, [heroMedia, modes, containerWidth])
 
   const processedChildren = useMemo(
     () =>
@@ -369,7 +417,7 @@ function FullscreenModal({
   }
 
   return (
-    <View style={[rootStyle, style]} testID={testID}>
+    <View style={[rootStyle, style]} testID={testID} onLayout={onContainerLayout}>
       {/*
        * Layout model:
        *  - `processedHeroMedia` is a ROOT-LEVEL full-bleed background pinned to
@@ -387,7 +435,17 @@ function FullscreenModal({
        */}
       {processedHeroMedia ? (
         <Animated.View
-          style={[heroBackgroundStyle, { transform: [{ translateY: heroTranslateY }] }]}
+          style={[
+            heroBackgroundStyle,
+            // Give the absolute wrapper a DEFINITE width (the measured modal
+            // width) so the media's `width: '100%'` + `aspectRatio` resolves to
+            // a true edge-to-edge fill with a ratio-derived height, top-aligned.
+            // Before the first layout pass `containerWidth` is 0 — fall back to
+            // stretching via `left/right: 0` so there is no flash of a mis-sized
+            // image.
+            containerWidth > 0 ? { width: containerWidth } : null,
+            { transform: [{ translateY: heroTranslateY }] },
+          ]}
           pointerEvents="none"
         >
           {processedHeroMedia}

package/src/components/Gauge/Gauge.tsx

@@ -5,6 +5,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import SupportText, { type SupportTextProps } from '../SupportText/SupportText'
+import type { Modes } from '../../design-tokens'
 
 type GaugeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -32,7 +33,7 @@ export type GaugeProps = GaugeBaseProps & {
   /** Hides default support text when no custom readout slot is provided. */
   showSupportText?: boolean
   /** Design token modes forwarded to token lookups and slot children. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Slot rendered in the center of the gauge arc. Receives `modes` recursively. */
   children?: React.ReactNode
   /** Container style override. */

package/src/components/HStack/HStack.tsx

@@ -3,6 +3,7 @@ import { View, StyleProp, ViewStyle, ViewProps } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface HStackProps extends ViewProps {
     /**
@@ -35,7 +36,7 @@ export interface HStackProps extends ViewProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
 }
 
 /**

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -11,6 +11,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Radio from '../Radio/Radio'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface HoldingsCardDetailItem {
     label: string
@@ -33,7 +34,7 @@ export interface HoldingsCardProps {
     /** Called when the card is pressed (toggles selection). */
     onPress?: () => void
     /** Modes object for design-token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Custom style for the outer container. */
     style?: StyleProp<ViewStyle>
     /** Test ID for testing. */

package/src/components/Icon/Icon.tsx

@@ -10,6 +10,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import BaseIcon from '../../icons/Icon'
 import type { UnifiedSource } from '../../utils/MediaSource'
+import type { Modes } from '../../design-tokens'
 
 type IconProps = AccessibilityProps & {
   /**
@@ -43,7 +44,7 @@ type IconProps = AccessibilityProps & {
    * from the `icon/size` design token.
    */
   size?: number
-  modes?: Record<string, any>
+  modes?: Modes
   style?: StyleProp<ViewStyle>
 }
 
@@ -53,7 +54,7 @@ interface IconTokens {
   iconSize: number
 }
 
-function resolveIconTokens(modes: Record<string, any>): IconTokens {
+function resolveIconTokens(modes: Modes): IconTokens {
   const iconColor = (getVariableByName('icon/color', modes) || '#ad8444') as string
   const iconSize = (getVariableByName('icon/size', modes) || 18) as number
   const paddingLeft = (getVariableByName('icon/padding/left', modes) || 0) as number