@oxy.so/bloom 6.1.0 → 6.2.0

package/README.md

@@ -162,7 +162,7 @@ Icons go one step further: every glyph is its own subpath, `@oxy.so/bloom/icons/
 | Overlays | `dialog`, `alert-dialog`, `bottom-sheet`, `popover`, `context-menu`, `dropdown-menu`, `menubar`, `tooltip`, `overlay`, `portal`, `teleport`, `surfaces`, `settings-modal` |
 | Actions | `button`, `button-group`, `social-button`, `fab`, `frosted-icon-button`, `pressable-scale`, `subtle-hover` |
 | Forms | `text-field`, `textarea`, `phone-input`, `input-otp`, `field`, `input-group`, `label`, `select`, `command`, `checkbox`, `radio`, `switch`, `slider`, `segmented-control`, `search`, `date-picker`, `file-upload`, `auth-card`, `stepper`, `rating`, `wizard` |
-| Layout and lists | `grid`, `list`, `scroll`, `settings-list`, `card`, `accordion`, `aspect-ratio`, `divider`, `item`, `carousel` |
+| Layout and lists | `grid`, `list`, `scroll`, `settings-list`, `card`, `cover-header`, `accordion`, `aspect-ratio`, `divider`, `item`, `carousel` |
 | Data and charts | `table`, `data-table`, `chart-cards`, `stat-cards`, `calendar`, `composition-bar`, `dot-grid-meter`, `stat-bar`, `activity-heatmap`, `recent-hires-card`, `patient-info-card`, `important-alerts-card`, `agent-limits-card`, `ai-profile-card` |
 | Music and media | `media-card`, `media-controls`, `media-header`, `media-player`, `media-shelf`, `track-list`, `queue-panel`, `lyrics`, `music-library`, `creator-studio`, `sortable-media` |
 | Housing | `home-search`, `listing-actions`, `listing-editor`, `offering-badge`, `place-reviews`, `property-insights`, `tenancy`, `eviction` |

package/docs/adoption-matrix.mdx

@@ -32,7 +32,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 
 ## Totals
 
-- **207 families** in `src/`, **205** published (a subpath, the root barrel, or both). **41** carry a web fork.
+- **208 families** in `src/`, **206** published (a subpath, the root barrel, or both). **41** carry a web fork.
 - Docs, stories and suites are gated as a standard by `src/__tests__/family-coverage.test.ts`; the per-family counts are in the table below.
 
 | contract | applies to | reads | delegated | n/a¹ | adaptation |
@@ -163,6 +163,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `contact-card` | `@oxy.so/bloom/contact-card` + barrel | universal | `contact-card.mdx` | yes | 2 |  |  |  |  |
 | `content-panel` | `@oxy.so/bloom/content-panel` + barrel | web fork | `content-panel.mdx` | yes | 8 |  |  |  |  |
 | `context-menu` | `@oxy.so/bloom/context-menu` + barrel | web fork | `context-menu.mdx` | yes | 5 |  |  | reads |  |
+| `cover-header` | `@oxy.so/bloom/cover-header` + barrel | universal | `cover-header.mdx` | yes | 1 |  |  |  |  |
 | `creator-studio` | `@oxy.so/bloom/creator-studio` + barrel | universal | `creator-studio.mdx` | yes | 4 |  | n/a¹ |  | **adaptation** |
 | `data-table` | `@oxy.so/bloom/data-table` + barrel | universal | `data-table.mdx` | yes | 4 |  | reads |  | reads |
 | `date-picker` | `@oxy.so/bloom/date-picker` + barrel | universal | `date-picker.mdx` | yes | 5 | reads | reads |  | reads |
@@ -303,7 +304,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `tenancy` | `@oxy.so/bloom/tenancy` + barrel | universal | `tenancy.mdx` | yes | 5 |  | reads |  |  |
 | `text-field` | `@oxy.so/bloom/text-field` + barrel | universal | `text-field.mdx` | yes | 16 | reads | reads |  |  |
 | `textarea` | `@oxy.so/bloom/textarea` + barrel | universal | `textarea.mdx` | yes | 4 | reads | reads |  | n/a¹ |
-| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 344 |  |  | n/a¹ | reads |
+| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 345 |  |  | n/a¹ | reads |
 | `theme-toggle` | `@oxy.so/bloom/theme-toggle` + barrel | universal | `theme-toggle.mdx` | yes | 2 | n/a¹ |  |  |  |
 | `toast` | `@oxy.so/bloom/toast` + barrel | universal | `toast.mdx` | yes | 17 |  |  |  |  |
 | `tooltip` | `@oxy.so/bloom/tooltip` + barrel | web fork | `tooltip.mdx` | yes | 1 |  |  |  |  |

package/docs/chat-composer.mdx

@@ -136,6 +136,10 @@ Times ("12:41", "Yesterday") never appear here. `VoiceRecorder` takes `seconds`
 
 One `SuggestionList` serves all three kinds; only the leading slot differs (an avatar, a glyph disc, the emoji). Rows are `role="option"` inside a `role="listbox"` with `aria-selected` — the spelling react-native-web reads; `accessibilityState` alone would render a list with no state on web. Each row is named by its label **and** handle, because "Ana" alone is ambiguous in a group.
 
+A person marked `verified` gets the accent verified badge after the name, and the row's name says so ("Ana Restrepo, Verified, @ana"); the marker belongs to `kind="mention"` only.
+
+The list also answers the two states a search passes through. `loading` replaces the rows with a named, busy "Searching…" line, so a list with nothing *yet* is not read as one that found nothing. An empty list still draws nothing by default — right for a composer that shows the list only while it has rows — and `showEmpty` draws the localized "No people found" line instead (`emptyLabel` replaces it), for a picker the user opened on purpose.
+
 The list renders **in flow** above the bar rather than in a portal. Anchoring it over the conversation is a layout decision an app makes with its own container (`position: absolute` on a wrapper); a portal here would have to guess the scroll parent.
 
 ## Voice recorder
@@ -227,7 +231,7 @@ State colours 150ms; the mic ↔ send cross-fade 220ms; the recording dot pulses
 
 `ComposerBanner` — `kind`, `title`, `preview`, `thumbnail`, `icon`, `accentColor`, `onClose`, `closeLabel`, `trailing`.
 `ComposerAttachmentStrip` — `attachments`, `onRemove`, `size` (56), `removeLabel`.
-`SuggestionList` — `kind`, `suggestions`, `activeIndex`, `onSelectSuggestion`, `onActiveIndexChange`, `header`, `maxHeight` (232).
+`SuggestionList` — `kind`, `suggestions` (each may carry `verified`), `activeIndex`, `onSelectSuggestion`, `onActiveIndexChange`, `header`, `maxHeight` (232), `loading`, `showEmpty`, `emptyLabel`.
 `VoiceRecorder` — `state`, `seconds`, `duration`, `amplitudes`, `playing`, `onPlayToggle`, `onCancel`, `onDelete`, `onSend`, `onLock`, `slideToCancel`, `labels`.
 `AttachmentMenu` — `open`/`defaultOpen`/`onOpenChange`, `items`, `layout`, `columns`, `onSelect`, `recent`, `label`.
 `EmojiPicker` — `groups`, `onSelectEmoji`, `activeGroup`, `query`, `filter`, `frequentlyUsed`, `skinTone`, `columns` (8), `height` (288), `tabs`, `activeTab`, `labels`.

package/docs/cover-header.mdx

@@ -0,0 +1,56 @@
+---
+title: CoverHeader
+description: A cover band with content rising into its bottom edge — a profile's banner and the avatar that overlaps it.
+order: 106
+---
+
+# CoverHeader
+
+A cover band (a photo, or anything you draw) and a content column whose top
+rises `overlap` points into the band's bottom edge. It is the geometry of a
+profile page's banner-plus-avatar, and of `AiProfileCard`, which is built on it.
+
+```tsx
+import { CoverHeader } from '@oxy.so/bloom/cover-header';
+
+<CoverHeader coverSource={bannerUrl} coverHeight={170} overlap={45}
+  contentStyle={{ paddingHorizontal: 16 }}>
+  <Avatar size={90} source={avatarUrl} />
+  <Text variant="title-2-medium">Maya Collins</Text>
+</CoverHeader>
+```
+
+## Props
+
+| Prop | Default | |
+|---|---|---|
+| `coverSource` | — | photo across the band; without one the band is `background-tertiary` |
+| `coverPosition` | `{ x: 0.5, y: 0.5 }` | where the crop sits, as `object-position` fractions |
+| `cover` | — | drawn in the band instead of the photo |
+| `coverHeight` | `170` | height of the band |
+| `overlap` | `45` | how far the content rises into the band, clamped to `0..coverHeight` |
+| `coverStyle` | — | the band's style (corner radii, another fill) |
+| `contentStyle` | — | the content column's style; its `paddingTop` is the component's |
+| `testID` | — | also names `-cover`, `-cover-image` and `-content` |
+
+## How the overlap is made
+
+By layout. Nothing is moved.
+
+- The band is the **first** child, positioned absolutely over the top `coverHeight`.
+- The content is the **last** child, in flow, with `paddingTop: coverHeight - overlap`.
+
+There is no negative margin, no transform and no `zIndex`, and each of those
+has broken a profile before:
+
+- A **transform** keeps the layout box where it was. The content paints 45pt higher,
+  but whatever comes next (a tab strip, a list's next row) still starts after the
+  un-moved box, which leaves a 45pt hole.
+- A **negative margin** on the content leaves the paint order to whichever
+  view happens to create a stacking context first. Inside a native
+  virtualized cell, that has put the avatar under the banner.
+- **`zIndex`** belongs to the overlay stack (`docs/overlay.mdx`), never to a component.
+
+Because the content is the later sibling, it paints over the band on iOS,
+Android and web. The measured height is the real one. A list header or
+sticky section placed after a `CoverHeader` starts exactly where its content ends.

package/lib/commonjs/ai-profile-card/AiProfileCard.js

@@ -13,12 +13,13 @@ var _ContributionsCard = require("../chart-cards/ContributionsCard.js");
 var _ChartHeader = require("../chart-cards/primitives/ChartHeader.js");
 var _useCountUp = require("../chart-cards/use-count-up.js");
 var _index3 = require("../chip/index.js");
+var _index4 = require("../cover-header/index.js");
 var _useControllableState = require("../hooks/use-controllable-state.js");
 var _messages = require("../locale/messages.js");
-var _index4 = require("../segmented-control/index.js");
+var _index5 = require("../segmented-control/index.js");
 var _breakpoints = require("../styles/breakpoints.js");
 var _useTheme = require("../theme/use-theme.js");
-var _index5 = require("../typography/index.js");
+var _index6 = require("../typography/index.js");
 var _messages2 = require("./messages.js");
 var _formatNumber = require("../locale/format-number.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   card      radius 24, 1px borderLight, no
  *             fill, clips its children
  *   cover     absolute over the top 165px, top corners 23, background-tertiary
- *             under the photo, `object-position: 50% 45%`
+ *             under the photo, `object-position: 50% 45%` — a `CoverHeader`
  *   content   column 15 apart, padding 124 top / 16 sides / 16 bottom
  *   avatar    80 disc, background-tertiary, initials 30 / 42.5 medium
  *             text-secondary — overlapping the cover's bottom edge by 41
@@ -51,68 +52,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * support pair. The contributions heatmap retains its data hue.
  */const COVER_HEIGHT = 165;
 const AVATAR_SIZE = 80;
-
-/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
-function CoverImage({
-  source,
-  position,
-  testID
-}) {
-  const [box, setBox] = (0, _react.useState)(null);
-  const [natural, setNatural] = (0, _react.useState)(null);
-  const resolved = typeof source === 'string' ? {
-    uri: source
-  } : source;
-  const onLayout = (0, _react.useCallback)(event => {
-    const {
-      width,
-      height
-    } = event.nativeEvent.layout;
-    setBox(prev => prev && prev.width === width && prev.height === height ? prev : {
-      width,
-      height
-    });
-  }, []);
-  const onLoad = (0, _react.useCallback)(event => {
-    const s = event.nativeEvent?.source;
-    if (s && s.width > 0 && s.height > 0) setNatural({
-      width: s.width,
-      height: s.height
-    });
-  }, []);
-  const frame = (0, _react.useMemo)(() => {
-    if (!box || !natural) return null;
-    const scale = Math.max(box.width / natural.width, box.height / natural.height);
-    const width = natural.width * scale;
-    const height = natural.height * scale;
-    return {
-      width,
-      height,
-      left: (box.width - width) * position.x,
-      top: (box.height - height) * position.y
-    };
-  }, [box, natural, position.x, position.y]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: _reactNative.StyleSheet.absoluteFill,
-    onLayout: onLayout,
-    testID: testID ? `${testID}-frame` : undefined,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-      testID: testID,
-      source: resolved,
-      onLoad: onLoad,
-      accessibilityIgnoresInvertColors: true,
-      "aria-hidden": true,
-      resizeMode: "cover",
-      style: frame ? {
-        position: 'absolute',
-        left: frame.left,
-        top: frame.top,
-        width: frame.width,
-        height: frame.height
-      } : _reactNative.StyleSheet.absoluteFill
-    })
-  });
-}
+/** Where the content starts: the avatar overlaps the cover's bottom edge by 41. */
+const CONTENT_TOP = 124;
 
 /**
  * The count-up headline, in its own component: the roll re-renders every frame
@@ -130,7 +71,7 @@ function RollingHeadline({
   const [target, setTarget] = (0, _react.useState)(duration > 0 ? 0 : value);
   (0, _react.useEffect)(() => setTarget(value), [value]);
   const rolled = (0, _useCountUp.useCountUp)(target, Math.max(1, duration));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
     variant: "title-1-medium",
     numberOfLines: 1,
     testID: testID,
@@ -226,243 +167,225 @@ function AiProfileCardComponent({
     onActiveCellChange: onActiveCellChange,
     testID: testID ? `${testID}-grid` : undefined
   }), [cells, columns, colors.grid, animateIn, wide, activeCell, onActiveCellChange, testID]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index4.CoverHeader, {
     testID: testID,
+    coverSource: coverSource,
+    coverPosition: coverPosition,
+    coverHeight: COVER_HEIGHT,
+    overlap: COVER_HEIGHT - CONTENT_TOP,
     style: [{
-      position: 'relative',
-      width: '100%',
       minWidth: 0,
       overflow: 'hidden',
       borderRadius: 24,
       borderWidth: 1,
       borderColor: colors.border
     }, style],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      testID: testID ? `${testID}-cover` : undefined,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        height: COVER_HEIGHT,
-        overflow: 'hidden',
-        borderTopLeftRadius: 23,
-        borderTopRightRadius: 23,
-        backgroundColor: colors.tertiary
-      },
-      children: coverSource ? /*#__PURE__*/(0, _jsxRuntime.jsx)(CoverImage, {
-        source: coverSource,
-        position: coverPosition,
-        testID: testID ? `${testID}-cover-image` : undefined
-      }) : null
+    coverStyle: {
+      borderTopLeftRadius: 23,
+      borderTopRightRadius: 23
+    },
+    contentStyle: {
+      flexDirection: 'column',
+      gap: 15,
+      paddingBottom: 16,
+      paddingLeft: 16,
+      paddingRight: 16
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
+      testID: testID ? `${testID}-avatar` : undefined,
+      size: AVATAR_SIZE,
+      source: avatarSource ?? undefined,
+      initials: letters,
+      color: "neutral",
+      alt: avatarSource ? name : undefined,
+      placeholderColor: colors.tertiary,
+      placeholderIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+        allowFontScaling: false,
+        numberOfLines: 1,
+        style: [styles.initials, {
+          color: colors.textSecondary
+        }],
+        children: letters
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      testID: testID ? `${testID}-content` : undefined,
       style: {
         position: 'relative',
         width: '100%',
-        flexDirection: 'column',
-        gap: 15,
-        paddingTop: 124,
-        paddingBottom: 16,
-        paddingLeft: 16,
-        paddingRight: 16
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 15
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
-        testID: testID ? `${testID}-avatar` : undefined,
-        size: AVATAR_SIZE,
-        source: avatarSource ?? undefined,
-        initials: letters,
-        color: "neutral",
-        alt: avatarSource ? name : undefined,
-        placeholderColor: colors.tertiary,
-        placeholderIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-          allowFontScaling: false,
-          numberOfLines: 1,
-          style: [styles.initials, {
-            color: colors.textSecondary
-          }],
-          children: letters
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
-          position: 'relative',
-          width: '100%',
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          gap: 15
+          minWidth: 0,
+          flex: 1,
+          flexDirection: 'column',
+          gap: 4
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+          variant: "title-2-medium",
+          numberOfLines: 1,
+          style: {
+            color: colors.text
+          },
+          children: name
+        }), handle != null || badge != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: {
-            minWidth: 0,
-            flex: 1,
-            flexDirection: 'column',
-            gap: 4
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-            variant: "title-2-medium",
+          children: [handle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+            variant: "headline-medium",
             numberOfLines: 1,
             style: {
-              color: colors.text
+              color: colors.textSecondary
             },
-            children: name
-          }), handle != null || badge != null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            children: handle
+          }) : null, badge != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Badge, {
+            testID: testID ? `${testID}-badge` : undefined,
+            content: badge,
             style: {
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 6
+              backgroundColor: colors.tertiary
             },
-            children: [handle != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-              variant: "headline-medium",
-              numberOfLines: 1,
-              style: {
-                color: colors.textSecondary
-              },
-              children: handle
-            }) : null, badge != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Badge, {
-              testID: testID ? `${testID}-badge` : undefined,
-              content: badge,
-              style: {
-                backgroundColor: colors.tertiary
-              },
-              textStyle: {
-                color: colors.textSecondary
-              }
-            }) : null]
+            textStyle: {
+              color: colors.textSecondary
+            }
           }) : null]
-        }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          testID: testID ? `${testID}-actions` : undefined,
-          style: {
-            position: 'absolute',
-            top: -34,
-            right: 4,
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            gap: 10
-          },
-          children: actions
         }) : null]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      }), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: testID ? `${testID}-actions` : undefined,
+        style: {
+          position: 'absolute',
+          top: -34,
+          right: 4,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          gap: 10
+        },
+        children: actions
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        width: '100%',
+        flexDirection: 'column',
+        gap: 8
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: {
-          width: '100%',
           flexDirection: 'column',
-          gap: 8
+          gap: 2
         },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+          variant: "body-medium",
+          numberOfLines: 1,
           style: {
-            flexDirection: 'column',
-            gap: 2
+            color: colors.textSecondary
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-            variant: "body-medium",
-            numberOfLines: 1,
-            style: {
-              color: colors.textSecondary
-            },
-            children: contributionsLabel
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flexDirection: 'row',
-              alignItems: 'center',
-              gap: 8
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RollingHeadline, {
-              value: contributions,
-              duration: countUpDuration,
-              format: format,
-              color: colors.text,
-              testID: testID ? `${testID}-headline` : undefined
-            }), delta != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Chip, {
-              size: "md",
-              testID: testID ? `${testID}-delta` : undefined,
-              style: {
-                alignSelf: 'center',
-                backgroundColor: colors.chip.background
-              },
-              textStyle: {
-                color: colors.chip.foreground
-              },
-              children: delta
-            }) : null]
-          })]
-        }), stats && stats.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          testID: testID ? `${testID}-stats` : undefined,
+          children: contributionsLabel
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: {
-            flexDirection: 'column',
+            flexDirection: 'row',
+            alignItems: 'center',
             gap: 8
           },
-          children: (wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RollingHeadline, {
+            value: contributions,
+            duration: countUpDuration,
+            format: format,
+            color: colors.text,
+            testID: testID ? `${testID}-headline` : undefined
+          }), delta != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Chip, {
+            size: "md",
+            testID: testID ? `${testID}-delta` : undefined,
             style: {
-              flexDirection: 'row',
-              alignItems: 'stretch',
-              gap: 8
+              alignSelf: 'center',
+              backgroundColor: colors.chip.background
+            },
+            textStyle: {
+              color: colors.chip.foreground
             },
-            children: [row.map(i => {
-              const stat = stats[i];
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                testID: testID ? `${testID}-stat-${i}` : undefined,
-                style: [styles.tile, {
-                  backgroundColor: colors.secondary
-                }],
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-                  variant: "body-medium",
-                  numberOfLines: 1,
-                  style: {
-                    width: '100%',
-                    color: colors.text
-                  },
-                  children: stat.value
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-                  variant: "body-2-medium",
-                  numberOfLines: 1,
-                  style: {
-                    width: '100%',
-                    color: colors.textSecondary
-                  },
-                  children: stat.label
-                })]
-              }, `${i}-${stat.label}`);
-            }), !wide && row.length === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: styles.tileSpacer
-            }) : null]
-          }, row[0]))
-        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            children: delta
+          }) : null]
+        })]
+      }), stats && stats.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        testID: testID ? `${testID}-stats` : undefined,
+        style: {
+          flexDirection: 'column',
+          gap: 8
+        },
+        children: (wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: {
-            width: '100%',
             flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            paddingTop: 6,
-            paddingLeft: 2
+            alignItems: 'stretch',
+            gap: 8
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.Text, {
-            variant: "body-2-medium",
-            style: {
-              color: colors.textSecondary
-            },
-            children: activityLabel
-          }), periods.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.SegmentedControl, {
-            label: messages.periodGroup(activityLabel),
-            type: "radio",
-            variant: "plain",
-            value: selectedPeriod,
-            onValueChange: setPeriod,
-            children: periods.map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.SegmentedControlItem, {
-              value: p.id,
-              testID: testID ? `${testID}-period-${p.id}` : undefined,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.SegmentedControlItemText, {
-                children: p.label
-              })
-            }, p.id))
+          children: [row.map(i => {
+            const stat = stats[i];
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              testID: testID ? `${testID}-stat-${i}` : undefined,
+              style: [styles.tile, {
+                backgroundColor: colors.secondary
+              }],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+                variant: "body-medium",
+                numberOfLines: 1,
+                style: {
+                  width: '100%',
+                  color: colors.text
+                },
+                children: stat.value
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+                variant: "body-2-medium",
+                numberOfLines: 1,
+                style: {
+                  width: '100%',
+                  color: colors.textSecondary
+                },
+                children: stat.label
+              })]
+            }, `${i}-${stat.label}`);
+          }), !wide && row.length === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.tileSpacer
           }) : null]
-        }), wide ? grid : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          horizontal: true,
-          showsHorizontalScrollIndicator: false,
+        }, row[0]))
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          width: '100%',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingTop: 6,
+          paddingLeft: 2
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Text, {
+          variant: "body-2-medium",
           style: {
-            flexGrow: 0
+            color: colors.textSecondary
           },
-          children: grid
-        })]
+          children: activityLabel
+        }), periods.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.SegmentedControl, {
+          label: messages.periodGroup(activityLabel),
+          type: "radio",
+          variant: "plain",
+          value: selectedPeriod,
+          onValueChange: setPeriod,
+          children: periods.map(p => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.SegmentedControlItem, {
+            value: p.id,
+            testID: testID ? `${testID}-period-${p.id}` : undefined,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.SegmentedControlItemText, {
+              children: p.label
+            })
+          }, p.id))
+        }) : null]
+      }), wide ? grid : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: {
+          flexGrow: 0
+        },
+        children: grid
       })]
     })]
   });