@tesouro/embedded-components-react 0.5.189 → 0.5.190

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

@@ -1,35 +1,32 @@
-import { LABEL_LABELS_EN as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { VENDOR_SUMMARY_CARD_LABELS_EN as e } from "./index30.js";
+import "./index32.js";
+import { VENDOR_SEARCH_COMBOBOX_LABELS_EN as t, mergeVendorSearchComboboxLabels as n } from "./index45.js";
+import "./index47.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index48.js
-var t = {
-	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",
-	glCodePlaceholder: "Select",
-	glCodeClear: "Clear GL code",
-	quantity: "Quantity",
-	price: "Price",
-	amount: "Amount",
-	currencySymbol: "$",
-	discount: "Discounts",
-	tax: "Tax",
-	totalAmount: "Total 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}`,
-	fieldMarkers: e
+var r = {
+	heading: "Who are you paying?",
+	summaryCard: e,
+	search: t,
+	noVendorPlaceholder: "No vendor selected"
 };
-function n(e) {
+function i(e) {
 	return {
-		...t,
+		...r,
 		...e,
-		fieldMarkers: {
-			...t.fieldMarkers,
-			...e?.fieldMarkers
-		}
+		summaryCard: {
+			...r.summaryCard,
+			...e?.summaryCard,
+			ach: {
+				...r.summaryCard.ach,
+				...e?.summaryCard?.ach,
+				fieldMarkers: {
+					...r.summaryCard.ach.fieldMarkers,
+					...e?.summaryCard?.ach?.fieldMarkers
+				}
+			}
+		},
+		search: n(e?.search)
 	};
 }
 //#endregion
-export { t as LINE_ITEMS_SECTION_LABELS_EN, n as mergeLineItemsSectionLabels };
+export { r as VENDOR_SECTION_LABELS_EN, i as mergeVendorSectionLabels };

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

@@ -1,374 +1,54 @@
-import { Button as e, FieldRequirement as t, Input as n, InputGroup as r, InputGroupAddon as i, InputGroupInput as a, Label as o, Select as s, SelectContent as c, SelectItem as l, SelectTrigger as u, SelectValue as d, Tooltip as f, TooltipContent as p, TooltipProvider as m, TooltipTrigger as h, Typography as g, cn as _ } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { mergeLineItemsSectionLabels as v } from "./index48.js";
-import { useId as y } from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { CircleAlert as S, Minus as C, Plus as w, Trash2 as T, X as E } from "lucide-react";
+import { Typography as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { VendorSummaryCard as t } from "./index31.js";
+import "./index32.js";
+import { VendorSearchCombobox as n } from "./index46.js";
+import "./index47.js";
+import { mergeVendorSectionLabels as r } from "./index48.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index49.js
-var D = {
-	description: t.Required,
-	glCode: t.Optional,
-	quantity: t.Required,
-	price: t.Required,
-	amount: t.Required
-}, O = {
-	discount: t.Optional,
-	tax: t.Optional,
-	total: t.Required
-};
-function k({ items: t, glCodeOptions: k, glCodeDisabled: A, glCodeUnavailableMessage: j, discount: M, onDiscountChange: N, onDiscountBlur: P, tax: F, onTaxChange: I, onTaxBlur: L, total: R, onTotalChange: z, onTotalBlur: B, onAddLineItem: V, errors: H, totalsErrors: U, disabled: W, testId: G, labels: K }) {
-	let q = v(K), J = y(), Y = t.length > 1, X = j ? `${J}-gl-code-unavailable` : void 0, Z = (e) => `${J}-${e}-error`, Q = (e) => {
-		let t = U?.[e];
-		return t ? /* @__PURE__ */ b("p", {
-			id: Z(e),
-			className: "ttw:text-sm ttw:text-destructive ttw:text-right",
-			children: t
-		}) : null;
-	};
-	return /* @__PURE__ */ x("section", {
+function o(o) {
+	let { onEdit: s, error: c, testId: l, labels: u, disabled: d } = o, f = r(u);
+	return /* @__PURE__ */ a("section", {
 		className: "ttw:flex ttw:flex-col ttw:gap-3",
-		"data-testid": G,
+		"data-invalid": c ? !0 : void 0,
+		"data-testid": l,
 		children: [
-			/* @__PURE__ */ b(g, {
+			/* @__PURE__ */ i(e, {
 				component: "h2",
 				variant: "h6",
 				className: "ttw:font-semibold",
-				children: q.heading
+				children: f.heading
 			}),
-			/* @__PURE__ */ b("p", {
-				className: "ttw:text-sm ttw:text-muted-foreground",
-				children: q.helpText
-			}),
-			j ? /* @__PURE__ */ b("span", {
-				id: X,
-				className: "ttw:sr-only",
-				children: j
-			}) : null,
-			t.map((t, g) => {
-				let v = `${J}-${t.id}`, y = H?.[t.id], O = (e) => `${v}-${e}-error`, M = (e) => y?.[e], N = (e) => {
-					let t = M(e);
-					return t ? /* @__PURE__ */ b("p", {
-						id: O(e),
-						className: "ttw:text-sm ttw:text-destructive",
-						children: t
-					}) : null;
-				};
-				return /* @__PURE__ */ b("div", {
-					className: "ttw:rounded-lg ttw:border ttw:border-border ttw:bg-muted/30 ttw:p-4",
-					children: /* @__PURE__ */ x("div", {
-						className: "ttw:@container/line-item ttw:flex ttw:flex-col ttw:gap-3",
-						children: [
-							/* @__PURE__ */ x("div", {
-								className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2",
-								children: [/* @__PURE__ */ x("div", {
-									className: "ttw:flex ttw:items-center ttw:gap-2",
-									children: [Y ? /* @__PURE__ */ x("span", {
-										className: "ttw:text-sm ttw:text-muted-foreground",
-										children: [g + 1, "."]
-									}) : null, /* @__PURE__ */ b(o, {
-										htmlFor: `${v}-description`,
-										requirement: D.description,
-										labels: q.fieldMarkers,
-										children: q.description
-									})]
-								}), Y ? /* @__PURE__ */ b(e, {
-									type: "button",
-									variant: "ghost",
-									size: "icon",
-									disabled: W,
-									"aria-label": q.removeLineItem(g + 1),
-									onClick: t.onRemove,
-									children: /* @__PURE__ */ b(T, { className: "ttw:size-4" })
-								}) : null]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-								children: [/* @__PURE__ */ b(n, {
-									id: `${v}-description`,
-									placeholder: q.descriptionPlaceholder,
-									value: t.description,
-									disabled: W,
-									"aria-required": !0,
-									"aria-invalid": M("description") ? !0 : void 0,
-									"aria-describedby": M("description") ? O("description") : void 0,
-									onChange: (e) => t.onChange({ description: e.target.value })
-								}), N("description")]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "ttw:grid ttw:grid-cols-1 ttw:@sm/line-item:grid-cols-3 ttw:@4xl/line-item:grid-cols-12 ttw:gap-3",
-								children: [
-									/* @__PURE__ */ x("div", {
-										className: "ttw:col-span-1 ttw:@sm/line-item:col-span-3 ttw:@4xl/line-item:col-span-5 ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ x("div", {
-												className: "ttw:flex ttw:items-center ttw:gap-1",
-												children: [/* @__PURE__ */ b(o, {
-													htmlFor: `${v}-gl-code`,
-													requirement: D.glCode,
-													labels: q.fieldMarkers,
-													children: q.glCode
-												}), j ? /* @__PURE__ */ b(m, { children: /* @__PURE__ */ x(f, { children: [/* @__PURE__ */ b(h, {
-													type: "button",
-													className: "ttw:inline-flex ttw:shrink-0 ttw:cursor-help ttw:text-muted-foreground",
-													"aria-label": j,
-													children: /* @__PURE__ */ b(S, { className: "ttw:size-3.5" })
-												}), /* @__PURE__ */ b(p, { children: j })] }) }) : null]
-											}),
-											/* @__PURE__ */ x("div", {
-												className: "ttw:relative",
-												children: [/* @__PURE__ */ x(s, {
-													value: t.glCode,
-													disabled: W || A,
-													onValueChange: (e) => t.onChange({ glCode: e }),
-													children: [/* @__PURE__ */ b(u, {
-														id: `${v}-gl-code`,
-														className: _("ttw:w-full", t.glCode && "ttw:[&>svg:last-child]:hidden!"),
-														"aria-invalid": M("glCode") ? !0 : void 0,
-														"aria-describedby": [M("glCode") ? O("glCode") : null, X].filter(Boolean).join(" ") || void 0,
-														children: /* @__PURE__ */ b(d, { placeholder: q.glCodePlaceholder })
-													}), /* @__PURE__ */ b(c, { children: k.map((e) => /* @__PURE__ */ b(l, {
-														value: e.value,
-														children: e.label
-													}, e.value)) })]
-												}), t.glCode && !(W || A) ? /* @__PURE__ */ b(e, {
-													type: "button",
-													variant: "ghost",
-													size: "icon-sm",
-													"aria-label": q.glCodeClear,
-													className: "ttw:absolute ttw:top-1/2 ttw:right-1 ttw:-translate-y-1/2",
-													onPointerDown: (e) => {
-														e.preventDefault(), e.stopPropagation();
-													},
-													onClick: (e) => {
-														e.preventDefault(), e.stopPropagation(), t.onChange({ glCode: "" });
-													},
-													children: /* @__PURE__ */ b(E, {
-														className: "ttw:size-4",
-														"aria-hidden": !0
-													})
-												}) : null]
-											}),
-											N("glCode")
-										]
-									}),
-									/* @__PURE__ */ x("div", {
-										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-3 ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ b(o, {
-												htmlFor: `${v}-quantity`,
-												requirement: D.quantity,
-												labels: q.fieldMarkers,
-												children: q.quantity
-											}),
-											/* @__PURE__ */ x(r, {
-												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__ */ b(e, {
-														type: "button",
-														variant: "ghost",
-														size: "icon",
-														className: "ttw:h-full ttw:shrink-0 ttw:rounded-r-none",
-														disabled: W,
-														"aria-label": q.decreaseQuantity(g + 1),
-														onClick: () => t.onQuantityStep(-1),
-														children: /* @__PURE__ */ b(C, { className: "ttw:size-3.5" })
-													}),
-													/* @__PURE__ */ b(a, {
-														id: `${v}-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: t.quantity,
-														disabled: W,
-														"aria-required": !0,
-														"aria-invalid": M("quantity") ? !0 : void 0,
-														"aria-describedby": M("quantity") ? O("quantity") : void 0,
-														onChange: (e) => t.onChange({ quantity: e.target.value })
-													}),
-													/* @__PURE__ */ b(e, {
-														type: "button",
-														variant: "ghost",
-														size: "icon",
-														className: "ttw:h-full ttw:shrink-0 ttw:rounded-l-none",
-														disabled: W,
-														"aria-label": q.increaseQuantity(g + 1),
-														onClick: () => t.onQuantityStep(1),
-														children: /* @__PURE__ */ b(w, { className: "ttw:size-3.5" })
-													})
-												]
-											}),
-											N("quantity")
-										]
-									}),
-									/* @__PURE__ */ x("div", {
-										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-2 ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ b(o, {
-												htmlFor: `${v}-price`,
-												requirement: D.price,
-												labels: q.fieldMarkers,
-												children: q.price
-											}),
-											/* @__PURE__ */ x(r, { children: [/* @__PURE__ */ b(i, {
-												align: "inline-start",
-												"aria-hidden": !0,
-												children: q.currencySymbol
-											}), /* @__PURE__ */ b(a, {
-												id: `${v}-price`,
-												"data-has-start-addon": !0,
-												inputMode: "decimal",
-												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
-												value: t.price,
-												disabled: W,
-												"aria-required": !0,
-												"aria-invalid": M("price") ? !0 : void 0,
-												"aria-describedby": M("price") ? O("price") : void 0,
-												onChange: (e) => t.onChange({ price: e.target.value }),
-												onBlur: () => t.onBlur?.("price")
-											})] }),
-											N("price")
-										]
-									}),
-									/* @__PURE__ */ x("div", {
-										className: "ttw:col-span-1 ttw:@4xl/line-item:col-span-2 ttw:flex ttw:flex-col ttw:gap-1.5",
-										children: [
-											/* @__PURE__ */ b(o, {
-												htmlFor: `${v}-amount`,
-												requirement: D.amount,
-												labels: q.fieldMarkers,
-												children: q.amount
-											}),
-											/* @__PURE__ */ x(r, { children: [/* @__PURE__ */ b(i, {
-												align: "inline-start",
-												"aria-hidden": !0,
-												children: q.currencySymbol
-											}), /* @__PURE__ */ b(a, {
-												id: `${v}-amount`,
-												"data-has-start-addon": !0,
-												inputMode: "decimal",
-												className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
-												value: t.amount,
-												disabled: W,
-												"aria-required": !0,
-												"aria-invalid": M("amount") ? !0 : void 0,
-												"aria-describedby": M("amount") ? O("amount") : void 0,
-												onChange: (e) => t.onChange({ amount: e.target.value }),
-												onBlur: () => t.onBlur?.("amount")
-											})] }),
-											N("amount")
-										]
-									})
-								]
-							})
-						]
-					})
-				}, t.id);
-			}),
-			/* @__PURE__ */ b(e, {
-				type: "button",
-				variant: "link",
-				disabled: W,
-				className: "ttw:self-start",
-				onClick: V,
-				children: q.addLineItem
-			}),
-			/* @__PURE__ */ x("div", {
-				className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:border-t ttw:border-border ttw:pt-3",
-				children: [
-					/* @__PURE__ */ x("div", {
-						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
-						children: [/* @__PURE__ */ b(o, {
-							htmlFor: `${J}-discount`,
-							requirement: O.discount,
-							labels: q.fieldMarkers,
-							children: q.discount
-						}), /* @__PURE__ */ x("div", {
-							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
-							children: [/* @__PURE__ */ x(r, {
-								className: "ttw:w-36",
-								children: [/* @__PURE__ */ b(i, {
-									align: "inline-start",
-									"aria-hidden": !0,
-									children: q.currencySymbol
-								}), /* @__PURE__ */ b(a, {
-									id: `${J}-discount`,
-									"data-has-start-addon": !0,
-									inputMode: "decimal",
-									className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
-									value: M,
-									disabled: W,
-									"aria-invalid": U?.discount ? !0 : void 0,
-									"aria-describedby": U?.discount ? Z("discount") : void 0,
-									onChange: (e) => N(e.target.value),
-									onBlur: P
-								})]
-							}), Q("discount")]
-						})]
-					}),
-					/* @__PURE__ */ x("div", {
-						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
-						children: [/* @__PURE__ */ b(o, {
-							htmlFor: `${J}-tax`,
-							requirement: O.tax,
-							labels: q.fieldMarkers,
-							children: q.tax
-						}), /* @__PURE__ */ x("div", {
-							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
-							children: [/* @__PURE__ */ x(r, {
-								className: "ttw:w-36",
-								children: [/* @__PURE__ */ b(i, {
-									align: "inline-start",
-									"aria-hidden": !0,
-									children: q.currencySymbol
-								}), /* @__PURE__ */ b(a, {
-									id: `${J}-tax`,
-									"data-has-start-addon": !0,
-									inputMode: "decimal",
-									className: "ttw:text-right ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
-									value: F,
-									disabled: W,
-									"aria-invalid": U?.tax ? !0 : void 0,
-									"aria-describedby": U?.tax ? Z("tax") : void 0,
-									onChange: (e) => I(e.target.value),
-									onBlur: L
-								})]
-							}), Q("tax")]
-						})]
-					}),
-					/* @__PURE__ */ x("div", {
-						className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
-						children: [/* @__PURE__ */ b(o, {
-							htmlFor: `${J}-total`,
-							className: "ttw:font-semibold",
-							requirement: O.total,
-							labels: q.fieldMarkers,
-							children: q.totalAmount
-						}), /* @__PURE__ */ x("div", {
-							className: "ttw:flex ttw:flex-col ttw:items-end ttw:gap-1.5",
-							children: [/* @__PURE__ */ x(r, {
-								className: "ttw:w-36",
-								children: [/* @__PURE__ */ b(i, {
-									align: "inline-start",
-									"aria-hidden": !0,
-									children: q.currencySymbol
-								}), /* @__PURE__ */ b(a, {
-									id: `${J}-total`,
-									"data-has-start-addon": !0,
-									inputMode: "decimal",
-									className: "ttw:text-right ttw:font-semibold ttw:aria-invalid:border-destructive ttw:aria-invalid:ring-destructive/20",
-									value: R,
-									disabled: W,
-									"aria-required": !0,
-									"aria-invalid": U?.total ? !0 : void 0,
-									"aria-describedby": U?.total ? Z("total") : void 0,
-									onChange: (e) => z(e.target.value),
-									onBlur: B
-								})]
-							}), Q("total")]
-						})]
-					})
-				]
-			})
+			o.mode === "resolved" ? /* @__PURE__ */ i(t, {
+				summary: o.summary,
+				onEdit: s,
+				paymentInstructions: d ? void 0 : o.paymentInstructions,
+				showPaymentInstructions: o.showPaymentInstructions,
+				detailsWarning: d ? void 0 : o.detailsWarning,
+				labels: f.summaryCard
+			}) : d ? /* @__PURE__ */ i(e, {
+				variant: "body2",
+				className: "ttw:text-muted-foreground",
+				children: f.noVendorPlaceholder
+			}) : o.mode === "selecting" ? /* @__PURE__ */ i(n, {
+				...o.search,
+				labels: f.search
+			}) : o.summary ? /* @__PURE__ */ a("div", {
+				className: "ttw:flex ttw:flex-col ttw:gap-3",
+				children: [o.newVendorForm, /* @__PURE__ */ i(t, {
+					summary: o.summary,
+					paymentInstructions: o.paymentInstructions,
+					showPaymentInstructions: o.showPaymentInstructions,
+					detailsWarning: o.detailsWarning,
+					labels: f.summaryCard
+				})]
+			}) : o.newVendorForm,
+			c ? /* @__PURE__ */ i("p", {
+				className: "ttw:text-sm ttw:text-destructive",
+				children: c
+			}) : null
 		]
 	});
 }
 //#endregion
-export { k as LineItemsSection, k as default };
+export { o as VendorSection, o as default };

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

@@ -1,23 +1,56 @@
-import { LABEL_LABELS_EN as e } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { LABEL_LABELS_EN as e, REQUIRED_FIELDS_LEGEND_LABELS_EN as t, mergeRequiredFieldsLegendLabels as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { BILL_DETAIL_BODY_LABELS_EN as r, mergeBillDetailBodyLabels as i } from "./index33.js";
+import "./index35.js";
+import { BILL_FORM_FIELDS_LABELS_EN as a, mergeBillFormFieldsLabels as o } from "./index36.js";
+import "./index38.js";
+import { LINE_ITEMS_SECTION_LABELS_EN as s, mergeLineItemsSectionLabels as c } from "./index42.js";
+import "./index44.js";
+import { VENDOR_SECTION_LABELS_EN as l, mergeVendorSectionLabels as u } from "./index48.js";
+import "./index50.js";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index51.js
-var t = {
-	fieldLabel: "Select or add vendor",
-	triggerPlaceholder: "Select vendor",
-	placeholder: "Search",
-	loading: "Searching vendors...",
-	emptyResults: "No vendors found",
-	addVendorAction: "Add vendor",
+var d = {
+	closeButton: "Close",
+	collapseButton: "Exit full screen",
+	menuTrigger: "More actions",
+	cancelButton: "Cancel",
+	saveDraftButton: "Save and close",
+	submitButton: "Submit",
+	saveButton: "Save",
+	hiddenDescription: "Enter the details of the bill you want to pay.",
+	vendorSection: l,
+	detailsFields: a,
+	lineItems: s,
+	detailBody: r,
+	requiredFieldsLegend: t,
 	fieldMarkers: e
 };
-function n(e) {
+function f(e) {
+	let t = {
+		...d.fieldMarkers,
+		...e?.fieldMarkers
+	};
 	return {
-		...t,
+		...d,
 		...e,
-		fieldMarkers: {
-			...t.fieldMarkers,
-			...e?.fieldMarkers
-		}
+		fieldMarkers: t,
+		vendorSection: u({
+			...e?.vendorSection,
+			search: {
+				fieldMarkers: t,
+				...e?.vendorSection?.search
+			}
+		}),
+		detailsFields: o({
+			fieldMarkers: t,
+			...e?.detailsFields
+		}),
+		lineItems: c({
+			fieldMarkers: t,
+			...e?.lineItems
+		}),
+		detailBody: i(e?.detailBody),
+		requiredFieldsLegend: n(t, e?.requiredFieldsLegend)
 	};
 }
 //#endregion
-export { t as VENDOR_SEARCH_COMBOBOX_LABELS_EN, n as mergeVendorSearchComboboxLabels };
+export { d as BILL_CREATE_SCREEN_LABELS_EN, f as mergeBillCreateScreenLabels };

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

@@ -1,96 +1,13 @@
-import { Command as e, CommandGroup as t, CommandInput as n, CommandItem as r, CommandList as i, CommandSeparator as a, FieldRequirement as o, Label as s, Popover as c, PopoverContent as l, PopoverTrigger as u, Skeleton as d, cn as f } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { mergeVendorSearchComboboxLabels as p } from "./index51.js";
-import { useId as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { ChevronDown as v, Plus as y } from "lucide-react";
+import { useEffect as e, useRef as t } from "react";
 //#region ../../libs/tesouro-embedded-components-react/bill-pay-widget/ui/dist/index52.js
-var b = 5, x = "ttw:min-h-44";
-function S({ query: S, onQueryChange: C, results: w, isLoading: T, onAddVendor: E, testId: D, labels: O }) {
-	let k = p(O), A = m(), [j, M] = h(!1);
-	return /* @__PURE__ */ _("div", {
-		className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-		"data-testid": D,
-		children: [/* @__PURE__ */ g(s, {
-			htmlFor: A,
-			requirement: o.Required,
-			labels: k.fieldMarkers,
-			children: k.fieldLabel
-		}), /* @__PURE__ */ _(c, {
-			open: j,
-			onOpenChange: M,
-			children: [/* @__PURE__ */ g(u, {
-				asChild: !0,
-				children: /* @__PURE__ */ _("button", {
-					type: "button",
-					id: A,
-					role: "combobox",
-					"aria-expanded": j,
-					"aria-required": !0,
-					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__ */ g("span", {
-						className: "ttw:min-w-0 ttw:flex-1 ttw:truncate ttw:text-muted-foreground",
-						children: k.triggerPlaceholder
-					}), /* @__PURE__ */ g(v, {
-						"aria-hidden": !0,
-						className: "ttw:size-4 ttw:shrink-0 ttw:opacity-50"
-					})]
-				})
-			}), /* @__PURE__ */ g(l, {
-				align: "start",
-				className: "ttw:w-[var(--radix-popover-trigger-width)] ttw:p-0",
-				children: /* @__PURE__ */ _(e, {
-					shouldFilter: !1,
-					children: [/* @__PURE__ */ g(n, {
-						value: S,
-						onValueChange: C,
-						placeholder: k.placeholder,
-						"aria-label": k.placeholder
-					}), /* @__PURE__ */ _(i, {
-						className: f("ttw:max-h-72", x),
-						children: [
-							T ? /* @__PURE__ */ _("div", {
-								className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:p-2",
-								"aria-busy": "true",
-								children: [/* @__PURE__ */ g("span", {
-									className: "ttw:sr-only",
-									children: k.loading
-								}), Array.from({ length: b }).map((e, t) => /* @__PURE__ */ _("div", {
-									className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:px-2 ttw:py-1.5",
-									children: [/* @__PURE__ */ g(d, {
-										height: 14,
-										width: "55%"
-									}), /* @__PURE__ */ g(d, {
-										height: 14,
-										width: "30%"
-									})]
-								}, t))]
-							}) : w.length === 0 ? /* @__PURE__ */ g("div", {
-								className: f("ttw:flex ttw:items-center ttw:justify-center ttw:py-6 ttw:text-center ttw:text-sm", x),
-								children: k.emptyResults
-							}) : /* @__PURE__ */ g(t, { children: w.map((e, t) => /* @__PURE__ */ _(r, {
-								value: `${e.name} ${e.email} ${t}`,
-								onSelect: () => e.onSelect(),
-								children: [/* @__PURE__ */ g("span", {
-									className: "ttw:text-foreground",
-									children: e.name
-								}), /* @__PURE__ */ g("span", {
-									className: "ttw:ml-auto ttw:text-muted-foreground",
-									children: e.email
-								})]
-							}, `${e.name}:${e.email}:${t}`)) }),
-							/* @__PURE__ */ g(a, {}),
-							/* @__PURE__ */ _(r, {
-								value: "__add_vendor__",
-								onSelect: E,
-								className: "ttw:sticky ttw:bottom-0 ttw:bg-popover ttw:text-primary",
-								children: [/* @__PURE__ */ g(y, { className: "ttw:size-4 ttw:text-primary" }), k.addVendorAction]
-							})
-						]
-					})]
-				})
-			})]
-		})]
-	});
+function n(n) {
+	let r = t(null), i = t(n);
+	return e(() => {
+		if (n === i.current) return;
+		i.current = n;
+		let e = r.current?.querySelector("[aria-invalid=\"true\"], [data-invalid=\"true\"]");
+		e?.scrollIntoView({ block: "center" }), e?.focus({ preventScroll: !0 });
+	}, [n]), r;
 }
 //#endregion
-export { S as VendorSearchCombobox, S as default };
+export { n as useFocusFirstInvalidField };