@tesouro/embedded-components-react 0.3.61 → 0.3.63

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsHeader.js

@@ -1,56 +1,55 @@
 import { Badge as e, Button as t, DropdownMenu as n, DropdownMenuContent as r, DropdownMenuTrigger as i, Skeleton as a } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { cardStatusToneClassName as o } from "./statusBadge.js";
-import { cardDetailsWidgetUiTestIds as s } from "./testIds.js";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { EllipsisVerticalIcon as u, XIcon as d } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { EllipsisVerticalIcon as l, XIcon as u } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsHeader.js
-function f({ labels: f, title: p, isTitlePending: m, statusLabel: h, statusTone: g, formFactorLabel: _, cardMenu: v, onClose: y }) {
-	return /* @__PURE__ */ l("div", {
+function d({ labels: d, title: f, isTitlePending: p, statusLabel: m, statusTone: h, formFactorLabel: g, cardMenu: _, onClose: v, testIds: y }) {
+	return /* @__PURE__ */ c("div", {
 		className: "ttw:flex ttw:items-start ttw:gap-1.5 ttw:px-4 ttw:pt-4 ttw:pb-3",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ c("div", {
 				className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-1.5",
-				children: [/* @__PURE__ */ l("div", {
+				children: [/* @__PURE__ */ c("div", {
 					className: "ttw:flex ttw:items-center ttw:gap-1.5",
-					children: [m ? /* @__PURE__ */ c(a, { className: "ttw:h-8 ttw:w-48" }) : p ? /* @__PURE__ */ c("h2", {
+					children: [p ? /* @__PURE__ */ s(a, { className: "ttw:h-8 ttw:w-48" }) : f ? /* @__PURE__ */ s("h2", {
 						className: "ttw:truncate ttw:text-2xl ttw:font-semibold ttw:tracking-[-0.6px] ttw:text-foreground",
-						children: p
-					}) : null, h ? /* @__PURE__ */ c(e, {
-						className: o(g ?? "neutral"),
-						children: h
+						children: f
+					}) : null, m ? /* @__PURE__ */ s(e, {
+						className: o(h ?? "neutral"),
+						children: m
 					}) : null]
-				}), _ ? /* @__PURE__ */ c("p", {
+				}), g ? /* @__PURE__ */ s("p", {
 					className: "ttw:text-sm ttw:text-muted-foreground",
-					children: _
+					children: g
 				}) : null]
 			}),
-			v ? /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(i, {
+			_ ? /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(i, {
 				asChild: !0,
-				children: /* @__PURE__ */ c(t, {
+				children: /* @__PURE__ */ s(t, {
 					type: "button",
 					variant: "ghost",
 					size: "icon",
 					className: "ttw:size-8 ttw:shrink-0 ttw:bg-muted",
-					"aria-label": f.menuTriggerAriaLabel,
-					"data-testid": s.menuTrigger,
-					children: /* @__PURE__ */ c(u, { className: "ttw:size-4" })
+					"aria-label": d.menuTriggerAriaLabel,
+					"data-testid": y?.menuTrigger,
+					children: /* @__PURE__ */ s(l, { className: "ttw:size-4" })
 				})
-			}), /* @__PURE__ */ c(r, {
+			}), /* @__PURE__ */ s(r, {
 				align: "end",
-				children: v
+				children: _
 			})] }) : null,
-			y ? /* @__PURE__ */ c(t, {
+			v ? /* @__PURE__ */ s(t, {
 				type: "button",
 				variant: "ghost",
 				size: "icon",
 				className: "ttw:size-8 ttw:shrink-0",
-				"aria-label": f.closeAriaLabel,
-				"data-testid": s.closeButton,
-				onClick: y,
-				children: /* @__PURE__ */ c(d, { className: "ttw:size-4" })
+				"aria-label": d.closeAriaLabel,
+				"data-testid": y?.closeButton,
+				onClick: v,
+				children: /* @__PURE__ */ s(u, { className: "ttw:size-4" })
 			}) : null
 		]
 	});
 }
 //#endregion
-export { f as CardDetailsHeader };
+export { d as CardDetailsHeader };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js

@@ -4,166 +4,196 @@
 "use client";
 import { Button as e, Skeleton as t, cn as n } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { EmptyState as r } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
-import { ErrorState as i } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
-import { InlineErrorAlert as a } from "../../../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
+import { ErrorState as ee } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { InlineErrorAlert as i } from "../../../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
 import "../../../../../shared/ui/dist/index.js";
-import { cardDetailsWidgetUiTestIds as o } from "./testIds.js";
-import { CardDetailsHeader as s } from "./CardDetailsHeader.js";
-import { CARD_FACE_WIDTH_CLASS_NAME as c } from "./cardFaceSurface.js";
-import { CardFace as ee } from "./CardFace.js";
-import { DetailCopyRow as l } from "./DetailCopyRow.js";
-import { resolveCardDetailsPanelLabels as u } from "./labels.js";
-import { CardCredentialsFace as d } from "./CardCredentialsFace.js";
-import { CardFaceFlip as f } from "./CardFaceFlip.js";
-import { useMemo as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { CheckIcon as g, CreditCardIcon as _, EyeIcon as v, EyeOffIcon as y, PowerIcon as b } from "lucide-react";
+import { CardDetailsHeader as a } from "./CardDetailsHeader.js";
+import { CARD_FACE_WIDTH_CLASS_NAME as te } from "./cardFaceSurface.js";
+import { CardFace as ne } from "./CardFace.js";
+import { DetailCopyRow as o } from "./DetailCopyRow.js";
+import { resolveCardDetailsPanelLabels as s } from "./labels.js";
+import { CardCredentialsFace as c } from "./CardCredentialsFace.js";
+import { CardFaceFlip as l } from "./CardFaceFlip.js";
+import { NicknameRow as u } from "./NicknameRow.js";
+import { useMemo as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { CheckIcon as re, CreditCardIcon as m, EyeIcon as h, EyeOffIcon as ie, LockIcon as ae, LockOpenIcon as oe, PowerIcon as se } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js
-function x({ labels: x, state: S, nickname: C, statusLabel: te, statusTone: ne, formFactorLabel: w, cardMenu: T, onClose: E, bankLogoSrc: D, bankLogoAlt: O, cardholderName: k, maskedCardNumber: A, programLabel: j, cardFaceStatusLabel: M, billingAddress: N, allowedCategories: P, spendLimitLabels: F, perTransactionMaxLabel: I, onCopy: L, onActivate: R, onViewCard: z, onHideCard: B, revealState: V = "hidden", revealedCardNumber: H, revealedExpirationDate: U, revealedSecurityCode: W, onRetry: G, className: K }) {
-	let q = p(() => u(x), [x]), J = !!P?.length, Y = !!F?.length, X = !!I, Z = V === "revealed", Q = Z ? B : z, $ = /* @__PURE__ */ m(ee, {
-		bankLogoSrc: D,
-		bankLogoAlt: O ?? q.cardFace.bankLogoAlt,
-		cardholderName: k ?? "",
-		maskedCardNumber: A ?? "",
-		programLabel: j ?? "",
-		statusLabel: M
+function g({ labels: g, state: _, nickname: v, statusLabel: ce, statusTone: le, formFactorLabel: ue, cardMenu: de, onClose: fe, bankLogoSrc: pe, bankLogoAlt: me, cardholderName: y, maskedCardNumber: b, programLabel: x, cardFaceStatusLabel: S, billingAddress: C, allowedCategories: w, spendLimitLabels: T, perTransactionMaxLabel: E, onCopy: D, onEditNickname: O, nicknameEditState: k = "closed", nicknameDraft: A, onNicknameDraftChange: j, onSaveNickname: M, onCancelNicknameEdit: N, isNicknameSaveDisabled: P, onActivate: F, onViewCard: I, onHideCard: L, revealState: R = "hidden", revealedCardNumber: z, revealedExpirationDate: he, revealedSecurityCode: ge, isLocked: B, lockState: V = "idle", onLockCard: H, onUnlockCard: U, onRetry: _e, testIds: W, className: ve }) {
+	let G = d(() => s(g), [g]), K = !!w?.length, q = !!T?.length, J = !!E, Y = R === "revealed", X = Y ? L : I, Z = !!(H || U), Q = B ? U : H, $ = /* @__PURE__ */ f(ne, {
+		bankLogoSrc: pe,
+		bankLogoAlt: me ?? G.cardFace.bankLogoAlt,
+		cardholderName: y ?? "",
+		maskedCardNumber: b ?? "",
+		programLabel: x ?? "",
+		statusLabel: S,
+		isLocked: B,
+		lockedLabel: G.lock.cardFaceLabel,
+		testIds: W?.cardFace
 	});
-	return /* @__PURE__ */ h("div", {
-		"data-testid": o.panel,
-		className: n("ttw:flex ttw:w-full ttw:flex-col", K),
-		children: [/* @__PURE__ */ m(s, {
-			labels: q.header,
-			title: S === "loaded" ? C ?? q.header.untitledCard : void 0,
-			isTitlePending: S === "loading",
-			statusLabel: S === "loaded" ? te : void 0,
-			statusTone: ne,
-			formFactorLabel: S === "loaded" ? w : void 0,
-			cardMenu: S === "loaded" ? T : void 0,
-			onClose: E
-		}), /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ p("div", {
+		"data-testid": W?.root,
+		className: n("ttw:flex ttw:w-full ttw:flex-col", ve),
+		children: [/* @__PURE__ */ f(a, {
+			testIds: W?.header,
+			labels: G.header,
+			title: _ === "loaded" ? v ?? G.header.untitledCard : void 0,
+			isTitlePending: _ === "loading",
+			statusLabel: _ === "loaded" ? ce : void 0,
+			statusTone: le,
+			formFactorLabel: _ === "loaded" ? ue : void 0,
+			cardMenu: _ === "loaded" ? de : void 0,
+			onClose: fe
+		}), /* @__PURE__ */ f("div", {
 			className: "ttw:px-4 ttw:pb-4",
-			children: S === "loading" ? /* @__PURE__ */ h("div", {
-				"data-testid": o.loading,
+			children: _ === "loading" ? /* @__PURE__ */ p("div", {
+				"data-testid": W?.loading,
 				role: "status",
-				"aria-label": q.status.loadingAriaLabel,
+				"aria-label": G.status.loadingAriaLabel,
 				className: "ttw:space-y-4",
-				children: [/* @__PURE__ */ m(t, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ m(t, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
-			}) : S === "error" ? /* @__PURE__ */ m(i, {
-				title: q.status.errorTitle,
-				description: q.status.errorDescription,
-				retryLabel: q.status.errorRetry,
-				onRetry: G
-			}) : S === "notFound" ? /* @__PURE__ */ m(r, {
-				icon: /* @__PURE__ */ m(_, { className: "ttw:size-6 ttw:text-muted-foreground" }),
-				title: q.status.notFoundTitle,
-				description: q.status.notFoundDescription
-			}) : /* @__PURE__ */ h("div", {
+				children: [/* @__PURE__ */ f(t, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ f(t, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
+			}) : _ === "error" ? /* @__PURE__ */ f(ee, {
+				title: G.status.errorTitle,
+				description: G.status.errorDescription,
+				retryLabel: G.status.errorRetry,
+				onRetry: _e
+			}) : _ === "notFound" ? /* @__PURE__ */ f(r, {
+				icon: /* @__PURE__ */ f(m, { className: "ttw:size-6 ttw:text-muted-foreground" }),
+				title: G.status.notFoundTitle,
+				description: G.status.notFoundDescription
+			}) : /* @__PURE__ */ p("div", {
 				className: "ttw:flex ttw:flex-col ttw:gap-4",
-				children: [/* @__PURE__ */ h("div", {
+				children: [/* @__PURE__ */ p("div", {
 					className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border ttw:sm:flex-row",
-					children: [/* @__PURE__ */ m("div", {
+					children: [/* @__PURE__ */ f("div", {
 						className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5",
-						children: /* @__PURE__ */ h("div", {
-							className: n("ttw:flex ttw:flex-col ttw:gap-4", c),
-							children: [z ? /* @__PURE__ */ m(f, {
-								isFlipped: Z,
+						children: /* @__PURE__ */ p("div", {
+							className: n("ttw:flex ttw:flex-col ttw:gap-4", te),
+							children: [I ? /* @__PURE__ */ f(l, {
+								testIds: W?.cardFaceFlip,
+								isFlipped: Y,
 								front: $,
-								back: /* @__PURE__ */ m(d, {
-									labels: q.credentials,
-									cardNumber: H,
-									expirationDate: U,
-									securityCode: W,
-									onCopy: L
+								back: /* @__PURE__ */ f(c, {
+									labels: G.credentials,
+									cardNumber: z,
+									expirationDate: he,
+									securityCode: ge,
+									isLocked: B,
+									onCopy: D,
+									testIds: W?.credentialsFace
 								})
-							}) : $, R || z ? /* @__PURE__ */ h("div", {
+							}) : $, F || I || Z ? /* @__PURE__ */ p("div", {
 								className: "ttw:flex ttw:flex-col ttw:gap-2",
 								children: [
-									R ? /* @__PURE__ */ h(e, {
+									F ? /* @__PURE__ */ p(e, {
 										type: "button",
 										className: "ttw:self-center",
-										onClick: R,
-										children: [/* @__PURE__ */ m(b, {
+										onClick: F,
+										children: [/* @__PURE__ */ f(se, {
 											className: "ttw:size-4",
 											"aria-hidden": "true"
-										}), q.actions.activateCard]
+										}), G.actions.activateCard]
 									}) : null,
-									z ? /* @__PURE__ */ m("div", {
+									I || Z ? /* @__PURE__ */ p("div", {
 										className: "ttw:flex ttw:gap-2",
-										children: /* @__PURE__ */ h(e, {
+										children: [I ? /* @__PURE__ */ p(e, {
+											type: "button",
+											variant: "outline",
+											className: "ttw:flex-1",
+											disabled: !X,
+											loading: R === "revealing",
+											onClick: X,
+											children: [f(Y ? ie : h, {
+												className: "ttw:size-4",
+												"aria-hidden": "true"
+											}), Y ? G.actions.hideCard : G.actions.viewCard]
+										}) : null, Z ? /* @__PURE__ */ p(e, {
 											type: "button",
 											variant: "outline",
 											className: "ttw:flex-1",
 											disabled: !Q,
-											loading: V === "revealing",
+											loading: V === "pending",
 											onClick: Q,
-											children: [m(Z ? y : v, {
+											children: [f(B ? oe : ae, {
 												className: "ttw:size-4",
 												"aria-hidden": "true"
-											}), Z ? q.actions.hideCard : q.actions.viewCard]
-										})
+											}), B ? G.lock.unlockCard : G.lock.lockCard]
+										}) : null]
+									}) : null,
+									B ? /* @__PURE__ */ f("p", {
+										className: "ttw:text-sm ttw:text-destructive",
+										children: Z ? G.lock.lockedDescription : G.lock.lockedDescriptionWithoutUnlock
 									}) : null,
-									V === "errored" ? /* @__PURE__ */ m(a, { children: q.credentials.errorDescription }) : null
+									V === "errored" ? /* @__PURE__ */ f(i, { children: G.lock.errorDescription }) : null,
+									R === "errored" ? /* @__PURE__ */ f(i, { children: G.credentials.errorDescription }) : null
 								]
 							}) : null]
 						})
-					}), /* @__PURE__ */ h("div", {
+					}), /* @__PURE__ */ p("div", {
 						className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:border-t ttw:border-border ttw:sm:border-t-0 ttw:sm:border-l",
 						children: [
-							/* @__PURE__ */ m(l, {
-								label: q.fields.cardholder,
-								copyAriaLabel: k && L ? q.fields.copyCardholderAriaLabel : void 0,
-								onCopy: k && L ? () => L(k) : void 0,
-								children: k ?? q.fields.emptyValue
+							/* @__PURE__ */ f(o, {
+								label: G.fields.cardholder,
+								copyAriaLabel: y && D ? G.fields.copyCardholderAriaLabel : void 0,
+								onCopy: y && D ? () => D(y) : void 0,
+								children: y ?? G.fields.emptyValue
 							}),
-							/* @__PURE__ */ m(l, {
-								label: q.fields.nickname,
-								copyAriaLabel: C && L ? q.fields.copyNicknameAriaLabel : void 0,
-								onCopy: C && L ? () => L(C) : void 0,
-								isLast: !N,
-								children: C ?? q.fields.emptyValue
-							}),
-							N ? /* @__PURE__ */ m(l, {
-								label: q.fields.billingAddress,
-								copyAriaLabel: L ? q.fields.copyBillingAddressAriaLabel : void 0,
-								onCopy: L ? () => L(N) : void 0,
-								isLast: !0,
-								children: N
-							}) : null
+							C ? /* @__PURE__ */ f(o, {
+								label: G.fields.billingAddress,
+								copyAriaLabel: D ? G.fields.copyBillingAddressAriaLabel : void 0,
+								onCopy: D ? () => D(C) : void 0,
+								children: C
+							}) : null,
+							/* @__PURE__ */ f(u, {
+								fieldLabels: G.fields,
+								labels: G.nickname,
+								nickname: v,
+								editState: k,
+								onEdit: O,
+								draft: A,
+								onDraftChange: j,
+								onSave: M,
+								onCancel: N,
+								isSaveDisabled: P,
+								copyAriaLabel: v && D ? G.fields.copyNicknameAriaLabel : void 0,
+								onCopy: v && D ? () => D(v) : void 0,
+								isLast: !0
+							})
 						]
 					})]
-				}), J || Y || X ? /* @__PURE__ */ h("div", {
+				}), K || q || J ? /* @__PURE__ */ p("div", {
 					className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border",
 					children: [
-						/* @__PURE__ */ m("h3", {
+						/* @__PURE__ */ f("h3", {
 							className: "ttw:border-b ttw:border-border ttw:px-4 ttw:pt-4 ttw:pb-3 ttw:text-base ttw:font-semibold ttw:text-foreground",
-							children: q.fields.cardControlsHeading
+							children: G.fields.cardControlsHeading
 						}),
-						J ? /* @__PURE__ */ m(l, {
-							label: q.fields.allowedCategories,
-							isLast: !Y && !X,
-							children: /* @__PURE__ */ m("div", {
+						K ? /* @__PURE__ */ f(o, {
+							label: G.fields.allowedCategories,
+							isLast: !q && !J,
+							children: /* @__PURE__ */ f("div", {
 								className: "ttw:mt-2 ttw:flex ttw:flex-wrap ttw:gap-2",
-								children: P?.map((e) => /* @__PURE__ */ h("span", {
+								children: w?.map((e) => /* @__PURE__ */ p("span", {
 									className: "ttw:inline-flex ttw:items-center ttw:gap-1.5 ttw:rounded-full ttw:border ttw:border-primary ttw:bg-primary/5 ttw:px-4 ttw:py-2 ttw:text-sm ttw:font-semibold ttw:text-primary",
-									children: [/* @__PURE__ */ m(g, {
+									children: [/* @__PURE__ */ f(re, {
 										"aria-hidden": "true",
 										className: "ttw:size-3.5"
 									}), e]
 								}, e))
 							})
 						}) : null,
-						Y ? /* @__PURE__ */ m(l, {
-							label: q.fields.spendLimit,
-							isLast: !X,
-							children: /* @__PURE__ */ m("div", {
+						q ? /* @__PURE__ */ f(o, {
+							label: G.fields.spendLimit,
+							isLast: !J,
+							children: /* @__PURE__ */ f("div", {
 								className: "ttw:flex ttw:flex-col ttw:gap-1",
-								children: F?.map((e, t) => /* @__PURE__ */ m("div", { children: e }, `${e}-${t}`))
+								children: T?.map((e, t) => /* @__PURE__ */ f("div", { children: e }, `${e}-${t}`))
 							})
 						}) : null,
-						X ? /* @__PURE__ */ m(l, {
-							label: q.fields.perTransactionMax,
+						J ? /* @__PURE__ */ f(o, {
+							label: G.fields.perTransactionMax,
 							isLast: !0,
-							children: I
+							children: E
 						}) : null
 					]
 				}) : null]
@@ -172,4 +202,4 @@ function x({ labels: x, state: S, nickname: C, statusLabel: te, statusTone: ne,
 	});
 }
 //#endregion
-export { x as CardDetailsPanel };
+export { g as CardDetailsPanel };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFace.js

@@ -1,39 +1,49 @@
 import { cn as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { cardDetailsWidgetUiTestIds as t } from "./testIds.js";
-import { CARD_FACE_STATUS_PILL_CLASS_NAME as n, CARD_FACE_SURFACE_CLASS_NAME as r } from "./cardFaceSurface.js";
-import { CardFaceGlow as i } from "./CardFaceGlow.js";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { CARD_FACE_STATUS_PILL_CLASS_NAME as t, CARD_FACE_SURFACE_CLASS_NAME as n } from "./cardFaceSurface.js";
+import { CardFaceGlow as r } from "./CardFaceGlow.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { LockIcon as o } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFace.js
-function s({ bankLogoSrc: s, bankLogoAlt: c, cardholderName: l, maskedCardNumber: u, programLabel: d, statusLabel: f, className: p }) {
-	return /* @__PURE__ */ o("div", {
-		"data-testid": t.cardFace,
-		className: e(r, "ttw:justify-between", p),
+function s({ bankLogoSrc: s, bankLogoAlt: c, cardholderName: l, maskedCardNumber: u, programLabel: d, statusLabel: f, isLocked: p, lockedLabel: m, testIds: h, className: g }) {
+	return /* @__PURE__ */ a("div", {
+		"data-testid": h?.root,
+		className: e(n, "ttw:justify-between", g),
 		children: [
-			/* @__PURE__ */ a(i, {}),
-			s ? /* @__PURE__ */ a("img", {
+			/* @__PURE__ */ i(r, {}),
+			s ? /* @__PURE__ */ i("img", {
 				src: s,
 				alt: c,
 				className: "ttw:relative ttw:h-8 ttw:w-auto ttw:max-w-[60%] ttw:object-contain ttw:object-left"
-			}) : /* @__PURE__ */ a("span", { className: "ttw:relative ttw:h-8" }),
-			f ? /* @__PURE__ */ a("div", {
+			}) : /* @__PURE__ */ i("span", { className: "ttw:relative ttw:h-8" }),
+			p ? /* @__PURE__ */ i("div", {
+				"data-testid": h?.lockedOverlay,
+				className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:flex ttw:items-center ttw:justify-center ttw:bg-black/55",
+				children: m ? /* @__PURE__ */ a("span", {
+					className: e(t, "ttw:inline-flex ttw:items-center ttw:gap-1.5"),
+					children: [/* @__PURE__ */ i(o, {
+						className: "ttw:size-3.5",
+						"aria-hidden": "true"
+					}), m]
+				}) : null
+			}) : f ? /* @__PURE__ */ i("div", {
 				className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:flex ttw:items-center ttw:justify-center",
-				children: /* @__PURE__ */ a("span", {
-					className: n,
+				children: /* @__PURE__ */ i("span", {
+					className: t,
 					children: f
 				})
 			}) : null,
-			/* @__PURE__ */ o("div", {
+			/* @__PURE__ */ a("div", {
 				className: "ttw:relative ttw:flex ttw:items-end ttw:justify-between ttw:gap-3",
-				children: [/* @__PURE__ */ o("div", {
+				children: [/* @__PURE__ */ a("div", {
 					className: "ttw:min-w-0",
-					children: [/* @__PURE__ */ a("p", {
+					children: [/* @__PURE__ */ i("p", {
 						className: "ttw:truncate ttw:text-base ttw:font-medium ttw:text-white",
 						children: l
-					}), /* @__PURE__ */ a("p", {
+					}), /* @__PURE__ */ i("p", {
 						className: "ttw:mt-1 ttw:truncate ttw:text-lg ttw:tracking-wide ttw:text-white/90",
 						children: u
 					})]
-				}), /* @__PURE__ */ a("p", {
+				}), /* @__PURE__ */ i("p", {
 					className: "ttw:shrink-0 ttw:text-[10px] ttw:font-medium ttw:text-white/90",
 					children: d
 				})]

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFaceFlip.js

@@ -1,27 +1,26 @@
 import { cn as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { cardDetailsWidgetUiTestIds as t } from "./testIds.js";
-import { CARD_FACE_HEIGHT_CLASS_NAME as n, CARD_FACE_WIDTH_CLASS_NAME as r } from "./cardFaceSurface.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { CARD_FACE_HEIGHT_CLASS_NAME as t, CARD_FACE_WIDTH_CLASS_NAME as n } from "./cardFaceSurface.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFaceFlip.js
-function o({ isFlipped: o, front: s, back: c, className: l }) {
-	return /* @__PURE__ */ i("div", {
+function a({ isFlipped: a, front: o, back: s, testIds: c, className: l }) {
+	return /* @__PURE__ */ r("div", {
 		className: e("ttw:perspective-[1000px]", l),
-		children: /* @__PURE__ */ a("div", {
-			"data-testid": t.cardFaceFlip,
-			className: e("ttw:relative ttw:transform-3d", n, r, "ttw:motion-safe:transition-transform ttw:motion-safe:duration-500", o && "ttw:rotate-y-180"),
-			children: [/* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ i("div", {
+			"data-testid": c?.root,
+			className: e("ttw:relative ttw:transform-3d", t, n, "ttw:motion-safe:transition-transform ttw:motion-safe:duration-500", a && "ttw:rotate-y-180"),
+			children: [/* @__PURE__ */ r("div", {
 				className: "ttw:absolute ttw:inset-0 ttw:backface-hidden",
-				"aria-hidden": o || void 0,
-				inert: o || void 0,
-				children: s
-			}), /* @__PURE__ */ i("div", {
+				"aria-hidden": a || void 0,
+				inert: a || void 0,
+				children: o
+			}), /* @__PURE__ */ r("div", {
 				className: "ttw:absolute ttw:inset-0 ttw:rotate-y-180 ttw:backface-hidden",
-				"aria-hidden": !o || void 0,
-				inert: !o || void 0,
-				children: c
+				"aria-hidden": !a || void 0,
+				inert: !a || void 0,
+				children: s
 			})]
 		})
 	});
 }
 //#endregion
-export { o as CardFaceFlip };
+export { a as CardFaceFlip };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/DetailCopyRow.js

@@ -2,9 +2,9 @@ import { Button as e } from "../../../../../../../packages/shared-ui-shadcn/dist
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { CopyIcon as r } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/DetailCopyRow.js
-function i({ label: i, children: a, copyAriaLabel: o, onCopy: s, isLast: c }) {
+function i({ label: i, children: a, copyAriaLabel: o, onCopy: s, trailing: c, isLast: l }) {
 	return /* @__PURE__ */ n("div", {
-		className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-3 ttw:px-4 ttw:py-3" + (c ? "" : " ttw:border-b ttw:border-border"),
+		className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-3 ttw:px-4 ttw:py-3" + (l ? "" : " ttw:border-b ttw:border-border"),
 		children: [/* @__PURE__ */ n("div", {
 			className: "ttw:min-w-0 ttw:space-y-1",
 			children: [/* @__PURE__ */ t("p", {
@@ -14,7 +14,7 @@ function i({ label: i, children: a, copyAriaLabel: o, onCopy: s, isLast: c }) {
 				className: "ttw:text-sm ttw:text-foreground",
 				children: a
 			})]
-		}), o && s ? /* @__PURE__ */ t(e, {
+		}), c ?? (o && s ? /* @__PURE__ */ t(e, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
@@ -22,7 +22,7 @@ function i({ label: i, children: a, copyAriaLabel: o, onCopy: s, isLast: c }) {
 			"aria-label": o,
 			onClick: s,
 			children: /* @__PURE__ */ t(r, { className: "ttw:size-4" })
-		}) : null]
+		}) : null)]
 	});
 }
 //#endregion

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/NicknameRow.js

@@ -0,0 +1,65 @@
+import { Button as e, Input as t, cn as n } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { InlineErrorAlert as r } from "../../../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
+import "../../../../../shared/ui/dist/index.js";
+import { DetailCopyRow as i } from "./DetailCopyRow.js";
+import { useEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { SquarePenIcon as l } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/NicknameRow.js
+function u({ fieldLabels: u, labels: d, nickname: f, editState: p, onEdit: m, draft: h = "", onDraftChange: g, onSave: _, onCancel: v, isSaveDisabled: y, onCopy: b, copyAriaLabel: x, isLast: S }) {
+	let C = p !== "closed", w = o(null);
+	return a(() => {
+		C && w.current?.focus();
+	}, [C]), m && C ? /* @__PURE__ */ c("div", {
+		className: n("ttw:flex ttw:flex-col ttw:gap-2 ttw:px-4 ttw:py-3", !S && "ttw:border-b ttw:border-border"),
+		children: [
+			/* @__PURE__ */ s("p", {
+				className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
+				children: u.nickname
+			}),
+			/* @__PURE__ */ s(t, {
+				ref: w,
+				value: h,
+				"aria-label": d.inputAriaLabel,
+				disabled: p === "saving",
+				onChange: (e) => g?.(e.target.value)
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "ttw:flex ttw:gap-2",
+				children: [/* @__PURE__ */ s(e, {
+					type: "button",
+					size: "sm",
+					disabled: y,
+					loading: p === "saving",
+					onClick: _,
+					children: d.save
+				}), /* @__PURE__ */ s(e, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					disabled: p === "saving",
+					onClick: v,
+					children: d.cancel
+				})]
+			}),
+			p === "errored" ? /* @__PURE__ */ s(r, { children: d.errorDescription }) : null
+		]
+	}) : /* @__PURE__ */ s(i, {
+		label: u.nickname,
+		copyAriaLabel: x,
+		onCopy: b,
+		trailing: m ? /* @__PURE__ */ s(e, {
+			type: "button",
+			variant: "ghost",
+			size: "icon",
+			className: "ttw:size-8 ttw:shrink-0 ttw:text-muted-foreground",
+			"aria-label": d.editAriaLabel,
+			onClick: m,
+			children: /* @__PURE__ */ s(l, { className: "ttw:size-4" })
+		}) : void 0,
+		isLast: S,
+		children: f ?? u.emptyValue
+	});
+}
+//#endregion
+export { u as NicknameRow };