@oxy.so/bloom 4.0.0 → 4.1.0

package/lib/commonjs/directions/shared.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.describeRoute = describeRoute;
+exports.describeStep = describeStep;
+exports.describeTransitLine = describeTransitLine;
+exports.modeLabelFor = modeLabelFor;
+exports.resolveDirectionsPaint = resolveDirectionsPaint;
+exports.resolveTransitLineColors = resolveTransitLineColors;
+exports.trafficLabelFor = trafficLabelFor;
+var _colorContrast = require("../styles/color-contrast.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _accentColors = require("../theme/accent-colors.js");
+var _constants = require("./constants.js");
+/**
+ * The pure parts of `directions`: the label a transit badge can be read with,
+ * and the sentences the two components announce.
+ */
+
+/**
+ * The badge's two colours for a line that carries its own.
+ *
+ * The label is not derived from the fill — it is CHOSEN from the theme's own
+ * two reading colours by measuring contrast against the fill, which is what
+ * `readableOn` does. That distinction matters: a derived label (lighten the
+ * fill until it clears AA) invents a colour that is in no palette, and on a
+ * saturated operator red it lands on pink.
+ *
+ * Both candidates are always offered in both modes, because the fill is the
+ * operator's and has no idea which mode it landed in: a yellow line needs the
+ * dark label on a dark page just as much as on a light one.
+ */
+function resolveTransitLineColors(theme, color) {
+  return {
+    background: color,
+    foreground: (0, _colorContrast.readableOn)(color, [theme.colors.background, theme.colors.text])
+  };
+}
+
+/** "Line L4, towards Pla del Bosc" — a badge showing two characters says nothing aloud. */
+function describeTransitLine(line) {
+  if (line.accessibilityLabel) return line.accessibilityLabel;
+  return [`Line ${line.name}`, line.headsign].filter(Boolean).join(', ');
+}
+
+/** The traffic word as drawn. */
+function trafficLabelFor(traffic, override, labels) {
+  if (traffic === undefined) return null;
+  return override ?? labels?.traffic?.[traffic] ?? _constants.DIRECTIONS_TRAFFIC_LABELS[traffic];
+}
+
+/** The mode word as drawn. */
+function modeLabelFor(mode, labels) {
+  return labels?.mode?.[mode] ?? _constants.DIRECTIONS_MODE_LABELS[mode];
+}
+
+/**
+ * One route in a sentence — "24 min, 8.2 km, Arrives 18:42, Via Ronda del
+ * Nord, Light traffic, Line L4".
+ *
+ * The row draws a duration, a `via` line, a chip and up to three badges, and a
+ * reader moving by row hears one utterance per route or seven fragments per
+ * route. This is the one.
+ */
+function describeRoute(route, labels) {
+  const parts = [route.duration];
+  if (route.distance) parts.push(route.distance);
+  if (route.arrival) parts.push(route.arrival);
+  if (route.via) parts.push(route.via);
+  const traffic = trafficLabelFor(route.traffic, route.trafficLabel, labels);
+  if (traffic) parts.push(traffic);
+  if (route.note) parts.push(route.note);
+  for (const line of route.lines ?? []) parts.push(describeTransitLine(line));
+  return parts.join(', ');
+}
+
+/**
+ * One step in a sentence, with the MANEUVER WORD first.
+ *
+ * The glyph is the only thing on the row that says which way to turn, and a
+ * glyph says nothing aloud — the same hole `RouteStops` fills by naming the
+ * marker's state. `currentWord` is added first when this is the step the
+ * traveller is on, because a wash does not announce either.
+ */
+function describeStep(step, options = {}) {
+  if (step.accessibilityLabel) {
+    return options.current && options.currentWord ? `${options.currentWord}, ${step.accessibilityLabel}` : step.accessibilityLabel;
+  }
+  const maneuver = _constants.DIRECTIONS_MANEUVER_LABELS[step.maneuver ?? 'straight'];
+  return [options.current ? options.currentWord : undefined, maneuver, step.instruction, step.detail, step.line ? describeTransitLine(step.line) : undefined, step.distance].filter(part => typeof part === 'string' && part !== '').join(', ');
+}
+/**
+ * Everything `directions` paints, read off the surface it was dropped on — a
+ * sheet, a card or the page. The current step's wash is the accent's own
+ * `subtle` pair, so it is legible by construction and moves with the preset.
+ */
+function resolveDirectionsPaint(theme, surface) {
+  const accent = (0, _accentColors.resolveAccentColors)(theme.colors, 'primary', 'subtle');
+  return {
+    ...(0, _surfaceLevels.surfaceTextOn)(theme, surface),
+    border: (0, _surfaceLevels.hairlineOn)(theme, surface),
+    currentFill: accent.background,
+    currentText: accent.foreground
+  };
+}
+//# sourceMappingURL=shared.js.map

package/lib/commonjs/directions/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_colorContrast","require","_surfaceLevels","_accentColors","_constants","resolveTransitLineColors","theme","color","background","foreground","readableOn","colors","text","describeTransitLine","line","accessibilityLabel","name","headsign","filter","Boolean","join","trafficLabelFor","traffic","override","labels","undefined","DIRECTIONS_TRAFFIC_LABELS","modeLabelFor","mode","DIRECTIONS_MODE_LABELS","describeRoute","route","parts","duration","distance","push","arrival","via","trafficLabel","note","lines","describeStep","step","options","current","currentWord","maneuver","DIRECTIONS_MANEUVER_LABELS","instruction","detail","part","resolveDirectionsPaint","surface","accent","resolveAccentColors","surfaceTextOn","border","hairlineOn","currentFill","currentText"],"sourceRoot":"../../../src","sources":["directions/shared.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/directions/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/directions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["directions/types.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/earnings/EarningsBreakdown.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EarningsBreakdown = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../price-breakdown/index.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index2 = require("../typography/index.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * What the period's money came from, by kind.
+ *
+ * It is `price-breakdown`'s `PriceSummary` under a heading, and that is the
+ * whole component. A courier's earnings are an ITEMISATION — jobs, tips,
+ * bonuses, adjustments, each a label and an amount the app formatted — which is
+ * the same object as a fare's itemisation seen from the other side. Writing a
+ * second list of label-and-amount rows here would give Bloom two answers to one
+ * question, and only one of them would know about `estimated`, `pending`, the
+ * discount tone and the info popover.
+ *
+ *   heading  `body-semibold`, 8 over the list; omitted with `title={null}`
+ *   lines    `PriceSummary`, which owns the rows, the rule and the total
+ *
+ * **NO TOTAL BY DEFAULT.** Inside `EarningsSummary` the figure above already IS
+ * the total, and a second one under the list is the same number twice. Pass
+ * `total` when the breakdown stands on its own.
+ */
+function EarningsBreakdownComponent({
+  lines,
+  total,
+  title,
+  collapsible = false,
+  defaultExpanded = false,
+  labels: labelOverrides,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveEarningsPaint)(theme, surface), [theme, surface]);
+  const labels = (0, _react.useMemo)(() => ({
+    ..._constants.EARNINGS_LABELS,
+    ...labelOverrides
+  }), [labelOverrides]);
+  const heading = title === undefined ? labels.breakdown : title;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      gap: 8
+    }, style],
+    testID: testID,
+    children: [heading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+      variant: "body-semibold",
+      role: "heading",
+      "aria-level": 3,
+      style: {
+        color: paint.text
+      },
+      testID: testID ? `${testID}-title` : undefined,
+      children: heading
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PriceSummary, {
+      lines: lines,
+      total: total,
+      collapsible: collapsible,
+      defaultExpanded: defaultExpanded,
+      accessibilityLabel: accessibilityLabel ?? heading ?? labels.breakdown,
+      testID: testID ? `${testID}-lines` : undefined
+    })]
+  });
+}
+const EarningsBreakdown = exports.EarningsBreakdown = /*#__PURE__*/(0, _react.memo)(EarningsBreakdownComponent);
+EarningsBreakdown.displayName = 'EarningsBreakdown';
+//# sourceMappingURL=EarningsBreakdown.js.map

