@oxy.so/bloom 4.0.0 → 4.2.0

package/lib/module/directions/maneuvers.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { RiArrowGoBackLine } from "../icons/remix/RiArrowGoBackLine.js";
+import { RiArrowLeftDownLine } from "../icons/remix/RiArrowLeftDownLine.js";
+import { RiArrowRightDownLine } from "../icons/remix/RiArrowRightDownLine.js";
+import { RiArrowRightUpLine } from "../icons/remix/RiArrowRightUpLine.js";
+import { RiArrowUpLine } from "../icons/remix/RiArrowUpLine.js";
+import { RiCornerUpLeftLine } from "../icons/remix/RiCornerUpLeftLine.js";
+import { RiExchangeLine } from "../icons/remix/RiExchangeLine.js";
+import { RiFlagLine } from "../icons/remix/RiFlagLine.js";
+import { RiGitMergeLine } from "../icons/remix/RiGitMergeLine.js";
+import { RiLoginBoxLine } from "../icons/remix/RiLoginBoxLine.js";
+import { RiLogoutBoxRLine } from "../icons/remix/RiLogoutBoxRLine.js";
+import { RiLoopRightLine } from "../icons/remix/RiLoopRightLine.js";
+import { RiMapPin2Line } from "../icons/remix/RiMapPin2Line.js";
+import { RiWalkLine } from "../icons/remix/RiWalkLine.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The glyph each maneuver draws.
+ *
+ * TWO OF THEM ARE THE MIRROR OF ANOTHER, and that is the honest way to draw
+ * them. A maneuver set is symmetric — a right turn IS a left turn seen from the
+ * other side — and Bloom's icon set carries one side of each pair
+ * (`RiCornerUpLeftLine`, `RiArrowRightUpLine`). Mirroring the existing glyph
+ * keeps the stroke weight, the arrowhead and the corner radius identical to its
+ * partner; picking a different glyph that happens to point the right way does
+ * not, and the two then read as coming from two sets.
+ *
+ * `mirror()` wraps the icon in a `scaleX: -1` view. That is a transform of the
+ * WHOLE glyph about its own centre — it moves nothing, needs no offset, and the
+ * wrapped component keeps `BloomIconComponent`'s three props, so it is handed
+ * to `AddressRow`'s `icon` exactly like any other.
+ *
+ * Each mirrored component is built ONCE at module scope. Built inside a render
+ * it would be a new component type every frame, and React would unmount and
+ * remount the glyph on each one.
+ */
+function mirror(Icon) {
+  const Mirrored = ({
+    width,
+    height,
+    fill
+  }) => /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        scaleX: -1
+      }]
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      width: width,
+      height: height,
+      fill: fill
+    })
+  });
+  Mirrored.displayName = `Mirrored(${Icon.displayName ?? Icon.name ?? 'Icon'})`;
+  return Mirrored;
+}
+const RiCornerUpRight = mirror(RiCornerUpLeftLine);
+const RiArrowLeftUp = mirror(RiArrowRightUpLine);
+export const DIRECTIONS_MANEUVER_ICON = {
+  depart: RiMapPin2Line,
+  straight: RiArrowUpLine,
+  'slight-left': RiArrowLeftUp,
+  left: RiCornerUpLeftLine,
+  'sharp-left': RiArrowLeftDownLine,
+  'slight-right': RiArrowRightUpLine,
+  right: RiCornerUpRight,
+  'sharp-right': RiArrowRightDownLine,
+  uturn: RiArrowGoBackLine,
+  roundabout: RiLoopRightLine,
+  merge: RiGitMergeLine,
+  arrive: RiFlagLine,
+  board: RiLoginBoxLine,
+  alight: RiLogoutBoxRLine,
+  transfer: RiExchangeLine,
+  walk: RiWalkLine
+};
+//# sourceMappingURL=maneuvers.js.map

