@oxy.so/bloom 4.0.0 → 4.2.0

package/lib/module/payment-method/PaymentMethodList.js

@@ -0,0 +1,286 @@
+"use strict";
+
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { useFieldMembership } from "../field/membership.js";
+import { RiAddLine } from "../icons/remix/RiAddLine.js";
+import { RiBankCardLine } from "../icons/remix/RiBankCardLine.js";
+import { Item } from "../item/index.js";
+import * as Skeleton from "../skeleton/index.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { PaymentMethodRow } from "./PaymentMethodRow.js";
+import { PAYMENT_METHOD_GEOMETRY, PAYMENT_METHOD_LIST_GAP } from "./constants.js";
+import { resolvePaymentMethodPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Written as a value rather than inline so the row's role stays one decision:
+ * `PaymentMethodRow` translates it through `Item`, which is where the
+ * role-to-ARIA-state mapping lives.
+ */
+const PICKER_ROW_ROLE = 'radio';
+
+/** The name a list falls back to when neither a caller nor a `Field` gives one. */
+const LAST_RESORT_NAME = 'Payment methods';
+
+/**
+ * The saved methods, with the default marked, an add row, an empty state and a
+ * loading state.
+ *
+ * THE VARIANT IS THE ANNOUNCED TREE, not a style. `list` is a set of methods a
+ * reader is managing: a `list` of `listitem`s, each wrapping a button. `picker`
+ * is a set they are choosing ONE of: a `radiogroup` of `radio`s carrying
+ * `aria-checked`. Both roles exist on both platforms, which is why the picker
+ * is a radio group rather than the listbox ARIA would suggest — React Native
+ * has no `listbox`, and a role that reaches one platform is the silent half of
+ * an accessibility bug.
+ *
+ * ## The picker is a `Field` MEMBER, not a hand-rolled radiogroup
+ *
+ * It resolves `useFieldMembership()` the way `RadioGroup` does, so a `Field`
+ * around it names the group, describes it with its error, marks it invalid and
+ * disables every row — and a row inside a disabled field cannot re-enable
+ * itself, because `disabled` combines with `||` rather than deferring.
+ *
+ * That is the difference between this and the three families `docs/composition.mdx`
+ * records as an open gap: writing `role="radiogroup"` is the easy half, and a
+ * group nothing can name or disable is what is left when it is the only half
+ * done.
+ *
+ * `accessibilityLabel` is the caller's and wins; the field's label is next;
+ * `"Payment methods"` is the last resort, and it is a LAST resort rather than a
+ * default because a default here would outrank the one string on screen the
+ * user can actually read.
+ *
+ * ## The add row is not one of the choices
+ *
+ * "Add a payment method" is an action, not a method, so it is drawn OUTSIDE the
+ * `radiogroup`. A `button` among the radios would be announced as part of the
+ * choice and counted in "3 of 4".
+ *
+ *   rows     4 apart, at the row's own geometry
+ *   loading  placeholder rows at the plate's own size, announced busy so a
+ *            reader is told to wait rather than told nothing
+ *   empty    a 32 glyph, a title and a line, centred with 32 of air — and the
+ *            add row is still drawn under it, because an empty list is exactly
+ *            when a reader needs it
+ */
+function PaymentMethodListComponent({
+  methods,
+  selectedId,
+  onSelect,
+  variant = 'list',
+  density = 'comfortable',
+  disabled = false,
+  onAdd,
+  addLabel = 'Add a payment method',
+  addIcon: AddIcon = RiAddLine,
+  loading = false,
+  loadingRows = 3,
+  empty,
+  emptyTitle = 'No saved payment methods',
+  emptyDescription,
+  emptyIcon: EmptyIcon = RiBankCardLine,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePaymentMethodPaint(theme, surface), [theme, surface]);
+  const g = PAYMENT_METHOD_GEOMETRY[density];
+  const picker = variant === 'picker';
+  // The group is one control made of several, so a `Field` around it names the
+  // GROUP and disables every row. `accessibilityLabel` is the caller's own name
+  // and outranks the field's; `disabled` is a CONSTRAINT and combines.
+  const field = useFieldMembership({
+    accessibilityLabel,
+    disabled
+  });
+  const isDisabled = field.disabled;
+  const name = field.accessibilityLabel ?? LAST_RESORT_NAME;
+
+  // A disabled row keeps its press HANDLER and is handed `disabled` instead:
+  // `Item` then renders a real disabled control, which still announces itself
+  // as a radio and as unavailable. Withholding the handler would have made the
+  // row a plain `View` — present, silent, and gone from the choice.
+  const press = useCallback(entry => onSelect ? () => onSelect(entry.id) : undefined, [onSelect]);
+  const addRow = onAdd ? /*#__PURE__*/_jsx(Item, {
+    title: addLabel,
+    leading: /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-add-plate` : undefined,
+      style: {
+        width: g.plateWidth,
+        height: g.plateHeight,
+        borderRadius: g.plateRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: paint.plate
+      },
+      children: /*#__PURE__*/_jsx(AddIcon, {
+        width: g.glyph,
+        height: g.glyph,
+        fill: paint.textSecondary
+      })
+    }),
+    onPress: isDisabled ? undefined : onAdd,
+    disabled: isDisabled,
+    density: density,
+    accessibilityLabel: addLabel,
+    testID: testID ? `${testID}-add` : undefined
+  }) : null;
+  if (loading) {
+    return /*#__PURE__*/_jsx(View, {
+      "aria-busy": true,
+      accessibilityLabel: name,
+      testID: testID,
+      style: [{
+        gap: PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: Array.from({
+        length: loadingRows
+      }, (_unused, index) => /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-placeholder-${index}` : undefined,
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 10
+        },
+        children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+          width: g.plateWidth,
+          height: g.plateHeight,
+          borderRadius: g.plateRadius
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            gap: 4
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton.Text, {
+            style: {
+              width: '50%',
+              lineHeight: 16
+            }
+          }), /*#__PURE__*/_jsx(Skeleton.Text, {
+            style: {
+              width: '32%',
+              lineHeight: 14
+            }
+          })]
+        })]
+      }, index))
+    });
+  }
+  if (methods.length === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      testID: testID,
+      style: [{
+        gap: PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: [empty ?? /*#__PURE__*/_jsxs(View, {
+        testID: testID ? `${testID}-empty` : undefined,
+        style: {
+          alignItems: 'center',
+          gap: 8,
+          paddingVertical: 32,
+          paddingHorizontal: 16
+        },
+        children: [/*#__PURE__*/_jsx(EmptyIcon, {
+          width: 32,
+          height: 32,
+          fill: paint.textTertiary
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "body-medium",
+          style: {
+            color: paint.text,
+            textAlign: 'center'
+          },
+          children: emptyTitle
+        }), emptyDescription ? /*#__PURE__*/_jsx(Text, {
+          variant: "body-2-regular",
+          style: {
+            color: paint.textSecondary,
+            textAlign: 'center'
+          },
+          children: emptyDescription
+        }) : null]
+      }), addRow]
+    });
+  }
+  const rows = methods.map((entry, index) => {
+    const row = /*#__PURE__*/_jsx(PaymentMethodRow, {
+      scheme: entry.scheme,
+      masked: entry.masked,
+      expiry: entry.expiry,
+      kind: entry.kind,
+      icon: entry.icon,
+      image: entry.image,
+      leading: entry.leading,
+      isDefault: entry.isDefault,
+      defaultLabel: entry.defaultLabel,
+      state: entry.state,
+      stateMessage: entry.stateMessage,
+      action: entry.action,
+      disabled: isDisabled || entry.disabled === true,
+      density: density,
+      accessibilityLabel: entry.accessibilityLabel,
+      style: entry.style,
+      onPress: press(entry),
+      ...(picker ? {
+        role: PICKER_ROW_ROLE,
+        selectable: true,
+        selected: selectedId === entry.id
+      } : {}),
+      testID: entry.testID ?? (testID ? `${testID}-row-${index}` : undefined)
+    }, entry.id);
+    if (picker) return row;
+    return /*#__PURE__*/_jsx(View, {
+      role: "listitem",
+      children: row
+    }, entry.id);
+  });
+  if (picker) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [{
+        gap: PAYMENT_METHOD_LIST_GAP
+      }, style],
+      children: [/*#__PURE__*/_jsx(View, {
+        role: "radiogroup",
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: name,
+        "aria-label": name,
+        "aria-describedby": field.describedBy,
+        "aria-invalid": field.invalid || undefined
+        // A `View` has no `disabled` prop for react-native-web to derive
+        // `aria-disabled` from, and it never reads `accessibilityState`.
+        ,
+        "aria-disabled": isDisabled || undefined,
+        style: {
+          gap: PAYMENT_METHOD_LIST_GAP
+        },
+        testID: testID,
+        children: rows
+      }), addRow]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: PAYMENT_METHOD_LIST_GAP
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      role: "list",
+      accessibilityLabel: name,
+      style: {
+        gap: PAYMENT_METHOD_LIST_GAP
+      },
+      testID: testID,
+      children: rows
+    }), addRow]
+  });
+}
+export const PaymentMethodList = /*#__PURE__*/memo(PaymentMethodListComponent);
+PaymentMethodList.displayName = 'PaymentMethodList';
+//# sourceMappingURL=PaymentMethodList.js.map

