@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-RGQWWKLA.js → chunk-3QMEOFW5.js}

@@ -1,19 +1,70 @@
-import { Timeline } from './chunk-4GBOGOTV.js';
-import { List, ListRow } from './chunk-IVNRBPGC.js';
-import { EmptyState } from './chunk-LZLHELAG.js';
-import { Amount } from './chunk-VBOXAEPI.js';
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { methodIcon } from './chunk-PUPM2YGF.js';
-import { Badge } from './chunk-SBMNWWBV.js';
-import { Alert } from './chunk-OETCUXQP.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { Timeline } from './chunk-NBEF4EPJ.js';
+import { List, ListRow } from './chunk-C4GTDLRC.js';
+import { EmptyState } from './chunk-KFJGFLMW.js';
+import { Amount } from './chunk-QHAITQIF.js';
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { methodIcon } from './chunk-ROCUG24E.js';
+import { usePayLabels } from './chunk-GEIGMWNF.js';
+import { Badge } from './chunk-TN2ZNJUI.js';
+import { Alert } from './chunk-QDZGFXQD.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Text, Pressable } from 'react-native';
+import { Platform, findNodeHandle, AccessibilityInfo, View, Text, Pressable, Animated } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { receivableStatus, methodFor, bucketFor } from '@btndprojects/loam-pay';
+import { receivableStatus, methodFor, methodText, money, agingLabel, dunningText, bucketFor } from '@btndprojects/loam-pay';
 export { LEDGER_CARD_BREAKPOINT } from '@btndprojects/loam-pay';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/receivables/receivables-labels.ts
