@tesouro/embedded-components-react 0.11.0 → 0.11.2

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferMoneyModal.js

@@ -1,271 +1,210 @@
-import { Button as e, Dialog as t, DialogContent as n, DialogFooter as r, Input as i, Label as a, Select as o, SelectContent as s, SelectItem as c, SelectTrigger as l, Separator as u, Typography as d } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { Button as e, FieldError as t, FieldRequirement as n, FlowDialog as r, Label as i, Select as a, SelectContent as o, SelectItem as s, SelectTrigger as c } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { AmountInput as l } from "../../../../../shared/ui/dist/lib/AmountInput/AmountInput.js";
+import { MaskedAccountNumber as u } from "../../../../../shared/ui/dist/lib/MaskedAccountNumber/MaskedAccountNumber.js";
+import "../../../../../shared/ui/dist/index.js";
+import { maskLabels as d } from "../TransfersWidget/maskLabels.js";
 import { ReviewTransferStep as f } from "./ReviewTransferStep.js";
-import { TransferMoneyModalHeader as p } from "./TransferMoneyModalHeader.js";
-import { TransferResultStep as m } from "./TransferResultStep.js";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { ArrowRight as v } from "lucide-react";
+import { TransferResultStep as p } from "./TransferResultStep.js";
+import { useFocusFirstInvalidField as m } from "./useFocusFirstInvalidField.js";
+import { useId as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferMoneyModal.js
-var y = "ttw:flex ttw:h-auto ttw:min-h-14 ttw:w-full ttw:cursor-pointer ttw:items-center ttw:justify-start ttw:rounded-lg ttw:border-border ttw:px-5 ttw:py-3.5 ttw:text-left ttw:text-base ttw:font-normal ttw:text-foreground ttw:disabled:cursor-not-allowed ttw:[&_svg]:ml-auto ttw:[&_svg]:shrink-0", b = {
+var v = {
 	position: "popper",
 	align: "start",
 	sideOffset: 4
 };
-function x(e) {
+function y(e) {
 	return [
 		e.primaryLabel,
-		e.secondaryLabel,
+		e.number?.last4,
 		e.balanceLabel
 	].filter(Boolean).join(" ");
 }
-function S({ opt: e, balanceInsetEnd: t }) {
-	return /* @__PURE__ */ _("div", {
-		className: "ttw:grid ttw:w-full ttw:min-w-0 ttw:grid-cols-[minmax(0,1fr)_auto] ttw:items-center ttw:gap-3",
-		children: [/* @__PURE__ */ _("span", {
-			className: "ttw:flex ttw:min-w-0 ttw:items-center ttw:gap-2 ttw:overflow-hidden",
-			children: [/* @__PURE__ */ g("span", {
-				className: "ttw:min-w-0 ttw:truncate ttw:rounded-full ttw:bg-primary/10 ttw:px-2.5 ttw:py-0.5 ttw:text-sm ttw:font-medium ttw:text-primary",
+function b({ opt: e, numberLabels: t }) {
+	return /* @__PURE__ */ _("span", {
+		className: "ttw:flex ttw:w-full ttw:min-w-0 ttw:items-center ttw:gap-2",
+		children: [
+			/* @__PURE__ */ g("span", {
+				className: "ttw:min-w-0 ttw:truncate",
 				children: e.primaryLabel
-			}), e.secondaryLabel ? /* @__PURE__ */ g("span", {
-				className: "ttw:shrink-0 ttw:text-sm ttw:text-foreground",
-				children: e.secondaryLabel
-			}) : null]
-		}), e.balanceLabel ? /* @__PURE__ */ g("span", {
-			className: t ? "ttw:justify-self-end ttw:shrink-0 ttw:pr-1.5 ttw:text-sm ttw:text-muted-foreground" : "ttw:justify-self-end ttw:shrink-0 ttw:text-sm ttw:text-muted-foreground",
-			children: e.balanceLabel
-		}) : null]
+			}),
+			e.number ? /* @__PURE__ */ g("span", {
+				className: "ttw:shrink-0 ttw:text-muted-foreground",
+				children: /* @__PURE__ */ g(u, {
+					last4: e.number.last4,
+					labels: t
+				})
+			}) : null,
+			e.balanceLabel ? /* @__PURE__ */ g("span", {
+				className: "ttw:ml-auto ttw:shrink-0 ttw:pl-2 ttw:text-muted-foreground ttw:tabular-nums",
+				children: e.balanceLabel
+			}) : null
+		]
 	});
 }
-function C({ value: e, options: t, placeholder: n }) {
-	let r = t.find((t) => t.optionValue === e);
-	return r ? /* @__PURE__ */ g(S, { opt: r }) : /* @__PURE__ */ g("span", {
-		className: "ttw:block ttw:w-full ttw:text-left ttw:text-muted-foreground",
-		children: n
+function x({ label: e, placeholder: r, value: l, options: u, onValueChange: d, error: f, testId: p, numberLabels: m }) {
+	let x = h(), S = `${x}-label`, C = `${x}-value`, w = `${x}-error`, T = u.find((e) => e.optionValue === l);
+	return /* @__PURE__ */ _("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-2",
+		children: [
+			/* @__PURE__ */ g(i, {
+				id: S,
+				htmlFor: x,
+				requirement: n.Required,
+				children: e
+			}),
+			/* @__PURE__ */ _(a, {
+				value: l,
+				onValueChange: d,
+				children: [/* @__PURE__ */ g(c, {
+					id: x,
+					className: "ttw:w-full",
+					"data-testid": p,
+					"aria-labelledby": `${S} ${C}`,
+					"aria-required": !0,
+					"aria-invalid": f ? !0 : void 0,
+					"aria-describedby": f ? w : void 0,
+					children: /* @__PURE__ */ g("span", {
+						id: C,
+						className: "ttw:flex ttw:min-w-0 ttw:flex-1",
+						children: T ? /* @__PURE__ */ g(b, {
+							opt: T,
+							numberLabels: m
+						}) : /* @__PURE__ */ g("span", {
+							className: "ttw:text-muted-foreground",
+							children: r
+						})
+					})
+				}), /* @__PURE__ */ g(o, {
+					...v,
+					children: u.map((e) => /* @__PURE__ */ g(s, {
+						value: e.optionValue,
+						textValue: y(e),
+						className: "ttw:[&>span:last-of-type]:w-full ttw:[&>span:last-of-type]:min-w-0",
+						"data-testid": `embedded-banking-transfer-money-account-option-${e.optionValue}`,
+						children: /* @__PURE__ */ g(b, {
+							opt: e,
+							numberLabels: m
+						})
+					}, e.optionValue))
+				})]
+			}),
+			f ? /* @__PURE__ */ g(t, {
+				id: w,
+				children: f
+			}) : null
+		]
 	});
 }
-function w(e) {
-	return e.map((e) => /* @__PURE__ */ g(c, {
-		value: e.optionValue,
-		textValue: x(e),
-		className: "ttw:cursor-pointer ttw:py-3 ttw:pr-6 ttw:[&>span:last-of-type]:min-w-0 ttw:[&>span:last-of-type]:w-full",
-		"data-testid": `embedded-banking-transfer-money-account-option-${e.optionValue}`,
-		children: /* @__PURE__ */ g(S, {
-			opt: e,
-			balanceInsetEnd: !0
-		})
-	}, e.optionValue));
-}
-function T(e, t, n) {
-	if (!e) return n;
-	let r = t.find((t) => t.optionValue === e);
-	return r ? x(r) : n;
-}
-function E({ open: c, onOpenChange: x, step: S, labels: E, fromOptions: D, toOptions: O, fromValue: k, toValue: A, onFromValueChange: j, onToValueChange: M, amountValue: N, onAmountValueChange: P, amountError: F, amountInputPrefix: I, reviewFromAccount: L, reviewToAccount: R, reviewAmountLabel: z, isSubmitting: B, isSuccess: V, canContinueFromAccounts: H, canContinueFromAmount: U, onContinueFromAccounts: W, onContinueFromAmount: G, onBack: K, onSubmit: q, onClearSelections: J, testIds: Y }) {
-	let X = /* @__PURE__ */ g(u, {
-		decorative: !0,
-		orientation: "horizontal",
-		className: "ttw:-mx-6",
-		style: { width: "calc(100% + 3rem)" }
-	});
-	return /* @__PURE__ */ g(t, {
-		open: c,
-		onOpenChange: x,
-		children: /* @__PURE__ */ _(n, {
-			showCloseButton: !0,
-			closeButtonTestId: Y?.closeButton,
-			labels: { close: E.modalClose },
-			className: "ttw:max-w-md ttw:gap-0 ttw:p-6",
-			"data-testid": Y?.root,
-			children: [S === "result" ? null : /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(p, {
-				title: S === "review" ? E.modalReviewHeading : E.modalTitle,
-				subtitle: E.modalAccountsSubtitle
-			}), X] }), S === "accounts" ? /* @__PURE__ */ _(h, { children: [
+function S({ open: a, onOpenChange: o, step: s, stepLabel: c, labels: u, fromOptions: v, toOptions: y, fromValue: b, toValue: S, onFromValueChange: C, onToValueChange: w, fromError: T, toError: E, amountValue: D, onAmountValueChange: O, amountError: k, amountInputPrefix: A, reviewFromAccount: j, reviewToAccount: M, reviewAmountLabel: N, isSubmitting: P, onContinueFromAccounts: F, onBack: I, onSubmit: L, onClearSelections: R, scrollToErrorToken: z, testIds: B }) {
+	let V = h(), H = `${V}-error`, U = s === "review", W = d(u), G = m(z);
+	return /* @__PURE__ */ g(r, {
+		open: a,
+		onOpenChange: o,
+		title: U ? u.modalReviewHeading : u.modalTitle,
+		stepLabel: c,
+		description: U ? void 0 : u.modalAccountsSubtitle,
+		onNext: U ? L : F,
+		onBack: U ? I : void 0,
+		nextLoading: P,
+		labels: {
+			back: u.modalBack,
+			next: U ? u.modalConfirmTransfer : u.modalContinue,
+			close: u.modalClose
+		},
+		testIds: {
+			content: B?.root,
+			close: B?.closeButton,
+			next: U ? B?.reviewStep?.confirm : B?.accountsConfirm,
+			back: B?.reviewStep?.goBack
+		},
+		result: s === "result" ? /* @__PURE__ */ g(p, {
+			fromAccount: j,
+			toAccount: M,
+			amountLabel: N,
+			onDone: () => o(!1),
+			testIds: B?.resultStep,
+			labels: {
+				title: u.modalResultSuccessTitle,
+				description: u.modalResultDescription,
+				from: u.modalFromLabel,
+				to: u.modalToLabel,
+				amount: u.modalAmountLabel,
+				endingIn: u.accountNumberEndingIn,
+				done: u.modalDone
+			}
+		}) : void 0,
+		children: U ? /* @__PURE__ */ g(f, {
+			fromAccount: j,
+			toAccount: M,
+			amountLabel: N,
+			labels: {
+				from: u.modalFromLabel,
+				to: u.modalToLabel,
+				amount: u.modalAmountLabel,
+				endingIn: u.accountNumberEndingIn,
+				showNumber: u.showAccountNumber,
+				hideNumber: u.hideAccountNumber
+			}
+		}) : /* @__PURE__ */ _("div", {
+			ref: G,
+			className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:pb-1",
+			children: [
+				/* @__PURE__ */ g(x, {
+					label: u.modalFromLabel,
+					placeholder: u.modalSelectPlaceholder,
+					value: b,
+					options: v,
+					onValueChange: C,
+					error: T,
+					numberLabels: W,
+					testId: B?.fromAccountTrigger
+				}),
+				/* @__PURE__ */ g(x, {
+					label: u.modalToLabel,
+					placeholder: u.modalSelectPlaceholder,
+					value: S,
+					options: y,
+					onValueChange: w,
+					error: E,
+					numberLabels: W,
+					testId: B?.toAccountTrigger
+				}),
 				/* @__PURE__ */ _("div", {
-					className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:py-5",
+					className: "ttw:flex ttw:flex-col ttw:gap-2",
 					children: [
-						/* @__PURE__ */ _(o, {
-							value: k,
-							onValueChange: j,
-							children: [/* @__PURE__ */ g(l, {
-								className: y,
-								"data-testid": Y?.fromAccountTrigger,
-								"aria-label": T(k, D, E.modalFromAccountPlaceholder),
-								children: /* @__PURE__ */ g("span", {
-									className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:justify-start ttw:text-left",
-									children: /* @__PURE__ */ g(C, {
-										value: k,
-										options: D,
-										placeholder: E.modalFromAccountPlaceholder
-									})
-								})
-							}), /* @__PURE__ */ g(s, {
-								...b,
-								children: w(D)
-							})]
-						}),
-						/* @__PURE__ */ _(o, {
-							value: A,
-							onValueChange: M,
-							children: [/* @__PURE__ */ g(l, {
-								className: y,
-								"data-testid": Y?.toAccountTrigger,
-								"aria-label": T(A, O, E.modalToAccountPlaceholder),
-								children: /* @__PURE__ */ g("span", {
-									className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:items-center ttw:justify-start ttw:text-left",
-									children: /* @__PURE__ */ g(C, {
-										value: A,
-										options: O,
-										placeholder: E.modalToAccountPlaceholder
-									})
-								})
-							}), /* @__PURE__ */ g(s, {
-								...b,
-								children: w(O)
-							})]
+						/* @__PURE__ */ g(i, {
+							htmlFor: V,
+							requirement: n.Required,
+							children: u.modalAmountLabel
 						}),
-						/* @__PURE__ */ _("div", {
-							className: "ttw:flex ttw:flex-col ttw:gap-2",
-							children: [
-								/* @__PURE__ */ g(a, {
-									htmlFor: "transfer-money-modal-amount",
-									className: F ? "ttw:text-destructive" : "ttw:text-muted-foreground",
-									children: E.modalAmountLabel
-								}),
-								/* @__PURE__ */ _("div", {
-									className: F ? "ttw:flex ttw:min-h-14 ttw:items-center ttw:gap-2 ttw:rounded-lg ttw:border ttw:border-destructive ttw:bg-transparent ttw:px-5 ttw:py-3.5" : "ttw:flex ttw:min-h-14 ttw:items-center ttw:gap-2 ttw:rounded-lg ttw:border ttw:border-input ttw:bg-transparent ttw:px-5 ttw:py-3.5",
-									children: [/* @__PURE__ */ g("span", {
-										className: "ttw:shrink-0 ttw:text-base ttw:text-muted-foreground",
-										"aria-hidden": !0,
-										children: I
-									}), /* @__PURE__ */ g(i, {
-										id: "transfer-money-modal-amount",
-										className: "ttw:h-auto ttw:min-h-0 ttw:flex-1 ttw:border-0 ttw:bg-transparent ttw:px-0 ttw:py-0 ttw:text-base ttw:shadow-none ttw:focus-visible:ring-0",
-										inputMode: "decimal",
-										autoComplete: "off",
-										value: N,
-										onChange: (e) => P(e.target.value),
-										placeholder: E.modalAmountPlaceholder,
-										"aria-invalid": F ? !0 : void 0,
-										"data-testid": Y?.amountInput
-									})]
-								}),
-								F ? /* @__PURE__ */ g(d, {
-									variant: "body2",
-									color: "destructive",
-									component: "p",
-									className: "ttw:mt-0.5",
-									children: F
-								}) : null
-							]
+						/* @__PURE__ */ g(l, {
+							id: V,
+							required: !0,
+							currencySymbol: A,
+							value: D,
+							onValueChange: O,
+							placeholder: u.modalAmountPlaceholder,
+							"aria-invalid": k ? !0 : void 0,
+							"aria-describedby": k ? H : void 0,
+							"data-testid": B?.amountInput
 						}),
-						J ? /* @__PURE__ */ g("div", {
-							className: "ttw:flex ttw:justify-start",
-							children: /* @__PURE__ */ g(e, {
-								type: "button",
-								variant: "link",
-								className: "ttw:h-auto ttw:cursor-pointer ttw:px-0 ttw:py-0 ttw:text-base ttw:font-normal",
-								onClick: J,
-								children: E.modalClearSelections
-							})
+						k ? /* @__PURE__ */ g(t, {
+							id: H,
+							children: k
 						}) : null
 					]
 				}),
-				X,
-				/* @__PURE__ */ g("div", {
-					className: "ttw:flex ttw:flex-col ttw:gap-2 ttw:pt-4",
-					children: /* @__PURE__ */ _(e, {
-						type: "button",
-						variant: "default",
-						className: "ttw:h-11 ttw:w-full ttw:cursor-pointer ttw:gap-2 ttw:rounded-lg ttw:font-medium ttw:disabled:pointer-events-none ttw:disabled:cursor-not-allowed ttw:disabled:bg-muted ttw:disabled:text-muted-foreground ttw:disabled:opacity-100",
-						disabled: !H || !U || !!F,
-						onClick: W,
-						"data-testid": Y?.accountsConfirm,
-						children: [E.modalAccountsConfirm, /* @__PURE__ */ g(v, {
-							className: "ttw:size-4",
-							"aria-hidden": !0
-						})]
-					})
-				})
-			] }) : S === "review" ? /* @__PURE__ */ g(f, {
-				fromAccount: L,
-				toAccount: R,
-				amountLabel: z,
-				isSubmitting: B,
-				onConfirm: q,
-				onGoBack: K,
-				testIds: Y?.reviewStep,
-				labels: {
-					fromAccountSection: E.modalReviewFromAccountLabel,
-					toAccountSection: E.modalReviewToAccountLabel,
-					amountSection: E.modalAmountLabel,
-					confirmTransfer: E.modalConfirmTransfer,
-					goBack: E.modalGoBack
-				}
-			}) : S === "result" ? /* @__PURE__ */ g(m, {
-				amountLabel: z,
-				isSuccess: V,
-				onBackToTransfers: () => x(!1),
-				testIds: Y?.resultStep,
-				labels: {
-					successTitle: E.modalResultSuccessTitle,
-					errorTitle: E.modalResultErrorTitle,
-					transferMessagePrefix: E.modalResultTransferMessagePrefix,
-					successMessageSuffix: E.modalResultSuccessMessageSuffix,
-					errorMessageSuffix: E.modalResultErrorMessageSuffix,
-					backToTransfers: E.modalBackToTransfers
-				}
-			}) : /* @__PURE__ */ _(h, { children: [
-				/* @__PURE__ */ g("div", {
-					className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:py-5",
-					children: /* @__PURE__ */ _("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-2",
-						children: [
-							/* @__PURE__ */ g(d, {
-								variant: "body2",
-								className: "ttw:font-medium",
-								children: E.modalAmountLabel
-							}),
-							/* @__PURE__ */ g(i, {
-								className: "ttw:h-11 ttw:px-4 ttw:py-3",
-								inputMode: "decimal",
-								autoComplete: "off",
-								value: N,
-								onChange: (e) => P(e.target.value),
-								placeholder: E.modalAmountPlaceholder,
-								"aria-invalid": F ? !0 : void 0
-							}),
-							F ? /* @__PURE__ */ g(d, {
-								variant: "body2",
-								color: "destructive",
-								component: "p",
-								children: F
-							}) : null
-						]
-					})
-				}),
-				X,
-				/* @__PURE__ */ _(r, {
-					className: "ttw:flex ttw:flex-row ttw:flex-wrap ttw:gap-2 ttw:pt-4 ttw:sm:justify-between",
-					children: [/* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-1 ttw:flex-wrap ttw:gap-2",
-						children: /* @__PURE__ */ g(e, {
-							type: "button",
-							variant: "outline",
-							onClick: K,
-							disabled: B,
-							children: E.modalBack
-						})
-					}), /* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-wrap ttw:gap-2",
-						children: /* @__PURE__ */ g(e, {
-							type: "button",
-							onClick: G,
-							disabled: !U,
-							children: E.modalContinue
-						})
-					})]
-				})
-			] })]
+				R ? /* @__PURE__ */ g(e, {
+					type: "button",
+					variant: "link",
+					className: "ttw:h-auto ttw:self-start ttw:p-0",
+					onClick: R,
+					children: u.modalClearSelections
+				}) : null
+			]
 		})
 	});
 }
-export { E as TransferMoneyModal };
+export { S as TransferMoneyModal };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferResultStep.js

@@ -1,65 +1,50 @@
-import { Button as e, Typography as t } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ResultScreen as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { TransferAccountValue as t } from "../TransfersWidget/TransferAccountValue.js";
 import { DEFAULT_TRANSFER_RESULT_STEP_LABELS as n } from "./transferResultStepLabels.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { ArrowLeft as a, CheckCircle2 as o, X as s } from "lucide-react";
+import { jsx as r } from "react/jsx-runtime";
+import { CircleCheck as i } from "lucide-react";
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/TransferResultStep.js
-function c({ amountLabel: c, isSuccess: l, onBackToTransfers: u, labels: d, testIds: f }) {
-	let p = {
+function a({ fromAccount: a, toAccount: o, amountLabel: s, onDone: c, labels: l, testIds: u }) {
+	let d = {
 		...n,
-		...d
+		...l
 	};
-	return /* @__PURE__ */ i("div", {
-		className: "ttw:flex ttw:flex-col ttw:items-center ttw:px-2 ttw:py-8",
-		children: [
-			/* @__PURE__ */ r("div", {
-				className: l ? "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-emerald-50" : "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-red-50",
-				children: l ? /* @__PURE__ */ r("div", {
-					className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-emerald-100",
-					children: /* @__PURE__ */ r(o, {
-						className: "ttw:size-7 ttw:text-emerald-600",
-						"aria-hidden": !0
-					})
-				}) : /* @__PURE__ */ r("div", {
-					className: "ttw:flex ttw:size-10 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-destructive",
-					children: /* @__PURE__ */ r(s, {
-						className: "ttw:size-6 ttw:text-destructive-foreground",
-						"aria-hidden": !0
-					})
+	return /* @__PURE__ */ r(e, {
+		icon: /* @__PURE__ */ r(i, {}),
+		tone: "success",
+		title: /* @__PURE__ */ r("span", {
+			"data-testid": u?.title,
+			children: d.title
+		}),
+		description: d.description,
+		details: [
+			{
+				label: d.from,
+				value: /* @__PURE__ */ r(t, {
+					name: a.name,
+					number: a.number && { last4: a.number.last4 },
+					numberLabels: { endingIn: d.endingIn }
 				})
-			}),
-			/* @__PURE__ */ r(t, {
-				component: "h2",
-				className: "ttw:mb-2 ttw:text-center ttw:text-lg ttw:font-bold ttw:text-foreground",
-				"data-testid": l ? "embedded-banking-transfer-money-result-success-title" : "embedded-banking-transfer-money-result-error-title",
-				children: l ? p.successTitle : p.errorTitle
-			}),
-			/* @__PURE__ */ i(t, {
-				variant: "body2",
-				color: "muted",
-				component: "p",
-				className: "ttw:mb-8 ttw:max-w-sm ttw:text-center",
-				children: [
-					p.transferMessagePrefix,
-					/* @__PURE__ */ r("span", {
-						className: "ttw:font-semibold ttw:text-foreground",
-						children: c
-					}),
-					" ",
-					l ? p.successMessageSuffix : p.errorMessageSuffix
-				]
-			}),
-			/* @__PURE__ */ i(e, {
-				type: "button",
-				variant: "outline",
-				className: "ttw:h-11 ttw:w-full ttw:cursor-pointer ttw:gap-2 ttw:rounded-lg ttw:font-semibold",
-				onClick: u,
-				"data-testid": f?.backToTransfers,
-				children: [/* @__PURE__ */ r(a, {
-					className: "ttw:size-4",
-					"aria-hidden": !0
-				}), p.backToTransfers]
-			})
-		]
+			},
+			{
+				label: d.to,
+				value: /* @__PURE__ */ r(t, {
+					name: o.name,
+					number: o.number && { last4: o.number.last4 },
+					numberLabels: { endingIn: d.endingIn }
+				})
+			},
+			{
+				label: d.amount,
+				value: /* @__PURE__ */ r("span", {
+					className: "ttw:tabular-nums",
+					children: s
+				})
+			}
+		],
+		onDone: c,
+		labels: { done: d.done },
+		testIds: { done: u?.done }
 	});
 }
-export { c as TransferResultStep };
+export { a as TransferResultStep };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/reviewTransferStepLabels.js

@@ -1,9 +1,10 @@
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/reviewTransferStepLabels.js
 var e = {
-	fromAccountSection: "From Account",
-	toAccountSection: "To Account",
-	amountSection: "Amount",
-	confirmTransfer: "Confirm transfer",
-	goBack: "Go back"
+	from: "From",
+	to: "To",
+	amount: "Amount",
+	endingIn: "ending in {last4}",
+	showNumber: "Show number",
+	hideNumber: "Hide number"
 };
 export { e as DEFAULT_REVIEW_TRANSFER_STEP_LABELS };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/transferResultStepLabels.js

@@ -1,10 +1,11 @@
 // ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/transferResultStepLabels.js
 var e = {
-	successTitle: "Success!",
-	errorTitle: "Error",
-	transferMessagePrefix: "Your transfer of ",
-	successMessageSuffix: "was sent!",
-	errorMessageSuffix: "was not sent.",
-	backToTransfers: "Back to Transfers"
+	title: "Transfer submitted",
+	description: "It can take 1–2 business days to arrive.",
+	from: "From",
+	to: "To",
+	amount: "Amount",
+	endingIn: "ending in {last4}",
+	done: "Done"
 };
 export { e as DEFAULT_TRANSFER_RESULT_STEP_LABELS };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/useFocusFirstInvalidField.js

@@ -0,0 +1,9 @@
+import { useEffect as e, useRef as t } from "react";
+// ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransferMoneyModal/useFocusFirstInvalidField.js
+function n(n) {
+	let r = t(null), i = t(n);
+	return e(() => {
+		n !== i.current && (i.current = n, r.current?.querySelector("[aria-invalid=\"true\"]")?.focus());
+	}, [n]), r;
+}
+export { n as useFocusFirstInvalidField };

package/dist/libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferAccountValue.js

@@ -0,0 +1,32 @@
+import { MaskedAccountNumber as e } from "../../../../../shared/ui/dist/lib/MaskedAccountNumber/MaskedAccountNumber.js";
+import "../../../../../shared/ui/dist/index.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+// ../../libs/tesouro-embedded-components-react/transfers-widget/ui/dist/lib/TransfersWidget/TransferAccountValue.js
+function r({ name: r, number: i, secondaryLabel: a, numberLabels: o, singleLine: s = !1 }) {
+	return /* @__PURE__ */ n("div", {
+		className: "ttw:flex ttw:min-w-0 ttw:flex-col",
+		children: [
+			s ? /* @__PURE__ */ t("span", {
+				className: "ttw:block ttw:max-w-50 ttw:truncate",
+				title: r,
+				children: r
+			}) : /* @__PURE__ */ t("span", {
+				className: "ttw:min-w-0 ttw:break-words",
+				children: r
+			}),
+			i ? /* @__PURE__ */ t("span", {
+				className: "ttw:font-normal ttw:text-muted-foreground",
+				children: /* @__PURE__ */ t(e, {
+					last4: i.last4,
+					fullNumber: i.fullNumber,
+					labels: o
+				})
+			}) : null,
+			a ? /* @__PURE__ */ t("span", {
+				className: "ttw:text-sm ttw:font-normal ttw:text-muted-foreground",
+				children: a
+			}) : null
+		]
+	});
+}
+export { r as TransferAccountValue };