package/lib/module/payment-method/PaymentMethodList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useCallback","useMemo","View","useFieldMembership","RiAddLine","RiBankCardLine","Item","Skeleton","useSurfaceFill","useTheme","Text","PaymentMethodRow","PAYMENT_METHOD_GEOMETRY","PAYMENT_METHOD_LIST_GAP","resolvePaymentMethodPaint","jsx","_jsx","jsxs","_jsxs","PICKER_ROW_ROLE","LAST_RESORT_NAME","PaymentMethodListComponent","methods","selectedId","onSelect","variant","density","disabled","onAdd","addLabel","addIcon","AddIcon","loading","loadingRows","empty","emptyTitle","emptyDescription","emptyIcon","EmptyIcon","accessibilityLabel","style","testID","theme","surface","paint","g","picker","field","isDisabled","name","press","entry","id","undefined","addRow","title","leading","width","plateWidth","height","plateHeight","borderRadius","plateRadius","alignItems","justifyContent","backgroundColor","plate","children","glyph","fill","textSecondary","onPress","gap","Array","from","length","_unused","index","flexDirection","paddingHorizontal","paddingVertical","Box","flex","minWidth","lineHeight","textTertiary","color","text","textAlign","rows","map","row","scheme","masked","expiry","kind","icon","image","isDefault","defaultLabel","state","stateMessage","action","role","selectable","selected","accessibilityRole","describedBy","invalid","PaymentMethodList","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/payment-method/PaymentMethodMark.js