package/lib/commonjs/earnings/EarningsBreakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_surfaceLevels","_useTheme","_index2","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EarningsBreakdownComponent","lines","total","title","collapsible","defaultExpanded","labels","labelOverrides","accessibilityLabel","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolveEarningsPaint","EARNINGS_LABELS","heading","undefined","breakdown","jsxs","View","gap","children","jsx","Text","variant","role","color","text","PriceSummary","EarningsBreakdown","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["earnings/EarningsBreakdown.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/earnings/EarningsPayoutRow.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EarningsPayoutRow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../badge/index.js");
+var _RiBankCardLine = require("../icons/remix/RiBankCardLine.js");
+var _index2 = require("../item/index.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _accentColors = require("../theme/accent-colors.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index3 = require("../typography/index.js");
+var _constants = require("./constants.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const TABULAR = {
+  fontVariant: ['tabular-nums']
+};
+
+/**
+ * The money that is on its way, and what is holding it up.
+ *
+ * It is an `Item`, not a card: a payout is a ROW in a panel, and `item` already
+ * owns the press target, the density, the leading and trailing slots and the
+ * disabled wash. What this component decides is what goes in the three slots.
+ *
+ *   leading   a 40 glyph tile at the panel's next fill up
+ *   content   the title over the date and the destination
+ *   trailing  the amount at `headline-semibold` in tabular figures, with the
+ *             state `Badge` under it
+ *   note      under the row, and ONLY for `held` and `failed` — the two states
+ *             that ask the reader to do something. A note on a scheduled payout
+ *             is a sentence nobody has to read.
+ *
+ * **THE STATE IS SAID IN WORDS, NOT ONLY IN COLOUR.** The badge carries the
+ * word; the tone is a second channel on top of it, so the row survives a reader
+ * who cannot tell the warning tint from the neutral one.
+ */
+function EarningsPayoutRowComponent({
+  payout,
+  title,
+  onPress,
+  action,
+  labels: labelOverrides,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveEarningsPaint)(theme, surface), [theme, surface]);
+  const labels = (0, _react.useMemo)(() => ({
+    ..._constants.EARNINGS_LABELS,
+    ...labelOverrides,
+    payoutState: {
+      ..._constants.EARNINGS_LABELS.payoutState,
+      ...labelOverrides?.payoutState
+    }
+  }), [labelOverrides]);
+  const state = payout.state ?? 'scheduled';
+  const stateWord = labels.payoutState[state];
+  const heading = title ?? labels.payout;
+  const needsAction = state === 'held' || state === 'failed';
+  const noteTone = (0, _accentColors.resolveAccentColors)(theme.colors, _constants.EARNINGS_PAYOUT_TONE[state], 'subtle');
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const name = accessibilityLabel ?? (0, _shared.joinEarningsName)([heading, payout.amount, payout.date, stateWord, payout.destination]);
+  return (
+    /*#__PURE__*/
+    // A `group`, not a bare column: `Item`'s non-pressable branch is
+    // `role="none"`, on which an `aria-label` is not exposed at all — so the
+    // composed name has to hang off something ARIA will read it from.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      role: "group",
+      accessibilityLabel: name,
+      style: style,
+      testID: testID,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Item, {
+        onPress: onPress,
+        accessibilityLabel: onPress ? name : undefined,
+        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          "aria-hidden": true,
+          style: {
+            width: _constants.EARNINGS_GEOMETRY.glyph,
+            height: _constants.EARNINGS_GEOMETRY.glyph,
+            borderRadius: _constants.EARNINGS_GEOMETRY.glyphRadius,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: paint.tile
+          },
+          testID: id('glyph'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RiBankCardLine.RiBankCardLine, {
+            width: 20,
+            height: 20,
+            fill: paint.tileText.textSecondary
+          })
+        }),
+        title: heading,
+        subtitle: (0, _shared.joinEarningsName)([payout.date, payout.destination], ' · '),
+        trailing: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            alignItems: 'flex-end',
+            gap: 4
+          },
+          testID: id('amount'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+            variant: "headline-semibold",
+            numberOfLines: 1,
+            style: [{
+              color: paint.text
+            }, TABULAR],
+            testID: id('amount-text'),
+            children: payout.amount
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Badge, {
+            content: stateWord,
+            variant: "subtle",
+            color: _constants.EARNINGS_PAYOUT_TONE[state],
+            size: "label-small",
+            testID: id('state')
+          })]
+        }),
+        testID: id('row')
+      }), payout.note && needsAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Text, {
+        variant: "body-2-regular",
+        style: {
+          color: noteTone.foreground,
+          paddingLeft: 12,
+          paddingRight: 12
+        },
+        testID: id('note'),
+        children: payout.note
+      }) : null, action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          paddingLeft: 12,
+          paddingTop: 8
+        },
+        testID: id('action'),
+        children: action
+      }) : null]
+    })
+  );
+}
+const EarningsPayoutRow = exports.EarningsPayoutRow = /*#__PURE__*/(0, _react.memo)(EarningsPayoutRowComponent);
+EarningsPayoutRow.displayName = 'EarningsPayoutRow';
+//# sourceMappingURL=EarningsPayoutRow.js.map

