@tesouro/embedded-components-react 0.2.281 → 0.2.283

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/feature/dist/index8.js

@@ -9,126 +9,143 @@ import { useReplacePayableLineItemsMutation as n } from "../../data-access/dist/
 import { useCreatePayableMutation as r, useSubmitPayableForApprovalMutation as i, useUpdatePayableMutation as a, useValidatePayableMutation as o } from "../../data-access/dist/index7.js";
 import "../../data-access/dist/index.js";
 import { mapBillFormToPayload as s, mapLineItemsToPayload as c } from "./index6.js";
-import { validateBillTotals as l, validateLineItems as u } from "./index7.js";
-import { useCallback as d, useRef as f, useState as p } from "react";
+import { validateBillCompleteness as l, validateBillTotals as u, validateLineItems as d } from "./index7.js";
+import { useCallback as f, useRef as p, useState as m } from "react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/feature/dist/index8.js
-var m = {
+var h = {
 	document_id: "invoiceNumber",
 	issued_at: "invoiceDate",
-	due_date: "dueDate"
+	due_date: "dueDate",
+	counterpart_id: "vendor"
 };
-function h(e) {
+function g(e) {
 	return e.type === "type_error.none.not_allowed" || e.msg === "none is not an allowed value";
 }
-function g(e, n = t) {
+function _(e, n = t) {
 	let r = {}, i = [];
 	for (let t of e) {
-		let e = t.loc[0] ?? n.unknownValidationField, a = m[e], o = h(t) ? n.requiredField : t.msg;
+		let e = t.loc[0] ?? n.unknownValidationField, a = h[e], o = g(t) ? n.requiredField : t.msg;
 		a ? r[a] = o : i.push(n.unmappedValidationError(e, o));
 	}
 	return i.length && (r.form = i.join(" ")), r;
 }
-function _({ payableId: m, form: h, counterpartId: _, onSaved: v, onPayableCreated: y, onDraftSaved: b, onFinalized: x, labels: S }) {
-	let C = {
+function v(e, t) {
+	if (!e && !t) return;
+	let n = {}, r = /* @__PURE__ */ new Set([...Object.keys(e ?? {}), ...Object.keys(t ?? {})]);
+	for (let i of r) n[i] = {
+		...e?.[i],
+		...t?.[i]
+	};
+	return n;
+}
+function y({ payableId: h, form: g, counterpartId: y, onSaved: b, onPayableCreated: x, onDraftSaved: S, onFinalized: C, labels: w }) {
+	let T = {
 		...t,
-		...S
-	}, [w, T] = p(), E = m ?? w, [D, O] = p(), k = f(!1), A = r(), j = a(), M = n(), N = o(), P = i(), F = d(() => {
-		let e = u(h.lineItems, C), t = l(h.discount, h.tax, h.totalOverride, C);
-		return h.setLineItemErrors(e), !e && !t || (h.setErrors(e ? { form: C.lineItemsNeedAttention } : t), !1);
-	}, [h, C]), I = d(async () => {
+		...w
+	}, [E, D] = m(), O = h ?? E, [k, A] = m(), j = p(!1), M = r(), N = a(), P = n(), F = o(), I = i(), L = f(() => {
+		let t = d(g.lineItems, T), n = u(g.discount, g.tax, g.totalOverride, T);
+		return g.setLineItemErrors(t), !t && !n || (t ? (g.setErrors(void 0), e.error(T.lineItemsNeedAttention)) : g.setErrors(n), !1);
+	}, [g, T]), R = f(async () => {
 		let e = s({
-			values: h.values,
-			counterpartId: _,
-			editedTotals: h.isTotalsDirty ? {
-				discount: h.discount,
-				tax: h.tax,
-				total: h.totalOverride
+			values: g.values,
+			counterpartId: y,
+			editedTotals: g.isTotalsDirty ? {
+				discount: g.discount,
+				tax: g.tax,
+				total: g.totalOverride
 			} : void 0
-		}), t = E;
-		if (t ? await j.mutateAsync({
+		}), t = O;
+		if (t ? await N.mutateAsync({
 			path: { payable_id: t },
 			body: e
-		}) : (t = (await A.mutateAsync({ body: e }))?.id, t && (T(t), y?.(t))), !t) throw Error("Payable was created without an id");
-		return await M.mutateAsync({
+		}) : (t = (await M.mutateAsync({ body: e }))?.id, t && (D(t), x?.(t))), !t) throw Error("Payable was created without an id");
+		return await P.mutateAsync({
 			path: { payable_id: t },
-			body: { data: c(h.lineItems) }
+			body: { data: c(g.lineItems) }
 		}), t;
 	}, [
-		_,
-		A,
-		h.discount,
-		h.isTotalsDirty,
-		h.lineItems,
-		h.tax,
-		h.totalOverride,
-		h.values,
 		y,
-		E,
 		M,
-		j
+		g.discount,
+		g.isTotalsDirty,
+		g.lineItems,
+		g.tax,
+		g.totalOverride,
+		g.values,
+		x,
+		O,
+		P,
+		N
 	]);
 	return {
-		saveDraft: d(async () => {
-			if (!k.current && F()) {
-				k.current = !0, O("draft");
+		saveDraft: f(async () => {
+			if (!j.current && L()) {
+				j.current = !0, A("draft");
 				try {
-					let t = await I();
-					h.setErrors(void 0), v?.(t), b?.(t), e.success(C.draftSaved);
+					let t = await R();
+					g.setErrors(void 0), b?.(t), S?.(t), e.success(T.draftSaved);
 				} catch {
-					h.setErrors({ form: C.saveFailed });
+					g.setErrors({ form: T.saveFailed });
 				} finally {
-					O(void 0), k.current = !1;
+					A(void 0), j.current = !1;
 				}
 			}
 		}, [
-			h,
-			F,
-			C.draftSaved,
-			C.saveFailed,
+			g,
+			L,
+			T.draftSaved,
+			T.saveFailed,
+			S,
 			b,
-			v,
-			I
+			R
 		]),
-		finalize: d(async () => {
-			if (!k.current && F()) {
-				k.current = !0, O("finalize");
+		finalize: f(async () => {
+			if (j.current) return;
+			let t = d(g.lineItems, T), n = u(g.discount, g.tax, g.totalOverride, T), { formErrors: r, lineItemErrors: i } = l(g.values, y, g.lineItems, T), a = v(i, t);
+			g.setLineItemErrors(a);
+			let o = {
+				...r,
+				...n
+			};
+			if (g.setErrors(Object.keys(o).length ? o : void 0), t && e.error(T.lineItemsNeedAttention), !(a || Object.keys(o).length)) {
+				j.current = !0, A("finalize");
 				try {
 					let t;
 					try {
-						t = await I();
+						t = await R();
 					} catch {
-						h.setErrors({ form: C.saveFailed });
+						g.setErrors({ form: T.saveFailed });
 						return;
 					}
-					v?.(t);
+					b?.(t);
 					try {
-						let n = await N.mutateAsync({ path: { payable_id: t } });
+						let n = await F.mutateAsync({ path: { payable_id: t } });
 						if (n.validation_errors.length) {
-							h.setErrors(g(n.validation_errors, C));
+							g.setErrors(_(n.validation_errors, T));
 							return;
 						}
-						await P.mutateAsync({ path: { payable_id: t } }), h.setErrors(void 0), x?.(t), e.success(C.billFinalized);
+						await I.mutateAsync({ path: { payable_id: t } }), g.setErrors(void 0), C?.(t), e.success(T.billFinalized);
 					} catch {
-						h.setErrors({ form: C.finalizeFailed });
+						g.setErrors({ form: T.finalizeFailed });
 					}
 				} finally {
-					O(void 0), k.current = !1;
+					A(void 0), j.current = !1;
 				}
 			}
 		}, [
-			h,
-			F,
+			y,
+			g,
+			T,
 			C,
-			x,
-			v,
+			b,
+			R,
 			I,
-			P,
-			N
+			F
 		]),
-		payableId: E,
-		isSavingDraft: D === "draft",
-		isFinalizing: D === "finalize"
+		payableId: O,
+		isSavingDraft: k === "draft",
+		isFinalizing: k === "finalize"
 	};
 }
 //#endregion
-export { g as mapValidationErrorsToForm, _ as useBillCreateController };
+export { _ as mapValidationErrorsToForm, y as useBillCreateController };

package/dist/libs/tesouro-embedded-components-react/bill-pay-widget/feature/dist/index9.js

@@ -30,7 +30,8 @@ function n({ payable: n, lineItems: r }) {
 		values: i,
 		lineItems: a.length ? a : [e()],
 		discount: t(n.discount),
-		tax: t(n.tax_amount)
+		tax: t(n.tax_amount),
+		total: t(n.total_amount)
 	};
 }
 //#endregion

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

@@ -28,16 +28,16 @@ import "./index32.js";
 import "./index33.js";
 import "./index34.js";
 import "./index35.js";
-import "./index36.js";
-import "./index37.js";
-import { BillsScreen as r } from "./index38.js";
+import { BILL_DETAILS_SHEET_LABELS_EN as r } from "./index36.js";
+import { BillDetailsSheet as i } from "./index37.js";
+import { BillsScreen as a } from "./index38.js";
 import "./index39.js";
-import { BillUploadStatusTray as i } from "./index41.js";
+import { BillUploadStatusTray as o } from "./index41.js";
 import "./index43.js";
 import "./index44.js";
-import { ExtractionNotice as a } from "./index45.js";
+import { ExtractionNotice as s } from "./index45.js";
 import "./index46.js";
 import "./index47.js";
-import { SourceDocumentPanel as o } from "./index48.js";
+import { SourceDocumentPanel as c } from "./index48.js";
 import "./index49.js";
-export { e as AddBillDialog, t as BillCreateScreen, n as BillPayWidgetUi, i as BillUploadStatusTray, r as BillsScreen, a as ExtractionNotice, o as SourceDocumentPanel };
+export { e as AddBillDialog, r as BILL_DETAILS_SHEET_LABELS_EN, t as BillCreateScreen, i as BillDetailsSheet, n as BillPayWidgetUi, o as BillUploadStatusTray, a as BillsScreen, s as ExtractionNotice, c as SourceDocumentPanel };

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

@@ -3,44 +3,45 @@ import { BILL_FORM_FIELDS_LABELS_EN as n } from "./index12.js";
 import { useId as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index13.js
-function o({ values: o, errors: s, onChange: c, testId: l, labels: u }) {
-	let d = {
+function o({ values: o, errors: s, onChange: c, disabled: l, testId: u, labels: d }) {
+	let f = {
 		...n,
-		...u
-	}, f = r(), p = (n, r, l) => {
-		let u = `${f}-${n}`, d = `${u}-error`, p = s?.[n];
+		...d
+	}, p = r(), m = (n, r, u) => {
+		let d = `${p}-${n}`, f = `${d}-error`, m = s?.[n];
 		return /* @__PURE__ */ a("div", {
 			className: "ttw:flex ttw:flex-col ttw:gap-1.5",
 			children: [
 				/* @__PURE__ */ i(t, {
-					htmlFor: u,
+					htmlFor: d,
 					children: r
 				}),
 				/* @__PURE__ */ i(e, {
-					id: u,
-					type: l,
+					id: d,
+					type: u,
 					value: o[n],
-					"aria-invalid": p ? !0 : void 0,
-					"aria-describedby": p ? d : void 0,
+					disabled: l,
+					"aria-invalid": m ? !0 : void 0,
+					"aria-describedby": m ? f : void 0,
 					onChange: (e) => c({ [n]: e.target.value })
 				}),
-				p ? /* @__PURE__ */ i("p", {
-					id: d,
+				m ? /* @__PURE__ */ i("p", {
+					id: f,
 					className: "ttw:text-sm ttw:text-destructive",
-					children: p
+					children: m
 				}) : null
 			]
 		});
 	};
 	return /* @__PURE__ */ a("div", {
 		className: "ttw:flex ttw:flex-col ttw:gap-4",
-		"data-testid": l,
+		"data-testid": u,
 		children: [/* @__PURE__ */ a("div", {
 			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [p("invoiceDate", d.invoiceDate, "date"), p("dueDate", d.dueDate, "date")]
+			children: [m("invoiceDate", f.invoiceDate, "date"), m("dueDate", f.dueDate, "date")]
 		}), /* @__PURE__ */ a("div", {
 			className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
-			children: [p("invoiceNumber", d.invoiceNumber), p("poNumber", d.poNumber)]
+			children: [m("invoiceNumber", f.invoiceNumber), m("poNumber", f.poNumber)]
 		})]
 	});
 }

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

@@ -86,6 +86,7 @@ function y({ items: y, glCodeOptions: b, discount: x, onDiscountChange: S, tax:
 												onValueChange: (e) => d.onChange({ glCode: e }),
 												children: [/* @__PURE__ */ m(l, {
 													id: `${p}-gl-code`,
+													className: "ttw:w-full",
 													"aria-invalid": S("glCode") ? !0 : void 0,
 													"aria-describedby": S("glCode") ? x("glCode") : void 0,
 													children: /* @__PURE__ */ m(u, { placeholder: M.glCodePlaceholder })

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

@@ -1,6 +1,6 @@
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index21.js
 var e = {
-	fieldLabel: "Vendor",
+	fieldLabel: "Select or add vendor",
 	placeholder: "Search",
 	loading: "Searching vendors...",
 	emptyResults: "No vendors found",

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

@@ -1,131 +1,96 @@
-import { Input as e, Skeleton as t, cn as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as r } from "./index21.js";
-import { useId as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Plus as c, Search as l } from "lucide-react";
+import { Command as e, CommandGroup as t, CommandInput as n, CommandItem as r, CommandList as i, CommandSeparator as a, Label as o, Popover as s, PopoverContent as c, PopoverTrigger as l, Skeleton as u, cn as d } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as f } from "./index21.js";
+import { useId as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Plus as _, Search as v } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index22.js
-var u = 5, d = "ttw:min-h-44";
-function f({ query: f, onQueryChange: p, results: m, isLoading: h, onAddVendor: g, testId: _, labels: v }) {
-	let y = {
-		...r,
-		...v
-	}, b = i(), x = i(), [S, C] = a(!1), [w, T] = a(-1), E = h ? 0 : m.length + 1, D = S && w >= 0 ? `${x}-option-${w}` : void 0, O = (e) => {
-		C(!1), T(-1), e();
-	}, k = () => {
-		C(!1), T(-1), g();
-	}, A = () => {
-		C(!1), T(-1);
-	};
-	return /* @__PURE__ */ s("div", {
+var y = 5, b = "ttw:min-h-44";
+function x({ query: x, onQueryChange: S, results: C, isLoading: w, onAddVendor: T, testId: E, labels: D }) {
+	let O = {
+		...f,
+		...D
+	}, k = p(), [A, j] = m(!1);
+	return /* @__PURE__ */ g("div", {
 		className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-		"data-testid": _,
-		children: [/* @__PURE__ */ o("label", {
-			htmlFor: b,
-			className: "ttw:text-sm ttw:font-medium",
-			children: y.fieldLabel
-		}), /* @__PURE__ */ s("div", {
-			className: "ttw:relative",
-			children: [/* @__PURE__ */ s("div", {
-				className: "ttw:flex ttw:h-10 ttw:items-center ttw:gap-2 ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3",
-				children: [/* @__PURE__ */ o(l, {
-					"aria-hidden": !0,
-					className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
-				}), /* @__PURE__ */ o(e, {
-					id: b,
-					value: f,
-					onChange: (e) => {
-						C(!0), T(-1), p(e.target.value);
-					},
-					onFocus: () => C(!0),
-					onBlur: A,
-					onKeyDown: (e) => {
-						if (e.key === "Escape") {
-							A();
-							return;
-						}
-						if (E) {
-							if (e.key === "ArrowDown") {
-								e.preventDefault(), C(!0), T((e) => e >= E - 1 ? 0 : e + 1);
-								return;
-							}
-							if (e.key === "ArrowUp") {
-								e.preventDefault(), C(!0), T((e) => e <= 0 ? E - 1 : e - 1);
-								return;
-							}
-							e.key === "Enter" && S && w >= 0 && (e.preventDefault(), w < m.length ? O(m[w].onSelect) : k());
-						}
-					},
-					placeholder: y.placeholder,
+		"data-testid": E,
+		children: [/* @__PURE__ */ h(o, {
+			htmlFor: k,
+			children: O.fieldLabel
+		}), /* @__PURE__ */ g(s, {
+			open: A,
+			onOpenChange: j,
+			children: [/* @__PURE__ */ h(l, {
+				asChild: !0,
+				children: /* @__PURE__ */ g("button", {
+					type: "button",
+					id: k,
 					role: "combobox",
-					"aria-autocomplete": "list",
-					"aria-expanded": S,
-					"aria-controls": S ? x : void 0,
-					"aria-activedescendant": D,
-					className: "ttw:h-auto ttw:border-0 ttw:p-0 ttw:shadow-none ttw:ring-0 ttw:focus-visible:ring-0"
-				})]
-			}), S ? /* @__PURE__ */ s("div", {
-				id: x,
-				role: "listbox",
-				className: "ttw:absolute ttw:top-full ttw:left-0 ttw:z-10 ttw:mt-1 ttw:max-h-72 ttw:w-full ttw:overflow-y-auto ttw:rounded-md ttw:border ttw:border-border ttw:bg-popover ttw:p-1 ttw:shadow-md",
-				children: [
-					h ? /* @__PURE__ */ s("div", {
-						className: n("ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2", d),
-						"aria-busy": "true",
-						children: [/* @__PURE__ */ o("span", {
-							className: "ttw:sr-only",
-							children: y.loading
-						}), Array.from({ length: u }).map((e, n) => /* @__PURE__ */ s("div", {
-							className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
-							children: [/* @__PURE__ */ o(t, {
-								height: 14,
-								width: "55%"
-							}), /* @__PURE__ */ o(t, {
-								height: 14,
-								width: "30%"
-							})]
-						}, n))]
-					}) : m.length === 0 && f ? /* @__PURE__ */ o("div", {
-						className: n("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", d),
-						children: y.emptyResults
-					}) : m.length > 0 ? /* @__PURE__ */ o("div", {
-						role: "group",
-						children: m.map((e, t) => /* @__PURE__ */ s("button", {
-							id: `${x}-option-${t}`,
-							type: "button",
-							role: "option",
-							"aria-selected": w === t,
-							onMouseDown: (e) => e.preventDefault(),
-							onMouseEnter: () => T(t),
-							onClick: () => O(e.onSelect),
-							className: n("ttw:flex ttw:w-full ttw:items-center ttw:justify-between ttw:gap-4 ttw:rounded-sm ttw:px-2 ttw:py-1.5 ttw:text-left ttw:text-sm ttw:outline-hidden", w === t ? "ttw:bg-accent ttw:text-accent-foreground" : "ttw:text-popover-foreground"),
-							children: [/* @__PURE__ */ o("span", {
-								className: "ttw:text-foreground",
-								children: e.name
-							}), /* @__PURE__ */ o("span", {
-								className: "ttw:text-muted-foreground",
-								children: e.email
-							})]
-						}, `${e.name}:${e.email}:${t}`))
-					}) : null,
-					h || m.length > 0 || f ? /* @__PURE__ */ o("div", { className: "ttw:-mx-1 ttw:my-1 ttw:h-px ttw:bg-border" }) : null,
-					/* @__PURE__ */ o("div", {
-						role: "group",
-						children: /* @__PURE__ */ s("button", {
-							id: `${x}-option-${m.length}`,
-							type: "button",
-							role: "option",
-							"aria-selected": w === m.length,
-							onMouseDown: (e) => e.preventDefault(),
-							onMouseEnter: () => T(m.length),
-							onClick: k,
-							className: n("ttw:flex ttw:w-full ttw:items-center ttw:gap-2 ttw:rounded-sm ttw:px-2 ttw:py-1.5 ttw:text-left ttw:text-sm ttw:text-primary ttw:outline-hidden", w === m.length ? "ttw:bg-accent" : "ttw:bg-transparent"),
-							children: [/* @__PURE__ */ o(c, { className: "ttw:size-4 ttw:text-primary" }), y.addVendorAction]
-						})
-					})
-				]
-			}) : null]
+					"aria-expanded": A,
+					className: "ttw:flex ttw:h-10 ttw:w-full ttw:items-center ttw:gap-2 ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3 ttw:text-left ttw:text-sm ttw:shadow-xs ttw:outline-none ttw:focus-visible:border-ring ttw:focus-visible:ring-[3px] ttw:focus-visible:ring-ring/50",
+					children: [/* @__PURE__ */ h(v, {
+						"aria-hidden": !0,
+						className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
+					}), /* @__PURE__ */ h("span", {
+						className: d("ttw:min-w-0 ttw:flex-1 ttw:truncate", !x && "ttw:text-muted-foreground"),
+						children: x || O.placeholder
+					})]
+				})
+			}), /* @__PURE__ */ h(c, {
+				align: "start",
+				className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:p-0",
+				children: /* @__PURE__ */ g(e, {
+					shouldFilter: !1,
+					children: [/* @__PURE__ */ h(n, {
+						value: x,
+						onValueChange: S,
+						placeholder: O.placeholder,
+						"aria-label": O.placeholder
+					}), /* @__PURE__ */ g(i, {
+						className: d("ttw:max-h-72", b),
+						children: [
+							w ? /* @__PURE__ */ g("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2",
+								"aria-busy": "true",
+								children: [/* @__PURE__ */ h("span", {
+									className: "ttw:sr-only",
+									children: O.loading
+								}), Array.from({ length: y }).map((e, t) => /* @__PURE__ */ g("div", {
+									className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
+									children: [/* @__PURE__ */ h(u, {
+										height: 14,
+										width: "55%"
+									}), /* @__PURE__ */ h(u, {
+										height: 14,
+										width: "30%"
+									})]
+								}, t))]
+							}) : C.length === 0 && x ? /* @__PURE__ */ h("div", {
+								className: d("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", b),
+								children: O.emptyResults
+							}) : C.length > 0 ? /* @__PURE__ */ h(t, { children: C.map((e, t) => /* @__PURE__ */ g(r, {
+								value: `${e.name} ${e.email} ${t}`,
+								onSelect: () => e.onSelect(),
+								children: [/* @__PURE__ */ h("span", {
+									className: "ttw:text-foreground",
+									children: e.name
+								}), /* @__PURE__ */ h("span", {
+									className: "ttw:ml-auto ttw:text-muted-foreground",
+									children: e.email
+								})]
+							}, `${e.name}:${e.email}:${t}`)) }) : null,
+							w || C.length > 0 || x ? /* @__PURE__ */ h(a, {}) : null,
+							/* @__PURE__ */ g(r, {
+								value: "__add_vendor__",
+								onSelect: T,
+								className: "ttw:sticky ttw:bottom-0 ttw:bg-popover ttw:text-primary",
+								children: [/* @__PURE__ */ h(_, { className: "ttw:size-4 ttw:text-primary" }), O.addVendorAction]
+							})
+						]
+					})]
+				})
+			})]
 		})]
 	});
 }
 //#endregion
-export { f as VendorSearchCombobox, f as default };
+export { x as VendorSearchCombobox, x as default };

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

@@ -6,7 +6,8 @@ import "./index23.js";
 var n = {
 	heading: "Who are you paying?",
 	summaryCard: e,
-	search: t
+	search: t,
+	noVendorPlaceholder: "No vendor selected"
 };
 //#endregion
 export { n as VENDOR_SECTION_LABELS_EN };

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

@@ -1,48 +1,53 @@
 import { Typography as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { InlineErrorAlert as t } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
-import "../../../shared/ui/dist/index.js";
-import { VendorSummaryCard as n } from "./index19.js";
+import { VendorSummaryCard as t } from "./index19.js";
 import "./index20.js";
-import { VendorSearchCombobox as r } from "./index22.js";
+import { VendorSearchCombobox as n } from "./index22.js";
 import "./index23.js";
-import { VENDOR_SECTION_LABELS_EN as i } from "./index24.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { VENDOR_SECTION_LABELS_EN as r } from "./index24.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index25.js
-function s(s) {
-	let { onEdit: c, onClear: l, error: u, testId: d, labels: f } = s, p = {
-		...i,
-		...f,
+function o(o) {
+	let { onEdit: s, onClear: c, error: l, testId: u, labels: d, disabled: f } = o, p = {
+		...r,
+		...d,
 		summaryCard: {
-			...i.summaryCard,
-			...f?.summaryCard
+			...r.summaryCard,
+			...d?.summaryCard
 		},
 		search: {
-			...i.search,
-			...f?.search
+			...r.search,
+			...d?.search
 		}
 	};
-	return /* @__PURE__ */ o("section", {
+	return /* @__PURE__ */ a("section", {
 		className: "ttw:flex ttw:flex-col ttw:gap-3",
-		"data-testid": d,
+		"data-testid": u,
 		children: [
-			/* @__PURE__ */ a(e, {
+			/* @__PURE__ */ i(e, {
 				component: "h2",
 				variant: "h6",
 				className: "ttw:font-semibold",
 				children: p.heading
 			}),
-			u ? /* @__PURE__ */ a(t, { children: u }) : null,
-			s.mode === "resolved" ? /* @__PURE__ */ a(n, {
-				summary: s.summary,
-				onEdit: c,
-				onClear: l,
+			o.mode === "resolved" ? /* @__PURE__ */ i(t, {
+				summary: o.summary,
+				onEdit: s,
+				onClear: c,
 				labels: p.summaryCard
-			}) : s.mode === "selecting" ? /* @__PURE__ */ a(r, {
-				...s.search,
+			}) : f ? /* @__PURE__ */ i(e, {
+				variant: "body2",
+				className: "ttw:text-muted-foreground",
+				children: p.noVendorPlaceholder
+			}) : o.mode === "selecting" ? /* @__PURE__ */ i(n, {
+				...o.search,
 				labels: p.search
-			}) : s.newVendorForm
+			}) : o.newVendorForm,
+			l ? /* @__PURE__ */ i("p", {
+				className: "ttw:text-sm ttw:text-destructive",
+				children: l
+			}) : null
 		]
 	});
 }
 //#endregion
-export { s as VendorSection, s as default };
+export { o as VendorSection, o as default };