package/lib/module/directions/maneuvers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","RiArrowGoBackLine","RiArrowLeftDownLine","RiArrowRightDownLine","RiArrowRightUpLine","RiArrowUpLine","RiCornerUpLeftLine","RiExchangeLine","RiFlagLine","RiGitMergeLine","RiLoginBoxLine","RiLogoutBoxRLine","RiLoopRightLine","RiMapPin2Line","RiWalkLine","jsx","_jsx","mirror","Icon","Mirrored","width","height","fill","style","transform","scaleX","children","displayName","name","RiCornerUpRight","RiArrowLeftUp","DIRECTIONS_MANEUVER_ICON","depart","straight","left","right","uturn","roundabout","merge","arrive","board","alight","transfer","walk"],"sourceRoot":"../../../src","sources":["directions/maneuvers.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,iBAAiB,QAAQ,qCAAkC;AACpE,SAASC,mBAAmB,QAAQ,uCAAoC;AACxE,SAASC,oBAAoB,QAAQ,wCAAqC;AAC1E,SAASC,kBAAkB,QAAQ,sCAAmC;AACtE,SAASC,aAAa,QAAQ,iCAA8B;AAC5D,SAASC,kBAAkB,QAAQ,sCAAmC;AACtE,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,cAAc,QAAQ,kCAA+B;AAC9D,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,eAAe,QAAQ,mCAAgC;AAChE,SAASC,aAAa,QAAQ,iCAA8B;AAC5D,SAASC,UAAU,QAAQ,8BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,MAAMA,CAACC,IAAwB,EAAsB;EAC5D,MAAMC,QAA4B,GAAGA,CAAC;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAK,CAAC,kBAC3DN,IAAA,CAAChB,IAAI;IAACuB,KAAK,EAAE;MAAEC,SAAS,EAAE,CAAC;QAAEC,MAAM,EAAE,CAAC;MAAE,CAAC;IAAE,CAAE;IAAAC,QAAA,eAC3CV,IAAA,CAACE,IAAI;MAACE,KAAK,EAAEA,KAAM;MAACC,MAAM,EAAEA,MAAO;MAACC,IAAI,EAAEA;IAAK,CAAE;EAAC,CAC9C,CACP;EACDH,QAAQ,CAACQ,WAAW,GAAG,YAAYT,IAAI,CAACS,WAAW,IAAIT,IAAI,CAACU,IAAI,IAAI,MAAM,GAAG;EAC7E,OAAOT,QAAQ;AACjB;AAEA,MAAMU,eAAe,GAAGZ,MAAM,CAACX,kBAAkB,CAAC;AAClD,MAAMwB,aAAa,GAAGb,MAAM,CAACb,kBAAkB,CAAC;AAEhD,OAAO,MAAM2B,wBAAkF,GAAG;EAChGC,MAAM,EAAEnB,aAAa;EACrBoB,QAAQ,EAAE5B,aAAa;EACvB,aAAa,EAAEyB,aAAa;EAC5BI,IAAI,EAAE5B,kBAAkB;EACxB,YAAY,EAAEJ,mBAAmB;EACjC,cAAc,EAAEE,kBAAkB;EAClC+B,KAAK,EAAEN,eAAe;EACtB,aAAa,EAAE1B,oBAAoB;EACnCiC,KAAK,EAAEnC,iBAAiB;EACxBoC,UAAU,EAAEzB,eAAe;EAC3B0B,KAAK,EAAE7B,cAAc;EACrB8B,MAAM,EAAE/B,UAAU;EAClBgC,KAAK,EAAE9B,cAAc;EACrB+B,MAAM,EAAE9B,gBAAgB;EACxB+B,QAAQ,EAAEnC,cAAc;EACxBoC,IAAI,EAAE7B;AACR,CAAC","ignoreList":[]}

package/lib/module/directions/shared.js