@@ -0,0 +1,91 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+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 { PAYMENT_METHOD_GEOMETRY, PAYMENT_METHOD_KIND_ICON, PAYMENT_METHOD_MARK_GAP, PAYMENT_METHOD_STATE_TONE } from "./constants.js";
+import { resolvePaymentMethodPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The brand mark — and Bloom's is deliberately NOT a brand.
+ *
+ * **This never draws a scheme's logo, and it ships no list of schemes.** What it
+ * draws is a plate the shape of a card, a neutral glyph on it, and — when the
+ * caller gives one — the scheme's NAME as text beside it. Bloom does not know
+ * what schemes exist, is not licensed to reproduce their artwork, and a library
+ * that shipped twelve logos would be a library that quietly took on the
+ * trademark question for every app using it.
+ *
+ * An app that HAS the rights passes `image`: it is drawn inside the plate, at
+ * the plate's geometry, and everything else stays the same. That is the whole
+ * escape hatch, and it belongs to the app because the rights do.
+ *
+ *   plate    40 x 28, radius 6 (compact 32 x 22, radius 5), one surface step
+ *            off whatever is behind it — wider than tall is what reads as a
+ *            card rather than an app tile
+ *   glyph    18 in the secondary text rung (compact 14)
+ *   name     body-2-medium, 8 after the plate
+ *   state    `expired`/`declined` paint the plate in the state's tint, so a
+ *            row that cannot be used says so before its words are read
+ */
+function PaymentMethodMarkComponent({
+  scheme,
+  kind = 'card',
+  icon,
+  image,
+  state = 'ok',
+  density = 'comfortable',
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePaymentMethodPaint(theme, surface), [theme, surface]);
+  const g = PAYMENT_METHOD_GEOMETRY[density];
+  const Glyph = icon ?? PAYMENT_METHOD_KIND_ICON[kind];
+  const tone = PAYMENT_METHOD_STATE_TONE[state];
+  // `resolveAccentColors`, never an appended alpha: the tint and the glyph that
+  // sits on it are a PAIR the colour policy generates together (`docs/badge.mdx`).
+  const accent = tone ? resolveAccentColors(theme.colors, tone, 'subtle') : undefined;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: PAYMENT_METHOD_MARK_GAP
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-plate` : undefined,
+      style: {
+        width: g.plateWidth,
+        height: g.plateHeight,
+        borderRadius: g.plateRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor: accent ? accent.background : paint.plate
+      },
+      children: image !== undefined ? image : /*#__PURE__*/_jsx(Glyph, {
+        width: g.glyph,
+        height: g.glyph,
+        fill: accent ? accent.foreground : paint.textSecondary
+      })
+    }), scheme ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-scheme` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      children: scheme
+    }) : null]
+  });
+}
+export const PaymentMethodMark = /*#__PURE__*/memo(PaymentMethodMarkComponent);
+PaymentMethodMark.displayName = 'PaymentMethodMark';
+//# sourceMappingURL=PaymentMethodMark.js.map

