@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/card-entry/card-entry.js

@@ -1,17 +1,161 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { Field } from "../../particles/field/field.js";
+import { ownValue } from "../../utils/own-value.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { Fieldset } from "../../particles/fieldset/fieldset.js";
 import { useCardCapture, useRegisterCardCapture } from "./card-capture.js";
 import { applyMask } from "../../particles/shared/input-mask.js";
 import "../../particles/document-field/document-field.js";
-import { SECURITY_CODE_MASK_STYLE, isSecurityCodeComplete } from "../../sdk/payment/security-code-mask.js";
-import { ownValue } from "../../utils/own-value.js";
+import { SECURITY_CODE_MASK_STYLE, isSecurityCodeMasked } from "../../sdk/payment/security-code-mask.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/card-entry/card-entry.tsx
+/**
+* The new-card entry matter (specs/card-entry.md, T7 of the Credit Card epic;
+* docs/features/credit-card/rfc.md § D2). Composes the `Field`/`Fieldset` particles and reuses
+* `document-field`'s `applyMask` progressive mask engine to capture a card number, holder name,
+* expiration, and CVV, with masks/required-ness driven by the network's server-driven validator
+* config (T1) rather than hardcoded per network.
+*
+* This is the PCI-critical core of the credit-card feature: it is the **only** component that ever
+* holds a full card number or CVV, and both live only in this component's local state — never a
+* schema prop, a fragment field, an action payload, or a value handed to another component. It reads
+* only the `card-capture` context (card-capture.tsx), so the checkout and the account compose it
+* alike: it registers a capture, builds the card *inside* that closure, and hands it to the target
+* the provider passes in — `sendPayments` at checkout, `savedCard.tokenize` in the account.
+*
+* Network detection is a pure, local computation (never waits on a server round-trip): the typed
+* digits are tested against every method's `validator.numberRegex` on every keystroke, first match
+* wins. The selection waits for a complete BIN (T190): only once the field holds eight digits does a
+* match — on a genuine transition, or once the engine has released the BIN (T174) — publish those
+* eight digits as the BIN (`setDraftBin`) and dispatch `selectMethod` to persist the selection
+* server-side — both through `card-capture`'s `selection` member, so only at checkout. Below eight digits nothing is published or sent — see specs/card-entry.md
+* Decisions 1 and 3, and specs/send-the-typed-bin-to-the.md, which adds the gate — except that the
+* first keystroke off the new-card path records that path locally with `selectNewCard()`
+* (specs/collapse-the-card-form-when-a.md, FR-10).
+*/
+const CardEntryContent = defineContentType({
+	id: "card-entry",
+	title: "Card Entry",
+	description: "Copy for the new-card fields and their validation messages.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			legend: {
+				type: "string",
+				title: "Legend",
+				format: "icu-message",
+				messageSource: "Card details"
+			},
+			numberLabel: {
+				type: "string",
+				title: "Number label",
+				format: "icu-message",
+				messageSource: "Card number"
+			},
+			holderNameLabel: {
+				type: "string",
+				title: "Holder name label",
+				format: "icu-message",
+				messageSource: "Cardholder name"
+			},
+			expirationLabel: {
+				type: "string",
+				title: "Expiration label",
+				format: "icu-message",
+				messageSource: "Expiration date"
+			},
+			expirationPlaceholder: {
+				type: "string",
+				title: "Expiration placeholder",
+				format: "icu-message",
+				messageSource: "MM/YY"
+			},
+			cvvLabel: {
+				type: "string",
+				title: "CVV label",
+				format: "icu-message",
+				messageSource: "Security code"
+			},
+			cvvDescription: {
+				type: "string",
+				title: "CVV description",
+				description: "Helper text under the CVV field, linked to the input; blank renders nothing.",
+				format: "icu-message",
+				messageSource: "The 3-4 digit number on your card",
+				messageOptional: true
+			},
+			numberRequiredMessage: {
+				type: "string",
+				title: "Number required message",
+				description: "Shown on the number field when it is left blank.",
+				format: "icu-message",
+				messageSource: "Card number is required"
+			},
+			numberInvalidMessage: {
+				type: "string",
+				title: "Number invalid message",
+				description: "Shown for a Luhn-invalid number, or one a configured network claims only as a prefix (the wrong length, or two networks at once).",
+				format: "icu-message",
+				messageSource: "Enter a valid card number"
+			},
+			networkNotAcceptedMessage: {
+				type: "string",
+				title: "Network not accepted message",
+				description: "Shown for a Luhn-valid number that no configured network claims at all.",
+				format: "icu-message",
+				messageSource: "This card is not from a network the store accepts"
+			},
+			holderNameRequiredMessage: {
+				type: "string",
+				title: "Holder name required message",
+				description: "Shown when the holder name is blank and the detected method requires it.",
+				format: "icu-message",
+				messageSource: "Cardholder name is required"
+			},
+			expirationRequiredMessage: {
+				type: "string",
+				title: "Expiration required message",
+				description: "Shown when the expiration is blank and the detected method requires it.",
+				format: "icu-message",
+				messageSource: "Expiration date is required"
+			},
+			expirationInvalidMessage: {
+				type: "string",
+				title: "Expiration invalid message",
+				description: "Shown for a malformed MM/YY.",
+				format: "icu-message",
+				messageSource: "Enter a valid expiration date"
+			},
+			expirationExpiredMessage: {
+				type: "string",
+				title: "Expiration expired message",
+				description: "Shown for a well-formed MM/YY that has already passed.",
+				format: "icu-message",
+				messageSource: "This card has expired"
+			},
+			cvvRequiredMessage: {
+				type: "string",
+				title: "CVV required message",
+				description: "Shown when the security code is blank and the detected method requires it.",
+				format: "icu-message",
+				messageSource: "Security code is required"
+			},
+			cvvInvalidMessage: {
+				type: "string",
+				title: "CVV invalid message",
+				description: "Shown for a security code that fails the detected method's format.",
+				format: "icu-message",
+				messageSource: "Enter a valid security code"
+			}
+		}
+	}
+});
 /** Visual/attribute order used for first-invalid focus and the `data-fs-card-entry-field` values. */
 const FIELD_ATTR = {
 	number: "number",
@@ -44,21 +188,6 @@ function countDigitSlots(mask) {
 function maskCapacity(mask) {
 	return Math.max(...mask.split("|").map(countDigitSlots));
 }
-/**
-* The narrowest alternative's slot count — `maskCapacity`'s floor, and the length at which a
-* security code counts as fully typed (T173).
-*
-* The ceiling is the right answer for truncation (`maskDigits` must let the widest alternative's
-* digits through) and the wrong one for masking: one method id can cover a 3-and-4-digit family with
-* a single `'999|9999'` mask, and a shopper holding the 3-digit card of that family never reaches a
-* fourth digit — so a ceiling-derived length leaves their complete, valid code legible for the rest
-* of the flow. `SavedCardCvvField` errs on the same side for the same reason. A malformed
-* alternative with no slots (`'999|'`) floors to zero, which masks from the first digit: early,
-* never late.
-*/
-function narrowestMaskCapacity(mask) {
-	return Math.min(...mask.split("|").map(countDigitSlots));
-}
 function toDigits(value) {
 	return value.replace(/\D/g, "");
 }
@@ -378,146 +507,164 @@ const CardEntryDefinition = defineComponent({
 	component: CardEntry,
 	requiresContext: "card-capture",
 	hardened: true,
+	content: CardEntryContent,
 	editor: {
 		label: "Card Entry",
 		category: "commerce"
 	},
 	schema: {
-		legend: {
-			type: "string",
-			default: "Card details",
-			label: "Legend"
-		},
-		numberLabel: {
-			type: "string",
-			default: "Card number",
-			label: "Number label"
-		},
 		numberPlaceholder: {
 			type: "string",
 			label: "Number placeholder"
 		},
-		holderNameLabel: {
-			type: "string",
-			default: "Cardholder name",
-			label: "Holder name label"
-		},
 		holderNamePlaceholder: {
 			type: "string",
 			label: "Holder name placeholder"
 		},
-		expirationLabel: {
-			type: "string",
-			default: "Expiration date",
-			label: "Expiration label"
-		},
-		expirationPlaceholder: {
-			type: "string",
-			default: "MM/YY",
-			label: "Expiration placeholder"
-		},
-		cvvLabel: {
-			type: "string",
-			default: "Security code",
-			label: "CVV label"
-		},
 		cvvPlaceholder: {
 			type: "string",
 			label: "CVV placeholder"
 		},
-		cvvDescription: {
-			type: "string",
-			default: "The 3-4 digit number on your card",
-			label: "CVV description"
-		},
-		numberRequiredMessage: {
-			type: "string",
-			default: "Card number is required",
-			label: "Number required message"
-		},
-		numberInvalidMessage: {
-			type: "string",
-			default: "Enter a valid card number",
-			label: "Number invalid message"
-		},
-		networkNotAcceptedMessage: {
-			type: "string",
-			default: "This card is not from a network the store accepts",
-			label: "Network not accepted message"
-		},
-		holderNameRequiredMessage: {
-			type: "string",
-			default: "Cardholder name is required",
-			label: "Holder name required message"
-		},
-		expirationRequiredMessage: {
-			type: "string",
-			default: "Expiration date is required",
-			label: "Expiration required message"
-		},
-		expirationInvalidMessage: {
-			type: "string",
-			default: "Enter a valid expiration date",
-			label: "Expiration invalid message"
-		},
-		expirationExpiredMessage: {
-			type: "string",
-			default: "This card has expired",
-			label: "Expiration expired message"
-		},
-		cvvRequiredMessage: {
-			type: "string",
-			default: "Security code is required",
-			label: "CVV required message"
-		},
-		cvvInvalidMessage: {
-			type: "string",
-			default: "Enter a valid security code",
-			label: "CVV invalid message"
-		},
 		disabled: {
 			type: "boolean",
 			default: false,
 			label: "Disabled"
 		}
 	},
-	guideline: "New-card entry: masked number with live network detection, holder name, expiration, and CVV, each shown and required per the detected network's validator config from the 'card-capture' context. Must be placed inside a card-capture provider: PaymentSectionRoot or PaymentSectionController at checkout. Owns the card values itself — it builds the card and hands it only to the submission target its provider supplies; no other component ever needs the card number or CVV. Card number and CVV are never schema props, fragment fields, or action payloads — do not add one. See card-entry.md."
+	guideline: "New-card entry: masked number with live network detection, holder name, expiration, and CVV, each shown and required per the detected network's validator config from the 'card-capture' context. Must be placed inside a card-capture provider: PaymentSectionRoot or PaymentSectionController at checkout. Owns the card values itself — it builds the card and hands it only to the submission target its provider supplies; no other component ever needs the card number or CVV. Card number and CVV are never schema props, fragment fields, or action payloads — do not add one. Labels and validation messages come from its $content fields. See card-entry.md."
 });
-function CardEntry({ legend = "Card details", numberLabel = "Card number", numberPlaceholder, holderNameLabel = "Cardholder name", holderNamePlaceholder, expirationLabel = "Expiration date", expirationPlaceholder = "MM/YY", cvvLabel = "Security code", cvvPlaceholder, cvvDescription = "The 3-4 digit number on your card", numberRequiredMessage = "Card number is required", numberInvalidMessage = "Enter a valid card number", networkNotAcceptedMessage = "This card is not from a network the store accepts", holderNameRequiredMessage = "Cardholder name is required", expirationRequiredMessage = "Expiration date is required", expirationInvalidMessage = "Enter a valid expiration date", expirationExpiredMessage = "This card has expired", cvvRequiredMessage = "Security code is required", cvvInvalidMessage = "Enter a valid security code", disabled = false, className }) {
+function readSelectionFacts(selection) {
+	return {
+		draftPath: selection?.path ?? null,
+		draftBin: selection?.bin ?? null,
+		collapsed: selection?.collapsed ?? false,
+		cardModeActive: selection?.cardModeActive ?? false,
+		selectedMethodId: selection?.selectedMethodId ?? null,
+		selectionOutOfScope: selection?.selectionOutOfScope ?? false,
+		selectionNonCard: selection?.selectionNonCard ?? false
+	};
+}
+function withoutFieldError(errors, key) {
+	if (!(key in errors)) return errors;
+	const next = { ...errors };
+	delete next[key];
+	return next;
+}
+function withFieldError(errors, key, message) {
+	const next = { ...errors };
+	if (message) next[key] = message;
+	else delete next[key];
+	return next;
+}
+/** Whether a keystroke that resolved a network publishes its complete BIN: not before eight digits, not twice. */
+function isBinDispatchDue(bin, matchedId, last, draftBin) {
+	if (bin === null) return false;
+	return last?.methodId !== matchedId || last.bin !== bin || draftBin !== last.bin;
+}
+function redispatchOnReturnToNewCard({ draftPath, previousPath, revealedByCardMode, detectedMethod, digits, lastDispatchedRef, selectMethod }) {
+	if (draftPath !== "new-card") {
+		lastDispatchedRef.current = null;
+		return;
+	}
+	if (!shouldRedispatchOnReturnToNewCard({
+		previousPath,
+		revealedByCardMode,
+		detectedMethod,
+		lastDispatched: lastDispatchedRef.current
+	}) || !detectedMethod) return;
+	const bin = resolveCompleteBin(digits);
+	if (bin === null) return;
+	lastDispatchedRef.current = {
+		methodId: detectedMethod.id,
+		bin
+	};
+	selectMethod?.({
+		methodId: detectedMethod.id,
+		bin
+	});
+}
+function isOtherNetwork(selectedMethodId, detectedMethod) {
+	return selectedMethodId !== null && detectedMethod !== null && detectedMethod.id !== selectedMethodId;
+}
+function refusalsForSelection({ selectionOutOfScope, selectionNonCard, selectionOtherNetwork }) {
+	return selectionOutOfScope || selectionNonCard || selectionOtherNetwork ? [CARD_ENTRY_COLLAPSED_ERROR] : [];
+}
+function refusalForInvalidDraft(methods, digits) {
+	return matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : INVALID_CARD_DATA_ERROR;
+}
+function explainUnsupportedNetwork(collapsed, methods, digits) {
+	return !collapsed && matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : null;
+}
+function publishMatchedBin({ selection, matched, bin, draftBin, lastDispatchedRef }) {
+	const last = lastDispatchedRef.current;
+	if (selection && isBinDispatchDue(bin, matched.id, last, draftBin)) {
+		selection.setDraftBin(bin);
+		lastDispatchedRef.current = {
+			methodId: matched.id,
+			bin
+		};
+		selection.selectMethod({
+			methodId: matched.id,
+			bin
+		});
+	}
+}
+function securityCodeStyle(cvv, focused) {
+	return isSecurityCodeMasked(cvv, focused) ? SECURITY_CODE_MASK_STYLE : void 0;
+}
+function FieldErrorMessage({ message }) {
+	return message ? /* @__PURE__ */ jsx(Field.Error, {
+		match: true,
+		children: message
+	}) : null;
+}
+function DetectedNetworkMark({ method, icon }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-fs-card-entry-networks": "",
+		children: /* @__PURE__ */ jsx("span", {
+			"data-fs-card-entry-network": "",
+			"data-fs-card-entry-network-id": method.id,
+			children: icon ? /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				"data-fs-card-entry-network-icon": ""
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-fs-card-entry-network-fallback": "",
+				children: method.name
+			})
+		})
+	});
+}
+function rootStateAttributes({ placing, disabled, collapsed }) {
+	return {
+		...placing || collapsed ? { inert: true } : {},
+		"aria-disabled": placing || void 0,
+		...placing ? { "data-fs-card-entry-placing": "" } : {},
+		...disabled ? { "data-fs-card-entry-disabled": "" } : {},
+		...collapsed ? { "data-fs-card-entry-collapsed": "" } : {}
+	};
+}
+function CardEntry({ numberPlaceholder, holderNamePlaceholder, cvvPlaceholder, disabled = false, className, $content }) {
 	const { networks: methods, busy: placing, clearOn, onNetworkChange, selection } = useCardCapture();
-	const draftPath = selection?.path ?? null;
-	const draftBin = selection?.bin ?? null;
-	const collapsed = selection?.collapsed ?? false;
-	const cardModeActive = selection?.cardModeActive ?? false;
-	const selectedMethodId = selection?.selectedMethodId ?? null;
-	const selectionOutOfScope = selection?.selectionOutOfScope ?? false;
-	const selectionNonCard = selection?.selectionNonCard ?? false;
+	const { draftPath, draftBin, collapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectionNonCard } = readSelectionFacts(selection);
 	const selectMethod = selection?.selectMethod;
+	const setDraftEntryValid = selection?.setDraftEntryValid;
+	const { format } = useMessageFormatter(CardEntryContent, $content);
 	const validationMessages = useMemo(() => ({
-		numberRequired: numberRequiredMessage,
-		numberInvalid: numberInvalidMessage,
-		networkNotAccepted: networkNotAcceptedMessage,
-		holderNameRequired: holderNameRequiredMessage,
-		expirationRequired: expirationRequiredMessage,
-		expirationInvalid: expirationInvalidMessage,
-		expirationExpired: expirationExpiredMessage,
-		cvvRequired: cvvRequiredMessage,
-		cvvInvalid: cvvInvalidMessage
-	}), [
-		numberRequiredMessage,
-		numberInvalidMessage,
-		networkNotAcceptedMessage,
-		holderNameRequiredMessage,
-		expirationRequiredMessage,
-		expirationInvalidMessage,
-		expirationExpiredMessage,
-		cvvRequiredMessage,
-		cvvInvalidMessage
-	]);
+		numberRequired: format("numberRequiredMessage"),
+		numberInvalid: format("numberInvalidMessage"),
+		networkNotAccepted: format("networkNotAcceptedMessage"),
+		holderNameRequired: format("holderNameRequiredMessage"),
+		expirationRequired: format("expirationRequiredMessage"),
+		expirationInvalid: format("expirationInvalidMessage"),
+		expirationExpired: format("expirationExpiredMessage"),
+		cvvRequired: format("cvvRequiredMessage"),
+		cvvInvalid: format("cvvInvalidMessage")
+	}), [format]);
 	const [number, setNumber] = useState("");
 	const [holderName, setHolderName] = useState("");
 	const [expiration, setExpiration] = useState("");
 	const [cvv, setCvv] = useState("");
