@tesouro/embedded-components-react 0.2.254 → 0.2.256

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

@@ -1,3 +1,83 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "react";
-import "react/jsx-runtime";
+import { Input as e, Label as t, Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { BILL_FORM_FIELDS_LABELS_EN as s } from "./index12.js";
+import { useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index13.js
+var d = "__tesouro_no_payment_terms__";
+function f({ values: f, errors: p, onChange: m, paymentTermOptions: h = [], testId: g, labels: _ }) {
+	let v = {
+		...s,
+		..._
+	}, y = c(), b = (n, r, i) => {
+		let a = `${y}-${n}`, o = `${a}-error`, s = p?.[n];
+		return /* @__PURE__ */ u("div", {
+			className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+			children: [
+				/* @__PURE__ */ l(t, {
+					htmlFor: a,
+					children: r
+				}),
+				/* @__PURE__ */ l(e, {
+					id: a,
+					type: i,
+					value: f[n],
+					"aria-invalid": s ? !0 : void 0,
+					"aria-describedby": s ? o : void 0,
+					onChange: (e) => m({ [n]: e.target.value })
+				}),
+				s ? /* @__PURE__ */ l("p", {
+					id: o,
+					className: "ttw:text-sm ttw:text-destructive",
+					children: s
+				}) : null
+			]
+		});
+	}, x = `${y}-paymentTerms`, S = `${x}-error`, C = p?.paymentTerms;
+	return /* @__PURE__ */ u("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-4",
+		"data-testid": g,
+		children: [
+			b("invoiceNumber", v.invoiceNumber),
+			/* @__PURE__ */ u("div", {
+				className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+				children: [b("invoiceDate", v.invoiceDate, "date"), b("dueDate", v.dueDate, "date")]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "ttw:grid ttw:grid-cols-2 ttw:gap-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+					children: [
+						/* @__PURE__ */ l(t, {
+							htmlFor: x,
+							children: v.paymentTerms
+						}),
+						/* @__PURE__ */ u(n, {
+							value: f.paymentTerms || d,
+							onValueChange: (e) => m({ paymentTerms: e === d ? "" : e }),
+							children: [/* @__PURE__ */ l(a, {
+								id: x,
+								className: "ttw:w-full",
+								"aria-invalid": C ? !0 : void 0,
+								"aria-describedby": C ? S : void 0,
+								children: /* @__PURE__ */ l(o, { placeholder: v.paymentTermsPlaceholder })
+							}), /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l(i, {
+								value: d,
+								children: v.paymentTermsNone
+							}), h.map((e) => /* @__PURE__ */ l(i, {
+								value: e.value,
+								children: e.label
+							}, e.value))] })]
+						}),
+						C ? /* @__PURE__ */ l("p", {
+							id: S,
+							className: "ttw:text-sm ttw:text-destructive",
+							children: C
+						}) : null
+					]
+				}), b("poNumber", v.poNumber)]
+			})
+		]
+	});
+}
+//#endregion
+export { f as BillFormFields, f as default };

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

@@ -1 +1,2 @@
+import "./index12.js";
 import "./index13.js";

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

@@ -0,0 +1,18 @@
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index15.js
+var e = {
+	heading: "Line items",
+	helpText: "Enter a single amount for this payment, or split it into line items to assign a GL code to each one.",
+	description: "Description",
+	descriptionPlaceholder: "e.g., Office supplies",
+	glCode: "GL code (optional)",
+	glCodePlaceholder: "Select",
+	quantity: "Quantity",
+	price: "Price",
+	amount: "Amount",
+	addLineItem: "+ Add line item",
+	increaseQuantity: (e) => `Increase quantity — line item ${e}`,
+	decreaseQuantity: (e) => `Decrease quantity — line item ${e}`,
+	removeLineItem: (e) => `Remove line item ${e}`
+};
+//#endregion
+export { e as LINE_ITEMS_SECTION_LABELS_EN };

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