package/lib/module/payment-method/PaymentMethodMark.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","useSurfaceFill","resolveAccentColors","useTheme","Text","PAYMENT_METHOD_GEOMETRY","PAYMENT_METHOD_KIND_ICON","PAYMENT_METHOD_MARK_GAP","PAYMENT_METHOD_STATE_TONE","resolvePaymentMethodPaint","jsx","_jsx","jsxs","_jsxs","PaymentMethodMarkComponent","scheme","kind","icon","image","state","density","style","testID","theme","surface","paint","g","Glyph","tone","accent","colors","undefined","flexDirection","alignItems","gap","children","width","plateWidth","height","plateHeight","borderRadius","plateRadius","justifyContent","overflow","backgroundColor","background","plate","glyph","fill","foreground","textSecondary","variant","numberOfLines","flexShrink","minWidth","color","text","PaymentMethodMark","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodMark.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/payment-method/PaymentMethodRow.js

@@ -0,0 +1,202 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { Badge } from "../badge/index.js";
+import { Item } from "../item/index.js";
+import { RadioIndicator } from "../radio-indicator/index.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { space } from "../styles/tokens.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { PaymentMethodMark } from "./PaymentMethodMark.js";
+import { PAYMENT_METHOD_GEOMETRY, PAYMENT_METHOD_STATE_TONE } from "./constants.js";
+import { composePaymentMethodName, paymentMethodStateMessage, resolvePaymentMethodPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A way to pay, as a row: the mark, the scheme, the masked identifier, when it
+ * runs out, whether it is the default one, and either a trailing action or a
+ * selection control.
+ *
+ * It is `Item` with a payment method's slots filled in, for the same reason
+ * `AddressRow` is: the row, the press target, the selected wash, the density
+ * rungs, the disabled opacity and the ARIA role translation are `Item`'s job,
+ * and this family owns no second copy of any of them. What it adds is the card
+ * plate, the scheme/masked pairing on the title line, the default badge, the
+ * state line and the radio dot.
+ *
+ *   mark     `PaymentMethodMark`, plate only — the row draws the name itself,
+ *            so the title line can hold the masked tail and the badge too
+ *   title    scheme in `Item`'s own title rung; the masked identifier beside it
+ *            in body-2 TABULAR figures, so four rows of digits line up
+ *   line 2   the expiry, secondary
+ *   line 3   the state's words in the state's own colour, drawn only when the
+ *            method cannot be used
+ *   trailing the radio dot (`selectable`) or the action
+ *
+ * NOTHING HERE IS SENSITIVE. `masked` is a string the app already masked; this
+ * row never unmasks, parses, stores, logs or transmits anything, and there is no
+ * prop that takes a full number.
+ */
+function PaymentMethodRowComponent({
+  scheme,
+  masked,
+  expiry,
+  kind = 'card',
+  icon,
+  image,
+  leading,
+  isDefault = false,
+  defaultLabel = 'Default',
+  state = 'ok',
+  stateMessage,
+  selectable = false,
+  selected,
+  action,
+  onPress,
+  disabled = false,
+  density = 'comfortable',
+  role,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolvePaymentMethodPaint(theme, surface), [theme, surface]);
+  const g = PAYMENT_METHOD_GEOMETRY[density];
+  const tone = PAYMENT_METHOD_STATE_TONE[state];
+  const stateWords = paymentMethodStateMessage(state, stateMessage);
+  // The state's words are read as TEXT on the row's own surface, so they take
+  // the tone's `accent` member (`outlined` foreground) rather than the fill.
+  const stateColor = tone ? resolveAccentColors(theme.colors, tone, 'outlined').foreground : undefined;
+  const media = leading !== undefined ? leading : /*#__PURE__*/_jsx(PaymentMethodMark, {
+    kind: kind,
+    icon: icon,
+    image: image,
+    state: state,
+    density: density,
+    testID: testID ? `${testID}-mark` : undefined
+  });
+  const titleNode = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      minWidth: 0
+    },
+    children: [scheme ? /*#__PURE__*/_jsx(Text, {
+      variant: "headline-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-scheme` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.text
+      },
+      children: scheme
+    }) : null, masked ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-masked` : undefined,
+      style: {
+        flexShrink: 1,
+        minWidth: 0,
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: masked
+    }) : null, isDefault ?
+    /*#__PURE__*/
+    // The badge does not SHRINK: it is two or three words that mean
+    // "this is the one", and a truncated "D…" says nothing. The masked
+    // identifier beside it gives way instead, which is the part a reader
+    // can still recognise from its first characters.
+    _jsx(View, {
+      style: {
+        flexShrink: 0
+      },
+      children: /*#__PURE__*/_jsx(Badge, {
+        content: defaultLabel,
+        variant: "subtle",
+        color: "primary",
+        size: "label-small",
+        testID: testID ? `${testID}-default` : undefined
+      })
+    }) : null]
+  });
+  const subtitleNode = expiry || stateWords ? /*#__PURE__*/_jsxs(View, {
+    style: {
+      gap: 2,
+      minWidth: 0
+    },
+    children: [expiry ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-regular",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-expiry` : undefined,
+      style: {
+        color: paint.textSecondary,
+        fontVariant: ['tabular-nums']
+      },
+      children: expiry
+    }) : null, stateWords ? /*#__PURE__*/_jsx(Text, {
+      variant: "body-2-medium",
+      numberOfLines: 2,
+      testID: testID ? `${testID}-state` : undefined,
+      style: {
+        color: stateColor ?? paint.textSecondary
+      },
+      children: stateWords
+    }) : null]
+  }) : null;
+
+  // A PRESSABLE row is a real `<button>` on web, so a control cannot live
+  // inside it: a button in a button is invalid HTML and, unlike native, a web
+  // click on the inner control ALSO fires the row. The selection DOT is not a
+  // control — it draws no press target of its own — so it stays inside; an
+  // `action` does not. The mechanism is measured in `address/AddressRow.tsx`.
+  const splitAction = action != null && onPress != null;
+  const trailing = selectable ? /*#__PURE__*/_jsx(RadioIndicator, {
+    selected: selected === true,
+    size: g.dot,
+    testID: testID ? `${testID}-dot` : undefined
+  }) : splitAction ? null : action ?? null;
+  const row = /*#__PURE__*/_jsx(Item, {
+    title: titleNode,
+    subtitle: subtitleNode,
+    leading: media,
+    trailing: trailing,
+    onPress: onPress,
+    disabled: disabled,
+    selected: selected,
+    density: density,
+    role: role,
+    accessibilityLabel: accessibilityLabel ?? composePaymentMethodName([scheme, masked, expiry, isDefault && defaultLabel, stateWords])
+    // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand,
+    // and on web a shorthand here would outrank it while native honoured it.
+    ,
+    style: splitAction ? {
+      paddingRight: space.sm
+    } : style,
+    testID: testID
+  });
+  if (!splitAction) return row;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingRight: space.lg
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: row
+    }), action]
+  });
+}
+export const PaymentMethodRow = /*#__PURE__*/memo(PaymentMethodRowComponent);
+PaymentMethodRow.displayName = 'PaymentMethodRow';
+//# sourceMappingURL=PaymentMethodRow.js.map

package/lib/module/payment-method/PaymentMethodRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","Badge","Item","RadioIndicator","useSurfaceFill","space","resolveAccentColors","useTheme","Text","PaymentMethodMark","PAYMENT_METHOD_GEOMETRY","PAYMENT_METHOD_STATE_TONE","composePaymentMethodName","paymentMethodStateMessage","resolvePaymentMethodPaint","jsx","_jsx","jsxs","_jsxs","PaymentMethodRowComponent","scheme","masked","expiry","kind","icon","image","leading","isDefault","defaultLabel","state","stateMessage","selectable","selected","action","onPress","disabled","density","role","accessibilityLabel","style","testID","theme","surface","paint","g","tone","stateWords","stateColor","colors","foreground","undefined","media","titleNode","flexDirection","alignItems","gap","minWidth","children","variant","numberOfLines","flexShrink","color","text","textSecondary","fontVariant","content","size","subtitleNode","splitAction","trailing","dot","row","title","subtitle","paddingRight","sm","lg","flex","PaymentMethodRow","displayName"],"sourceRoot":"../../../src","sources":["payment-method/PaymentMethodRow.tsx"],"mappings":"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","ignoreList":[]}