package/lib/commonjs/earnings/EarningsPayoutRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_RiBankCardLine","_index2","_surfaceLevels","_accentColors","_useTheme","_index3","_constants","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TABULAR","fontVariant","EarningsPayoutRowComponent","payout","title","onPress","action","labels","labelOverrides","accessibilityLabel","style","testID","theme","useTheme","surface","useSurfaceFill","paint","useMemo","resolveEarningsPaint","EARNINGS_LABELS","payoutState","state","stateWord","heading","needsAction","noteTone","resolveAccentColors","colors","EARNINGS_PAYOUT_TONE","id","part","undefined","name","joinEarningsName","amount","date","destination","jsxs","View","role","children","jsx","Item","leading","width","EARNINGS_GEOMETRY","glyph","height","borderRadius","glyphRadius","alignItems","justifyContent","backgroundColor","tile","RiBankCardLine","fill","tileText","textSecondary","subtitle","trailing","gap","Text","variant","numberOfLines","color","text","Badge","content","size","note","foreground","paddingLeft","paddingRight","flexDirection","paddingTop","EarningsPayoutRow","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["earnings/EarningsPayoutRow.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/earnings/EarningsSummary.js

@@ -0,0 +1,277 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EarningsSummary = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../chart-cards/index.js");
+var _useContainerWidth = require("../hooks/use-container-width.js");
+var _useControllableState = require("../hooks/use-controllable-state.js");
+var _surfaceLevels = require("../styles/surface-levels.js");
+var _useTheme = require("../theme/use-theme.js");
+var _index2 = require("../typography/index.js");
+var _constants = require("./constants.js");
+var _EarningsBreakdown = require("./EarningsBreakdown.js");
+var _EarningsPayoutRow = require("./EarningsPayoutRow.js");
+var _shared = require("./shared.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * What the work paid, for one period.
+ *
+ *   chart      `chart-cards`' `EarningsChartCard`, which already OWNS the
+ *              figure, the delta chip, the period switch and the bars
+ *   tiles      the period's readings, in `ai-profile-card`'s tile: the value
+ *              over its label. One row from 640, two columns below
+ *   breakdown  `EarningsBreakdown` — `price-breakdown`'s itemisation, by kind
+ *   payout     `EarningsPayoutRow` — an `item` row with the amount, the date
+ *              and the state
+ *
+ * ## Why this is built AROUND the chart card rather than beside it
+ *
+ * `EarningsChartCard` is already four of the five things a courier's earnings
+ * screen needs: the period's figure, the change on the period before, the
+ * Day / Week / Month switch and the bars of the last weeks. Drawing a second
+ * figure and a second switch above it would have put two of everything on one
+ * panel. So this family draws NONE of that — it hands the chart card the
+ * period's data and adds the three things the chart card has no opinion about:
+ * where the money came from, what the period's other readings were, and when
+ * it reaches the bank.
+ *
+ * ## The money is never computed, and the headline is the proof
+ *
+ * `EarningsChartCard` formats its headline from a NUMBER, which is exactly what
+ * this family must not do. So the headline is CHOSEN, not produced: this
+ * component owns the chart's active index, and `format` returns the period's
+ * own `total` at rest and the hovered bar's own `amount` over a bar — both
+ * strings the app formatted. A bar's `value` is geometry and is never drawn.
+ *
+ * Two consequences, both deliberate:
+ *
+ *  - **The headline does not roll.** `ChartHeadline` counts a number up over
+ *    320ms; a pre-formatted amount has nothing to count. The 220ms fade still
+ *    plays, so the change is still visible.
+ *  - **The Y axis prints a number.** A tick is a position on a scale the chart
+ *    chose, not a sum the app made, so no string exists for it to have
+ *    formatted. The default prints the rounded number with no currency;
+ *    `formatAxisValue` is where an app puts its own.
+ *
+ * **A jest test cannot see the hover.** The plot surface that carries the
+ * pointer handlers only exists after `onLayout`, which jsdom never fires —
+ * gutting `setActiveIndex` to a no-op leaves `Earnings.test.tsx` green. The
+ * choice itself (`earningsHeadline`) is pure and pinned there; that the panel
+ * owns the active bar is pinned in `scripts/verify-earnings-headline.mjs`.
+ *
+ * ## The period is controlled here, and the chart is remounted to follow it
+ *
+ * `useChartRange` inside `chart-cards` is uncontrolled — it has a `defaultRange`
+ * and no `range` — so a period changed from OUTSIDE cannot reach the chart's own
+ * segmented control. The chart is therefore keyed on the period id: an external
+ * change remounts it with the new default rather than letting the switch and the
+ * panel disagree. The cost is that the bars grow in again instead of morphing.
+ */
+
+/** The axis's last resort: a number, rounded, with nobody's currency on it. */
+const roundedAxisValue = value => String(Math.round(value));
+function EarningsSummaryComponent({
+  periods,
+  period: periodProp,
+  defaultPeriod,
+  onPeriodChange,
+  payout,
+  onPressPayout,
+  payoutAction,
+  formatAxisValue = roundedAxisValue,
+  chartHeight,
+  breakdown,
+  stats,
+  labels: labelOverrides,
+  accessibilityLabel = 'Earnings',
+  style,
+  testID
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const surface = (0, _surfaceLevels.useSurfaceFill)();
+  const paint = (0, _react.useMemo)(() => (0, _shared.resolveEarningsPaint)(theme, surface), [theme, surface]);
+  const labels = (0, _react.useMemo)(() => ({
+    ..._constants.EARNINGS_LABELS,
+    ...labelOverrides,
+    payoutState: {
+      ..._constants.EARNINGS_LABELS.payoutState,
+      ...labelOverrides?.payoutState
+    }
+  }), [labelOverrides]);
+  const [periodId, setPeriodId] = (0, _useControllableState.useControllableState)({
+    value: periodProp,
+    defaultValue: defaultPeriod ?? periods[0]?.id ?? '',
+    onChange: onPeriodChange
+  });
+  const current = (0, _shared.resolveEarningsPeriod)(periods, periodId);
+
+  // The chart's active bar is OWNED here: the headline has to be able to say
+  // which amount it is showing, and only this component knows the strings.
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(null);
+  const changePeriod = (0, _react.useCallback)(id => {
+    setActiveIndex(null);
+    setPeriodId(id);
+  }, [setPeriodId]);
+  const {
+    width,
+    onLayout
+  } = (0, _useContainerWidth.useContainerWidth)();
+  const wide = width === null || width >= _constants.EARNINGS_GEOMETRY.narrowWidth;
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const bars = current?.bars;
+  const total = current?.total ?? '';
+  const chartData = (0, _react.useMemo)(() => (bars ?? []).map(bar => ({
+    label: bar.label,
+    value: bar.value
+  })), [bars]);
+  const ranges = (0, _react.useMemo)(() => periods.map(entry => ({
+    id: entry.id,
+    label: entry.label
+  })), [periods]);
+
+  // Both are CHOSEN from strings the app formatted, never produced from a
+  // number: `format` ignores the value the count-up hands it on purpose.
+  const headlineText = (0, _shared.earningsHeadline)(total, bars, activeIndex);
+  const headlineLabel = (0, _shared.earningsHeadlineLabel)(labels.earned, bars, activeIndex);
+  const format = (0, _react.useCallback)(() => headlineText, [headlineText]);
+  const periodStats = current?.stats ?? [];
+  const showStats = (stats ?? true) && periodStats.length > 0;
+  const periodLines = current?.lines ?? [];
+  const showBreakdown = (breakdown ?? true) && periodLines.length > 0;
+  const shownPayout = current?.payout ?? payout;
+  const tileRows = [];
+  if (wide) {
+    if (periodStats.length > 0) tileRows.push(periodStats.map((_unused, index) => index));
+  } else {
+    for (let i = 0; i < periodStats.length; i += 2) tileRows.push(i + 1 < periodStats.length ? [i, i + 1] : [i]);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_surfaceLevels.SurfaceLevelProvider, {
+    level: 0,
+    fill: paint.surface,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      onLayout: onLayout,
+      role: "group",
+      accessibilityLabel: accessibilityLabel,
+      style: [{
+        gap: _constants.EARNINGS_GEOMETRY.gap
+      }, style],
+      testID: testID,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EarningsChartCard, {
+        title: headlineLabel,
+        data: chartData
+        // The figure is a string, so the number behind it only has to be
+        // STABLE — the fade replays on the period and the bar, not on it.
+        ,
+        headline: 0,
+        delta: current?.deltaRatio,
+        ranges: ranges.length > 1 ? ranges : undefined,
+        defaultRange: periodId,
+        onRangeChange: changePeriod,
+        rangesLabel: labels.period,
+        format: format,
+        formatAxisValue: formatAxisValue,
+        activeIndex: activeIndex,
+        onActiveIndexChange: setActiveIndex,
+        accessibilityLabel: labels.chart(current?.label ?? ''),
+        style: chartHeight === undefined ? undefined : {
+          height: chartHeight
+        },
+        testID: id('chart')
+      }, periodId), current?.caption ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+        variant: "body-2-regular",
+        style: {
+          color: paint.textSecondary
+        },
+        testID: id('caption'),
+        children: current.caption
+      }) : null, showStats ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          gap: _constants.EARNINGS_GEOMETRY.tileGap
+        },
+        testID: id('stats'),
+        children: tileRows.map(row => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'stretch',
+            gap: _constants.EARNINGS_GEOMETRY.tileGap
+          },
+          children: [row.map(index => {
+            const stat = periodStats[index];
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: [styles.tile, {
+                backgroundColor: paint.tile
+              }],
+              testID: id(`stat-${index}`),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                variant: "body-medium",
+                numberOfLines: 1,
+                style: {
+                  width: '100%',
+                  color: paint.tileText.text
+                },
+                children: stat.value
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                variant: "body-2-medium",
+                numberOfLines: 1,
+                style: {
+                  width: '100%',
+                  color: paint.tileText.textSecondary
+                },
+                children: stat.label
+              })]
+            }, `${index}-${stat.label}`);
+          }), !wide && row.length === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.tileSpacer
+          }) : null]
+        }, `stat-row-${row[0]}`))
+      }) : null, showBreakdown ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EarningsBreakdown.EarningsBreakdown, {
+        lines: periodLines,
+        title: labels.breakdown,
+        labels: labelOverrides,
+        testID: id('breakdown')
+      }) : null, shownPayout ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EarningsPayoutRow.EarningsPayoutRow, {
+        payout: shownPayout,
+        title: labels.payout,
+        onPress: onPressPayout,
+        action: payoutAction,
+        labels: labelOverrides,
+        testID: id('payout')
+      }) : null, !showStats && !showBreakdown && shownPayout === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+        variant: "body-regular",
+        style: {
+          color: paint.textSecondary
+        },
+        testID: id('empty'),
+        children: labels.empty
+      }) : null]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  tile: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    alignItems: 'flex-start',
+    borderRadius: _constants.EARNINGS_GEOMETRY.tileRadius,
+    paddingTop: _constants.EARNINGS_GEOMETRY.tilePadding,
+    paddingBottom: _constants.EARNINGS_GEOMETRY.tilePadding,
+    paddingLeft: _constants.EARNINGS_GEOMETRY.tilePadding,
+    paddingRight: _constants.EARNINGS_GEOMETRY.tilePadding
+  },
+  tileSpacer: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    minWidth: 0
+  }
+});
+const EarningsSummary = exports.EarningsSummary = /*#__PURE__*/(0, _react.memo)(EarningsSummaryComponent);
+EarningsSummary.displayName = 'EarningsSummary';
+//# sourceMappingURL=EarningsSummary.js.map