@tesouro/embedded-components-react 0.3.37 → 0.3.38

package/dist/index.d.ts

@@ -456,6 +456,11 @@ type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
 type DisclosureRequirement = 'NOT_REQUIRED' | 'REQUIRED';
 type OrganizationType = 'BANK' | 'EMBEDDED' | 'PLATFORM' | 'TRANSACTOR' | 'VERTICAL_SOFTWARE_PROVIDER';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 type WidgetInitResponse = {
     bankName?: null | string;
     /**
@@ -2160,7 +2165,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -2256,6 +2265,13 @@ interface CardDetailsFeatureLabels {
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/lib/CardDetailsWidget.d.ts

@@ -21,7 +21,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -396,6 +400,11 @@ type ClientOptions = {
 };
 type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -785,6 +794,13 @@ interface CardDetailsFeatureLabels {
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/lib/CardsWidget.d.ts

@@ -436,6 +436,11 @@ type ClientOptions = {
 };
 type CreditCardStatus = 'PENDING_ACTIVATION' | 'ACTIVE' | 'LOCKED' | 'CLOSED';
 type CreditCardType = 'DIGITAL' | 'PHYSICAL';
+/**
+ * The rolling period a velocity control's amount and usage limits are evaluated over.
+ * `TRANSACTION` applies the limit per-transaction and therefore carries no usage limit.
+ */
+type VelocityWindow = 'DAY' | 'LIFETIME' | 'MONTH' | 'TRANSACTION' | 'WEEK';
 
 type EmbeddedClient = Client;
 type ExtractLiterals<T> = T extends string ? string extends T ? never : T : never;
@@ -776,7 +781,11 @@ interface CardDetailsFieldLabels {
     cardholder: string;
     nickname: string;
     billingAddress: string;
+    /** Sub-header over the merchant categories / velocity control rows. */
+    cardControlsHeading: string;
     allowedCategories: string;
+    spendLimit: string;
+    perTransactionMax: string;
     /** Stands in for a row whose value the card does not carry. */
     emptyValue: string;
     copyCardholderAriaLabel: string;
@@ -872,6 +881,13 @@ interface CardDetailsFeatureLabels {
     statusLabels: Record<CardStatus, string>;
     /** Form-factor subtitle wording, keyed on the generated card type. */
     formFactorLabels: Record<CardType, string>;
+    /**
+     * A velocity control's reset-period wording, keyed on the generated
+     * `velocityWindow`. Used to build the spend limit row, e.g. "$500 / month".
+     * `TRANSACTION` is unused there (it drives the separate per-transaction max
+     * row instead) but is still a real enum member, so it stays in the map.
+     */
+    velocityWindowLabels: Record<VelocityWindow, string>;
 }
 
 interface CardDetailsWidgetProps extends WidgetProviderProps {

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index3.js

@@ -1,14 +1,15 @@
+import { amountOutputToMajorUnits as e } from "../../../shared/util/dist/lib/amountOutputToMajorUnits.js";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index3.js
-var e = "••••";
-function t(t) {
-	let n = t.trim().slice(-4);
-	return n ? `${e} ${e} ${e} ${n}` : "";
-}
+var t = "••••";
 function n(e) {
+	let n = e.trim().slice(-4);
+	return n ? `${t} ${t} ${t} ${n}` : "";
+}
+function r(e) {
 	let t = e.replace(/\s+/g, "");
 	return t ? (t.match(/.{1,4}/g) ?? []).join(" ") : "";
 }
-function r(e) {
+function i(e) {
 	let t = e.trim();
 	if (!t) return "";
 	let n = /^(\d{4})-(\d{2})(?:\D|$)/.exec(t);
@@ -23,7 +24,7 @@ function r(e) {
 	}
 	return t;
 }
-async function i(e) {
+async function a(e) {
 	if (!e.trim()) return !1;
 	try {
 		return await navigator.clipboard.writeText(e), !0;
@@ -31,5 +32,15 @@ async function i(e) {
 		return !1;
 	}
 }
+function o({ amountLimit: t, currencyCode: n }) {
+	let r = e({
+		value: t,
+		currencyCode: n
+	});
+	if (Number.isFinite(r)) return new Intl.NumberFormat(void 0, {
+		style: "currency",
+		currency: n
+	}).format(r);
+}
 //#endregion
-export { i as copyTextToClipboard, n as formatCardNumber, r as formatExpirationDate, t as maskCardNumber };
+export { a as copyTextToClipboard, r as formatCardNumber, i as formatExpirationDate, o as formatVelocityControlAmount, n as maskCardNumber };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index4.js

@@ -1,37 +1,53 @@
 import { CardProgram as e } from "../../../shared/feature/dist/lib/card/cardProgram.js";
 import { CARD_STATUS_TONE as t } from "../../../shared/feature/dist/lib/card/cardPresentation.js";
 import "../../../shared/feature/dist/index.js";
-import { maskCardNumber as n } from "./index3.js";
+import { formatVelocityControlAmount as n, maskCardNumber as r } from "./index3.js";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index4.js
-var r = {
+var i = {
 	Supported: "supported",
 	Missing: "missing",
 	Unsupported: "unsupported"
 };
-function i(t) {
-	return t === e.Credit || t === e.Debit ? r.Supported : t == null ? r.Missing : r.Unsupported;
+function a(t) {
+	return t === e.Credit || t === e.Debit ? i.Supported : t == null ? i.Missing : i.Unsupported;
 }
-function a({ programValidity: e, isNotFound: t, isError: n, hasCard: i }) {
-	return e === r.Supported ? t ? "notFound" : i ? "loaded" : n ? "error" : "loading" : "error";
+function o({ programValidity: e, isNotFound: t, isError: n, hasCard: r }) {
+	return e === i.Supported ? t ? "notFound" : r ? "loaded" : n ? "error" : "loading" : "error";
 }
-var o = "PENDING_ACTIVATION";
-function s({ panelState: t, cardProgram: n, cardStatus: r }) {
-	return t !== "loaded" || n !== e.Debit || r === void 0 ? !1 : r !== o;
+var s = "PENDING_ACTIVATION";
+function c({ panelState: t, cardProgram: n, cardStatus: r }) {
+	return t !== "loaded" || n !== e.Debit || r === void 0 ? !1 : r !== s;
 }
-function c({ isRevealRequested: e, isError: t, hasCredentials: n }) {
+function l({ isRevealRequested: e, isError: t, hasCredentials: n }) {
 	return e ? t ? "errored" : n ? "revealed" : "revealing" : "hidden";
 }
-function l({ card: e, cardProgram: r, labels: i }) {
+function u({ card: e, cardProgram: n, labels: i }) {
 	let a = e.cardholderName.trim(), o = e.nickname?.trim();
 	return {
 		statusLabel: i.statusLabels[e.cardStatus],
 		statusTone: t[e.cardStatus],
 		formFactorLabel: i.formFactorLabels[e.cardType],
-		programLabel: i.programLabels[r],
-		maskedCardNumber: n(e.lastFourDigits),
+		programLabel: i.programLabels[n],
+		maskedCardNumber: r(e.lastFourDigits),
 		cardholderName: a || void 0,
-		nickname: o || void 0
+		nickname: o || void 0,
+		allowedCategories: d(e.mccGroups),
+		...f(e.velocityControls, i)
+	};
+}
+function d(e) {
+	let t = (e ?? []).filter((e) => e.active).map((e) => e.name);
+	return t.length ? t : void 0;
+}
+function f(e, t) {
+	let r = (e ?? []).filter((e) => e.active && !e.mcc && !e.mccGroup), i = r.filter((e) => e.velocityWindow !== "TRANSACTION").map((e) => {
+		let r = n(e);
+		return r ? `${r} / ${t.velocityWindowLabels[e.velocityWindow]}` : void 0;
+	}).filter((e) => !!e), a = r.find((e) => e.velocityWindow === "TRANSACTION");
+	return {
+		spendLimitLabels: i.length ? i : void 0,
+		perTransactionMaxLabel: a ? n(a) : void 0
 	};
 }
 //#endregion
-export { r as CardProgramValidity, s as resolveCanRevealCredentials, a as resolveCardDetailsPanelState, l as resolveCardDetailsPresentation, c as resolveCardDetailsRevealState, i as resolveCardProgramValidity };
+export { i as CardProgramValidity, c as resolveCanRevealCredentials, o as resolveCardDetailsPanelState, u as resolveCardDetailsPresentation, l as resolveCardDetailsRevealState, a as resolveCardProgramValidity };

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js

@@ -10,7 +10,14 @@ var r = {
 		[e.Debit]: "Business debit"
 	},
 	statusLabels: t,
-	formFactorLabels: n
+	formFactorLabels: n,
+	velocityWindowLabels: {
+		DAY: "day",
+		WEEK: "week",
+		MONTH: "month",
+		LIFETIME: "lifetime",
+		TRANSACTION: "transaction"
+	}
 };
 function i(e) {
 	return {
@@ -27,6 +34,10 @@ function i(e) {
 		formFactorLabels: {
 			...r.formFactorLabels,
 			...e?.formFactorLabels
+		},
+		velocityWindowLabels: {
+			...r.velocityWindowLabels,
+			...e?.velocityWindowLabels
 		}
 	};
 }

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js

@@ -129,6 +129,9 @@ function E({ cardId: r, cardProgram: l, onClose: E, labels: D, featureLabels: O,
 		cardholderName: Z?.cardholderName,
 		maskedCardNumber: Z?.maskedCardNumber,
 		programLabel: Z?.programLabel,
+		allowedCategories: Z?.allowedCategories,
+		spendLimitLabels: Z?.spendLimitLabels,
+		perTransactionMaxLabel: Z?.perTransactionMaxLabel,
 		onCopy: ie,
 		onViewCard: J ? ae : void 0,
 		onHideCard: J ? oe : void 0,

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

@@ -2,147 +2,174 @@
 "use client";
 "use client";
 "use client";
-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 { 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 "../../../../../shared/ui/dist/index.js";
-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";
+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";
 //#region ../../libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js
-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, cardFaceStatusLabel: F, billingAddress: I, allowedCategories: L, onCopy: R, onActivate: z, onViewCard: B, onHideCard: V, revealState: H = "hidden", revealedCardNumber: U, revealedExpirationDate: W, revealedSecurityCode: G, onRetry: K, className: q }) {
-	let J = h(() => f(S), [S]), Y = !!L?.length, X = H === "revealed", Z = X ? V : B, Q = /* @__PURE__ */ g(u, {
-		bankLogoSrc: A,
-		bankLogoAlt: j ?? J.cardFace.bankLogoAlt,
-		cardholderName: M ?? "",
-		maskedCardNumber: N ?? "",
-		programLabel: P ?? "",
-		statusLabel: F
+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
 	});
-	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", {
+	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", {
 			className: "ttw:px-4 ttw:pb-4",
-			children: C === "loading" ? /* @__PURE__ */ _("div", {
-				"data-testid": s.loading,
+			children: S === "loading" ? /* @__PURE__ */ h("div", {
+				"data-testid": o.loading,
 				role: "status",
-				"aria-label": J.status.loadingAriaLabel,
+				"aria-label": q.status.loadingAriaLabel,
 				className: "ttw:space-y-4",
-				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__ */ g("div", {
-					className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5",
-					children: /* @__PURE__ */ _("div", {
-						className: r("ttw:flex ttw:flex-col ttw:gap-4", l),
-						children: [B ? /* @__PURE__ */ g(m, {
-							isFlipped: X,
-							front: Q,
-							back: /* @__PURE__ */ g(p, {
-								labels: J.credentials,
-								cardNumber: U,
-								expirationDate: W,
-								securityCode: G,
-								onCopy: R
-							})
-						}) : Q, z || B ? /* @__PURE__ */ _("div", {
-							className: "ttw:flex ttw:flex-col ttw:gap-2",
-							children: [
-								z ? /* @__PURE__ */ _(t, {
-									type: "button",
-									className: "ttw:self-center",
-									onClick: z,
-									children: [/* @__PURE__ */ g(x, {
-										className: "ttw:size-4",
-										"aria-hidden": "true"
-									}), J.actions.activateCard]
-								}) : null,
-								B ? /* @__PURE__ */ g("div", {
-									className: "ttw:flex ttw:gap-2",
-									children: /* @__PURE__ */ _(t, {
+				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", {
+				className: "ttw:flex ttw:flex-col ttw:gap-4",
+				children: [/* @__PURE__ */ h("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", {
+						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,
+								front: $,
+								back: /* @__PURE__ */ m(d, {
+									labels: q.credentials,
+									cardNumber: H,
+									expirationDate: U,
+									securityCode: W,
+									onCopy: L
+								})
+							}) : $, R || z ? /* @__PURE__ */ h("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-2",
+								children: [
+									R ? /* @__PURE__ */ h(e, {
 										type: "button",
-										variant: "outline",
-										className: "ttw:flex-1",
-										disabled: !Z,
-										loading: H === "revealing",
-										onClick: Z,
-										children: [g(X ? b : y, {
+										className: "ttw:self-center",
+										onClick: R,
+										children: [/* @__PURE__ */ m(b, {
 											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__ */ _("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",
+										}), q.actions.activateCard]
+									}) : null,
+									z ? /* @__PURE__ */ m("div", {
+										className: "ttw:flex ttw:gap-2",
+										children: /* @__PURE__ */ h(e, {
+											type: "button",
+											variant: "outline",
+											className: "ttw:flex-1",
+											disabled: !Q,
+											loading: V === "revealing",
+											onClick: Q,
+											children: [m(Z ? y : v, {
+												className: "ttw:size-4",
+												"aria-hidden": "true"
+											}), Z ? q.actions.hideCard : q.actions.viewCard]
+										})
+									}) : null,
+									V === "errored" ? /* @__PURE__ */ m(a, { children: q.credentials.errorDescription }) : null
+								]
+							}) : null]
+						})
+					}), /* @__PURE__ */ h("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__ */ 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
+						]
+					})]
+				}), J || Y || X ? /* @__PURE__ */ h("div", {
+					className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border",
 					children: [
-						/* @__PURE__ */ g(d, {
-							label: J.fields.cardholder,
-							copyAriaLabel: M && R ? J.fields.copyCardholderAriaLabel : void 0,
-							onCopy: M && R ? () => R(M) : void 0,
-							children: M ?? J.fields.emptyValue
-						}),
-						/* @__PURE__ */ g(d, {
-							label: J.fields.nickname,
-							copyAriaLabel: w && R ? J.fields.copyNicknameAriaLabel : void 0,
-							onCopy: w && R ? () => R(w) : void 0,
-							isLast: !I && !Y,
-							children: w ?? J.fields.emptyValue
+						/* @__PURE__ */ m("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
 						}),
-						I ? /* @__PURE__ */ g(d, {
-							label: J.fields.billingAddress,
-							copyAriaLabel: R ? J.fields.copyBillingAddressAriaLabel : void 0,
-							onCopy: R ? () => R(I) : void 0,
-							isLast: !Y,
-							children: I
+						J ? /* @__PURE__ */ m(l, {
+							label: q.fields.allowedCategories,
+							isLast: !Y && !X,
+							children: /* @__PURE__ */ m("div", {
+								className: "ttw:mt-2 ttw:flex ttw:flex-wrap ttw:gap-2",
+								children: P?.map((e) => /* @__PURE__ */ h("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, {
+										"aria-hidden": "true",
+										className: "ttw:size-3.5"
+									}), e]
+								}, e))
+							})
 						}) : null,
-						Y ? /* @__PURE__ */ g(d, {
-							label: J.fields.allowedCategories,
-							isLast: !0,
-							children: /* @__PURE__ */ g("div", {
-								className: "ttw:flex ttw:flex-wrap ttw:gap-2",
-								children: L?.map((t) => /* @__PURE__ */ g(e, {
-									variant: "secondary",
-									children: t
-								}, t))
+						Y ? /* @__PURE__ */ m(l, {
+							label: q.fields.spendLimit,
+							isLast: !X,
+							children: /* @__PURE__ */ m("div", {
+								className: "ttw:flex ttw:flex-col ttw:gap-1",
+								children: F?.map((e, t) => /* @__PURE__ */ m("div", { children: e }, `${e}-${t}`))
 							})
+						}) : null,
+						X ? /* @__PURE__ */ m(l, {
+							label: q.fields.perTransactionMax,
+							isLast: !0,
+							children: I
 						}) : null
 					]
-				})]
+				}) : null]
 			})
 		})]
 	});
 }
 //#endregion
-export { S as CardDetailsPanel };
+export { x as CardDetailsPanel };

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

@@ -10,7 +10,10 @@ var e = {
 		cardholder: "Cardholder",
 		nickname: "Nickname",
 		billingAddress: "Billing address",
+		cardControlsHeading: "Card controls",
 		allowedCategories: "Allowed categories",
+		spendLimit: "Spend limit",
+		perTransactionMax: "Per-transaction max",
 		emptyValue: "—",
 		copyCardholderAriaLabel: "Copy cardholder",
 		copyNicknameAriaLabel: "Copy nickname",

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.3.37", n = "8beb54f0f2b2664f6714ea6ff9dcdd3b10246180", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.3.38", n = "7a64fdfcc04902cd65bace1dd767edac043debe5", 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.3.37",
+  "version": "0.3.38",
   "license": "Apache-2.0",
   "type": "module",
   "packageDepSync": {