@oxy.so/bloom 3.6.0 → 4.1.0

package/src/chat-people/shared.ts

@@ -68,11 +68,11 @@ export function resolveChatPeoplePaint(theme: Theme): ChatPeoplePaint {
   return {
     surface: c.background,
     surfaceRaised: c.card,
-    rowHighlight: dark ? mixColor(c.background, n[700], 0.55) : n[100],
-    border: dark ? n[700] : n[200],
+    rowHighlight: c.backgroundSecondary,
+    border: c.border,
     text: c.text,
     textSecondary: c.textSecondary,
-    textTertiary: dark ? n[600] : n[400],
+    textTertiary: c.textTertiary,
     accent: accent[500],
     onAccent: c.primaryForeground,
     accentSubtle: dark ? mixColor(c.background, accent[500], 0.22) : mixColor(c.background, accent[500], 0.12),
@@ -82,7 +82,7 @@ export function resolveChatPeoplePaint(theme: Theme): ChatPeoplePaint {
     ownerSubtle: dark
       ? mixColor(c.background, amber[500], 0.22)
       : mixColor(c.background, amber[500], 0.16),
-    chip: dark ? n[800] : n[100],
+    chip: c.backgroundTertiary,
     onChip: c.text,
     railText: c.textSecondary,
     railActive: accent[500],

package/src/chat-people/types.ts

@@ -43,6 +43,10 @@ export interface PersonSummary {
 export type ContactRowTrailing = 'none' | 'chevron' | 'checkbox' | 'action';
 
 export interface ContactRowProps extends PersonSummary {
+  /** Replaces AvatarPresence. Caller owns avatar size, badges and presence semantics. */
+  avatarSlot?: ReactNode;
+  /** Replaces the visible name/subtitle block; name and subtitle still name the row accessibly. */
+  identitySlot?: ReactNode;
   /** Defaults to `checkbox` with `onSelectedChange`, `action` with `onAction`, else `none`. */
   trailing?: ContactRowTrailing;
   /** Replaces the trailing slot entirely. */
@@ -59,6 +63,8 @@ export interface ContactRowProps extends PersonSummary {
   disabled?: boolean;
   /** `medium` 44px avatar (default), `small` 36 for a dense picker. */
   size?: 'small' | 'medium';
+  /** Horizontal inset around the avatar/text area. Default 10; use 0 in an already-inset widget. */
+  horizontalInset?: number;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   testID?: string;

package/src/chat-screen/shared.ts

@@ -74,6 +74,8 @@ export interface ChatScreenPaint {
   textTertiary: string;
   accentColor: string;
   onAccent: string;
+  /** Exact opaque outgoing message fill. */
+  outgoingSurface: string;
   /** A 10%-ish accent wash — an action tile, a role badge. */
   accentSubtle: string;
   /**
@@ -109,34 +111,31 @@ export function resolveChatScreenPaint(theme: Theme): ChatScreenPaint {
     isDark: dark,
     accent,
     neutral: n,
-    surface: dark ? n[900] : c.card,
-    surfaceSubtle: dark ? n[800] : n[100],
+    surface: c.card,
+    surfaceSubtle: c.backgroundSecondary,
     page: c.background,
-    border: dark ? n[800] : n[200],
+    border: c.border,
     text: c.text,
-    textSecondary: dark ? n[400] : n[500],
-    textTertiary: dark ? n[600] : n[400],
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
     accentColor: dark ? accent[400] : accent[600],
     onAccent: c.primaryForeground,
-    accentSubtle: dark ? mixColor(n[900], accent[500], 0.24) : mixColor(c.card, accent[500], 0.14),
+    outgoingSurface: c.primary,
+    accentSubtle: c.primarySubtle,
     accentTrack: dark ? accent[800] : accent[200],
     destructive: dark ? red[400] : red[600],
-    destructiveSubtle: dark
-      ? mixColor(n[900], red[500], 0.2)
-      : mixColor(c.card, red[500], 0.1),
+    destructiveSubtle: c.errorSubtle,
     floatingSurface: menu.surface,
     floatingBorder: menu.border,
     floatingShadow: menu.shadow,
-    // The ink is a NEUTRAL step, never the accent: a wallpaper tinted with the
-    // brand colour competes with the outgoing bubble, which IS the brand colour.
-    patternTint: dark ? n[700] : n[300],
-    // Both stops move AWAY from the page, never toward the card: lighter than
-    // the page in dark, darker than it in light. A gradient that brightened a
-    // light page brought its lightest pixel onto the incoming bubble's own
-    // colour — measured as 16 of 32 themes separating WORSE than no wallpaper at
-    // all (`ChatBackgroundContrast.test.ts` pins the corrected range).
+    // Decorations stay below the bubble lightness range: darken the page in
+    // both modes. Brightening the near-black tonal page approaches its cards.
+    patternTint: dark ? '#000000' : c.backgroundTertiary,
+    // Darkening the page preserves bubble separation in both modes. The old
+    // light recipe brightened into cards (16/32 regressions); the later dark
+    // recipe did the same once the tonal page moved close to black.
     gradient: dark
-      ? [mixColor(c.background, accent[800], 0.5), c.background, mixColor(c.background, n[800], 0.5)]
+      ? [mixColor(c.background, '#000000', 0.5), c.background, mixColor(c.background, '#000000', 0.8)]
       : [mixColor(c.background, accent[300], 0.3), c.background, mixColor(c.background, n[300], 0.35)],
     // NOT white/black. Dimming a light wallpaper toward WHITE puts its lightest
     // possible pixel exactly on the card colour — a white incoming bubble over a
@@ -161,8 +160,9 @@ export function useChatScreenPaint(): ChatScreenPaint {
  * the date pill and the jump buttons are all OPAQUE, so the wallpaper never gets
  * between a fill and its own text — what it can do is stop a bubble being told
  * apart from the page behind it. So the number to measure is the SEPARATION
- * between a surface and the worst pixel the wallpaper can put behind it, and for
- * that you need the extremes, not an average.
+ * between a surface and sampled wallpaper endpoints. For a continuous photo,
+ * a bubble luminance between those endpoints can still match a pixel exactly;
+ * endpoint ratios are NOT a full-range worst-case guarantee.
  *
  * `image` is the interesting case: a consumer photo has no knowable extremes, so
  * the dimming overlay supplies them. White and black dimmed toward
@@ -240,7 +240,7 @@ function extremesOf(colors: string[]): { lightest: string; darkest: string } {
 
 /**
  * The two opaque bubble fills a wallpaper is measured AGAINST: an incoming
- * bubble (the chrome surface) and an outgoing one (the accent fill).
+ * bubble (colors.card) and an outgoing one (colors.primary).
  *
  * Named here rather than inside the gate so the table in `docs/chat-screen.mdx`
  * and the number the test asserts come from ONE definition — a gate that picks
@@ -248,13 +248,13 @@ function extremesOf(colors: string[]): { lightest: string; darkest: string } {
  *
  * The FLOATING surfaces (the date pill, the two jump buttons) are deliberately
  * NOT in this set, and that is not an exemption: their separation from a
- * wallpaper reaches 1.00 in the worst case — a dark patterned wallpaper is the
- * pill's own surface colour — which is exactly why every one of them carries a
- * 1px `floatingBorder` hairline. A bubble has no such rule to fall back on, so
- * it is the thing the extremes have to clear.
+ * wallpaper historically reached 1.00 on dark patterns, which is why each
+ * carries a 1px `floatingBorder` hairline. These samples measure bubble fills
+ * independently of borders; image endpoints cannot guarantee separation for
+ * every intermediate photo pixel (see the recorded limitation in the gate).
  */
 export function chatBackgroundReferenceSurfaces(paint: ChatScreenPaint): string[] {
-  return [paint.surface, paint.accent[500]];
+  return [paint.surface, paint.outgoingSurface];
 }
 
 /** A URL/URI string that needs no `ImageResolver`. */

package/src/checkbox/Checkbox.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
@@ -83,10 +86,10 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   onCheckedChange,
   label,
   description,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
   indeterminate = false,
-  color,
+  tone: toneProp,
   style,
   labelStyle,
   accessibilityLabel,
@@ -105,6 +108,9 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
     nativeID,
   });
   const isDisabled = field.disabled;
+  const { size: scopedSize, tone } = useBloomAppearance({ size: normalizeBloomSize(sizeProp), tone: toneProp }, { size: 'md', tone: 'accent' });
+  const size = scopedSize;
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, BLOOM_CHECKBOX_CSS);
   useInteractiveWebCss(CHECKBOX_GLYPH_STYLE_ID, CHECKBOX_GLYPH_CSS);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
@@ -112,7 +118,7 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
   // only other state the design defines. No press scale.
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const sizeConfig = CHECKBOX_SIZE_CONFIG[size];
-  const paint = useMemo(() => resolveCheckboxPaint(theme, color), [theme, color]);
+  const paint = useMemo(() => resolveCheckboxPaint(theme, color, foreground), [theme, color, foreground]);
   const highlighted = !isDisabled && (hovered || pressed);
 
   const handlePress = useCallback(() => {

package/src/checkbox/CheckboxCard.tsx

@@ -1,3 +1,5 @@
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
@@ -63,15 +65,17 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
   description,
   disabled = false,
   indeterminate = false,
-  color,
+  tone: toneProp,
   style,
   accessibilityLabel,
   testID,
 }) => {
   const theme = useTheme();
+  const { tone } = useBloomAppearance({ tone: toneProp }, {size: 'md', tone: 'accent'});
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(CHECKBOX_GLYPH_STYLE_ID, CHECKBOX_GLYPH_CSS);
   useInteractiveWebCss(CARD_STYLE_ID, CARD_CSS);
-  const paint = useMemo(() => resolveCheckboxPaint(theme, color), [theme, color]);
+  const paint = useMemo(() => resolveCheckboxPaint(theme, color, foreground), [theme, color, foreground]);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const highlighted = !disabled && (hovered || pressed);
@@ -133,7 +137,7 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
       </View>
       <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', paddingTop: 4, paddingBottom: 4 }}>
         <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={indeterminate}
           // The checkbox gets the card's state, so a disabled card's box is

package/src/checkbox/shared.tsx

@@ -8,7 +8,6 @@ import {
   ACCENT_TABLE,
   BUTTON_SHADOW,
   colorRamp,
-  mixColor,
   resolveButtonRamps,
 } from '../button/shared';
 import type { TypeScaleVariant } from '../typography';
@@ -36,6 +35,10 @@ export const CHECKBOX_SIZE_CONFIG: Record<
   small: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
   medium: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },
   large: { box: 20, gap: 8, label: 'headline-medium', description: 'body-regular' },
+  xs: { box: 12, gap: 4, label: 'caption-1-medium', description: 'caption-1-regular' },
+  sm: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
+  md: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },
+  lg: { box: 20, gap: 8, label: 'headline-medium', description: 'body-regular' },
 };
 
 /** `rounded-sm` — Tailwind v4's 4px. */
@@ -100,26 +103,25 @@ export interface CheckboxPaint {
  * A caller `color` replaces the accent ramp; the mark on it falls back to white
  * because Bloom cannot know the contrast of an arbitrary colour.
  */
-export function resolveCheckboxPaint(theme: Theme, color?: string): CheckboxPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+export function resolveCheckboxPaint(theme: Theme, color?: string, foreground?: string): CheckboxPaint {
+  const { accent } = resolveButtonRamps(theme);
   const ramp = color ? colorRamp(color, ACCENT_TABLE) : accent;
   const dark = theme.isDark;
   return {
-    surface: dark ? n[800] : theme.colors.card,
-    border: dark ? n[700] : n[300],
-    borderHover: dark ? n[500] : n[400],
+    surface: theme.colors.card,
+    border: theme.colors.border,
+    borderHover: theme.colors.border,
     shadow: BUTTON_SHADOW[dark ? 'dark' : 'light'],
     gradient: [ramp[500], ramp[600]],
     gradientHover: [ramp[400], ramp[500]],
     markedShadow: `inset 0 2px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px ${ramp[500]}`,
-    mark: color == null ? theme.colors.primaryForeground : '#FFFFFF',
+    mark: foreground ?? (color == null ? theme.colors.primaryForeground : '#FFFFFF'),
     ring: ramp[500],
     text: theme.colors.text,
-    description: n[500],
-    cardBorder: dark ? n[700] : n[200],
-    cardBackground: dark ? n[800] : theme.colors.card,
-    // Dark `color-mix(in srgb, neutral-700 60%, transparent)` over the page.
-    cardBackgroundHover: dark ? mixColor(theme.colors.background, n[700], 0.6) : n[100],
+    description: theme.colors.textSecondary,
+    cardBorder: theme.colors.borderLight,
+    cardBackground: theme.colors.card,
+    cardBackgroundHover: theme.colors.backgroundSecondary,
   };
 }
 
@@ -261,7 +263,7 @@ export interface CheckboxGlyphProps {
  *              highlight + inset 1px accent-500 edge, 2px rounded stroke.
  *              Hover: accent-400 → accent-500.
  *   disabled   the BOX at 50% opacity.
- *   focus      2px accent ring outside a 2px white offset, on the box.
+ *   focus      2px accent ring outside a 2px scoped page offset, on the box.
  */
 export function CheckboxGlyph({
   size,

package/src/checkbox/types.ts

@@ -1,6 +1,8 @@
+import type { BloomSize } from '../appearance';
+import type { BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type CheckboxSize = 'small' | 'medium' | 'large';
+export type CheckboxSize = BloomSize | 'small' | 'medium' | 'large';
 
 export interface CheckboxProps {
   /** Whether the checkbox is checked. */
@@ -18,7 +20,7 @@ export interface CheckboxProps {
   /** Whether the checkbox is in an indeterminate state. */
   indeterminate?: boolean;
   /** Semantic color when checked. Uses theme primary by default. */
-  color?: string;
+  tone?: BloomTone;
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
@@ -44,7 +46,7 @@ export interface CheckboxCardProps {
   /** Whether the checkbox is in an indeterminate state. */
   indeterminate?: boolean;
   /** Accent for the checked box. Uses the theme primary by default. */
-  color?: string;
+  tone?: BloomTone;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   testID?: string;

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -0,0 +1,108 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+
+import { ActionCardNote } from '../booking/ActionCard';
+import { Button } from '../button';
+import {
+  CHECKOUT_CONFIRM_BUSY_LABEL,
+  CHECKOUT_CONFIRM_LABEL,
+} from './constants';
+import { checkoutConfirmLabel } from './shared';
+import type { CheckoutConfirmProps } from './types';
+
+/**
+ * The press that places the order: the words, the amount it commits to, the
+ * terms under it, and the state where it must not fire twice.
+ *
+ *   button   `Button` primary large, full width, "Place order · €24.80"
+ *   terms    12 under it; the centred secondary line every Bloom action card
+ *            draws under its primary (`ActionCardNote`)
+ *   footer   16 under the terms
+ *
+ * ## Why the amount is ON the button
+ *
+ * The number a press commits to and the press are one decision. A total
+ * elsewhere on the screen and a button reading "Place order" are two, and the
+ * gap between them is where a reader confirms a figure they last saw before a
+ * tip picker changed it.
+ *
+ * ## Why there are TWO guards against a double order
+ *
+ * `busy` is the app's: while the order is in flight the button spins and every
+ * press is dropped. It is not enough on its own — a press calls `onConfirm`,
+ * the app sets its state, and `busy` only reaches this component on the NEXT
+ * commit; the second tap of a double-tap lands inside that window and places a
+ * second order. So the component also latches on its own press, synchronously,
+ * in a ref: state would not do, because two presses in one tick both read the
+ * same render's value.
+ *
+ * The latch clears on the first commit where `busy` is false again — so an app
+ * that never sets `busy` (a confirm that navigates away, a demo) gets exactly
+ * one press per tick and is never wedged, and an app that does keeps the button
+ * inert for the whole flight.
+ */
+function CheckoutConfirmComponent({
+  label = CHECKOUT_CONFIRM_LABEL,
+  amount,
+  terms,
+  onConfirm,
+  disabled = false,
+  busy = false,
+  busyLabel = CHECKOUT_CONFIRM_BUSY_LABEL,
+  footer,
+  style,
+  testID,
+}: CheckoutConfirmProps) {
+  const latch = useRef(false);
+  const [latched, setLatched] = useState(false);
+
+  const handlePress = useCallback(() => {
+    if (disabled || busy || latch.current) return;
+    latch.current = true;
+    setLatched(true);
+    onConfirm?.();
+  }, [disabled, busy, onConfirm]);
+
+  useEffect(() => {
+    if (!latched || busy) return;
+    latch.current = false;
+    setLatched(false);
+  }, [latched, busy]);
+
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+  const words = checkoutConfirmLabel(label, amount);
+
+  return (
+    <View testID={testID} style={style}>
+      <Button
+        variant="primary"
+        size="large"
+        fullWidth
+        onPress={handlePress}
+        disabled={disabled}
+        loading={busy}
+        // The name is the STATE while it is busy: a spinner draws no words, and
+        // a button still announcing "Place order · €24.80" while the order is
+        // being placed invites the press this component exists to refuse.
+        accessibilityLabel={busy ? busyLabel : words}
+        style={{ alignSelf: 'stretch' }}
+        testID={id('button')}
+      >
+        {words}
+      </Button>
+      {terms != null ? (
+        <ActionCardNote style={{ marginTop: 12 }} testID={id('terms')}>
+          {terms}
+        </ActionCardNote>
+      ) : null}
+      {footer != null ? (
+        <View style={{ marginTop: 16, alignItems: 'center' }} testID={id('footer')}>
+          {footer}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const CheckoutConfirm = memo(CheckoutConfirmComponent);
+CheckoutConfirm.displayName = 'CheckoutConfirm';

package/src/checkout-summary/CheckoutSummary.tsx

@@ -0,0 +1,209 @@
+import React, { memo, type ReactNode } from 'react';
+import { View } from 'react-native';
+
+import { AddressRow } from '../address';
+import { Divider } from '../divider';
+import { PriceSummary } from '../price-breakdown';
+import {
+  SurfaceLevelProvider,
+  surfaceFillVars,
+  useSurfaceLevel,
+  useSurfaceLevelValue,
+  type SurfaceLevel,
+} from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { CheckoutConfirm } from './CheckoutConfirm';
+import { CheckoutSummaryRow } from './CheckoutSummaryRow';
+import {
+  CHECKOUT_GROUP_RADIUS,
+  CHECKOUT_PRICE_PADDING,
+  CHECKOUT_ROW_ICON,
+  CHECKOUT_SECTION_GAP,
+} from './constants';
+import { checkoutRowName } from './shared';
+import type { CheckoutSummaryLine, CheckoutSummaryProps } from './types';
+
+/** The style that takes `Item`'s own chrome back off a row nested inside a row. */
+const NESTED_ROW_STYLE = {
+  // The LONGHANDS `Item` itself writes, on both axes. `Item`'s base uses
+  // `paddingVertical` for the vertical pair and `paddingLeft`/`paddingRight`
+  // for the horizontal one; overriding a shorthand with longhands (or the other
+  // way round) is honoured by Yoga and silently dropped by react-native-web,
+  // whose atomic sheet ranks `padding-block` above `padding-top` whatever the
+  // array's order — so the reset would have worked on native only.
+  paddingVertical: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  minHeight: 0,
+} as const;
+
+/**
+ * Review and confirm: where it goes, when, how it is paid, what it costs, and
+ * the note to the seller — each shown as its chosen value, each opening the
+ * thing that changes it.
+ *
+ *   group    one surface rung above whatever it was dropped on, radius 16, a
+ *            hairline, with 1px rules between rows
+ *   rows     `CheckoutSummaryRow`, in the order a buyer checks them
+ *   totals   `price-breakdown`'s `PriceSummary`, inside the group under a rule,
+ *            16 all round
+ *   confirm  `CheckoutConfirm`, 20 under the group and OUTSIDE it: the group is
+ *            a list of decisions and the button is the consequence
+ *
+ * ## What this family does not own
+ *
+ * The totals are `PriceSummary` and nothing else — no second breakdown, no
+ * arithmetic, and every amount is a string the app formatted. The address row
+ * is `address`'s own `AddressRow`. Tracking, afterwards, is `order-status`.
+ * The payment row is a SLOT: the payment-method row is its own family, and a
+ * placeholder drawn here would be a second spelling of it.
+ *
+ * ## Why the address row nests
+ *
+ * `AddressRow` is `Item` with an address's slots filled in — the tile, the
+ * badge beside the title, the name joined from the row's own text. Reaching for
+ * it here rather than redrawing two lines is the whole point; it goes INSIDE
+ * the summary row's value column with `leading={null}` (the row already drew
+ * the gutter, which is the case `AddressRow` documents) and with `Item`'s
+ * padding reset, so there is one row's chrome rather than two.
+ */
+function CheckoutSummaryComponent({
+  title = 'Review your order',
+  address,
+  delivery,
+  payment,
+  note,
+  extras,
+  price,
+  confirm,
+  children,
+  accessibilityLabel,
+  style,
+  testID,
+}: CheckoutSummaryProps) {
+  const theme = useTheme();
+  const level = useSurfaceLevelValue();
+  const own = useSurfaceLevel(1);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const line = (row: CheckoutSummaryLine, fallbackIcon: CheckoutSummaryLine['icon'], key: string) => (
+    <CheckoutSummaryRow
+      key={row.id ?? key}
+      label={row.label}
+      icon={row.icon ?? fallbackIcon}
+      value={row.value}
+      placeholder={row.placeholder}
+      detail={row.detail}
+      badge={row.badge}
+      onPress={row.onPress}
+      disabled={row.disabled}
+      accessibilityHint={row.accessibilityHint}
+      accessibilityLabel={row.accessibilityLabel}
+      testID={row.testID ?? id(key)}
+    />
+  );
+
+  const rows: ReactNode[] = [];
+  if (address) {
+    const label = address.label ?? 'Deliver to';
+    rows.push(
+      <CheckoutSummaryRow
+        key="address"
+        label={label}
+        icon={address.icon ?? CHECKOUT_ROW_ICON.address}
+        onPress={address.onPress}
+        disabled={address.disabled}
+        accessibilityHint={address.accessibilityHint}
+        accessibilityLabel={checkoutRowName(
+          label,
+          [address.title, address.subtitle].filter(Boolean).join(', '),
+        )}
+        testID={address.testID ?? id('address')}
+        content={
+          <AddressRow
+            title={address.title}
+            subtitle={address.subtitle}
+            kind={address.kind}
+            badge={address.badge}
+            leading={null}
+            style={NESTED_ROW_STYLE}
+            testID={id('address-row')}
+          />
+        }
+      />,
+    );
+  }
+  if (delivery) rows.push(line(delivery, CHECKOUT_ROW_ICON.delivery, 'delivery'));
+  if (payment != null) rows.push(<View key="payment">{payment}</View>);
+  if (note) rows.push(line(note, CHECKOUT_ROW_ICON.note, 'note'));
+  if (extras) {
+    extras.forEach((row, index) => rows.push(line(row, undefined, `extra-${index}`)));
+  }
+
+  // One rung above the ambient surface, and PUBLISHED, so the rows inside
+  // resolve their tiles off the group's real fill rather than off the page's.
+  const raised = Math.min(3, level + 1) as SurfaceLevel;
+
+  return (
+    <View testID={testID} style={style}>
+      {title != null ? (
+        <Text
+          variant="title-3-semibold"
+          role="heading"
+          aria-level={2}
+          testID={id('title')}
+          style={{ color: theme.colors.text, marginBottom: 12 }}
+        >
+          {title}
+        </Text>
+      ) : null}
+
+      <View
+        role="group"
+        accessibilityLabel={accessibilityLabel ?? title ?? 'Order summary'}
+        testID={id('group')}
+        style={[
+          {
+            borderRadius: CHECKOUT_GROUP_RADIUS,
+            borderWidth: 1,
+            borderColor: own.border,
+            backgroundColor: own.background,
+            overflow: 'hidden',
+          },
+          surfaceFillVars(own.background),
+        ]}
+      >
+        <SurfaceLevelProvider level={raised} fill={own.background}>
+          {rows.map((row, index) => (
+            <React.Fragment key={index}>
+              {index > 0 ? <Divider color={own.border} /> : null}
+              {row}
+            </React.Fragment>
+          ))}
+          {price ? (
+            <>
+              {rows.length > 0 ? <Divider color={own.border} /> : null}
+              <View style={{ padding: CHECKOUT_PRICE_PADDING }}>
+                <PriceSummary {...price} testID={price.testID ?? id('price')} />
+              </View>
+            </>
+          ) : null}
+        </SurfaceLevelProvider>
+      </View>
+
+      {children != null ? <View style={{ marginTop: CHECKOUT_SECTION_GAP }}>{children}</View> : null}
+
+      {confirm ? (
+        <CheckoutConfirm
+          {...confirm}
+          style={[{ marginTop: CHECKOUT_SECTION_GAP }, confirm.style]}
+          testID={confirm.testID ?? id('confirm')}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const CheckoutSummary = memo(CheckoutSummaryComponent);
+CheckoutSummary.displayName = 'CheckoutSummary';