@tesouro/embedded-components-react 0.2.322 → 0.2.324

package/dist/index.css

@@ -94,6 +94,7 @@
     --ttw-color-neutral-200: oklch(92.2% 0 none);
     --ttw-color-neutral-400: oklch(70.8% 0 none);
     --ttw-color-neutral-700: oklch(37.1% 0 none);
+    --ttw-color-stone-200: oklch(92.3% 0.003 48.717);
     --ttw-color-black: #000;
     --ttw-color-white: #fff;
     --ttw-spacing: 0.25rem;
@@ -570,6 +571,12 @@
   .ttw\:field-sizing-content {
     field-sizing: content;
   }
+  .ttw\:aspect-\[2\.4\/1\] {
+    aspect-ratio: 2.4/1;
+  }
+  .ttw\:aspect-\[4\/3\] {
+    aspect-ratio: 4/3;
+  }
   .ttw\:aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -824,6 +831,9 @@
   .ttw\:h-\[min\(70vh\,44rem\)\] {
     height: min(70vh, 44rem);
   }
+  .ttw\:h-\[min\(390px\,90vh\)\] {
+    height: min(390px, 90vh);
+  }
   .ttw\:h-\[min\(720px\,90vh\)\] {
     height: min(720px, 90vh);
   }
@@ -1199,6 +1209,9 @@
   .ttw\:w-\[60\%\] {
     width: 60%;
   }
+  .ttw\:w-\[82\%\] {
+    width: 82%;
+  }
   .ttw\:w-\[83\%\] {
     width: 83%;
   }
@@ -1253,6 +1266,9 @@
   .ttw\:w-\[min\(390px\,100\%\)\] {
     width: min(390px, 100%);
   }
+  .ttw\:w-\[min\(720px\,100\%\)\] {
+    width: min(720px, 100%);
+  }
   .ttw\:w-\[var\(--radix-popover-trigger-width\)\] {
     width: var(--radix-popover-trigger-width);
   }
@@ -1286,6 +1302,9 @@
   .ttw\:max-w-2xl {
     max-width: var(--ttw-container-2xl);
   }
+  .ttw\:max-w-3xl {
+    max-width: var(--ttw-container-3xl);
+  }
   .ttw\:max-w-29 {
     max-width: calc(var(--ttw-spacing) * 29);
   }
@@ -1583,6 +1602,10 @@
   .ttw\:rotate-45 {
     rotate: 45deg;
   }
+  .ttw\:rotate-y-180 {
+    --tw-rotate-y: rotateY(180deg);
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .ttw\:\[transform\:translateZ\(0\)\] {
     transform: translateZ(0);
   }
@@ -2066,10 +2089,18 @@
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .ttw\:border-t-2 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+  }
   .ttw\:border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .ttw\:border-r-2 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 2px;
+  }
   .ttw\:border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -2086,6 +2117,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .ttw\:border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .ttw\:\!border-none {
     --tw-border-style: none !important;
     border-style: none !important;
@@ -2544,6 +2579,9 @@
   .ttw\:bg-sidebar-border {
     background-color: var(--ttw-sidebar-border);
   }
+  .ttw\:bg-stone-200 {
+    background-color: var(--ttw-color-stone-200);
+  }
   .ttw\:bg-surface-subtle {
     background-color: var(--ttw-surface-subtle);
   }
@@ -2565,6 +2603,12 @@
       background-color: color-mix(in oklab, var(--ttw-color-white) 70%, transparent);
     }
   }
+  .ttw\:bg-white\/90 {
+    background-color: var(--ttw-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--ttw-color-white) 90%, transparent);
+    }
+  }
   .ttw\:bg-yellow-50 {
     background-color: var(--ttw-color-yellow-50);
   }
@@ -2589,6 +2633,9 @@
   .ttw\:bg-zinc-700 {
     background-color: var(--ttw-color-zinc-700);
   }
