@tesouro/embedded-components-react 0.3.23 → 0.3.25

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

@@ -1,120 +1,286 @@
-import { Button as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { AchFieldGroup as t } from "../../../shared/counterpart-management/ui/dist/index5.js";
-import "../../../shared/counterpart-management/ui/dist/index.js";
-import { VENDOR_SUMMARY_CARD_LABELS_EN as n } from "./index31.js";
-import { useState as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Eye as s, EyeOff as c, Pencil as l, Plus as u, X as d } from "lucide-react";
+import { Button as e, Input as t, InputGroup as n, InputGroupAddon as r, InputGroupInput as i, Label as a, Select as o, SelectContent as s, SelectItem as c, SelectTrigger as l, SelectValue as u, Typography as d } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { LINE_ITEMS_SECTION_LABELS_EN as f } from "./index31.js";
+import { useId as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Minus as g, Plus as _, Trash2 as v } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index32.js
-function f({ field: e, labels: t }) {
-	let [n, i] = r(!1), l = !!e.maskedValue, u = l && !n ? e.maskedValue : e.value;
-	return /* @__PURE__ */ o("div", {
-		className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm",
+function y({ items: y, glCodeOptions: b, discount: x, onDiscountChange: S, tax: C, onTaxChange: w, total: T, onTotalChange: E, onAddLineItem: D, errors: O, disabled: k, testId: A, labels: j }) {
+	let M = {
+		...f,
+		...j
+	}, N = p(), P = y.length > 1;
+	return /* @__PURE__ */ h("section", {
+		className: "ttw:flex ttw:flex-col ttw:gap-3",
+		"data-testid": A,
 		children: [
-			/* @__PURE__ */ a("span", {
-				className: "ttw:w-44 ttw:shrink-0 ttw:text-muted-foreground",
-				children: e.label
+			/* @__PURE__ */ m(d, {
+				component: "h2",
+				variant: "h6",
+				className: "ttw:font-semibold",
+				children: M.heading
 			}),
-			/* @__PURE__ */ a("span", {
-				className: "ttw:text-foreground",
-				children: u
+			/* @__PURE__ */ m("p", {
+				className: "ttw:text-sm ttw:text-muted-foreground",
+				children: M.helpText
+			}),
+			y.map((d, f) => {
+				let p = `${N}-${d.id}`, y = O?.[d.id], x = (e) => `${p}-${e}-error`, S = (e) => y?.[e], C = (e) => {
+					let t = S(e);
+					return t ? /* @__PURE__ */ m("p", {
+						id: x(e),
+						className: "ttw:text-sm ttw:text-destructive",
+						children: t
+					}) : null;
+				};
+				return /* @__PURE__ */ m("div", {
+					className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
+					children: /* @__PURE__ */ h("div", {
+						className: "ttw:@container/line-item ttw:flex ttw:flex-col ttw:gap-3",
+						children: [
+							/* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2",
+								children: [/* @__PURE__ */ h("div", {
+									className: "ttw:flex ttw:items-center ttw:gap-2",
+									children: [P ? /* @__PURE__ */ h("span", {
+										className: "ttw:text-sm ttw:text-muted-foreground",
+										children: [f + 1, "."]
+									}) : null, /* @__PURE__ */ m(a, {
+										htmlFor: `${p}-description`,
+										children: M.description
+									})]
+								}), P ? /* @__PURE__ */ m(e, {
+									type: "button",
+									variant: "ghost",
+									size: "icon",
+									disabled: k,
+									"aria-label": M.removeLineItem(f + 1),
+									onClick: d.onRemove,
+									children: /* @__PURE__ */ m(v, { className: "ttw:size-4" })
+								}) : null]
+							}),
+							/* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+								children: [/* @__PURE__ */ m(t, {
+									id: `${p}-description`,
+									placeholder: M.descriptionPlaceholder,
+									value: d.description,
+									disabled: k,
+									"aria-invalid": S("description") ? !0 : void 0,
+									"aria-describedby": S("description") ? x("description") : void 0,
+									onChange: (e) => d.onChange({ description: e.target.value })
+								}), C("description")]
+							}),
+							/* @__PURE__ */ h("div", {
+								className: "ttw:grid ttw:grid-cols-3 ttw:@lg/line-item:grid-cols-6 ttw:gap-3",
+								children: [
+									/* @__PURE__ */ h("div", {
+										className: "ttw:col-span-3 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ m(a, {
+												htmlFor: `${p}-gl-code`,
+												children: M.glCode
+											}),
+											/* @__PURE__ */ h(o, {
+												value: d.glCode,
+												disabled: k,
+												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 })
+												}), /* @__PURE__ */ m(s, { children: b.map((e) => /* @__PURE__ */ m(c, {
+													value: e.value,
+													children: e.label
+												}, e.value)) })]
+											}),
+											C("glCode")
+										]
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "ttw:col-span-1 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ m(a, {
+												htmlFor: `${p}-quantity`,
+												children: M.quantity
+											}),
+											/* @__PURE__ */ h(n, {
+												className: "ttw:h-9 ttw:rounded-md ttw:border ttw:border-input ttw:shadow-xs ttw:has-[:focus-visible]:border-ring ttw:has-[:focus-visible]:ring-[3px] ttw:has-[:focus-visible]:ring-ring/50 ttw:has-[[aria-invalid=true]]:border-destructive ttw:has-[[aria-invalid=true]]:ring-destructive/20",
+												children: [
+													/* @__PURE__ */ m(e, {
+														type: "button",
+														variant: "ghost",
+														size: "icon",
+														className: "ttw:h-full ttw:shrink-0 ttw:rounded-r-none",
+														disabled: k,
+														"aria-label": M.decreaseQuantity(f + 1),
+														onClick: () => d.onQuantityStep(-1),
+														children: /* @__PURE__ */ m(g, { className: "ttw:size-3.5" })
+													}),
+													/* @__PURE__ */ m(i, {
+														id: `${p}-quantity`,
+														inputMode: "decimal",
+														className: "ttw:min-w-0 ttw:flex-1 ttw:rounded-none ttw:border-0 ttw:text-center ttw:shadow-none ttw:focus-visible:ring-0",
+														value: d.quantity,
+														disabled: k,
+														"aria-invalid": S("quantity") ? !0 : void 0,
+														"aria-describedby": S("quantity") ? x("quantity") : void 0,
+														onChange: (e) => d.onChange({ quantity: e.target.value })
+													}),
+													/* @__PURE__ */ m(e, {
+														type: "button",
+														variant: "ghost",
+														size: "icon",
+														className: "ttw:h-full ttw:shrink-0 ttw:rounded-l-none",
+														disabled: k,
+														"aria-label": M.increaseQuantity(f + 1),
+														onClick: () => d.onQuantityStep(1),
+														children: /* @__PURE__ */ m(_, { className: "ttw:size-3.5" })
+													})
+												]
+											}),
+											C("quantity")
+										]
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "ttw:col-span-1 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ m(a, {
+												htmlFor: `${p}-price`,
+												children: M.price
+											}),
+											/* @__PURE__ */ h(n, { children: [/* @__PURE__ */ m(r, {
+												align: "inline-start",
+												"aria-hidden": !0,
+												children: M.currencySymbol
+											}), /* @__PURE__ */ m(i, {
+												id: `${p}-price`,
+												"data-has-start-addon": !0,
+												inputMode: "decimal",
+												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+												value: d.price,
+												disabled: k,
+												"aria-invalid": S("price") ? !0 : void 0,
+												"aria-describedby": S("price") ? x("price") : void 0,
+												onChange: (e) => d.onChange({ price: e.target.value })
+											})] }),
+											C("price")
+										]
+									}),
+									/* @__PURE__ */ h("div", {
+										className: "ttw:col-span-1 ttw:flex ttw:flex-col ttw:gap-1.5",
+										children: [
+											/* @__PURE__ */ m(a, {
+												htmlFor: `${p}-amount`,
+												children: M.amount
+											}),
+											/* @__PURE__ */ h(n, { children: [/* @__PURE__ */ m(r, {
+												align: "inline-start",
+												"aria-hidden": !0,
+												children: M.currencySymbol
+											}), /* @__PURE__ */ m(i, {
+												id: `${p}-amount`,
+												"data-has-start-addon": !0,
+												inputMode: "decimal",
+												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
+												value: d.amount,
+												disabled: k,
+												"aria-invalid": S("amount") ? !0 : void 0,
+												"aria-describedby": S("amount") ? x("amount") : void 0,
+												onChange: (e) => d.onChange({ amount: e.target.value })
+											})] }),
+											C("amount")
+										]
+									})
+								]
+							})
+						]
+					})
+				}, d.id);
 			}),