+	const [cvvFocused, setCvvFocused] = useState(false);
 	const [fieldErrors, setFieldErrors] = useState({});
 	const rootRef = useRef(null);
 	const lastDispatchedRef = useRef(null);
@@ -527,10 +674,30 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	const digits = toDigits(number);
 	const detectedMethod = useMemo(() => resolveNetworkMethod(methods, digits), [methods, digits]);
 	const validator = detectedMethod?.validator ?? DEFAULT_VALIDATOR;
-	const selectionOtherNetwork = selectedMethodId !== null && detectedMethod !== null && detectedMethod.id !== selectedMethodId;
+	const selectionOtherNetwork = isOtherNetwork(selectedMethodId, detectedMethod);
 	const detectedNetworkIcon = detectedMethod ? networkIconName(detectedMethod.name) : null;
-	const cvvComplete = isSecurityCodeComplete(cvv, narrowestMaskCapacity(validator.cvvMask ?? DEFAULT_CVV_MASK));
 	const detectedNetworkId = detectedMethod?.id ?? null;
+	const entryValid = useMemo(() => {
+		const errors = validateDraft({
+			number,
+			holderName,
+			expiration,
+			cvv
+		}, validator, methods, validationMessages);
+		return !errors.number && !errors.expiration && !errors.cvv;
+	}, [
+		number,
+		holderName,
+		expiration,
+		cvv,
+		validator,
+		methods,
+		validationMessages
+	]);
+	useEffect(() => {
+		setDraftEntryValid?.(entryValid);
+	}, [entryValid, setDraftEntryValid]);
+	useEffect(() => () => setDraftEntryValid?.(false), [setDraftEntryValid]);
 	useEffect(() => {
 		if (reportedNetworkIdRef.current === detectedNetworkId) return;
 		reportedNetworkIdRef.current = detectedNetworkId;
@@ -541,25 +708,14 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		previousDraftPathRef.current = draftPath;
 		const revealedByCardMode = previousCollapsedRef.current && !collapsed && cardModeActive;
 		previousCollapsedRef.current = collapsed;
-		if (draftPath !== "new-card") {
-			lastDispatchedRef.current = null;
-			return;
-		}
-		if (!shouldRedispatchOnReturnToNewCard({
+		redispatchOnReturnToNewCard({
+			draftPath,
 			previousPath,
 			revealedByCardMode,
 			detectedMethod,
-			lastDispatched: lastDispatchedRef.current
-		}) || !detectedMethod) return;
-		const bin = resolveCompleteBin(digits);
-		if (bin === null) return;
-		lastDispatchedRef.current = {
-			methodId: detectedMethod.id,
-			bin
-		};
-		selectMethod?.({
-			methodId: detectedMethod.id,
-			bin
+			digits,
+			lastDispatchedRef,
+			selectMethod
 		});
 	}, [
 		draftPath,
@@ -572,34 +728,23 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	useEffect(() => {
 		if (collapsed) {
 			setCvv("");
-			setFieldErrors((prev) => {
-				if (!("cvv" in prev)) return prev;
-				const next = { ...prev };
-				delete next.cvv;
-				return next;
-			});
+			setCvvFocused(false);
+			setFieldErrors((prev) => withoutFieldError(prev, "cvv"));
 			lastDispatchedRef.current = null;
 		}
 	}, [collapsed]);
+	useEffect(() => {
+		if (!validator.cvvRequired) setCvvFocused(false);
+	}, [validator.cvvRequired]);
 	const focusField = useCallback((key) => {
 		(rootRef.current?.querySelector(`[data-fs-card-entry-field="${FIELD_ATTR[key]}"] input`))?.focus();
 	}, []);
 	function clearFieldError(key) {
-		setFieldErrors((prev) => {
-			if (!(key in prev)) return prev;
-			const next = { ...prev };
-			delete next[key];
-			return next;
-		});
+		setFieldErrors((prev) => withoutFieldError(prev, key));
 	}
 	function runFieldValidation(key, draftValue) {
 		const errors = validateDraft(draftValue, validator, methods, validationMessages);
-		setFieldErrors((prev) => {
-			const next = { ...prev };
-			if (errors[key]) next[key] = errors[key];
-			else delete next[key];
-			return next;
-		});
+		setFieldErrors((prev) => withFieldError(prev, key, errors[key]));
 	}
 	function handleNumberChange(event) {
 		const rawDigits = toDigits(event.target.value);
@@ -610,20 +755,14 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		const nextDigits = toDigits(masked);
 		if (nextDigits.length > 0 && draftPath !== "new-card") selection?.selectNewCard();
 		const bin = resolveCompleteBin(nextDigits);
-		if (matched) {
-			const last = lastDispatchedRef.current;
-			if (selection && bin !== null && (last?.methodId !== matched.id || last.bin !== bin || draftBin !== last.bin)) {
-				selection.setDraftBin(bin);
-				lastDispatchedRef.current = {
-					methodId: matched.id,
-					bin
-				};
-				selection.selectMethod({
-					methodId: matched.id,
-					bin
-				});
-			}
-		} else selection?.setDraftBin(null);
+		if (matched) publishMatchedBin({
+			selection,
+			matched,
+			bin,
+			draftBin,
+			lastDispatchedRef
+		});
+		else selection?.setDraftBin(null);
 	}
 	function handleNumberBlur() {
 		runFieldValidation("number", {
@@ -662,7 +801,11 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		setCvv(maskDigits(event.target.value, validator.cvvMask ?? DEFAULT_CVV_MASK));
 		clearFieldError("cvv");
 	}
+	function handleCvvFocus() {
+		setCvvFocused(true);
+	}
 	function handleCvvBlur() {
+		setCvvFocused(false);
 		runFieldValidation("cvv", {
 			number,
 			holderName,
@@ -678,11 +821,15 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 			expiration,
 			cvv
 		}, validator, methods, validationMessages);
-		if (Object.keys(errors).length === 0) return selectionOutOfScope || selectionNonCard || selectionOtherNetwork ? [CARD_ENTRY_COLLAPSED_ERROR] : [];
+		if (Object.keys(errors).length === 0) return refusalsForSelection({
+			selectionOutOfScope,
+			selectionNonCard,
+			selectionOtherNetwork
+		});
 		setFieldErrors(errors);
 		const firstInvalid = VALIDATION_ORDER.find((key) => errors[key]);
 		if (firstInvalid) focusField(firstInvalid);
-		return [matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : INVALID_CARD_DATA_ERROR];
+		return [refusalForInvalidDraft(methods, digits)];
 	}, [
 		collapsed,
 		number,
@@ -731,29 +878,30 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 		cvv,
 		clearOn
 	]);
-	const explainMissingMethod = useCallback(() => !collapsed && matchesNoConfiguredNetwork(methods, digits) ? UNSUPPORTED_NETWORK_ERROR : null, [
+	const explainMissingMethod = useCallback(() => explainUnsupportedNetwork(collapsed, methods, digits), [
 		collapsed,
 		methods,
 		digits
 	]);
 	useRegisterCardCapture(capture, checkDraft, explainMissingMethod);
+	const cvvDescription = validator.cvvRequired ? format("cvvDescription") : "";
 	return /* @__PURE__ */ jsx("div", {
 		hidden: collapsed,
 		"data-fs-card-entry-collapse-boundary": "",
 		children: /* @__PURE__ */ jsx("div", {
 			ref: rootRef,
 			className,
-			...placing || collapsed ? { inert: true } : {},
-			"aria-disabled": placing || void 0,
+			...rootStateAttributes({
+				placing,
+				disabled,
+				collapsed
+			}),
 			"data-fs-card-entry": "",
-			...placing ? { "data-fs-card-entry-placing": "" } : {},
-			...disabled ? { "data-fs-card-entry-disabled": "" } : {},
-			...collapsed ? { "data-fs-card-entry-collapsed": "" } : {},
 			children: /* @__PURE__ */ jsxs(Fieldset.Root, {
 				disabled: disabled || collapsed,
 				"data-fs-card-entry-fieldset": "",
 				children: [
-					/* @__PURE__ */ jsx(Fieldset.Legend, { children: legend }),
+					/* @__PURE__ */ jsx(Fieldset.Legend, { children: format("legend") }),
 					/* @__PURE__ */ jsx("div", {
 						"data-fs-card-entry-field": "number",
 						children: /* @__PURE__ */ jsxs(Field.Root, {
@@ -761,7 +909,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 							disabled,
 							"data-fs-card-entry-number": "",
 							children: [
-								/* @__PURE__ */ jsx(Field.Label, { children: numberLabel }),
+								/* @__PURE__ */ jsx(Field.Label, { children: format("numberLabel") }),
 								/* @__PURE__ */ jsxs("div", {
 									"data-fs-card-entry-number-control": "",
 									children: [/* @__PURE__ */ jsx(Field.Control, {
@@ -773,25 +921,12 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 										onChange: handleNumberChange,
 										onBlur: handleNumberBlur,
 										disabled
-									}), detectedMethod ? /* @__PURE__ */ jsx("div", {
-										"data-fs-card-entry-networks": "",
-										children: /* @__PURE__ */ jsx("span", {
-											"data-fs-card-entry-network": "",
-											"data-fs-card-entry-network-id": detectedMethod.id,
-											children: detectedNetworkIcon ? /* @__PURE__ */ jsx(Icon, {
-												name: detectedNetworkIcon,
-												"data-fs-card-entry-network-icon": ""
-											}) : /* @__PURE__ */ jsx("span", {
-												"data-fs-card-entry-network-fallback": "",
-												children: detectedMethod.name
-											})
-										})
+									}), detectedMethod ? /* @__PURE__ */ jsx(DetectedNetworkMark, {
+										method: detectedMethod,
+										icon: detectedNetworkIcon
 									}) : null]
 								}),
-								fieldErrors.number ? /* @__PURE__ */ jsx(Field.Error, {
-									match: true,
-									children: fieldErrors.number
-								}) : null
+								/* @__PURE__ */ jsx(FieldErrorMessage, { message: fieldErrors.number })
 							]
 						})
 					}),
@@ -801,7 +936,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 							invalid: Boolean(fieldErrors.holderName),
 							disabled,
 							children: [
-								/* @__PURE__ */ jsx(Field.Label, { children: holderNameLabel }),
+								/* @__PURE__ */ jsx(Field.Label, { children: format("holderNameLabel") }),
 								/* @__PURE__ */ jsx(Field.Control, {
 									name: "holderName",
 									autoComplete: "cc-name",
@@ -811,10 +946,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 									onBlur: handleHolderNameBlur,
 									disabled
 								}),
-								fieldErrors.holderName ? /* @__PURE__ */ jsx(Field.Error, {
-									match: true,
-									children: fieldErrors.holderName
-								}) : null
+								/* @__PURE__ */ jsx(FieldErrorMessage, { message: fieldErrors.holderName })
 							]
 						})
 					}) : null,
@@ -824,21 +956,18 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 							invalid: Boolean(fieldErrors.expiration),
 							disabled,
 							children: [
-								/* @__PURE__ */ jsx(Field.Label, { children: expirationLabel }),
+								/* @__PURE__ */ jsx(Field.Label, { children: format("expirationLabel") }),
 								/* @__PURE__ */ jsx(Field.Control, {
 									name: "expiration",
 									inputMode: "numeric",
 									autoComplete: "cc-exp",
-									placeholder: expirationPlaceholder,
+									placeholder: format("expirationPlaceholder"),
 									value: expiration,
 									onChange: handleExpirationChange,
 									onBlur: handleExpirationBlur,
 									disabled
 								}),
-								fieldErrors.expiration ? /* @__PURE__ */ jsx(Field.Error, {
-									match: true,
-									children: fieldErrors.expiration
-								}) : null
+								/* @__PURE__ */ jsx(FieldErrorMessage, { message: fieldErrors.expiration })
 							]
 						})
 					}) : null,
@@ -848,7 +977,7 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 							invalid: Boolean(fieldErrors.cvv),
 							disabled,
 							children: [
-								/* @__PURE__ */ jsx(Field.Label, { children: cvvLabel }),
+								/* @__PURE__ */ jsx(Field.Label, { children: format("cvvLabel") }),
 								/* @__PURE__ */ jsx(Field.Control, {
 									name: "cvv",
 									type: "text",
@@ -857,18 +986,16 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 									placeholder: cvvPlaceholder,
 									value: cvv,
 									onChange: handleCvvChange,
+									onFocus: handleCvvFocus,
 									onBlur: handleCvvBlur,
 									disabled,
-									style: cvvComplete ? SECURITY_CODE_MASK_STYLE : void 0
+									style: securityCodeStyle(cvv, cvvFocused && !disabled)
 								}),
 								cvvDescription ? /* @__PURE__ */ jsx(Field.Description, {
 									"data-fs-card-entry-cvv-description": "",
 									children: cvvDescription
 								}) : null,
-								fieldErrors.cvv ? /* @__PURE__ */ jsx(Field.Error, {
-									match: true,
-									children: fieldErrors.cvv
-								}) : null
+								/* @__PURE__ */ jsx(FieldErrorMessage, { message: fieldErrors.cvv })
 							]
 						})
 					}) : null
@@ -878,6 +1005,6 @@ function CardEntry({ legend = "Card details", numberLabel = "Card number", numbe
 	});
 }
 //#endregion
-export { CARD_ENTRY_COLLAPSED_CODE, CARD_ENTRY_INVALID_DATA_CODE, CARD_ENTRY_UNSUPPORTED_NETWORK_CODE, CardEntry, CardEntryDefinition, NETWORK_ICON_BY_KEY, detectNetworkMethod, isExpirationFormatValid, isExpirationInFuture, isValidLuhn, matchesNoConfiguredNetwork, resolveCompleteBin, resolveNetworkMethod, shouldRedispatchOnReturnToNewCard };
+export { CARD_ENTRY_COLLAPSED_CODE, CARD_ENTRY_INVALID_DATA_CODE, CARD_ENTRY_UNSUPPORTED_NETWORK_CODE, CardEntry, CardEntryContent, CardEntryDefinition, NETWORK_ICON_BY_KEY, detectNetworkMethod, isExpirationFormatValid, isExpirationInFuture, isValidLuhn, matchesNoConfiguredNetwork, networkIconName, resolveCompleteBin, resolveNetworkMethod, shouldRedispatchOnReturnToNewCard };
 
 //# sourceMappingURL=card-entry.js.map