+  .ttw\:bg-zinc-900 {
+    background-color: var(--ttw-color-zinc-900);
+  }
   .ttw\:bg-gradient-to-b {
     --tw-gradient-position: to bottom in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2925,6 +2972,9 @@
   .ttw\:pr-16 {
     padding-right: calc(var(--ttw-spacing) * 16);
   }
+  .ttw\:pr-24 {
+    padding-right: calc(var(--ttw-spacing) * 24);
+  }
   .ttw\:pb-0 {
     padding-bottom: 0px;
   }
@@ -3180,6 +3230,10 @@
     --tw-tracking: -0.75px;
     letter-spacing: -0.75px;
   }
+  .ttw\:tracking-\[0\.2em\] {
+    --tw-tracking: 0.2em;
+    letter-spacing: 0.2em;
+  }
   .ttw\:tracking-\[0\.125rem\] {
     --tw-tracking: 0.125rem;
     letter-spacing: 0.125rem;
@@ -3413,6 +3467,12 @@
   .ttw\:text-white {
     color: var(--ttw-color-white);
   }
+  .ttw\:text-white\/70 {
+    color: var(--ttw-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--ttw-color-white) 70%, transparent);
+    }
+  }
   .ttw\:text-white\/90 {
     color: var(--ttw-color-white);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3449,6 +3509,9 @@
   .ttw\:normal-case {
     text-transform: none;
   }
+  .ttw\:uppercase {
+    text-transform: uppercase;
+  }
   .ttw\:not-italic {
     font-style: normal;
   }
@@ -3738,6 +3801,15 @@
   .ttw\:\[--cell-size\:--spacing\(8\)\] {
     --cell-size: calc(var(--ttw-spacing) * 8);
   }
+  .ttw\:backface-hidden {
+    backface-visibility: hidden;
+  }
+  .ttw\:perspective-\[1000px\] {
+    perspective: 1000px;
+  }
+  .ttw\:transform-3d {
+    transform-style: preserve-3d;
+  }
   .ttw\:group-focus-within\/menu-item\:opacity-100:is(:where(.ttw\:group\/menu-item):focus-within *) {
     opacity: 100%;
   }
@@ -4334,6 +4406,14 @@
     .ttw\:hover\:bg-transparent:hover {
       background-color: transparent;
     }
+    .ttw\:hover\:bg-white\/10:hover {
+      background-color: var(--ttw-color-white);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .ttw\:hover\:bg-white\/10:hover {
+        background-color: color-mix(in oklab, var(--ttw-color-white) 10%, transparent);
+      }
+    }
     .ttw\:hover\:bg-zinc-50:hover {
       background-color: var(--ttw-color-zinc-50);
     }
@@ -4511,6 +4591,15 @@
       --tw-ring-color: color-mix(in oklab, var(--ttw-ring) 50%, transparent);
     }
   }