@@ -0,0 +1,97 @@
+"use strict";
+
+/**
+ * The pure parts of `directions`: the label a transit badge can be read with,
+ * and the sentences the two components announce.
+ */
+import { readableOn } from "../styles/color-contrast.js";
+import { hairlineOn, surfaceTextOn } from "../styles/surface-levels.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { DIRECTIONS_MANEUVER_LABELS, DIRECTIONS_MODE_LABELS, DIRECTIONS_TRAFFIC_LABELS } from "./constants.js";
+/**
+ * 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.
+ */
+export function resolveTransitLineColors(theme, color) {
+  return {
+    background: color,
+    foreground: readableOn(color, [theme.colors.background, theme.colors.text])
+  };
+}
+
+/** "Line L4, towards Pla del Bosc" — a badge showing two characters says nothing aloud. */
+export function describeTransitLine(line) {
+  if (line.accessibilityLabel) return line.accessibilityLabel;
+  return [`Line ${line.name}`, line.headsign].filter(Boolean).join(', ');
+}
+
+/** The traffic word as drawn. */
+export function trafficLabelFor(traffic, override, labels) {
+  if (traffic === undefined) return null;
+  return override ?? labels?.traffic?.[traffic] ?? DIRECTIONS_TRAFFIC_LABELS[traffic];
+}
+
+/** The mode word as drawn. */
+export function modeLabelFor(mode, labels) {
+  return labels?.mode?.[mode] ?? 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.
+ */
+export 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.
+ */
+export function describeStep(step, options = {}) {
+  if (step.accessibilityLabel) {
+    return options.current && options.currentWord ? `${options.currentWord}, ${step.accessibilityLabel}` : step.accessibilityLabel;
+  }
+  const maneuver = 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.
+ */
+export function resolveDirectionsPaint(theme, surface) {
+  const accent = resolveAccentColors(theme.colors, 'primary', 'subtle');
+  return {
+    ...surfaceTextOn(theme, surface),
+    border: hairlineOn(theme, surface),
+    currentFill: accent.background,
+    currentText: accent.foreground
+  };
+}
+//# sourceMappingURL=shared.js.map

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

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

package/lib/module/directions/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

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

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

package/lib/module/earnings/EarningsBreakdown.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { PriceSummary } from "../price-breakdown/index.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { EARNINGS_LABELS } from "./constants.js";
+import { resolveEarningsPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
+  const labels = useMemo(() => ({
+    ...EARNINGS_LABELS,
+    ...labelOverrides
+  }), [labelOverrides]);
+  const heading = title === undefined ? labels.breakdown : title;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: 8
+    }, style],
+    testID: testID,
+    children: [heading ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-semibold",
+      role: "heading",
+      "aria-level": 3,
+      style: {
+        color: paint.text
+      },
+      testID: testID ? `${testID}-title` : undefined,
+      children: heading
+    }) : null, /*#__PURE__*/_jsx(PriceSummary, {
+      lines: lines,
+      total: total,
+      collapsible: collapsible,
+      defaultExpanded: defaultExpanded,
+      accessibilityLabel: accessibilityLabel ?? heading ?? labels.breakdown,
+      testID: testID ? `${testID}-lines` : undefined
+    })]
+  });
+}
+export const EarningsBreakdown = /*#__PURE__*/memo(EarningsBreakdownComponent);
+EarningsBreakdown.displayName = 'EarningsBreakdown';
+//# sourceMappingURL=EarningsBreakdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","PriceSummary","useSurfaceFill","useTheme","Text","EARNINGS_LABELS","resolveEarningsPaint","jsx","_jsx","jsxs","_jsxs","EarningsBreakdownComponent","lines","total","title","collapsible","defaultExpanded","labels","labelOverrides","accessibilityLabel","style","testID","theme","surface","paint","heading","undefined","breakdown","gap","children","variant","role","color","text","EarningsBreakdown","displayName"],"sourceRoot":"../../../src","sources":["earnings/EarningsBreakdown.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,YAAY,QAAQ,6BAAoB;AACjD,SAASC,cAAc,QAAQ,6BAA0B;AACzD,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,IAAI,QAAQ,wBAAe;AACpC,SAASC,eAAe,QAAQ,gBAAa;AAC7C,SAASC,oBAAoB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,0BAA0BA,CAAC;EAClCC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,WAAW,GAAG,KAAK;EACnBC,eAAe,GAAG,KAAK;EACvBC,MAAM,EAAEC,cAAc;EACtBC,kBAAkB;EAClBC,KAAK;EACLC;AACsB,CAAC,EAAE;EACzB,MAAMC,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EACxB,MAAMoB,OAAO,GAAGrB,cAAc,CAAC,CAAC;EAChC,MAAMsB,KAAK,GAAGzB,OAAO,CAAC,MAAMO,oBAAoB,CAACgB,KAAK,EAAEC,OAAO,CAAC,EAAE,CAACD,KAAK,EAAEC,OAAO,CAAC,CAAC;EACnF,MAAMN,MAAM,GAAGlB,OAAO,CAAC,OAAO;IAAE,GAAGM,eAAe;IAAE,GAAGa;EAAe,CAAC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAC3F,MAAMO,OAAO,GAAGX,KAAK,KAAKY,SAAS,GAAGT,MAAM,CAACU,SAAS,GAAGb,KAAK;EAE9D,oBACEJ,KAAA,CAACV,IAAI;IAACoB,KAAK,EAAE,CAAC;MAAEQ,GAAG,EAAE;IAAE,CAAC,EAAER,KAAK,CAAE;IAACC,MAAM,EAAEA,MAAO;IAAAQ,QAAA,GAC9CJ,OAAO,gBACNjB,IAAA,CAACJ,IAAI;MACH0B,OAAO,EAAC,eAAe;MACvBC,IAAI,EAAC,SAAS;MACd,cAAY,CAAE;MACdX,KAAK,EAAE;QAAEY,KAAK,EAAER,KAAK,CAACS;MAAK,CAAE;MAC7BZ,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGK,SAAU;MAAAG,QAAA,EAE9CJ;IAAO,CACJ,CAAC,GACL,IAAI,eACRjB,IAAA,CAACP,YAAY;MACXW,KAAK,EAAEA,KAAM;MACbC,KAAK,EAAEA,KAAM;MACbE,WAAW,EAAEA,WAAY;MACzBC,eAAe,EAAEA,eAAgB;MACjCG,kBAAkB,EAAEA,kBAAkB,IAAIM,OAAO,IAAIR,MAAM,CAACU,SAAU;MACtEN,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQ,GAAGK;IAAU,CAChD,CAAC;EAAA,CACE,CAAC;AAEX;AAEA,OAAO,MAAMQ,iBAAiB,gBAAGpC,IAAI,CAACa,0BAA0B,CAAC;AACjEuB,iBAAiB,CAACC,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/lib/module/earnings/EarningsPayoutRow.js