@@ -1,4 +1,205 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "react";
-import "react/jsx-runtime";
-import "lucide-react";
+import { Button as e, Input as t, Label as n, Select as r, SelectContent as i, SelectItem as a, SelectTrigger as o, SelectValue as s, Typography as c } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { LINE_ITEMS_SECTION_LABELS_EN as l } from "./index15.js";
+import { useId as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Minus as p, Plus as m, Trash2 as h } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index16.js
+function g({ items: g, glCodeOptions: _, totalAmountLabel: v, onAddLineItem: y, errors: b, disabled: x, testId: S, labels: C }) {
+	let w = {
+		...l,
+		...C
+	}, T = u(), E = g.length > 1;
+	return /* @__PURE__ */ f("section", {
+		className: "ttw:flex ttw:flex-col ttw:gap-3",
+		"data-testid": S,
+		children: [
+			/* @__PURE__ */ d(c, {
+				component: "h2",
+				variant: "h6",
+				className: "ttw:font-semibold",
+				children: w.heading
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "ttw:text-sm ttw:text-muted-foreground",
+				children: w.helpText
+			}),
+			g.map((c, l) => {
+				let u = `${T}-${c.id}`, g = b?.[c.id], v = (e) => `${u}-${e}-error`, y = (e) => g?.[e], S = (e) => {
+					let t = y(e);
+					return t ? /* @__PURE__ */ d("p", {
+						id: v(e),
+						className: "ttw:text-sm ttw:text-destructive",
+						children: t
+					}) : null;
+				};
+				return /* @__PURE__ */ d("div", {
+					className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
+					children: /* @__PURE__ */ f("div", {
+						className: "ttw:flex ttw:items-start ttw:gap-2",
+						children: [
+							E ? /* @__PURE__ */ f("span", {
+								className: "ttw:pt-7 ttw:text-sm ttw:text-muted-foreground",
+								children: [l + 1, "."]
+							}) : null,
+							/* @__PURE__ */ f("div", {
+								className: "ttw:flex ttw:flex-1 ttw:flex-col ttw:gap-3",
+								children: [/* @__PURE__ */ f("div", {
+									className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+									children: [
+										/* @__PURE__ */ d(n, {
+											htmlFor: `${u}-description`,
+											children: w.description
+										}),
+										/* @__PURE__ */ d(t, {
+											id: `${u}-description`,
+											placeholder: w.descriptionPlaceholder,
+											value: c.description,
+											disabled: x,
+											"aria-invalid": y("description") ? !0 : void 0,
+											"aria-describedby": y("description") ? v("description") : void 0,
+											onChange: (e) => c.onChange({ description: e.target.value })
+										}),
+										S("description")
+									]
+								}), /* @__PURE__ */ f("div", {
+									className: "ttw:grid ttw:grid-cols-4 ttw:gap-3",
+									children: [
+										/* @__PURE__ */ f("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+											children: [
+												/* @__PURE__ */ d(n, {
+													htmlFor: `${u}-gl-code`,
+													children: w.glCode
+												}),
+												/* @__PURE__ */ f(r, {
+													value: c.glCode,
+													disabled: x,
+													onValueChange: (e) => c.onChange({ glCode: e }),
+													children: [/* @__PURE__ */ d(o, {
+														id: `${u}-gl-code`,
+														"aria-invalid": y("glCode") ? !0 : void 0,
+														"aria-describedby": y("glCode") ? v("glCode") : void 0,
+														children: /* @__PURE__ */ d(s, { placeholder: w.glCodePlaceholder })
+													}), /* @__PURE__ */ d(i, { children: _.map((e) => /* @__PURE__ */ d(a, {
+														value: e.value,
+														children: e.label
+													}, e.value)) })]
+												}),
+												S("glCode")
+											]
+										}),
+										/* @__PURE__ */ f("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+											children: [
+												/* @__PURE__ */ d(n, {
+													htmlFor: `${u}-quantity`,
+													children: w.quantity
+												}),
+												/* @__PURE__ */ f("div", {
+													className: "ttw:flex ttw:items-center ttw:gap-1",
+													children: [
+														/* @__PURE__ */ d(e, {
+															type: "button",
+															variant: "outline",
+															size: "icon",
+															disabled: x,
+															"aria-label": w.decreaseQuantity(l + 1),
+															onClick: () => c.onQuantityStep(-1),
+															children: /* @__PURE__ */ d(p, { className: "ttw:size-3.5" })
+														}),
+														/* @__PURE__ */ d(t, {
+															id: `${u}-quantity`,
+															inputMode: "decimal",
+															className: "ttw:text-center",
+															value: c.quantity,
+															disabled: x,
+															"aria-invalid": y("quantity") ? !0 : void 0,
+															"aria-describedby": y("quantity") ? v("quantity") : void 0,
+															onChange: (e) => c.onChange({ quantity: e.target.value })
+														}),
+														/* @__PURE__ */ d(e, {
+															type: "button",
+															variant: "outline",
+															size: "icon",
+															disabled: x,
+															"aria-label": w.increaseQuantity(l + 1),
+															onClick: () => c.onQuantityStep(1),
+															children: /* @__PURE__ */ d(m, { className: "ttw:size-3.5" })
+														})
+													]
+												}),
+												S("quantity")
+											]
+										}),
+										/* @__PURE__ */ f("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+											children: [
+												/* @__PURE__ */ d(n, {
+													htmlFor: `${u}-price`,
+													children: w.price
+												}),
+												/* @__PURE__ */ d(t, {
+													id: `${u}-price`,
+													inputMode: "decimal",
+													value: c.price,
+													disabled: x,
+													"aria-invalid": y("price") ? !0 : void 0,
+													"aria-describedby": y("price") ? v("price") : void 0,
+													onChange: (e) => c.onChange({ price: e.target.value })
+												}),
+												S("price")
+											]
+										}),
+										/* @__PURE__ */ f("div", {
+											className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+											children: [
+												/* @__PURE__ */ d(n, {
+													htmlFor: `${u}-amount`,
+													children: w.amount
+												}),
+												/* @__PURE__ */ d(t, {
+													id: `${u}-amount`,
+													inputMode: "decimal",
+													value: c.amount,
+													disabled: x,
+													"aria-invalid": y("amount") ? !0 : void 0,
+													"aria-describedby": y("amount") ? v("amount") : void 0,
+													onChange: (e) => c.onChange({ amount: e.target.value })
+												}),
+												S("amount")
+											]
+										})
+									]
+								})]
+							}),
+							E ? /* @__PURE__ */ d(e, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								disabled: x,
+								"aria-label": w.removeLineItem(l + 1),
+								onClick: c.onRemove,
+								children: /* @__PURE__ */ d(h, { className: "ttw:size-4" })
+							}) : null
+						]
+					})
+				}, c.id);
+			}),
+			/* @__PURE__ */ f("div", {
+				className: "ttw:flex ttw:items-center ttw:justify-between",
+				children: [/* @__PURE__ */ d(e, {
+					type: "button",
+					variant: "link",
+					disabled: x,
+					onClick: y,
+					children: w.addLineItem
+				}), /* @__PURE__ */ d("span", {
+					className: "ttw:text-sm ttw:text-foreground",
+					children: v
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { g as LineItemsSection, g as default };

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

@@ -1 +1,2 @@
+import "./index15.js";
 import "./index16.js";

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

@@ -0,0 +1,10 @@
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index18.js
+var e = {
+	payToHeading: "Pay to",
+	editAction: "Edit",
+	clearAction: "Clear",
+	revealField: (e) => `Show ${e.toLowerCase()}`,
+	hideField: (e) => `Hide ${e.toLowerCase()}`
+};
+//#endregion
+export { e as VENDOR_SUMMARY_CARD_LABELS_EN };

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

@@ -1,4 +1,89 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "react";
-import "react/jsx-runtime";
-import "lucide-react";
+import { Button as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { VENDOR_SUMMARY_CARD_LABELS_EN as t } from "./index18.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Eye as a, EyeOff as o } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index19.js
+function s({ field: e, labels: t }) {
+	let [s, c] = n(!1), l = !!e.maskedValue, u = l && !s ? e.maskedValue : e.value;
+	return /* @__PURE__ */ i("div", {
+		className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm",
+		children: [
+			/* @__PURE__ */ r("span", {
+				className: "ttw:w-44 ttw:shrink-0 ttw:text-muted-foreground",
+				children: e.label
+			}),
+			/* @__PURE__ */ r("span", {
+				className: "ttw:text-foreground",
+				children: u
+			}),
+			l ? /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: () => c((e) => !e),
+				"aria-label": s ? t.hideField(e.label) : t.revealField(e.label),
+				className: "ttw:text-muted-foreground ttw:hover:text-foreground",
+				children: r(s ? o : a, { className: "ttw:size-4" })
+			}) : null
+		]
+	});
+}
+function c({ summary: n, onEdit: a, onClear: o, testId: c, labels: l }) {
+	let u = {
+		...t,
+		...l
+	};
+	return /* @__PURE__ */ i("div", {
+		className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
+		"data-testid": c,
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "ttw:flex ttw:items-start ttw:justify-between",
+				children: [/* @__PURE__ */ i("div", {
+					className: "ttw:flex ttw:flex-col ttw:gap-0.5",
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "ttw:text-xs ttw:text-muted-foreground",
+							children: u.payToHeading
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+							children: n.name
+						}),
+						/* @__PURE__ */ r("span", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: n.email
+						})
+					]
+				}), /* @__PURE__ */ i("div", {
+					className: "ttw:flex ttw:items-center ttw:gap-1",
+					children: [a ? /* @__PURE__ */ r(e, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: a,
+						children: u.editAction
+					}) : null, o ? /* @__PURE__ */ r(e, {
+						type: "button",
+						variant: "ghost",
+						size: "sm",
+						onClick: o,
+						children: u.clearAction
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ r("p", {
+				className: "ttw:mt-3 ttw:text-xs ttw:text-muted-foreground",
+				children: n.methodLabel
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "ttw:mt-2 ttw:flex ttw:flex-col ttw:gap-1",
+				children: n.fields.map((e) => /* @__PURE__ */ r(s, {
+					field: e,
+					labels: u
+				}, `${e.label}:${e.value}:${e.maskedValue ?? ""}`))
+			})
+		]
+	});
+}
+//#endregion
+export { c as VendorSummaryCard, c as default };

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

@@ -1 +1,2 @@
+import "./index18.js";
 import "./index19.js";

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

@@ -0,0 +1,10 @@
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index21.js
+var e = {
+	fieldLabel: "Vendor",
+	placeholder: "Search",
+	loading: "Searching vendors...",
+	emptyResults: "No vendors found",
+	addVendorAction: "Add vendor"
+};
+//#endregion
+export { e as VENDOR_SEARCH_COMBOBOX_LABELS_EN };

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

@@ -1,4 +1,131 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import "react";
-import "react/jsx-runtime";
-import "lucide-react";
+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";
+//#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", {
+		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,
+					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]
+		})]
+	});
+}
+//#endregion
+export { f as VendorSearchCombobox, f as default };

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

