@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-TDWWVJA4.js

@@ -0,0 +1,630 @@
+import { usePayLabels } from './chunk-QNZII37O.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Easing, Pressable, Animated } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { brandTone, BRANDS, brandLabel, mask, methodText } from '@btndprojects/loam-pay';
+import { icons } from '@btndprojects/loam-icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/payment-method/payment-method-labels.ts
+var DEFAULT_LABELS = {
+  paymentMethod: "Payment method",
+  orPayWithCard: "or pay with card",
+  expires: (expiry) => `Expires ${expiry}`,
+  defaultBadge: "default",
+  useDifferentCard: "Use a different card",
+  manageCards: "Manage cards",
+  checkingWallet: "Checking for a wallet on this device",
+  payWith: (name) => `Pay with ${name}`,
+  expressPay: "Express pay",
+  statusSuccess: "verified",
+  statusWarning: "needs attention",
+  statusError: "failed"
+};
+
+// src/payment-method/payment-style.ts
+function payToneColors(theme, tone) {
+  switch (tone) {
+    case "accent":
+      return { bg: theme.color.accentSoft, edge: theme.edge.accent, ink: theme.color.accentOnSoft };
+    case "good":
+      return { bg: theme.color.goodSoft, edge: theme.edge.good, ink: theme.color.goodOnSoft };
+    case "warn":
+      return { bg: theme.color.warnSoft, edge: theme.edge.warn, ink: theme.color.warnOnSoft };
+    case "danger":
+      return { bg: theme.color.dangerSoft, edge: theme.edge.danger, ink: theme.color.dangerOnSoft };
+    case "info":
+      return { bg: theme.color.infoSoft, edge: theme.edge.info, ink: theme.color.infoOnSoft };
+    case "neutral":
+    default:
+      return { bg: theme.color.surface2, edge: theme.edge.neutral, ink: theme.color.text2 };
+  }
+}
+function payBoxStyle(theme, o) {
+  const out = {};
+  if (o.variant === "outline") out.backgroundColor = "transparent";
+  if (o.variant === "elevated" || o.elevation === "raised") Object.assign(out, theme.shadow.sm);
+  if (o.padding === "sm") out.padding = theme.space.s2;
+  if (o.padding === "lg") out.padding = theme.space.s4;
+  if (o.tone) {
+    const c = payToneColors(theme, o.tone);
+    out.backgroundColor = c.bg;
+    out.borderColor = c.edge;
+  }
+  if (o.error) out.borderColor = theme.color.danger;
+  return out;
+}
+var IOS_ROW = 60;
+var ANDROID_ROW = 72;
+var PickerContext = React.createContext(null);
+function methodIcon(name) {
+  if (Object.prototype.hasOwnProperty.call(icons, name)) return name;
+  return "card";
+}
+function CardBrandMark({
+  brand,
+  label,
+  size = "sm",
+  tone: toneProp,
+  shape = "rounded",
+  status,
+  loading = false,
+  error = false,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const pay = usePayLabels(labelsProp);
+  const copy = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const tone = error ? "danger" : toneProp ?? brandTone(brand);
+  const { styles, theme } = useStyles(sheet, { plateTone: tone, plateSize: size });
+  const def = BRANDS.find((b) => b.id === brand);
+  const text = label ?? (def ? brandLabel(def, pay) : pay.genericBrand);
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { testID, "aria-busy": true, accessibilityState: { busy: true }, style, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        radius: shape === "pill" ? "full" : "xs",
+        width: size === "md" ? theme.space[56] : theme.space[48],
+        height: size === "md" ? theme.space[24] : theme.space[20]
+      }
+    ) });
+  }
+  const reason = typeof error === "string" && error ? error : void 0;
+  const statusSpoken = status ? `${text}, ${status === "success" ? copy.statusSuccess : status === "warning" ? copy.statusWarning : copy.statusError}` : void 0;
+  const spoken = reason ? `${statusSpoken ?? text}, ${reason}` : statusSpoken;
+  const statusIcon = status === "success" ? "check-circle" : status === "warning" ? "alert-triangle" : "alert-circle";
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      accessibilityLabel: spoken,
+      "aria-invalid": error ? true : void 0,
+      style: [
+        styles.plate,
+        shape === "pill" ? { borderRadius: theme.radius.full } : null,
+        status ? { flexDirection: "row", alignItems: "center", gap: theme.space[2] } : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.plateText, children: text }),
+        status ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: statusIcon, size: theme.fontSize[12], color: theme.color.text2 }) }) : null
+      ]
+    }
+  );
+}
+function OrDivider({
+  label,
+  orientation = "horizontal",
+  align = "center",
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet);
+  const vertical = orientation === "vertical";
+  const rule = /* @__PURE__ */ jsx(
+    View,
+    {
+      "aria-hidden": true,
+      testID: "or-divider-rule",
+      style: [
+        styles.dividerRule,
+        vertical ? { height: void 0, width: theme.borderWidth.thin, minHeight: theme.space[16] } : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      testID,
+      style: [
+        styles.divider,
+        vertical ? { flexDirection: "column", alignSelf: "stretch" } : null,
+        style
+      ],
+      children: [
+        align === "start" ? null : rule,
+        /* @__PURE__ */ jsx(Text, { style: styles.dividerLabel, children: label ?? labels.orPayWithCard }),
+        align === "end" ? null : rule
+      ]
+    }
+  );
+}
+function PaymentMethodRow({
+  id,
+  label,
+  sub,
+  icon,
+  stored,
+  badge,
+  settle,
+  fee,
+  selected,
+  showCost = false,
+  disabled = false,
+  reason,
+  motion = "full",
+  onSelect,
+  platform: platformProp,
+  variant,
+  elevation,
+  padding,
+  tone,
+  loading = false,
+  size,
+  density = "comfortable",
+  error = false,
+  hint,
+  trailing,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme("payment-method");
+  const { styles } = useStyles(sheet, { selected, disabled });
+  const picker = React.useContext(PickerContext);
+  const android = isAndroidIdiom(theme, picker?.platform ?? platformProp);
+  const nodeRef = React.useRef(null);
+  const entryRef = React.useRef({ id, disabled, focus: () => {
+  } });
+  entryRef.current.id = id;
+  entryRef.current.disabled = disabled;
+  entryRef.current.focus = () => nodeRef.current?.focus?.();
+  const register = picker?.register;
+  React.useEffect(() => register?.(entryRef.current), [register]);
+  const animate = useResolvedMotion(motion, "payment-method") !== "none";
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(
+    disabled || !android ? theme.color.border : selected ? theme.focus.ringColor : theme.color.border,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const backgroundColor = useColorTransition(
+    disabled ? theme.color.surface3 : selected && android ? theme.state.selected : theme.color.surface,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const indicatorColor = useColorTransition(
+    selected ? theme.focus.ringColor : picker?.invalid && !disabled ? theme.color.danger : theme.color.borderStrong,
+    theme.duration.fast,
+    easing,
+    animate
+  );
+  const labelType = {
+    ...resolveTextRole(theme, "bodyLarge", android),
+    fontWeight: theme.fontWeight.regular
+  };
+  const subType = resolveTextRole(theme, android ? "bodyMedium" : "titleSmall", android);
+  const boxStyle = payBoxStyle(theme, {
+    variant,
+    elevation,
+    padding,
+    tone,
+    error: Boolean(error) && !selected
+  });
+  const sizeStyle = size === "sm" ? { minHeight: theme.ctl.lg } : size === "lg" ? { minHeight: (android ? ANDROID_ROW : IOS_ROW) + theme.space[8] } : null;
+  const compactStyle = density === "compact" ? { paddingVertical: theme.space.s1 } : null;
+  const message = typeof error === "string" && error ? error : hint;
+  const isTabStop = picker ? picker.activeId === id && !disabled : !disabled;
+  const webProps = {
+    tabIndex: isTabStop ? 0 : -1,
+    onKeyDown: (event) => {
+      if (disabled) return;
+      picker?.onItemKeyDown(id, event);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { testID, "aria-busy": true, accessibilityState: { busy: true }, children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rect",
+        radius: "md",
+        height: size === "sm" ? theme.ctl.lg : android ? ANDROID_ROW : IOS_ROW
+      }
+    ) });
+  }
+  const pressable = /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ref: nodeRef,
+      testID,
+      accessibilityRole: "radio",
+      accessibilityLabel: [
+        label,
+        stored ? mask(stored.brand, stored.last4) : null,
+        badge,
+        disabled && reason ? reason : sub,
+        showCost ? settle : null,
+        showCost ? fee : null
+      ].filter(Boolean).join(", "),
+      accessibilityState: { checked: selected, disabled },
+      "aria-checked": selected,
+      "aria-invalid": error ? true : void 0,
+      disabled,
+      onPress: disabled ? void 0 : () => onSelect?.(id),
+      android_ripple: android && !disabled ? { color: theme.state.pressed } : void 0,
+      style: styles.press,
+      ...webProps,
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.row,
+            { minHeight: android ? ANDROID_ROW : IOS_ROW, borderColor, backgroundColor },
+            // iOS Settings two-line cell: 22 + 20 of text plus 8 + 8 and the 1 + 1 edge lands on 60 (F38).
+            android ? null : styles.rowIos,
+            sizeStyle,
+            compactStyle,
+            boxStyle,
+            style
+          ],
+          children: [
+            android ? /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                "aria-hidden": true,
+                testID: "method-indicator",
+                style: [styles.indicator, { borderColor: indicatorColor }],
+                children: selected ? /* @__PURE__ */ jsx(View, { style: styles.indicatorDot }) : null
+              }
+            ) : null,
+            icon ? /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.iconTile, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text2 }) }) : null,
+            /* @__PURE__ */ jsxs(View, { style: styles.rowText, children: [
+              /* @__PURE__ */ jsxs(View, { style: styles.rowTitle, children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.label, labelType], children: label }),
+                stored ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CardBrandMark, { brand: stored.brand, labels: labelsProp }),
+                  /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.mask, children: mask(stored.brand, stored.last4) })
+                ] }) : null,
+                badge ? /* @__PURE__ */ jsx(Badge, { style: styles.rowBadge, variant: "accent", size: "sm", children: badge }) : null
+              ] }),
+              disabled && reason ? /* @__PURE__ */ jsx(Text, { style: [styles.sub, subType], children: reason }) : sub ? /* @__PURE__ */ jsx(Text, { style: [styles.sub, subType], children: sub }) : null
+            ] }),
+            showCost && (settle || fee) ? /* @__PURE__ */ jsxs(View, { style: styles.costColumn, children: [
+              settle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.settle, children: settle }) : null,
+              fee ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.fee, children: fee }) : null
+            ] }) : null,
+            trailing != null ? /* @__PURE__ */ jsx(View, { style: styles.rowTrailing, children: typeof trailing === "string" || typeof trailing === "number" ? /* @__PURE__ */ jsx(Text, { style: styles.trailingText, children: trailing }) : trailing }) : null,
+            android ? null : (
+              // Settings' trailing check: accent-strong, no fill. The slot keeps its
+              // width when empty so the text column never shifts on selection.
+              /* @__PURE__ */ jsx(View, { "aria-hidden": true, testID: "method-indicator", style: styles.check, children: selected ? /* @__PURE__ */ jsx(View, { testID: "method-check", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentStrong }) }) : null })
+            )
+          ]
+        }
+      )
+    }
+  );
+  if (!message) return pressable;
+  return /* @__PURE__ */ jsxs(View, { children: [
+    pressable,
+    /* @__PURE__ */ jsx(FieldMessage, { invalid: Boolean(error) && typeof error === "string", children: message })
+  ] });
+}
+function PaymentMethodPicker({
+  methods,
+  value,
+  onChange,
+  showCost = false,
+  verbose = false,
+  label,
+  stored,
+  unavailable,
+  unavailableReasons,
+  badges,
+  motion = "full",
+  platform,
+  error = false,
+  hint,
+  size,
+  tone,
+  loading = false,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const labels = useLabels("paymentMethod", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const theme = useLoamTheme("payment-method");
+  const { styles } = useStyles(sheet);
+  const itemsRef = React.useRef([]);
+  const [, bump] = React.useReducer((c) => c + 1, 0);
+  const register = React.useCallback((entry) => {
+    itemsRef.current = [...itemsRef.current, entry];
+    bump();
+    return () => {
+      itemsRef.current = itemsRef.current.filter((e) => e !== entry);
+      bump();
+    };
+  }, []);
+  const invalid = Boolean(error);
+  const message = typeof error === "string" && error ? error : hint;
+  const firstEnabled = itemsRef.current.find((e) => !e.disabled)?.id;
+  const activeId = value ?? firstEnabled;
+  const onItemKeyDown = React.useCallback(
+    (currentId, event) => {
+      const enabled = itemsRef.current.filter((e) => !e.disabled);
+      if (enabled.length === 0) return;
+      let target;
+      const { key } = event;
+      if (key === "Home") {
+        target = enabled[0];
+      } else if (key === "End") {
+        target = enabled[enabled.length - 1];
+      } else {
+        let dir = 0;
+        if (key === "ArrowDown") dir = 1;
+        else if (key === "ArrowUp") dir = -1;
+        else if (key === "ArrowRight") dir = theme.rtl ? -1 : 1;
+        else if (key === "ArrowLeft") dir = theme.rtl ? 1 : -1;
+        else return;
+        const current = enabled.findIndex((e) => e.id === currentId);
+        const from = current === -1 ? 0 : current;
+        target = enabled[(from + dir + enabled.length) % enabled.length];
+      }
+      if (!target) return;
+      event.preventDefault?.();
+      onChange(target.id);
+      target.focus();
+    },
+    [onChange, theme.rtl]
+  );
+  const ctx = React.useMemo(
+    () => ({ activeId, register, onItemKeyDown, platform, invalid }),
+    [activeId, register, onItemKeyDown, platform, invalid]
+  );
+  return /* @__PURE__ */ jsx(PickerContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style, children: [
+    /* @__PURE__ */ jsxs(
+      View,
+      {
+        testID,
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: label ?? labels.paymentMethod,
+        "aria-invalid": invalid || void 0,
+        "aria-busy": loading || void 0,
+        style: styles.group,
+        children: [
+          loading ? [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+            PaymentMethodRow,
+            {
+              id: `loading-${i}`,
+              label: "",
+              selected: false,
+              loading: true,
+              size,
+              platform
+            },
+            i
+          )) : null,
+          (loading ? [] : methods).map((method) => {
+            const text = methodText(method.id, pay) ?? method;
+            return /* @__PURE__ */ jsx(
+              PaymentMethodRow,
+              {
+                id: method.id,
+                label: text.label,
+                sub: verbose ? text.note : showCost ? void 0 : text.settle,
+                icon: methodIcon(method.icon),
+                stored: stored?.[method.id],
+                badge: badges?.[method.id],
+                settle: text.settle,
+                fee: text.fee,
+                selected: value === method.id,
+                showCost,
+                disabled: unavailable?.includes(method.id) ?? false,
+                reason: unavailableReasons?.[method.id],
+                motion,
+                size,
+                tone,
+                onSelect: (id) => onChange(id),
+                labels: labelsProp
+              },
+              method.id
+            );
+          })
+        ]
+      }
+    ),
+    message ? /* @__PURE__ */ jsx(FieldMessage, { invalid: invalid && typeof error === "string", children: message }) : null
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  plate: {
+    // Every host lays the plate in a row (the card field, the saved-card chip,
+    // the method row), so it centres on the row's cross axis. `flex-start` kept
+    // it from stretching in a column but pinned it to the top edge of each row.
+    alignSelf: "center",
+    borderWidth: theme.borderWidth.base,
+    borderRadius: theme.radius.xs,
+    variants: {
+      plateTone: {
+        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info },
+        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        good: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
+        "text-3": { backgroundColor: theme.color.surface3, borderColor: theme.color.border }
+      },
+      plateSize: {
+        sm: { paddingHorizontal: theme.space[6], paddingVertical: theme.space[2] },
+        md: { paddingHorizontal: theme.space[8], paddingVertical: theme.space[4] }
+      }
+    }
+  },
+  plateText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    // Uppercased in CSS, not in JS: the string stays the brand table's own label
+    // (`Visa`), so an accessible name and a test read the word, not a shout.
+    textTransform: "uppercase",
+    variants: {
+      plateTone: {
+        info: { color: theme.color.infoOnSoft },
+        warn: { color: theme.color.warnOnSoft },
+        good: { color: theme.color.goodOnSoft },
+        danger: { color: theme.color.dangerOnSoft },
+        "text-3": { color: theme.color.text3 }
+      },
+      plateSize: {
+        sm: {
+          fontSize: theme.fontSize[10],
+          letterSpacing: theme.fontSize[10] * theme.tracking.caps
+        },
+        md: {
+          fontSize: theme.fontSize[11],
+          letterSpacing: theme.fontSize[11] * theme.tracking.caps
+        }
+      }
+    }
+  },
+  divider: { flexDirection: "row", alignItems: "center", gap: theme.space.s3, maxWidth: "100%" },
+  dividerRule: {
+    flexGrow: 1,
+    height: theme.borderWidth.thin,
+    backgroundColor: theme.color.border
+  },
+  dividerLabel: {
+    ...theme.type.overline,
+    fontFamily: theme.font.sans,
+    color: theme.color.text3,
+    flexShrink: 1
+  },
+  group: { gap: theme.space.s2 },
+  // The ripple is clipped to the row's own corners.
+  press: { borderRadius: theme.radius.md, overflow: "hidden" },
+  check: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.icon.md,
+    height: theme.icon.md
+  },
+  // `borderColor` / `backgroundColor` arrive at the use site as animated values
+  // so selection can crossfade; nothing about the box travels.
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
+    }
+  },
+  rowIos: { paddingVertical: theme.space.s2 },
+  indicator: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.space[20],
+    height: theme.space[20],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.heavy,
+    backgroundColor: "transparent",
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  indicatorDot: {
+    width: theme.space[10],
+    height: theme.space[10],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  iconTile: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.ctl.iconBtnSm,
+    height: theme.ctl.iconBtnSm,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    variants: {
+      selected: { true: {}, false: {} },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  rowText: { flexShrink: 1, flexGrow: 1, gap: theme.space[2] },
+  rowTitle: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space[6]
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text
+  },
+  mask: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  sub: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2
+  },
+  costColumn: { flexShrink: 0, alignItems: "flex-end", gap: theme.space[2] },
+  settle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  fee: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[10],
+    color: theme.color.text3
+  },
+  // Badge hugs with `flex-start`, which pins it to the top of this centred row.
+  rowBadge: { alignSelf: "center" },
+  rowTrailing: { flexShrink: 0, alignItems: "flex-end" },
+  // text-2, not the fee's text-3: a plain trailing string sits on the selected
+  // row's tint, where text-3 at 10px misses 4.5:1.
+  trailingText: {
+    fontFamily: theme.font.mono,
+    fontVariant: ["tabular-nums"],
+    fontSize: theme.fontSize[10],
+    color: theme.color.text2
+  }
+}));
+
+export { CardBrandMark, DEFAULT_LABELS, OrDivider, PaymentMethodPicker, PaymentMethodRow, methodIcon, payBoxStyle };