@@ -0,0 +1,144 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { Badge } from "../badge/index.js";
+import { RiBankCardLine } from "../icons/remix/RiBankCardLine.js";
+import { Item } from "../item/index.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { EARNINGS_GEOMETRY, EARNINGS_LABELS, EARNINGS_PAYOUT_TONE } from "./constants.js";
+import { joinEarningsName, resolveEarningsPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveEarningsPaint(theme, surface), [theme, surface]);
+  const labels = useMemo(() => ({
+    ...EARNINGS_LABELS,
+    ...labelOverrides,
+    payoutState: {
+      ...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 = resolveAccentColors(theme.colors, EARNINGS_PAYOUT_TONE[state], 'subtle');
+  const id = part => testID ? `${testID}-${part}` : undefined;
+  const name = accessibilityLabel ?? 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.
+    _jsxs(View, {
+      role: "group",
+      accessibilityLabel: name,
+      style: style,
+      testID: testID,
+      children: [/*#__PURE__*/_jsx(Item, {
+        onPress: onPress,
+        accessibilityLabel: onPress ? name : undefined,
+        leading: /*#__PURE__*/_jsx(View, {
+          "aria-hidden": true,
+          style: {
+            width: EARNINGS_GEOMETRY.glyph,
+            height: EARNINGS_GEOMETRY.glyph,
+            borderRadius: EARNINGS_GEOMETRY.glyphRadius,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: paint.tile
+          },
+          testID: id('glyph'),
+          children: /*#__PURE__*/_jsx(RiBankCardLine, {
+            width: 20,
+            height: 20,
+            fill: paint.tileText.textSecondary
+          })
+        }),
+        title: heading,
+        subtitle: joinEarningsName([payout.date, payout.destination], ' · '),
+        trailing: /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignItems: 'flex-end',
+            gap: 4
+          },
+          testID: id('amount'),
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: "headline-semibold",
+            numberOfLines: 1,
+            style: [{
+              color: paint.text
+            }, TABULAR],
+            testID: id('amount-text'),
+            children: payout.amount
+          }), /*#__PURE__*/_jsx(Badge, {
+            content: stateWord,
+            variant: "subtle",
+            color: EARNINGS_PAYOUT_TONE[state],
+            size: "label-small",
+            testID: id('state')
+          })]
+        }),
+        testID: id('row')
+      }), payout.note && needsAction ? /*#__PURE__*/_jsx(Text, {
+        variant: "body-2-regular",
+        style: {
+          color: noteTone.foreground,
+          paddingLeft: 12,
+          paddingRight: 12
+        },
+        testID: id('note'),
+        children: payout.note
+      }) : null, action ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          paddingLeft: 12,
+          paddingTop: 8
+        },
+        testID: id('action'),
+        children: action
+      }) : null]
+    })
+  );
+}
+export const EarningsPayoutRow = /*#__PURE__*/memo(EarningsPayoutRowComponent);
+EarningsPayoutRow.displayName = 'EarningsPayoutRow';
+//# sourceMappingURL=EarningsPayoutRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","Badge","RiBankCardLine","Item","useSurfaceFill","resolveAccentColors","useTheme","Text","EARNINGS_GEOMETRY","EARNINGS_LABELS","EARNINGS_PAYOUT_TONE","joinEarningsName","resolveEarningsPaint","jsx","_jsx","jsxs","_jsxs","TABULAR","fontVariant","EarningsPayoutRowComponent","payout","title","onPress","action","labels","labelOverrides","accessibilityLabel","style","testID","theme","surface","paint","payoutState","state","stateWord","heading","needsAction","noteTone","colors","id","part","undefined","name","amount","date","destination","role","children","leading","width","glyph","height","borderRadius","glyphRadius","alignItems","justifyContent","backgroundColor","tile","fill","tileText","textSecondary","subtitle","trailing","gap","variant","numberOfLines","color","text","content","size","note","foreground","paddingLeft","paddingRight","flexDirection","paddingTop","EarningsPayoutRow","displayName"],"sourceRoot":"../../../src","sources":["earnings/EarningsPayoutRow.tsx"],"mappings":"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","ignoreList":[]}