+var plural = (n, one, other) => `${n} ${n === 1 ? one : other}`;
+var DEFAULT_LABELS = {
+  actions: "Actions",
+  actionsFor: (label, no) => `${label} \u2014 ${no}`,
+  customer: "Customer",
+  invoice: "Invoice",
+  amount: "Amount",
+  due: "Due",
+  status: "Status",
+  method: "Method",
+  lateDays: (d) => `${d}d late`,
+  dueToday: "Due today",
+  dueIn: (d) => `in ${d}d`,
+  emptyMessage: "Nothing outstanding.",
+  caption: "Outstanding invoices",
+  emptyTitle: "Nothing outstanding",
+  open: "Open",
+  openRow: (open, no, who) => `${open} ${no} \u2014 ${who}`,
+  agingLabel: "Accounts receivable aging",
+  invoiceCount: (n) => plural(n, "invoice", "invoices"),
+  openRowDetail: (open, no, who, amount, status, due) => `${open} ${no} \u2014 ${who}, ${amount}, ${status}, ${due}`,
+  bucketSummary: (bucket, amount, count) => `${bucket} \u2014 ${amount}, ${count}`,
+  cannotBeUndone: "This cannot be undone.",
+  cancel: "Cancel",
+  asksConfirm: "Asks you to confirm",
+  confirmTitle: (action, no) => `${action} \u2014 ${no}?`,
+  day: "Day",
+  dayN: (d) => `Day ${d}`,
+  now: "Now",
+  retrySchedule: "Retry schedule",
+  reminderSchedule: "Reminder schedule",
+  sending: "Sending",
+  scheduled: "Scheduled",
+  reminderTitle: (day) => {
+    if (day < 0) return `Due in ${plural(-day, "day", "days")}`;
+    if (day === 0) return "Due today";
+    return `${plural(day, "day", "days")} past due`;
+  },
+  reminderBefore: "A heads-up before the due date, so a slow approval chain has time to move.",
+  reminderOn: "The due date, restated with the amount and the same pay link.",
+  reminderAfter: "The same template again, one sentence clearer about how late it now is.",
+  overdueTitle: (invoice, days) => `overdue on ${invoice} \u2014 ${plural(days, "day", "days")} past due`,
+  dueTitle: (invoice) => `due on ${invoice}`,
+  overdueDescription: (due) => `The due date was ${due}. Paying now clears it; if it has already been paid, tell us and we will match it up.`,
+  dueDescription: (due) => `Due ${due}. Nothing is late yet \u2014 this is a heads-up so an approval chain has time to move.`
+};
 var RECEIVABLE_COLUMNS = [
   "who",
   "no",
@@ -22,33 +73,75 @@ var RECEIVABLE_COLUMNS = [
   "status",
   "method"
 ];
-function dueWords(dueIn) {
-  if (dueIn < 0) return `${-dueIn}d late`;
-  if (dueIn === 0) return "Due today";
-  return `in ${dueIn}d`;
+function dueWords(dueIn, labels = DEFAULT_LABELS) {
+  if (dueIn < 0) return labels.lateDays(-dueIn);
+  if (dueIn === 0) return labels.dueToday;
+  return labels.dueIn(dueIn);
 }
 function ReceivablesCardList({
   rows,
   actions = [],
-  actionsLabel = "Actions",
-  emptyTitle = "Nothing outstanding",
+  actionsLabel: actionsLabelProp,
+  emptyTitle: emptyTitleProp,
   emptyDescription,
-  openLabel = "Open",
+  openLabel: openLabelProp,
   onOpenRow,
   onAction,
-  locale,
+  confirmMessage: confirmMessageProp,
+  cancelLabel: cancelLabelProp,
+  locale: localeProp,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const actionsLabel = actionsLabelProp ?? labels.actions;
+  const emptyTitle = emptyTitleProp ?? labels.emptyTitle;
+  const openLabel = openLabelProp ?? labels.open;
+  const confirmMessage = confirmMessageProp ?? labels.cannotBeUndone;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet);
   const [menuFor, setMenuFor] = React.useState(null);
+  const [confirming, setConfirming] = React.useState(null);
+  const confirmTitle = React.useRef(null);
+  const closeMenu = () => {
+    setMenuFor(null);
+    setConfirming(null);
+  };
+  const run = (id) => {
+    const no = menuFor;
+    closeMenu();
+    if (no !== null) onAction?.(no, id);
+  };
+  React.useEffect(() => {
+    if (!confirming) return;
+    const node = confirmTitle.current;
+    if (!node) return;
+    if (Platform.OS === "web") node.focus?.();
+    else {
+      const handle = findNodeHandle(node);
+      if (handle) AccessibilityInfo.setAccessibilityFocus(handle);
+    }
+  }, [confirming]);
   if (rows.length === 0) {
-    return /* @__PURE__ */ jsx(EmptyState, { variant: "empty", icon: "invoice", title: emptyTitle, description: emptyDescription });
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "empty",
+        icon: "invoice",
+        title: emptyTitle,
+        description: emptyDescription
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(View, { style, children: [
     /* @__PURE__ */ jsx(List, { role: "list", children: rows.map((r) => {
-      const s = receivableStatus(r);
+      const s = receivableStatus(r, pay);
       const def = methodFor(r.method);
+      const methodName = methodText(r.method, pay)?.label ?? r.method;
       return (
         // The trigger is a sibling of the row, not a child: a row rendered
         // interactive is a real pressable, and a second pressable inside it
@@ -58,7 +151,14 @@ function ReceivablesCardList({
             ListRow,
             {
               onPress: onOpenRow ? () => onOpenRow(r.no) : void 0,
-              accessibilityLabel: onOpenRow ? `${openLabel} ${r.no} \u2014 ${r.who}` : void 0,
+              accessibilityLabel: onOpenRow ? labels.openRowDetail(
+                openLabel,
+                r.no,
+                r.who,
+                money(r.amount, r.cur, { locale }),
+                s.label,
+                dueWords(r.dueIn, labels)
+              ) : void 0,
               title: /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
                 /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.who, children: r.who }),
                 /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
@@ -75,7 +175,7 @@ function ReceivablesCardList({
               subtitle: /* @__PURE__ */ jsxs(View, { style: styles.subRow, children: [
                 /* @__PURE__ */ jsx(Text, { style: styles.no, children: r.no }),
                 /* @__PURE__ */ jsx(Badge, { variant: s.tone, size: "sm", children: s.label }),
-                /* @__PURE__ */ jsx(Text, { style: styles.due, children: dueWords(r.dueIn) }),
+                /* @__PURE__ */ jsx(Text, { style: styles.due, children: dueWords(r.dueIn, labels) }),
                 /* @__PURE__ */ jsxs(View, { style: styles.methodRow, children: [
                   /* @__PURE__ */ jsx(
                     Icon,
@@ -85,7 +185,7 @@ function ReceivablesCardList({
                       color: theme.color.text3
                     }
                   ),
-                  /* @__PURE__ */ jsx(Text, { style: styles.method, children: def?.label ?? r.method })
+                  /* @__PURE__ */ jsx(Text, { style: styles.method, children: methodName })
                 ] })
               ] })
             }
@@ -94,7 +194,7 @@ function ReceivablesCardList({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: `${actionsLabel} \u2014 ${r.no}`,
+              accessibilityLabel: labels.actionsFor(actionsLabel, r.no),
               onPress: () => setMenuFor(r.no),
               style: styles.menuTrigger,
               children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text2 })
@@ -107,9 +207,29 @@ function ReceivablesCardList({
       Sheet,
       {
         open: menuFor !== null,
-        title: menuFor === null ? actionsLabel : `${actionsLabel} \u2014 ${menuFor}`,
-        onClose: () => setMenuFor(null),
-        children: /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.actionList, children: actions.map((a) => (
+        title: menuFor === null ? actionsLabel : labels.actionsFor(actionsLabel, menuFor),
+        onClose: closeMenu,
+        children: confirming ? /* @__PURE__ */ jsxs(View, { style: styles.confirm, children: [
+          /* @__PURE__ */ jsxs(
+            View,
+            {
+              ref: confirmTitle,
+              accessible: true,
+              accessibilityRole: "header",
+              ...Platform.OS === "web" ? { tabIndex: -1 } : null,
+              style: styles.confirmTitleRow,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.md, color: theme.color.danger }),
+                /* @__PURE__ */ jsx(Text, { style: styles.confirmTitle, children: labels.confirmTitle(confirming.label, menuFor ?? "") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.confirmMessage, children: confirmMessage }),
+          /* @__PURE__ */ jsxs(View, { style: styles.confirmActions, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", onPress: () => setConfirming(null), children: cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { variant: "danger", onPress: () => run(confirming.id), children: confirming.label })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.actionList, children: actions.map((a) => (
           // The item and the control are separate nodes: `role="listitem"`
           // and `accessibilityRole="button"` on one element are two roles
           // fighting over the same node, and react-native-web resolves it
@@ -120,11 +240,8 @@ function ReceivablesCardList({
             {
               accessibilityRole: "button",
               accessibilityLabel: a.label,
-              onPress: () => {
-                const no = menuFor;
-                setMenuFor(null);
-                if (no !== null) onAction?.(no, a.id);
-              },
+              accessibilityHint: a.danger ? labels.asksConfirm : void 0,
+              onPress: () => a.danger ? setConfirming(a) : run(a.id),
               style: ({ pressed }) => [
                 styles.actionRow,
                 pressed ? styles.actionRowPressed : null
@@ -138,7 +255,18 @@ function ReceivablesCardList({
                     color: a.danger ? theme.color.danger : theme.color.text2
                   }
                 ) : null,
-                /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null], children: a.label })
+                /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, a.danger ? styles.actionLabelDanger : null], children: a.label }),
+                a.danger ? (
+                  // Destructive is said in shape too, not in red alone.
+                  /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "alert-triangle",
+                      size: theme.icon.sm,
+                      color: theme.color.danger
+                    }
+                  ) })
+                ) : null
               ]
             }
           ) }, a.id)
@@ -209,7 +337,24 @@ var sheet = createStyleSheet((theme) => ({
     lineHeight: theme.type.body.lineHeight,
     color: theme.color.text
   },
-  actionLabelDanger: { color: theme.color.danger }
+  actionLabelDanger: { color: theme.color.danger },
+  confirm: { gap: theme.space.s3 },
+  confirmTitleRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  confirmTitle: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  confirmMessage: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  confirmActions: { flexDirection: "row", justifyContent: "flex-end", gap: theme.space.s2 }
 }));
 function tilePaint(theme, tone) {
   switch (tone) {
@@ -252,17 +397,38 @@ function AgingBucketCard({
   tone,
   fill = 0,
   onSelect,
-  locale,
+  locale: localeProp,
   countLabel,
-  style
+  labels: labelsProp,
+  style,
+  motion = "full",
+  delay = 0
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet2);
   const paint = tilePaint(theme, tone);
   const pct = Math.round(Math.min(1, Math.max(0, fill)) * 100);
-  const words = countLabel ?? (count === 1 ? "invoice" : "invoices");
+  const level = useResolvedMotion(motion, "receivables");
+  const grow = React.useRef(new Animated.Value(level === "full" ? 0 : pct)).current;
+  React.useEffect(() => {
+    if (level !== "full") {
+      grow.setValue(pct);
+      return;
+    }
+    const run = Animated.sequence([
+      Animated.delay(delay),
+      Animated.spring(grow, { ...springConfig(theme, "ds"), toValue: pct, useNativeDriver: false })
+    ]);
+    run.start();
+    return () => run.stop();
+  }, [pct, level]);
+  const countText = countLabel ? `${count} ${countLabel}` : labels.invoiceCount(count);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: bucket }),
+    /* @__PURE__ */ jsx(Text, { style: [styles.bucketName, { color: paint.ink }], children: agingLabel({ bucket }, pay) }),
     /* @__PURE__ */ jsx(
       Amount,
       {
@@ -281,10 +447,25 @@ function AgingBucketCard({
         accessibilityElementsHidden: true,
         importantForAccessibility: "no-hide-descendants",
         style: styles.rail,
-        children: /* @__PURE__ */ jsx(View, { style: [styles.railFill, { width: `${pct}%`, backgroundColor: paint.bar }] })
+        children: /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles.railFill,
+              {
+                width: grow.interpolate({
+                  inputRange: [0, 100],
+                  outputRange: ["0%", "100%"],
+                  extrapolate: "clamp"
+                }),
+                backgroundColor: paint.bar
+              }
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: `${count} ${words}` })
+    /* @__PURE__ */ jsx(Text, { style: [styles.count, { color: paint.ink }], children: countText })
   ] });
   const tile = [
     styles.tile,
@@ -296,7 +477,11 @@ function AgingBucketCard({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `${bucket} \u2014 ${count} ${words}`,
+        accessibilityLabel: labels.bucketSummary(
+          agingLabel({ bucket }, pay),
+          money(minor, currency, { locale }),
+          countText
+        ),
         onPress: onSelect,
         style: tile,
         children: ({ pressed }) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -313,12 +498,15 @@ function AgingSummary({
   currency,
   onSelectBucket,
   locale,
-  label = "Accounts receivable aging",
-  style
+  label,
+  labels: labelsProp,
+  style,
+  motion = "full"
 }) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet2);
   const peak = buckets.reduce((m, b) => Math.max(m, Math.abs(b.minor)), 0);
-  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label, style: [styles.strip, style], children: buckets.map((b) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(View, { role: "group", accessibilityLabel: label ?? labels.agingLabel, style: [styles.strip, style], children: buckets.map((b, i) => /* @__PURE__ */ jsx(
     AgingBucketCard,
     {
       bucket: b.bucket.bucket,
@@ -328,6 +516,9 @@ function AgingSummary({
       tone: b.bucket.tone,
       fill: peak === 0 ? 0 : Math.abs(b.minor) / peak,
       locale,
+      motion,
+      labels: labelsProp,
+      delay: Math.min(i, 8) * 30,
       onSelect: onSelectBucket ? () => onSelectBucket(b.bucket.bucket) : void 0
     },
     b.bucket.bucket
@@ -434,10 +625,12 @@ function DunningRung({
   surface,
   tone,
   current = false,
-  dayLabel = "Day",
+  dayLabel,
+  labels: labelsProp,
   style
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("receivables");
   const { styles } = useStyles(sheet3);
   const paint = rungPaint(theme, tone);
   const currentAttr = current ? { "aria-current": "step" } : {};
@@ -449,7 +642,7 @@ function DunningRung({
       testID: `dunning-rung-${day}${current ? "-current" : ""}`,
       style: [styles.rung, current ? styles.rungCurrent : null, style],
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles.dayBadge, { borderColor: paint.edge, backgroundColor: paint.fill }], children: /* @__PURE__ */ jsx(Text, { style: [styles.dayLabel, { color: paint.ink }], children: `${dayLabel} ${day}` }) }),
+        /* @__PURE__ */ jsx(View, { style: [styles.dayBadge, { borderColor: paint.edge, backgroundColor: paint.fill }], children: /* @__PURE__ */ jsx(Text, { style: [styles.dayLabel, { color: paint.ink }], children: dayLabel ? `${dayLabel} ${day}` : labels.dayN(day) }) }),
         /* @__PURE__ */ jsx(
           View,
           {
@@ -465,7 +658,7 @@ function DunningRung({
         ] }),
         current ? (
           // The third marker. Never colour alone.
-          /* @__PURE__ */ jsx(Text, { style: styles.now, children: "Now" })
+          /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
         ) : null
       ]
     }
@@ -475,23 +668,27 @@ function DunningTimeline({
   steps,
   tones,
   currentDay,
-  dayLabel = "Day",
+  dayLabel,
   density = "comfortable",
-  label = "Retry schedule",
+  label,
+  labels: labelsProp,
   style
 }) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const pay = usePayLabels(labelsProp);
   const { styles } = useStyles(sheet3);
   const items = steps.map((s, i) => {
     const tone = RUNG_TONE[tones?.[i] ?? "warn"];
     const current = currentDay === s.day;
+    const text = dunningText(s, pay);
     return {
       id: `dunning-${s.day}`,
-      time: `${dayLabel} ${s.day}`,
-      title: s.attempt,
+      time: dayLabel ? `${dayLabel} ${s.day}` : labels.dayN(s.day),
+      title: text.attempt,
       description: current ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { children: `${s.surface} ` }),
-        /* @__PURE__ */ jsx(Text, { style: styles.now, children: "Now" })
-      ] }) : s.surface,
+        /* @__PURE__ */ jsx(Text, { children: `${text.surface} ` }),
+        /* @__PURE__ */ jsx(Text, { style: styles.now, children: labels.now })
+      ] }) : text.surface,
       tone,
       icon: RUNG_ICON[tone],
       current,
@@ -500,12 +697,10 @@ function DunningTimeline({
       testID: `dunning-rung-${s.day}${current ? "-current" : ""}`
     };
   });
-  return /* @__PURE__ */ jsx(Timeline, { items, density, label, style });
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.retrySchedule, style });
 }
-function reminderTitle(day) {
-  if (day < 0) return `Due in ${-day} ${-day === 1 ? "day" : "days"}`;
-  if (day === 0) return "Due today";
-  return `${day} ${day === 1 ? "day" : "days"} past due`;
+function reminderTitle(day, labels = DEFAULT_LABELS) {
+  return labels.reminderTitle(day);
 }
 function ReminderTimeline({
   days,
@@ -513,28 +708,33 @@ function ReminderTimeline({
   currentDay,
   titles = {},
   density = "comfortable",
-  label = "Reminder schedule"
+  label,
+  labels: labelsProp
 }) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
   const items = days.map((d) => {
     const sent = sentAt[d];
     const isCurrent = currentDay === d;
     return {
       id: `reminder-${d}`,
-      time: sent ?? (isCurrent ? "Sending" : "Scheduled"),
-      title: titles[d] ?? reminderTitle(d),
+      time: sent ?? (isCurrent ? labels.sending : labels.scheduled),
+      title: titles[d] ?? reminderTitle(d, labels),
       // The one changed sentence sits here, under a headline that is the same
       // shape on every rung.
-      description: d < 0 ? "A heads-up before the due date, so a slow approval chain has time to move." : d === 0 ? "The due date, restated with the amount and the same pay link." : "The same template again, one sentence clearer about how late it now is.",
+      description: d < 0 ? labels.reminderBefore : d === 0 ? labels.reminderOn : labels.reminderAfter,
       state: sent ? "done" : isCurrent ? "working" : "pending",
       icon: sent ? "check" : isCurrent ? "mail" : "clock"
     };
   });
-  return /* @__PURE__ */ jsx(Timeline, { items, density, label });
+  return /* @__PURE__ */ jsx(Timeline, { items, density, label: label ?? labels.reminderSchedule });
 }
 function overdueTone(daysLate) {
   const tone = bucketFor(daysLate).tone;
   return tone === "good" ? "info" : tone;
 }
+function sentenceCase(text, locale) {
+  return text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
+}
 function OverdueNotice({
   invoiceNumber,
   minor,
@@ -546,9 +746,13 @@ function OverdueNotice({
   action,
   dismissible,
   onDismiss,
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   style
 }) {
+  const labels = useLabels("receivables", DEFAULT_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
   const { styles } = useStyles(sheet3);
   const resolved = tone ?? overdueTone(daysLate);
   const late = daysLate > 0;
@@ -561,8 +765,8 @@ function OverdueNotice({
         dismissible,
         onDismiss,
         action,
-        title: late ? `Overdue on ${invoiceNumber} \u2014 ${daysLate} ${daysLate === 1 ? "day" : "days"} past due` : `Due on ${invoiceNumber}`,
-        description: message ?? (late ? `The due date was ${dueLabel}. Paying now clears it; if it has already been paid, tell us and we will match it up.` : `Due ${dueLabel}. Nothing is late yet \u2014 this is a heads-up so an approval chain has time to move.`)
+        title: late ? sentenceCase(labels.overdueTitle(invoiceNumber, daysLate), locale) : sentenceCase(labels.dueTitle(invoiceNumber), locale),
+        description: message ?? (late ? labels.overdueDescription(dueLabel) : labels.dueDescription(dueLabel))
       }
     )
   ] });