-			l ? /* @__PURE__ */ a("button", {
+			/* @__PURE__ */ m(e, {
 				type: "button",
-				onClick: () => i((e) => !e),
-				"aria-label": n ? t.hideField(e.label) : t.revealField(e.label),
-				className: "ttw:text-muted-foreground ttw:hover:text-foreground",
-				children: a(n ? c : s, { className: "ttw:size-4" })
-			}) : null
-		]
-	});
-}
-function p({ summary: r, onEdit: s, onClear: c, paymentInstructions: p, testId: m, labels: h }) {
-	let g = {
-		...n,
-		...h,
-		ach: {
-			...n.ach,
-			...h?.ach
-		}
-	};
-	return /* @__PURE__ */ o("div", {
-		className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
-		"data-testid": m,
-		children: [/* @__PURE__ */ o("div", {
-			className: "ttw:flex ttw:items-start ttw:justify-between",
-			children: [/* @__PURE__ */ o("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+				variant: "link",
+				disabled: k,
+				className: "ttw:self-start",
+				onClick: D,
+				children: M.addLineItem
+			}),
+			/* @__PURE__ */ h("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:border-t ttw:border-border ttw:pt-3",
 				children: [
-					/* @__PURE__ */ a("span", {
-						className: "ttw:text-xs ttw:text-muted-foreground",
-						children: g.payToHeading
+					/* @__PURE__ */ h("div", {
+						className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ m(a, {
+							htmlFor: `${N}-discount`,
+							children: M.discount
+						}), /* @__PURE__ */ h(n, {
+							className: "ttw:w-36",
+							children: [/* @__PURE__ */ m(r, {
+								align: "inline-start",
+								"aria-hidden": !0,
+								children: M.currencySymbol
+							}), /* @__PURE__ */ m(i, {
+								id: `${N}-discount`,
+								"data-has-start-addon": !0,
+								inputMode: "decimal",
+								className: "ttw:text-right",
+								value: x,
+								disabled: k,
+								onChange: (e) => S(e.target.value)
+							})]
+						})]
 					}),
-					/* @__PURE__ */ a("span", {
-						className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
-						children: r.name
+					/* @__PURE__ */ h("div", {
+						className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ m(a, {
+							htmlFor: `${N}-tax`,
+							children: M.tax
+						}), /* @__PURE__ */ h(n, {
+							className: "ttw:w-36",
+							children: [/* @__PURE__ */ m(r, {
+								align: "inline-start",
+								"aria-hidden": !0,
+								children: M.currencySymbol
+							}), /* @__PURE__ */ m(i, {
+								id: `${N}-tax`,
+								"data-has-start-addon": !0,
+								inputMode: "decimal",
+								className: "ttw:text-right",
+								value: C,
+								disabled: k,
+								onChange: (e) => w(e.target.value)
+							})]
+						})]
 					}),
-					/* @__PURE__ */ a("span", {
-						className: "ttw:text-sm ttw:text-muted-foreground",
-						children: r.email
+					/* @__PURE__ */ h("div", {
+						className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4",
+						children: [/* @__PURE__ */ m(a, {
+							htmlFor: `${N}-total`,
+							className: "ttw:font-semibold",
+							children: M.totalAmount
+						}), /* @__PURE__ */ h(n, {
+							className: "ttw:w-36",
+							children: [/* @__PURE__ */ m(r, {
+								align: "inline-start",
+								"aria-hidden": !0,
+								children: M.currencySymbol
+							}), /* @__PURE__ */ m(i, {
+								id: `${N}-total`,
+								"data-has-start-addon": !0,
+								inputMode: "decimal",
+								className: "ttw:text-right ttw:font-semibold",
+								value: T,
+								disabled: k,
+								onChange: (e) => E(e.target.value)
+							})]
+						})]
 					})
 				]
-			}), /* @__PURE__ */ o("div", {
-				className: "ttw:flex ttw:items-center ttw:gap-1",
-				children: [s ? /* @__PURE__ */ a(e, {
-					type: "button",
-					variant: "ghost",
-					size: "icon",
-					"aria-label": g.editAction,
-					onClick: s,
-					children: /* @__PURE__ */ a(l, { className: "ttw:size-4" })
-				}) : null, c ? /* @__PURE__ */ a(e, {
-					type: "button",
-					variant: "ghost",
-					size: "icon",
-					"aria-label": g.clearAction,
-					onClick: c,
-					children: /* @__PURE__ */ a(d, { className: "ttw:size-4" })
-				}) : null]
-			})]
-		}), r.fields.length ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("p", {
-			className: "ttw:mt-3 ttw:text-xs ttw:text-muted-foreground",
-			children: r.methodLabel
-		}), /* @__PURE__ */ a("div", {
-			className: "ttw:mt-2 ttw:flex ttw:flex-col ttw:gap-1",
-			children: r.fields.map((e) => /* @__PURE__ */ a(f, {
-				field: e,
-				labels: g
-			}, `${e.label}:${e.value}:${e.maskedValue ?? ""}`))
-		})] }) : /* @__PURE__ */ o("div", {
-			className: "ttw:mt-4 ttw:flex ttw:flex-col ttw:gap-3",
-			children: [/* @__PURE__ */ o("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-1",
-				children: [/* @__PURE__ */ a("p", {
-					className: "ttw:text-sm ttw:font-semibold ttw:text-foreground",
-					children: g.paymentInstructionsHeading
-				}), /* @__PURE__ */ a("p", {
-					className: "ttw:text-sm ttw:text-muted-foreground",
-					children: g.paymentInstructionsDescription
-				})]
-			}), p?.isOpen ? /* @__PURE__ */ a(t, {
-				idPrefix: "vendor-summary-ach",
-				values: p.values,
-				errors: p.errors,
-				onChange: p.onChange,
-				labels: g.ach
-			}) : p ? /* @__PURE__ */ o(e, {
-				type: "button",
-				variant: "link",
-				className: "ttw:w-fit ttw:px-0",
-				onClick: p.onOpen,
-				children: [/* @__PURE__ */ a(u, { className: "ttw:size-4" }), g.addPaymentInstructions]
-			}) : /* @__PURE__ */ a("p", {
-				className: "ttw:text-sm ttw:text-muted-foreground",
-				children: r.methodLabel
-			})]
-		})]
+			})
+		]
 	});
 }
 //#endregion