+  .ttw\:focus-visible\:ring-white:focus-visible {
+    --tw-ring-color: var(--ttw-color-white);
+  }
+  .ttw\:focus-visible\:ring-white\/70:focus-visible {
+    --tw-ring-color: var(--ttw-color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--ttw-color-white) 70%, transparent);
+    }
+  }
   .ttw\:focus-visible\:ring-zinc-400\/50:focus-visible {
     --tw-ring-color: var(--ttw-color-zinc-400);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5379,6 +5468,17 @@
   .ttw\:nth-last-2\:-mt-1:nth-last-child(2) {
     margin-top: calc(var(--ttw-spacing) * -1);
   }
+  @media (prefers-reduced-motion: no-preference) {
+    .ttw\:motion-safe\:transition-transform {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--ttw-default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--ttw-default-transition-duration));
+    }
+    .ttw\:motion-safe\:duration-500 {
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
+    }
+  }
   @media (width >= 40rem) {
     .ttw\:sm\:flex {
       display: flex;
@@ -6365,6 +6465,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -6641,6 +6761,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;

package/dist/index.d.ts

@@ -2067,6 +2067,24 @@ interface CardDetailsFieldLabels {
 interface CardDetailsActionLabels {
     /** Primary control that opens the Activate Card form. */
     activateCard: string;
+    /** Secondary control that asks the owner to reveal the card's credentials. */
+    viewCard: string;
+    /** The same control, once the credentials are on screen. */
+    hideCard: string;
+}
+/**
+ * Copy for the revealed card credentials. The values themselves never have a
+ * default here — the panel is handed them or renders the field blank.
+ */
+interface CardDetailsCredentialsLabels {
+    cardNumber: string;
+    expirationDate: string;
+    securityCode: string;
+    copyCardNumberAriaLabel: string;
+    copyExpirationDateAriaLabel: string;
+    copySecurityCodeAriaLabel: string;
+    /** Shown next to the control when the reveal failed. */
+    errorDescription: string;
 }
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
@@ -2083,6 +2101,7 @@ interface CardDetailsPanelLabels {
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
     actions: CardDetailsActionLabels;
+    credentials: CardDetailsCredentialsLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

package/dist/lib/CardDetailsWidget.d.ts

@@ -32,6 +32,24 @@ interface CardDetailsFieldLabels {
 interface CardDetailsActionLabels {
     /** Primary control that opens the Activate Card form. */
     activateCard: string;
+    /** Secondary control that asks the owner to reveal the card's credentials. */
+    viewCard: string;
+    /** The same control, once the credentials are on screen. */
+    hideCard: string;
+}
+/**
+ * Copy for the revealed card credentials. The values themselves never have a
+ * default here — the panel is handed them or renders the field blank.
+ */
+interface CardDetailsCredentialsLabels {
+    cardNumber: string;
+    expirationDate: string;
+    securityCode: string;
+    copyCardNumberAriaLabel: string;
+    copyExpirationDateAriaLabel: string;
+    copySecurityCodeAriaLabel: string;
+    /** Shown next to the control when the reveal failed. */
+    errorDescription: string;
 }
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
@@ -48,6 +66,7 @@ interface CardDetailsPanelLabels {
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
     actions: CardDetailsActionLabels;
+    credentials: CardDetailsCredentialsLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

package/dist/lib/CardsWidget.d.ts

@@ -758,6 +758,24 @@ interface CardDetailsFieldLabels {
 interface CardDetailsActionLabels {
     /** Primary control that opens the Activate Card form. */
     activateCard: string;
+    /** Secondary control that asks the owner to reveal the card's credentials. */
+    viewCard: string;
+    /** The same control, once the credentials are on screen. */
+    hideCard: string;
+}
+/**
+ * Copy for the revealed card credentials. The values themselves never have a
+ * default here — the panel is handed them or renders the field blank.
+ */
+interface CardDetailsCredentialsLabels {
+    cardNumber: string;
+    expirationDate: string;
+    securityCode: string;
+    copyCardNumberAriaLabel: string;
+    copyExpirationDateAriaLabel: string;
+    copySecurityCodeAriaLabel: string;
+    /** Shown next to the control when the reveal failed. */
+    errorDescription: string;
 }
 /** Copy for the three non-loaded screens. */
 interface CardDetailsStatusScreenLabels {
@@ -774,6 +792,7 @@ interface CardDetailsPanelLabels {
     cardFace: CardDetailsCardFaceLabels;
     fields: CardDetailsFieldLabels;
     actions: CardDetailsActionLabels;
+    credentials: CardDetailsCredentialsLabels;
     status: CardDetailsStatusScreenLabels;
 }
 

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

@@ -1,5 +1,5 @@
-import "./lib/CardDetailsPanel/statusBadge.js";
 import "./lib/CardDetailsPanel/testIds.js";
+import "./lib/CardDetailsPanel/statusBadge.js";
 import "./lib/CardDetailsPanel/CardDetailsHeader.js";
 import "./lib/CardDetailsPanel/CardFace.js";
 import "./lib/CardDetailsPanel/DetailCopyRow.js";

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

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { CopyIcon as n } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardCredentialRow.js
+function r({ label: r, value: i, copyAriaLabel: a, onCopy: o }) {
+	return /* @__PURE__ */ t("div", {
+		className: "ttw:relative ttw:flex ttw:min-w-0 ttw:items-end ttw:justify-between ttw:gap-2",
+		children: [/* @__PURE__ */ t("div", {
+			className: "ttw:min-w-0",
+			children: [/* @__PURE__ */ e("p", {
+				className: "ttw:text-[10px] ttw:font-medium ttw:tracking-wide ttw:text-white/70 ttw:uppercase",
+				children: r
+			}), /* @__PURE__ */ e("p", {
+				className: "ttw:mt-0.5 ttw:truncate ttw:text-base ttw:tracking-wide ttw:text-white",
+				children: i
+			})]
+		}), i && o ? /* @__PURE__ */ e("button", {
+			type: "button",
+			"aria-label": a,
+			onClick: () => o(i),
+			className: "ttw:inline-flex ttw:size-7 ttw:shrink-0 ttw:cursor-pointer ttw:items-center ttw:justify-center ttw:rounded-md ttw:text-white/70 ttw:transition-colors ttw:hover:bg-white/10 ttw:hover:text-white ttw:focus-visible:ring-2 ttw:focus-visible:ring-white/70 ttw:focus-visible:outline-none",
+			children: /* @__PURE__ */ e(n, {
+				className: "ttw:size-3.5",
+				"aria-hidden": "true"
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { r as CardCredentialRow };

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

@@ -0,0 +1,38 @@
+import { cn as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { cardDetailsWidgetUiTestIds as t } from "./testIds.js";
+import { CARD_FACE_SURFACE_CLASS_NAME as n } from "./cardFaceSurface.js";
+import { CardFaceGlow as r } from "./CardFaceGlow.js";
+import { CardCredentialRow as i } from "./CardCredentialRow.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardCredentialsFace.js
+function s({ labels: s, cardNumber: c, expirationDate: l, securityCode: u, onCopy: d, className: f }) {
+	return /* @__PURE__ */ o("div", {
+		"data-testid": t.credentialsFace,
+		className: e(n, "ttw:justify-center ttw:gap-4", f),
+		children: [
+			/* @__PURE__ */ a(r, {}),
+			/* @__PURE__ */ a(i, {
+				label: s.cardNumber,
+				value: c,
+				copyAriaLabel: s.copyCardNumberAriaLabel,
+				onCopy: d
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "ttw:relative ttw:grid ttw:grid-cols-2 ttw:gap-3",
+				children: [/* @__PURE__ */ a(i, {
+					label: s.expirationDate,
+					value: l,
+					copyAriaLabel: s.copyExpirationDateAriaLabel,
+					onCopy: d
+				}), /* @__PURE__ */ a(i, {
+					label: s.securityCode,
+					value: u,
+					copyAriaLabel: s.copySecurityCodeAriaLabel,
+					onCopy: d
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { s as CardCredentialsFace };

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

@@ -1,6 +1,6 @@
 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 { cardDetailsWidgetUiTestIds as o } from "./testIds.js";
+import { cardStatusToneClassName as s } from "./statusBadge.js";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { EllipsisVerticalIcon as u, XIcon as d } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsHeader.js
@@ -16,7 +16,7 @@ function f({ labels: f, title: p, isTitlePending: m, statusLabel: h, statusTone:
 						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"),
+						className: s(g ?? "neutral"),
 						children: h
 					}) : null]
 				}), _ ? /* @__PURE__ */ c("p", {
@@ -32,7 +32,7 @@ function f({ labels: f, title: p, isTitlePending: m, statusLabel: h, statusTone:
 					size: "icon",
 					className: "ttw:size-8 ttw:shrink-0 ttw:bg-muted",
 					"aria-label": f.menuTriggerAriaLabel,
-					"data-testid": s.menuTrigger,
+					"data-testid": o.menuTrigger,
 					children: /* @__PURE__ */ c(u, { className: "ttw:size-4" })
 				})
 			}), /* @__PURE__ */ c(r, {
@@ -45,7 +45,7 @@ function f({ labels: f, title: p, isTitlePending: m, statusLabel: h, statusTone:
 				size: "icon",
 				className: "ttw:size-8 ttw:shrink-0",
 				"aria-label": f.closeAriaLabel,
-				"data-testid": s.closeButton,
+				"data-testid": o.closeButton,
 				onClick: y,
 				children: /* @__PURE__ */ c(d, { className: "ttw:size-4" })
 			}) : null

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

@@ -5,97 +5,132 @@
 import { Badge as e, Button as t, Skeleton as n, cn as r } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { EmptyState as i } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
 import { ErrorState as a } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { InlineErrorAlert as o } 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 { CardFace as c } from "./CardFace.js";
-import { DetailCopyRow as l } from "./DetailCopyRow.js";
-import { resolveCardDetailsPanelLabels as u } from "./labels.js";
-import { useMemo as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { CreditCardIcon as m, PowerIcon as h } from "lucide-react";
+import { cardDetailsWidgetUiTestIds as s } from "./testIds.js";
+import { CardDetailsHeader as c } from "./CardDetailsHeader.js";
+import { CARD_FACE_WIDTH_CLASS_NAME as l } from "./cardFaceSurface.js";
+import { CardFace as u } from "./CardFace.js";
+import { DetailCopyRow as d } from "./DetailCopyRow.js";
+import { resolveCardDetailsPanelLabels as f } from "./labels.js";
+import { CardCredentialsFace as p } from "./CardCredentialsFace.js";
+import { CardFaceFlip as m } from "./CardFaceFlip.js";
+import { useMemo as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { CreditCardIcon as v, EyeIcon as y, EyeOffIcon as b, PowerIcon as x } from "lucide-react";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js
-function g({ labels: g, state: _, nickname: v, statusLabel: y, statusTone: b, formFactorLabel: x, cardMenu: S, onClose: C, bankLogoSrc: w, bankLogoAlt: T, cardholderName: E, maskedCardNumber: D, programLabel: O, billingAddress: k, allowedCategories: A, onCopy: j, onActivate: M, onRetry: N, className: P }) {
-	let F = d(() => u(g), [g]), I = !!A?.length;
-	return /* @__PURE__ */ p("div", {
-		"data-testid": o.panel,
-		className: r("ttw:flex ttw:w-full ttw:flex-col", P),
-		children: [/* @__PURE__ */ f(s, {
-			labels: F.header,
-			title: _ === "loaded" ? v ?? F.header.untitledCard : void 0,
-			isTitlePending: _ === "loading",
-			statusLabel: _ === "loaded" ? y : void 0,
-			statusTone: b,
-			formFactorLabel: _ === "loaded" ? x : void 0,
-			cardMenu: _ === "loaded" ? S : void 0,
-			onClose: C
-		}), /* @__PURE__ */ f("div", {
+function S({ labels: S, state: C, nickname: w, statusLabel: T, statusTone: E, formFactorLabel: D, cardMenu: O, onClose: k, bankLogoSrc: A, bankLogoAlt: j, cardholderName: M, maskedCardNumber: N, programLabel: P, billingAddress: F, allowedCategories: I, onCopy: L, onActivate: R, onViewCard: z, onHideCard: B, isViewCardDisabled: V, revealState: H = "hidden", revealedCardNumber: U, revealedExpirationDate: W, revealedSecurityCode: G, onRetry: K, className: q }) {
+	let J = h(() => f(S), [S]), Y = !!I?.length, X = H === "revealed", Z = X ? B : z, Q = /* @__PURE__ */ g(u, {
+		bankLogoSrc: A,
+		bankLogoAlt: j ?? J.cardFace.bankLogoAlt,
+		cardholderName: M ?? "",
+		maskedCardNumber: N ?? "",
+		programLabel: P ?? ""
+	});
+	return /* @__PURE__ */ _("div", {
+		"data-testid": s.panel,
+		className: r("ttw:flex ttw:w-full ttw:flex-col", q),
+		children: [/* @__PURE__ */ g(c, {
+			labels: J.header,
+			title: C === "loaded" ? w ?? J.header.untitledCard : void 0,
+			isTitlePending: C === "loading",
+			statusLabel: C === "loaded" ? T : void 0,
+			statusTone: E,
+			formFactorLabel: C === "loaded" ? D : void 0,
+			cardMenu: C === "loaded" ? O : void 0,
+			onClose: k
+		}), /* @__PURE__ */ g("div", {
 			className: "ttw:px-4 ttw:pb-4",
-			children: _ === "loading" ? /* @__PURE__ */ p("div", {
-				"data-testid": o.loading,
+			children: C === "loading" ? /* @__PURE__ */ _("div", {
+				"data-testid": s.loading,
 				role: "status",
-				"aria-label": F.status.loadingAriaLabel,
+				"aria-label": J.status.loadingAriaLabel,
 				className: "ttw:space-y-4",
-				children: [/* @__PURE__ */ f(n, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ f(n, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
-			}) : _ === "error" ? /* @__PURE__ */ f(a, {
-				title: F.status.errorTitle,
-				description: F.status.errorDescription,
-				retryLabel: F.status.errorRetry,
-				onRetry: N
-			}) : _ === "notFound" ? /* @__PURE__ */ f(i, {
-				icon: /* @__PURE__ */ f(m, { className: "ttw:size-6 ttw:text-muted-foreground" }),
-				title: F.status.notFoundTitle,
-				description: F.status.notFoundDescription
-			}) : /* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ g(n, { className: "ttw:h-8 ttw:w-56" }), /* @__PURE__ */ g(n, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })]
+			}) : C === "error" ? /* @__PURE__ */ g(a, {
+				title: J.status.errorTitle,
+				description: J.status.errorDescription,
+				retryLabel: J.status.errorRetry,
+				onRetry: K
+			}) : C === "notFound" ? /* @__PURE__ */ g(i, {
+				icon: /* @__PURE__ */ g(v, { className: "ttw:size-6 ttw:text-muted-foreground" }),
+				title: J.status.notFoundTitle,
+				description: J.status.notFoundDescription
+			}) : /* @__PURE__ */ _("div", {
 				className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border ttw:sm:flex-row",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ g("div", {
 					className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5",
-					children: /* @__PURE__ */ p("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-4",
-						children: [/* @__PURE__ */ f(c, {
-							bankLogoSrc: w,
-							bankLogoAlt: T ?? F.cardFace.bankLogoAlt,
-							cardholderName: E ?? "",
-							maskedCardNumber: D ?? "",
-							programLabel: O ?? ""
-						}), M ? /* @__PURE__ */ p(t, {
-							type: "button",
-							onClick: M,
-							children: [/* @__PURE__ */ f(h, {
-								className: "ttw:size-4",
-								"aria-hidden": "true"
-							}), F.actions.activateCard]
+					children: /* @__PURE__ */ _("div", {
+						className: r("ttw:flex ttw:flex-col ttw:gap-4", l),
+						children: [z ? /* @__PURE__ */ g(m, {
+							isFlipped: X,
+							front: Q,
+							back: /* @__PURE__ */ g(p, {
+								labels: J.credentials,
+								cardNumber: U,
+								expirationDate: W,
+								securityCode: G,
+								onCopy: L
+							})
+						}) : Q, R || z ? /* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-2",
+							children: [
+								R ? /* @__PURE__ */ _(t, {
+									type: "button",
+									onClick: R,
+									children: [/* @__PURE__ */ g(x, {
+										className: "ttw:size-4",
+										"aria-hidden": "true"
+									}), J.actions.activateCard]
+								}) : null,
+								z ? /* @__PURE__ */ g("div", {
+									className: "ttw:flex ttw:gap-2",
+									children: /* @__PURE__ */ _(t, {
+										type: "button",
+										variant: "outline",
+										className: "ttw:flex-1",
+										disabled: V || !Z,
+										loading: H === "revealing",
+										onClick: Z,
+										children: [g(X ? b : y, {
+											className: "ttw:size-4",
+											"aria-hidden": "true"
+										}), X ? J.actions.hideCard : J.actions.viewCard]
+									})
+								}) : null,
+								H === "errored" ? /* @__PURE__ */ g(o, { children: J.credentials.errorDescription }) : null
+							]
 						}) : null]
 					})
-				}), /* @__PURE__ */ p("div", {
+				}), /* @__PURE__ */ _("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__ */ f(l, {
-							label: F.fields.cardholder,
-							copyAriaLabel: E && j ? F.fields.copyCardholderAriaLabel : void 0,
-							onCopy: E && j ? () => j(E) : void 0,
-							children: E ?? F.fields.emptyValue
+						/* @__PURE__ */ g(d, {
+							label: J.fields.cardholder,
+							copyAriaLabel: M && L ? J.fields.copyCardholderAriaLabel : void 0,
+							onCopy: M && L ? () => L(M) : void 0,
+							children: M ?? J.fields.emptyValue
 						}),
-						/* @__PURE__ */ f(l, {
-							label: F.fields.nickname,
-							copyAriaLabel: v && j ? F.fields.copyNicknameAriaLabel : void 0,
-							onCopy: v && j ? () => j(v) : void 0,
-							isLast: !k && !I,
-							children: v ?? F.fields.emptyValue
+						/* @__PURE__ */ g(d, {
+							label: J.fields.nickname,
+							copyAriaLabel: w && L ? J.fields.copyNicknameAriaLabel : void 0,
+							onCopy: w && L ? () => L(w) : void 0,
+							isLast: !F && !Y,
+							children: w ?? J.fields.emptyValue
 						}),
-						k ? /* @__PURE__ */ f(l, {
-							label: F.fields.billingAddress,
-							copyAriaLabel: j ? F.fields.copyBillingAddressAriaLabel : void 0,
-							onCopy: j ? () => j(k) : void 0,
-							isLast: !I,
-							children: k
+						F ? /* @__PURE__ */ g(d, {
+							label: J.fields.billingAddress,
+							copyAriaLabel: L ? J.fields.copyBillingAddressAriaLabel : void 0,
+							onCopy: L ? () => L(F) : void 0,
+							isLast: !Y,
+							children: F
 						}) : null,
-						I ? /* @__PURE__ */ f(l, {
-							label: F.fields.allowedCategories,
+						Y ? /* @__PURE__ */ g(d, {
+							label: J.fields.allowedCategories,
 							isLast: !0,
-							children: /* @__PURE__ */ f("div", {
+							children: /* @__PURE__ */ g("div", {
 								className: "ttw:flex ttw:flex-wrap ttw:gap-2",
-								children: A?.map((t) => /* @__PURE__ */ f(e, {
+								children: I?.map((t) => /* @__PURE__ */ g(e, {
 									variant: "secondary",
 									children: t
 								}, t))
@@ -108,4 +143,4 @@ function g({ labels: g, state: _, nickname: v, statusLabel: y, statusTone: b, fo
 	});
 }
 //#endregion
-export { g as CardDetailsPanel };
+export { S as CardDetailsPanel };

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

@@ -1,39 +1,38 @@
 import { cn as e } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
 import { cardDetailsWidgetUiTestIds as t } from "./testIds.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { 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";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFace.js
-function i({ bankLogoSrc: i, bankLogoAlt: a, cardholderName: o, maskedCardNumber: s, programLabel: c, className: l }) {
-	return /* @__PURE__ */ r("div", {
+function o({ bankLogoSrc: o, bankLogoAlt: s, cardholderName: c, maskedCardNumber: l, programLabel: u, className: d }) {
+	return /* @__PURE__ */ a("div", {
 		"data-testid": t.cardFace,
-		className: e("ttw:relative ttw:flex ttw:h-[190px] ttw:w-[300px] ttw:flex-col ttw:justify-between ttw:overflow-hidden ttw:rounded-xl ttw:bg-[#101317] ttw:p-4", l),
+		className: e(n, "ttw:justify-between", d),
 		children: [
-			/* @__PURE__ */ n("div", {
-				"aria-hidden": "true",
-				className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:bg-[radial-gradient(120%_120%_at_85%_100%,rgba(45,212,191,0.22)_0%,transparent_55%)]"
-			}),
-			i ? /* @__PURE__ */ n("img", {
-				src: i,
-				alt: a,
+			/* @__PURE__ */ i(r, {}),
+			o ? /* @__PURE__ */ i("img", {
+				src: o,
+				alt: s,
 				className: "ttw:relative ttw:h-8 ttw:w-auto ttw:max-w-[60%] ttw:object-contain ttw:object-left"
-			}) : /* @__PURE__ */ n("span", { className: "ttw:relative ttw:h-8" }),
-			/* @__PURE__ */ r("div", {
+			}) : /* @__PURE__ */ i("span", { className: "ttw:relative ttw:h-8" }),
+			/* @__PURE__ */ a("div", {
 				className: "ttw:relative ttw:flex ttw:items-end ttw:justify-between ttw:gap-3",
-				children: [/* @__PURE__ */ r("div", {
+				children: [/* @__PURE__ */ a("div", {
 					className: "ttw:min-w-0",
-					children: [/* @__PURE__ */ n("p", {
+					children: [/* @__PURE__ */ i("p", {
 						className: "ttw:truncate ttw:text-base ttw:font-medium ttw:text-white",
-						children: o
-					}), /* @__PURE__ */ n("p", {
+						children: c
+					}), /* @__PURE__ */ i("p", {
 						className: "ttw:mt-1 ttw:truncate ttw:text-lg ttw:tracking-wide ttw:text-white/90",
-						children: s
+						children: l
 					})]
-				}), /* @__PURE__ */ n("p", {
+				}), /* @__PURE__ */ i("p", {
 					className: "ttw:shrink-0 ttw:text-[10px] ttw:font-medium ttw:text-white/90",
-					children: c
+					children: u
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { i as CardFace };
+export { o as CardFace };

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

@@ -0,0 +1,27 @@
+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";
+//#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", {
+		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", {
+				className: "ttw:absolute ttw:inset-0 ttw:backface-hidden",
+				"aria-hidden": o || void 0,
+				inert: o || void 0,
+				children: s
+			}), /* @__PURE__ */ i("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
+			})]
+		})
+	});
+}
+//#endregion
+export { o as CardFaceFlip };

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

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFaceGlow.js
+function t() {
+	return /* @__PURE__ */ e("div", {
+		"aria-hidden": "true",
+		className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:bg-[radial-gradient(120%_120%_at_85%_100%,rgba(45,212,191,0.22)_0%,transparent_55%)]"
+	});
+}
+//#endregion
+export { t as CardFaceGlow };

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

@@ -0,0 +1,4 @@
+//#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/cardFaceSurface.js
+var e = "ttw:w-[300px]", t = "ttw:h-[190px]", n = `ttw:relative ttw:flex ${t} ${e} ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:bg-[#101317] ttw:p-4`;
+//#endregion
+export { t as CARD_FACE_HEIGHT_CLASS_NAME, n as CARD_FACE_SURFACE_CLASS_NAME, e as CARD_FACE_WIDTH_CLASS_NAME };

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

@@ -16,7 +16,20 @@ var e = {
 		copyNicknameAriaLabel: "Copy nickname",
 		copyBillingAddressAriaLabel: "Copy billing address"
 	},
-	actions: { activateCard: "Activate Card" },
+	actions: {
+		activateCard: "Activate card",
+		viewCard: "View card",
+		hideCard: "Hide card"
+	},
+	credentials: {
+		cardNumber: "Card number",
+		expirationDate: "Expiration date",
+		securityCode: "Security code",
+		copyCardNumberAriaLabel: "Copy card number",
+		copyExpirationDateAriaLabel: "Copy expiration date",
+		copySecurityCodeAriaLabel: "Copy security code",
+		errorDescription: "We couldn't show this card's details. Please try again."
+	},
 	status: {
 		loadingAriaLabel: "Loading card details",
 		errorTitle: "We couldn't load this card",
@@ -44,6 +57,10 @@ function t(t) {
 			...e.actions,
 			...t?.actions
 		},
+		credentials: {
+			...e.credentials,
+			...t?.credentials
+		},
 		status: {
 			...e.status,
 			...t?.status

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

@@ -2,6 +2,8 @@
 var e = {
 	panel: "card-details-widget-panel",
 	cardFace: "card-details-widget-card-face",
+	cardFaceFlip: "card-details-widget-card-face-flip",
+	credentialsFace: "card-details-widget-credentials-face",
 	loading: "card-details-widget-loading",
 	menuTrigger: "card-details-widget-menu-trigger",
 	closeButton: "card-details-widget-close-button",

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.2.322", n = "6dad5d75bafa73fa765f485045c9ea1663c1445a", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.2.324", n = "076fb2bf27301b056855ab69627a2d0ce4d36c99", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.2.322",
+  "version": "0.2.324",
   "license": "Apache-2.0",
   "type": "module",
   "packageDepSync": {
@@ -185,6 +185,7 @@
     "react-pdf": "^10.4.1",
     "react-script-hook": "^1.7.2",
     "react-use": "^17.6.1",
+    "react-webcam": "^7.2.0",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",