@tesouro/embedded-components-react 0.2.318 → 0.2.320

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index41.js

@@ -1,93 +1,238 @@
-import { cn as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { BILL_UPLOAD_STATUS_TRAY_LABELS_EN as t } from "./index39.js";
-import { UPLOAD_ITEM_ICON_TONE as n } from "./index40.js";
-import { useId as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { CheckCircle2 as s, ChevronDown as c, ChevronRight as l, ChevronUp as u, Loader2 as d, X as f, XCircle as p } from "lucide-react";
+import { Button as e, Collapsible as t, CollapsibleContent as n, CollapsibleTrigger as r, Sheet as i, SheetContent as a, SheetDescription as o, SheetHeader as s, SheetTitle as c, Skeleton as l, Typography as u } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { BillStatusBadge as d } from "./index14.js";
+import "./index15.js";
+import { BillActionButtons as f } from "./index12.js";
+import { BILL_DETAILS_SHEET_LABELS_EN as p } from "./index40.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ChevronDownIcon as _, MoveDiagonal2Icon as v, XIcon as y } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index41.js
-function m({ status: t }) {
-	let r = e("ttw:size-4", n[t]);
-	return t === "uploading" ? /* @__PURE__ */ a(d, {
-		"aria-hidden": !0,
-		className: e(r, "ttw:animate-spin")
-	}) : a(t === "ready" ? s : p, {
-		"aria-hidden": !0,
-		className: r
+function b({ items: e }) {
+	return /* @__PURE__ */ h("dl", {
+		className: "ttw:flex ttw:flex-col",
+		children: e.map((e) => /* @__PURE__ */ g("div", {
+			className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-6 ttw:border-b ttw:border-border ttw:py-3 ttw:last:border-b-0",
+			children: [/* @__PURE__ */ h("dt", {
+				className: "ttw:text-sm ttw:text-muted-foreground",
+				children: e.label
+			}), /* @__PURE__ */ g("dd", {
+				className: "ttw:flex ttw:flex-col ttw:items-end ttw:text-right",
+				children: [/* @__PURE__ */ h("span", {
+					className: "ttw:text-sm ttw:font-medium",
+					children: e.value
+				}), e.secondaryValue ? /* @__PURE__ */ h("span", {
+					className: "ttw:text-sm ttw:text-muted-foreground",
+					children: e.secondaryValue
+				}) : null]
+			})]
+		}, e.label))
 	});
 }
-function h({ item: t, labels: n }) {
-	let s = r(), c = /* @__PURE__ */ o(i, { children: [
-		/* @__PURE__ */ a(m, { status: t.status }),
-		/* @__PURE__ */ a("span", {
-			id: s,
-			className: "ttw:sr-only",
-			children: n.statusLabel(t.status)
-		}),
-		/* @__PURE__ */ a("span", {
-			className: "ttw:flex-1 ttw:truncate ttw:text-left ttw:text-sm ttw:text-foreground",
-			children: t.fileName
-		}),
-		t.onOpen ? /* @__PURE__ */ a(l, {
-			"aria-hidden": !0,
-			className: "ttw:size-4"
-		}) : null
-	] }), u = "ttw:flex ttw:items-center ttw:gap-3 ttw:px-4 ttw:py-2.5";
-	return t.onOpen ? /* @__PURE__ */ a("button", {
-		type: "button",
-		onClick: t.onOpen,
-		"aria-describedby": s,
-		"aria-label": n.openItem(t.fileName),
-		className: e(u, "ttw:w-full ttw:text-muted-foreground ttw:transition-colors ttw:hover:bg-muted/50 ttw:hover:text-foreground"),
-		children: c
-	}) : /* @__PURE__ */ a("div", {
-		"aria-describedby": s,
-		className: u,
-		children: c
+function x({ heading: e, children: i }) {
+	return /* @__PURE__ */ g(t, {
+		defaultOpen: !0,
+		className: "ttw:flex ttw:flex-col ttw:gap-3",
+		children: [/* @__PURE__ */ g(r, {
+			className: "ttw:group ttw:flex ttw:w-full ttw:items-center ttw:justify-between ttw:rounded-xs ttw:focus-visible:ring-2 ttw:focus-visible:ring-ring ttw:focus-visible:outline-hidden",
+			children: [/* @__PURE__ */ h(u, {
+				variant: "body1",
+				className: "ttw:font-semibold",
+				children: e
+			}), /* @__PURE__ */ h(_, { className: "ttw:size-4 ttw:text-muted-foreground ttw:transition-transform ttw:group-data-[state=closed]:-rotate-90" })]
+		}), /* @__PURE__ */ h(n, { children: i })]
 	});
 }
-function g({ sections: e, summaryLabel: n, collapsed: r, onToggleCollapsed: i, onClose: s, testId: l, labels: d }) {
-	let p = {
-		...t,
-		...d
+function S({ open: t, onOpenChange: n, details: r, actions: u = [], isLoading: _, isError: S, notice: C, onClose: w, onExpand: T, testId: E, labels: D }) {
+	let O = {
+		...p,
+		...D,
+		statusBadge: {
+			...p.statusBadge,
+			...D?.statusBadge
+		}
 	};
-	return /* @__PURE__ */ o("div", {
-		className: "ttw:fixed ttw:right-4 ttw:bottom-4 ttw:z-50 ttw:w-96 ttw:max-w-[calc(100vw-2rem)] ttw:overflow-hidden ttw:rounded-lg ttw:border ttw:border-border ttw:bg-card",
-		"data-testid": l,
-		children: [/* @__PURE__ */ o("div", {
-			className: "ttw:flex ttw:items-center ttw:gap-2 ttw:border-b ttw:border-border ttw:bg-muted/40 ttw:px-4 ttw:py-3",
-			children: [
-				/* @__PURE__ */ a("span", {
-					"aria-live": "polite",
-					className: "ttw:flex-1 ttw:text-base ttw:font-semibold ttw:text-foreground",
-					children: n
-				}),
-				/* @__PURE__ */ a("button", {
-					type: "button",
-					onClick: i,
-					"aria-label": r ? p.expand : p.collapse,
-					"aria-expanded": !r,
-					className: "ttw:text-muted-foreground ttw:hover:text-foreground",
-					children: a(r ? u : c, { className: "ttw:size-4" })
-				}),
-				/* @__PURE__ */ a("button", {
-					type: "button",
-					onClick: s,
-					"aria-label": p.close,
-					className: "ttw:text-muted-foreground ttw:hover:text-foreground",
-					children: /* @__PURE__ */ a(f, { className: "ttw:size-4" })
-				})
-			]
-		}), r ? null : /* @__PURE__ */ a("div", {
-			className: "ttw:max-h-96 ttw:overflow-y-auto",
-			children: e.map((e) => /* @__PURE__ */ o("div", { children: [e.caption ? /* @__PURE__ */ a("p", {
-				className: "ttw:px-4 ttw:pt-3 ttw:pb-1 ttw:text-xs ttw:text-muted-foreground",
-				children: e.caption
-			}) : null, e.items.map((e) => /* @__PURE__ */ a(h, {
-				item: e,
-				labels: p
-			}, e.id))] }, e.id))
-		})]
+	return /* @__PURE__ */ h(i, {
+		open: t,
+		onOpenChange: (e) => e ? n(e) : w(),
+		children: /* @__PURE__ */ g(a, {
+			showCloseButton: !1,
+			className: "ttw:w-150 ttw:gap-0 ttw:overflow-y-auto ttw:sm:max-w-150",
+			"data-testid": E,
+			children: [/* @__PURE__ */ g(s, {
+				className: "ttw:flex ttw:flex-row ttw:items-start ttw:justify-between ttw:gap-3",
+				children: [/* @__PURE__ */ g("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+					children: [
+						/* @__PURE__ */ h(c, {
+							className: _ ? "ttw:sr-only" : "ttw:text-xl ttw:font-semibold",
+							children: S ? O.errorTitle : _ ? O.loadingTitle : r?.title
+						}),
+						_ ? /* @__PURE__ */ g("div", {
+							"aria-hidden": !0,
+							className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:py-1",
+							children: [/* @__PURE__ */ h(l, { className: "ttw:h-6 ttw:w-48" }), /* @__PURE__ */ h(l, { className: "ttw:h-4 ttw:w-28" })]
+						}) : null,
+						r && !_ && !S ? /* @__PURE__ */ h("p", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: r.subtitle
+						}) : null,
+						/* @__PURE__ */ h(o, {
+							className: "ttw:sr-only",
+							children: O.hiddenDescription
+						})
+					]
+				}), /* @__PURE__ */ g("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-1",
+					children: [T ? /* @__PURE__ */ h(e, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": O.expandButton,
+						onClick: T,
+						children: /* @__PURE__ */ h(v, { className: "ttw:size-4" })
+					}) : null, /* @__PURE__ */ h(e, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						"aria-label": O.closeButton,
+						onClick: w,
+						children: /* @__PURE__ */ h(y, { className: "ttw:size-4" })
+					})]
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-6 ttw:px-6 ttw:pb-6",
+				children: S ? /* @__PURE__ */ h("p", {
+					className: "ttw:text-sm ttw:text-muted-foreground",
+					children: O.errorDescription
+				}) : _ ? /* @__PURE__ */ g("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-6",
+					children: [/* @__PURE__ */ h(l, { className: "ttw:h-32 ttw:w-full" }), /* @__PURE__ */ g("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-2",
+						children: [
+							/* @__PURE__ */ h(l, { className: "ttw:h-4 ttw:w-40" }),
+							/* @__PURE__ */ h(l, { className: "ttw:h-9 ttw:w-full" }),
+							/* @__PURE__ */ h(l, { className: "ttw:h-9 ttw:w-full" })
+						]
+					})]
+				}) : r ? /* @__PURE__ */ g(m, { children: [
+					C,
+					/* @__PURE__ */ g("section", {
+						className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:rounded-lg ttw:bg-muted/50 ttw:p-4",
+						children: [
+							/* @__PURE__ */ g("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-2",
+								children: [
+									/* @__PURE__ */ h("span", {
+										className: "ttw:text-sm ttw:text-muted-foreground",
+										children: O.amountDueHeading
+									}),
+									/* @__PURE__ */ h("span", {
+										className: "ttw:text-3xl ttw:font-semibold",
+										children: r.amountDueLabel
+									}),
+									/* @__PURE__ */ h("div", { children: /* @__PURE__ */ h(d, {
+										status: r.status,
+										tone: r.statusTone,
+										labels: O.statusBadge
+									}) })
+								]
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "ttw:grid ttw:grid-cols-2 ttw:gap-x-6 ttw:gap-y-1",
+								children: [/* @__PURE__ */ g("div", {
+									className: "ttw:flex ttw:flex-col",
+									children: [/* @__PURE__ */ h("span", {
+										className: "ttw:text-xs ttw:text-muted-foreground",
+										children: O.invoiceDateLabel
+									}), /* @__PURE__ */ h("span", {
+										className: "ttw:text-sm ttw:font-medium",
+										children: r.invoiceDateLabel
+									})]
+								}), /* @__PURE__ */ g("div", {
+									className: "ttw:flex ttw:flex-col",
+									children: [/* @__PURE__ */ h("span", {
+										className: "ttw:text-xs ttw:text-muted-foreground",
+										children: O.dueDateLabel
+									}), /* @__PURE__ */ h("span", {
+										className: "ttw:text-sm ttw:font-medium",
+										children: r.dueDateLabel
+									})]
+								})]
+							}),
+							u.length ? /* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:gap-2",
+								children: /* @__PURE__ */ h(f, { actions: u })
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ h(x, {
+						heading: O.payToHeading,
+						children: /* @__PURE__ */ h(b, { items: r.payToItems })
+					}),
+					/* @__PURE__ */ h(x, {
+						heading: O.invoiceDetailsHeading,
+						children: /* @__PURE__ */ g("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-4",
+							children: [
+								/* @__PURE__ */ h(b, { items: r.invoiceItems }),
+								r.lineItems.length ? /* @__PURE__ */ g("table", {
+									className: "ttw:w-full ttw:text-sm",
+									children: [/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ g("tr", {
+										className: "ttw:bg-muted/50 ttw:text-xs ttw:text-muted-foreground",
+										children: [
+											/* @__PURE__ */ h("th", {
+												className: "ttw:px-3 ttw:py-2 ttw:text-left ttw:font-normal",
+												children: O.lineItemsHeading
+											}),
+											/* @__PURE__ */ h("th", {
+												className: "ttw:px-3 ttw:py-2 ttw:text-right ttw:font-normal",
+												children: O.lineItemsQuantityHeading
+											}),
+											/* @__PURE__ */ h("th", {
+												className: "ttw:px-3 ttw:py-2 ttw:text-right ttw:font-normal",
+												children: O.lineItemsAmountHeading
+											})
+										]
+									}) }), /* @__PURE__ */ h("tbody", { children: r.lineItems.map((e) => /* @__PURE__ */ g("tr", {
+										className: "ttw:border-b ttw:border-border",
+										children: [
+											/* @__PURE__ */ g("td", {
+												className: "ttw:px-3 ttw:py-2",
+												children: [/* @__PURE__ */ h("span", {
+													className: "ttw:block",
+													children: e.description
+												}), /* @__PURE__ */ h("span", {
+													className: "ttw:block ttw:text-xs ttw:text-muted-foreground",
+													children: e.glCodeLabel
+												})]
+											}),
+											/* @__PURE__ */ h("td", {
+												className: "ttw:px-3 ttw:py-2 ttw:text-right ttw:whitespace-nowrap ttw:text-muted-foreground",
+												children: e.quantityLabel
+											}),
+											/* @__PURE__ */ h("td", {
+												className: "ttw:px-3 ttw:py-2 ttw:text-right ttw:whitespace-nowrap",
+												children: e.amountLabel
+											})
+										]
+									}, e.id)) })]
+								}) : null,
+								/* @__PURE__ */ h("dl", {
+									className: "ttw:flex ttw:flex-col ttw:gap-1",
+									children: r.totals.map((e) => /* @__PURE__ */ g("div", {
+										className: e.emphasis ? "ttw:flex ttw:justify-between ttw:gap-6 ttw:border-t ttw:border-border ttw:pt-2 ttw:text-base ttw:font-semibold" : "ttw:flex ttw:justify-between ttw:gap-6 ttw:text-sm",
+										children: [/* @__PURE__ */ h("dt", {
+											className: e.emphasis ? "" : "ttw:text-muted-foreground",
+											children: e.label
+										}), /* @__PURE__ */ h("dd", { children: e.value })]
+									}, e.label))
+								})
+							]
+						})
+					})
+				] }) : null
+			})]
+		})
 	});
 }
 //#endregion
-export { g as BillUploadStatusTray, g as default };
+export { S as BillDetailsSheet, S as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index42.js

@@ -0,0 +1,195 @@
+import { Button as e, DataTable as t, DataTableSortableHeader as n, Input as r, Tabs as i, TabsContent as a, TabsList as o, TabsTrigger as s } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { EmptyState as c } from "../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as l } from "../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../shared/ui/dist/index.js";
+import { AddBillPanel as u } from "./index7.js";
+import "./index8.js";
+import { BillStatusBadge as d } from "./index14.js";
+import "./index15.js";
+import { BILLS_SCREEN_LABELS_EN as f, BILLS_SCREEN_UPLOAD_ACCEPT as p } from "./index40.js";
+import { useMemo as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { ChevronRightIcon as _, PlusIcon as v, SearchIcon as y } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index42.js
+var b = [
+	10,
+	25,
+	50,
+	100
+];
+function x({ rows: x, isLoading: S, isError: C, sorting: w, onSortingChange: T, pageSize: E, onPageSizeChange: D, pageSizeOptions: O = b, pageInfo: k, hasNextPage: A, hasPrevPage: j, onNextPage: M, onPrevPage: N, filterTabs: P, selectedFilterTabId: F, onFilterTabChange: I, searchValue: L, onSearchChange: R, isFiltering: z, onCreateClick: B, onRetry: V, onFilesSelected: H, onEnterManually: U, uploadStatus: W, uploadErrorMessage: G, emailAddress: K, onCopyEmail: q, labels: J }) {
+	let Y = m(() => ({
+		...f,
+		...J,
+		statusBadge: {
+			...f.statusBadge,
+			...J?.statusBadge
+		},
+		addBill: {
+			...f.addBill,
+			...J?.addBill,
+			dropzone: {
+				...f.addBill.dropzone,
+				...J?.addBill?.dropzone
+			}
+		},
+		sortableHeader: {
+			...f.sortableHeader,
+			...J?.sortableHeader
+		}
+	}), [J]), X = m(() => [
+		{
+			accessorKey: "vendorLabel",
+			enableSorting: !0,
+			header: ({ column: e }) => /* @__PURE__ */ h(n, {
+				column: e,
+				title: Y.columnVendor,
+				labels: Y.sortableHeader
+			})
+		},
+		{
+			accessorKey: "dueDateLabel",
+			enableSorting: !0,
+			header: ({ column: e }) => /* @__PURE__ */ h(n, {
+				column: e,
+				title: Y.columnDueDate,
+				labels: Y.sortableHeader
+			})
+		},
+		{
+			accessorKey: "status",
+			enableSorting: !1,
+			header: Y.columnStatus,
+			cell: ({ row: e }) => /* @__PURE__ */ h(d, {
+				status: e.original.status,
+				tone: e.original.statusTone,
+				labels: Y.statusBadge
+			})
+		},
+		{
+			accessorKey: "amountDueLabel",
+			enableSorting: !1,
+			header: () => /* @__PURE__ */ h("div", {
+				className: "ttw:text-right",
+				children: Y.columnAmountDue
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ h("div", {
+				className: "ttw:text-right",
+				children: e.original.amountDueLabel
+			})
+		},
+		{
+			accessorKey: "addedOnLabel",
+			enableSorting: !0,
+			header: ({ column: e }) => /* @__PURE__ */ h(n, {
+				column: e,
+				title: Y.columnAddedOn,
+				labels: Y.sortableHeader
+			})
+		},
+		{
+			id: "actions",
+			enableSorting: !1,
+			header: () => /* @__PURE__ */ h("span", {
+				className: "ttw:sr-only",
+				children: Y.columnActions
+			}),
+			cell: ({ row: t }) => /* @__PURE__ */ h("div", {
+				className: "ttw:flex ttw:justify-end",
+				children: /* @__PURE__ */ h(e, {
+					variant: "ghost",
+					size: "icon",
+					"aria-label": Y.openRow(t.original.vendorLabel),
+					onClick: (e) => {
+						e.stopPropagation(), t.original.onOpen();
+					},
+					children: /* @__PURE__ */ h(_, { className: "ttw:size-4" })
+				})
+			})
+		}
+	], [Y]), Z = !!(B && H) && !S && !C && !z && x.length === 0, Q = /* @__PURE__ */ h("div", {
+		className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-2 ttw:px-4",
+		children: /* @__PURE__ */ g("div", {
+			className: "ttw:relative ttw:w-80",
+			children: [/* @__PURE__ */ h(y, { className: "ttw:pointer-events-none ttw:absolute ttw:left-3 ttw:top-1/2 ttw:size-4 ttw:-translate-y-1/2 ttw:text-muted-foreground" }), /* @__PURE__ */ h(r, {
+				className: "ttw:pl-9",
+				type: "search",
+				"aria-label": Y.searchLabel,
+				placeholder: Y.searchPlaceholder,
+				value: L,
+				onChange: (e) => R(e.target.value)
+			})]
+		})
+	});
+	return /* @__PURE__ */ g(i, {
+		value: F,
+		onValueChange: I,
+		className: "ttw:flex ttw:flex-col ttw:gap-4",
+		children: [/* @__PURE__ */ g("div", {
+			className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:justify-between ttw:gap-3",
+			children: [/* @__PURE__ */ h(o, {
+				"aria-label": Y.filterTabsLabel,
+				children: P.map((e) => /* @__PURE__ */ g(s, {
+					value: e.id,
+					className: "ttw:min-w-28",
+					children: [e.icon, e.label]
+				}, e.id))
+			}), B && !Z ? /* @__PURE__ */ g(e, {
+				onClick: B,
+				children: [/* @__PURE__ */ h(v, { className: "ttw:size-4" }), Y.createButton]
+			}) : null]
+		}), (() => {
+			let e = C ? /* @__PURE__ */ h(l, {
+				title: Y.errorTitle,
+				description: Y.errorDescription,
+				retryLabel: V ? Y.errorRetry : void 0,
+				onRetry: V
+			}) : Z && B && H ? /* @__PURE__ */ h("div", {
+				className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-card",
+				children: K && q ? /* @__PURE__ */ h(u, {
+					emailAddress: K,
+					onCopyEmail: q,
+					onFilesSelected: H,
+					accept: p,
+					uploadStatus: W,
+					uploadErrorMessage: G,
+					onEnterManually: U ?? B,
+					labels: Y.addBill
+				}) : /* @__PURE__ */ h(u, {
+					onFilesSelected: H,
+					accept: p,
+					uploadStatus: W,
+					uploadErrorMessage: G,
+					onEnterManually: U ?? B,
+					labels: Y.addBill
+				})
+			}) : /* @__PURE__ */ h(t, {
+				columns: X,
+				data: x,
+				isLoading: S,
+				sorting: w,
+				onSortingChange: T,
+				pageSize: E,
+				onPageSizeChange: D,
+				pageSizeOptions: O,
+				pageInfo: k,
+				hasNextPage: A,
+				hasPrevPage: j,
+				onNextPage: M,
+				onPrevPage: N,
+				onRowClick: (e) => e.onOpen(),
+				filterComponent: Q,
+				children: z ? /* @__PURE__ */ h(c, {
+					title: Y.filteredEmptyTitle,
+					description: Y.filteredEmptyDescription
+				}) : void 0
+			});
+			return P.map((t) => /* @__PURE__ */ h(a, {
+				value: t.id,
+				children: t.id === F ? e : null
+			}, t.id));
+		})()]
+	});
+}
+//#endregion
+export { x as BillsScreen, x as default };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index43.js

@@ -1,2 +1,10 @@
-import "./index39.js";
-import "./index41.js";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index43.js
+var e = {
+	collapse: "Collapse upload status",
+	expand: "Expand upload status",
+	close: "Close upload status",
+	statusLabel: (e) => e === "uploading" ? "Uploading" : e === "ready" ? "Ready" : "Failed",
+	openItem: (e) => `Open ${e}`
+};
+//#endregion
+export { e as BILL_UPLOAD_STATUS_TRAY_LABELS_EN };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index44.js

@@ -1,7 +1,8 @@
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index44.js
 var e = {
-	message: "Data extracted automatically — please review all details to make sure they match",
-	dismiss: "Dismiss this notice"
+	uploading: "ttw:text-muted-foreground",
+	ready: "ttw:text-emerald-600",
+	failed: "ttw:text-destructive"
 };
 //#endregion
-export { e as EXTRACTION_NOTICE_LABELS_EN };
+export { e as UPLOAD_ITEM_ICON_TONE };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index45.js

@@ -1,30 +1,93 @@
-import { EXTRACTION_NOTICE_LABELS_EN as e } from "./index44.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Info as r, X as i } from "lucide-react";
+import { cn as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { BILL_UPLOAD_STATUS_TRAY_LABELS_EN as t } from "./index43.js";
+import { UPLOAD_ITEM_ICON_TONE as n } from "./index44.js";
+import { useId as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { CheckCircle2 as s, ChevronDown as c, ChevronRight as l, ChevronUp as u, Loader2 as d, X as f, XCircle as p } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index45.js
-function a({ onDismiss: a, testId: o, labels: s }) {
-	let c = {
-		...e,
-		...s
+function m({ status: t }) {
+	let r = e("ttw:size-4", n[t]);
+	return t === "uploading" ? /* @__PURE__ */ a(d, {
+		"aria-hidden": !0,
+		className: e(r, "ttw:animate-spin")
+	}) : a(t === "ready" ? s : p, {
+		"aria-hidden": !0,
+		className: r
+	});
+}
+function h({ item: t, labels: n }) {
+	let s = r(), c = /* @__PURE__ */ o(i, { children: [
+		/* @__PURE__ */ a(m, { status: t.status }),
+		/* @__PURE__ */ a("span", {
+			id: s,
+			className: "ttw:sr-only",
+			children: n.statusLabel(t.status)
+		}),
+		/* @__PURE__ */ a("span", {
+			className: "ttw:flex-1 ttw:truncate ttw:text-left ttw:text-sm ttw:text-foreground",
+			children: t.fileName
+		}),
+		t.onOpen ? /* @__PURE__ */ a(l, {
+			"aria-hidden": !0,
+			className: "ttw:size-4"
+		}) : null
+	] }), u = "ttw:flex ttw:items-center ttw:gap-3 ttw:px-4 ttw:py-2.5";
+	return t.onOpen ? /* @__PURE__ */ a("button", {
+		type: "button",
+		onClick: t.onOpen,
+		"aria-describedby": s,
+		"aria-label": n.openItem(t.fileName),
+		className: e(u, "ttw:w-full ttw:text-muted-foreground ttw:transition-colors ttw:hover:bg-muted/50 ttw:hover:text-foreground"),
+		children: c
+	}) : /* @__PURE__ */ a("div", {
+		"aria-describedby": s,
+		className: u,
+		children: c
+	});
+}
+function g({ sections: e, summaryLabel: n, collapsed: r, onToggleCollapsed: i, onClose: s, testId: l, labels: d }) {
+	let p = {
+		...t,
+		...d
 	};
-	return /* @__PURE__ */ n("div", {
-		className: "ttw:flex ttw:items-start ttw:gap-3 ttw:rounded-md ttw:border ttw:border-primary/30 ttw:bg-primary/5 ttw:px-3 ttw:py-2.5",
-		"data-testid": o,
-		children: [
-			/* @__PURE__ */ t(r, { className: "ttw:mt-0.5 ttw:size-4 ttw:shrink-0 ttw:text-primary" }),
-			/* @__PURE__ */ t("p", {
-				className: "ttw:flex-1 ttw:text-sm ttw:text-foreground",
-				children: c.message
-			}),
-			/* @__PURE__ */ t("button", {
-				type: "button",
-				onClick: a,
-				"aria-label": c.dismiss,
-				className: "ttw:shrink-0 ttw:text-muted-foreground ttw:hover:text-foreground",
-				children: /* @__PURE__ */ t(i, { className: "ttw:size-4" })
-			})
-		]
+	return /* @__PURE__ */ o("div", {
+		className: "ttw:fixed ttw:right-4 ttw:bottom-4 ttw:z-50 ttw:w-96 ttw:max-w-[calc(100vw-2rem)] ttw:overflow-hidden ttw:rounded-lg ttw:border ttw:border-border ttw:bg-card",
+		"data-testid": l,
+		children: [/* @__PURE__ */ o("div", {
+			className: "ttw:flex ttw:items-center ttw:gap-2 ttw:border-b ttw:border-border ttw:bg-muted/40 ttw:px-4 ttw:py-3",
+			children: [
+				/* @__PURE__ */ a("span", {
+					"aria-live": "polite",
+					className: "ttw:flex-1 ttw:text-base ttw:font-semibold ttw:text-foreground",
+					children: n
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: i,
+					"aria-label": r ? p.expand : p.collapse,
+					"aria-expanded": !r,
+					className: "ttw:text-muted-foreground ttw:hover:text-foreground",
+					children: a(r ? u : c, { className: "ttw:size-4" })
+				}),
+				/* @__PURE__ */ a("button", {
+					type: "button",
+					onClick: s,
+					"aria-label": p.close,
+					className: "ttw:text-muted-foreground ttw:hover:text-foreground",
+					children: /* @__PURE__ */ a(f, { className: "ttw:size-4" })
+				})
+			]
+		}), r ? null : /* @__PURE__ */ a("div", {
+			className: "ttw:max-h-96 ttw:overflow-y-auto",
+			children: e.map((e) => /* @__PURE__ */ o("div", { children: [e.caption ? /* @__PURE__ */ a("p", {
+				className: "ttw:px-4 ttw:pt-3 ttw:pb-1 ttw:text-xs ttw:text-muted-foreground",
+				children: e.caption
+			}) : null, e.items.map((e) => /* @__PURE__ */ a(h, {
+				item: e,
+				labels: p
+			}, e.id))] }, e.id))
+		})]
 	});
 }
 //#endregion
-export { a as ExtractionNotice, a as default };
+export { g as BillUploadStatusTray, g as default };