-export { p as VendorSummaryCard, p as default };
+export { y as LineItemsSection, y as default };

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

@@ -1,12 +1,16 @@
+import { ACH_FIELD_GROUP_LABELS_EN as e } from "../../../shared/counterpart-management/ui/dist/index2.js";
+import "../../../shared/counterpart-management/ui/dist/index.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index34.js
-var e = {
-	fieldLabel: "Select or add vendor",
-	triggerPlaceholder: "Select vendor",
-	placeholder: "Search",
-	searchHint: "Type a vendor name to search",
-	loading: "Searching vendors...",
-	emptyResults: "No vendors found",
-	addVendorAction: "Add vendor"
+var t = {
+	payToHeading: "Pay to",
+	editAction: "Edit",
+	clearAction: "Clear",
+	paymentInstructionsHeading: "Payment instructions",
+	paymentInstructionsDescription: "How and where will the money be sent. This information is required to send a payment.",
+	addPaymentInstructions: "Add payment instructions",
+	ach: e,
+	revealField: (e) => `Show ${e.toLowerCase()}`,
+	hideField: (e) => `Hide ${e.toLowerCase()}`
 };
 //#endregion
-export { e as VENDOR_SEARCH_COMBOBOX_LABELS_EN };
+export { t as VENDOR_SUMMARY_CARD_LABELS_EN };

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

@@ -1,99 +1,120 @@
-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 "./index34.js";
-import { useId as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { ChevronDown as _, Plus as v } from "lucide-react";
+import { Button as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { AchFieldGroup as t } from "../../../shared/counterpart-management/ui/dist/index5.js";
+import "../../../shared/counterpart-management/ui/dist/index.js";
+import { VENDOR_SUMMARY_CARD_LABELS_EN as n } from "./index34.js";
+import { useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Eye as s, EyeOff as c, Pencil as l, Plus as u, X as d } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index35.js
-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": 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", {
+function f({ field: e, labels: t }) {
+	let [n, i] = r(!1), l = !!e.maskedValue, u = l && !n ? e.maskedValue : e.value;
+	return /* @__PURE__ */ o("div", {
+		className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm",
+		children: [
+			/* @__PURE__ */ a("span", {
+				className: "ttw:w-44 ttw:shrink-0 ttw:text-muted-foreground",
+				children: e.label
+			}),
+			/* @__PURE__ */ a("span", {
+				className: "ttw:text-foreground",
+				children: u
+			}),
+			l ? /* @__PURE__ */ a("button", {
+				type: "button",
+				onClick: () => i((e) => !e),
+				"aria-label": n ? t.hideField(e.label) : t.revealField(e.label),
+				className: "ttw:text-muted-foreground ttw:hover:text-foreground",
+				children: a(n ? c : s, { className: "ttw:size-4" })
+			}) : null
+		]
+	});
+}
+function p({ summary: r, onEdit: s, onClear: c, paymentInstructions: p, testId: m, labels: h }) {
+	let g = {
+		...n,
+		...h,
+		ach: {
+			...n.ach,
+			...h?.ach
+		}
+	};
+	return /* @__PURE__ */ o("div", {
+		className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
+		"data-testid": m,
+		children: [/* @__PURE__ */ o("div", {
+			className: "ttw:flex ttw:items-start ttw:justify-between",
+			children: [/* @__PURE__ */ o("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+				children: [
+					/* @__PURE__ */ a("span", {
+						className: "ttw:text-xs ttw:text-muted-foreground",
+						children: g.payToHeading
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+						children: r.name
+					}),
+					/* @__PURE__ */ a("span", {
+						className: "ttw:text-sm ttw:text-muted-foreground",
+						children: r.email
+					})
+				]
+			}), /* @__PURE__ */ o("div", {
+				className: "ttw:flex ttw:items-center ttw:gap-1",
+				children: [s ? /* @__PURE__ */ a(e, {
 					type: "button",
-					id: k,
-					role: "combobox",
-					"aria-expanded": A,
-					className: "ttw:flex ttw:h-10 ttw:w-full ttw:items-center ttw:justify-between 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("span", {
-						className: "ttw:min-w-0 ttw:flex-1 ttw:truncate ttw:text-muted-foreground",
-						children: O.triggerPlaceholder
-					}), /* @__PURE__ */ h(_, {
-						"aria-hidden": !0,
-						className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
-					})]
-				})
-			}), /* @__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))]
-							}) : x ? C.length === 0 ? /* @__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
-							}) : /* @__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}`)) }) : /* @__PURE__ */ h("div", {
-								className: d("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm ttw:text-muted-foreground", b),
-								children: O.searchHint
-							}),
-							/* @__PURE__ */ h(a, {}),
-							/* @__PURE__ */ g(r, {
-								value: "__add_vendor__",
-								onSelect: T,
-								className: "ttw:sticky ttw:bottom-0 ttw:bg-popover ttw:text-primary",
-								children: [/* @__PURE__ */ h(v, { className: "ttw:size-4 ttw:text-primary" }), O.addVendorAction]
-							})
-						]
-					})]
-				})
+					variant: "ghost",
+					size: "icon",
+					"aria-label": g.editAction,
+					onClick: s,
+					children: /* @__PURE__ */ a(l, { className: "ttw:size-4" })
+				}) : null, c ? /* @__PURE__ */ a(e, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					"aria-label": g.clearAction,
+					onClick: c,
+					children: /* @__PURE__ */ a(d, { className: "ttw:size-4" })
+				}) : null]
+			})]
+		}), r.fields.length ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("p", {
+			className: "ttw:mt-3 ttw:text-xs ttw:text-muted-foreground",
+			children: r.methodLabel
+		}), /* @__PURE__ */ a("div", {
+			className: "ttw:mt-2 ttw:flex ttw:flex-col ttw:gap-1",
+			children: r.fields.map((e) => /* @__PURE__ */ a(f, {
+				field: e,
+				labels: g
+			}, `${e.label}:${e.value}:${e.maskedValue ?? ""}`))
+		})] }) : /* @__PURE__ */ o("div", {
+			className: "ttw:mt-4 ttw:flex ttw:flex-col ttw:gap-3",
+			children: [/* @__PURE__ */ o("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-1",
+				children: [/* @__PURE__ */ a("p", {
+					className: "ttw:text-sm ttw:font-semibold ttw:text-foreground",
+					children: g.paymentInstructionsHeading
+				}), /* @__PURE__ */ a("p", {
+					className: "ttw:text-sm ttw:text-muted-foreground",
+					children: g.paymentInstructionsDescription
+				})]
+			}), p?.isOpen ? /* @__PURE__ */ a(t, {
+				idPrefix: "vendor-summary-ach",
+				values: p.values,
+				errors: p.errors,
+				onChange: p.onChange,
+				labels: g.ach
+			}) : p ? /* @__PURE__ */ o(e, {
+				type: "button",
+				variant: "link",
+				className: "ttw:w-fit ttw:px-0",
+				onClick: p.onOpen,
+				children: [/* @__PURE__ */ a(u, { className: "ttw:size-4" }), g.addPaymentInstructions]
+			}) : /* @__PURE__ */ a("p", {
+				className: "ttw:text-sm ttw:text-muted-foreground",
+				children: r.methodLabel
 			})]
 		})]
 	});
 }
 //#endregion
-export { x as VendorSearchCombobox, x as default };
+export { p as VendorSummaryCard, p as default };

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

@@ -1,13 +1,12 @@
-import { VENDOR_SUMMARY_CARD_LABELS_EN as e } from "./index31.js";
-import "./index33.js";
-import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as t } from "./index34.js";
-import "./index36.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index37.js
-var n = {
-	heading: "Who are you paying?",
-	summaryCard: e,
-	search: t,
-	noVendorPlaceholder: "No vendor selected"
+var e = {
+	fieldLabel: "Select or add vendor",
+	triggerPlaceholder: "Select vendor",
+	placeholder: "Search",
+	searchHint: "Type a vendor name to search",
+	loading: "Searching vendors...",
+	emptyResults: "No vendors found",
+	addVendorAction: "Add vendor"
 };
 //#endregion
-export { n as VENDOR_SECTION_LABELS_EN };
+export { e as VENDOR_SEARCH_COMBOBOX_LABELS_EN };