@@ -1 +1,2 @@
+import "./index21.js";
 import "./index22.js";

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

@@ -1,2 +1,12 @@
+import { VENDOR_SUMMARY_CARD_LABELS_EN as e } from "./index18.js";
 import "./index20.js";
+import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as t } from "./index21.js";
 import "./index23.js";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index24.js
+var n = {
+	heading: "Who are you paying?",
+	summaryCard: e,
+	search: t
+};
+//#endregion
+export { n as VENDOR_SECTION_LABELS_EN };

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

@@ -1,8 +1,48 @@
-import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+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 "./index19.js";
+import { VendorSummaryCard as n } from "./index19.js";
 import "./index20.js";
-import "./index22.js";
+import { VendorSearchCombobox as r } from "./index22.js";
 import "./index23.js";
-import "./index24.js";
-import "react/jsx-runtime";
+import { VENDOR_SECTION_LABELS_EN as i } from "./index24.js";
+import { jsx as a, jsxs as o } 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,
+		summaryCard: {
+			...i.summaryCard,
+			...f?.summaryCard
+		},
+		search: {
+			...i.search,
+			...f?.search
+		}
+	};
+	return /* @__PURE__ */ o("section", {
+		className: "ttw:flex ttw:flex-col ttw:gap-3",
+		"data-testid": d,
+		children: [
+			/* @__PURE__ */ a(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,
+				labels: p.summaryCard
+			}) : s.mode === "selecting" ? /* @__PURE__ */ a(r, {
+				...s.search,
+				labels: p.search
+			}) : s.newVendorForm
+		]
+	});
+}
+//#endregion
+export { s as VendorSection, s as default };

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

@@ -1,4 +1,20 @@
+import { BILL_FORM_FIELDS_LABELS_EN as e } from "./index12.js";
 import "./index14.js";
+import { LINE_ITEMS_SECTION_LABELS_EN as t } from "./index15.js";
 import "./index17.js";
-import "./index24.js";
+import { VENDOR_SECTION_LABELS_EN as n } from "./index24.js";
 import "./index26.js";
+//#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index27.js
+var r = {
+	closeButton: "Close",
+	menuTrigger: "More actions",
+	cancelButton: "Cancel",
+	saveDraftButton: "Save as draft",
+	finalizeButton: "Finalize",
+	hiddenDescription: "Enter the details of the bill you want to pay.",
+	vendorSection: n,
+	detailsFields: e,
+	lineItems: t
+};
+//#endregion
+export { r as BILL_CREATE_SCREEN_LABELS_EN };