@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/account-saved-cards/account-saved-cards.js

@@ -3,17 +3,17 @@ import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { signInTarget } from "../../utils/safe-href.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useStorefrontFormatters } from "../../sdk/format/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
 import { graphql } from "../../sdk/generated/gql.js";
 import { ActionsOverrideContext, useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
 import { useSession } from "../session/session.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
 import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
 import { ListItemRefContext } from "../../sdk/data/list-item-ref-context.js";
-import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
-import { AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "../../particles/alert-dialog/alert-dialog.js";
+import { AlertDialogClose, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger } from "../../particles/alert-dialog/alert-dialog.js";
 import { CardSummary, CardSummaryRoot, useCardSummary } from "../../particles/card-summary/card-summary.js";
 import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -24,11 +24,11 @@ import { CombinedGraphQLErrors } from "@apollo/client/errors";
 * The Root reads card ids only; each AccountSavedCardItem subscribes to its own CustomerSavedCard
 * (ADR-0012) and provides `card-summary` and the row itself, so the schema arranges the CardSummary
 * parts and AccountSavedCardExpiry in the row.
-* Every text resolves children, then the CMS entry, then the `fs/saved-cards.*` catalog; the expiry
-* line, repeated per row, takes no children.
+* Every text is children or else the part's own `$content` message; the expiry line, repeated per row,
+* takes no children.
 * Removal state lives in the Root, because a successful removal unmounts the row it started from. The
-* Root also declares the `savedCard.remove` write, so a remove control rendered by a default, which the
-* compiler cannot wrap, still reaches the provider.
+* Root also declares the `savedCard.remove` write, so every remove control in the section reaches the
+* provider.
 */
 const fragment = graphql(`
   fragment AccountSavedCardsData on Query {
@@ -71,7 +71,9 @@ const AccountSavedCardsHeadingContent = defineContentType({
 		properties: { text: {
 			type: "string",
 			minLength: 1,
-			title: "Heading"
+			title: "Heading",
+			format: "icu-message",
+			messageSource: "Saved cards"
 		} }
 	}
 });
@@ -85,7 +87,9 @@ const AccountSavedCardsEmptyContent = defineContentType({
 		properties: { text: {
 			type: "string",
 			minLength: 1,
-			title: "Empty statement"
+			title: "Empty statement",
+			format: "icu-message",
+			messageSource: "You have no saved cards yet."
 		} }
 	}
 });
@@ -99,7 +103,9 @@ const AccountSavedCardsLoadingContent = defineContentType({
 		properties: { text: {
 			type: "string",
 			minLength: 1,
-			title: "Loading announcement"
+			title: "Loading announcement",
+			format: "icu-message",
+			messageSource: "Loading your saved cards…"
 		} }
 	}
 });
@@ -114,17 +120,23 @@ const AccountSavedCardsErrorContent = defineContentType({
 			text: {
 				type: "string",
 				minLength: 1,
-				title: "Load failure message"
+				title: "Load failure message",
+				format: "icu-message",
+				messageSource: "We couldn't load your saved cards. Please try again later."
 			},
 			sessionExpiredText: {
 				type: "string",
 				minLength: 1,
-				title: "Session expired message"
+				title: "Session expired message",
+				format: "icu-message",
+				messageSource: "Your session has expired."
 			},
 			signInLabel: {
 				type: "string",
 				minLength: 1,
-				title: "Sign-in link label"
+				title: "Sign-in link label",
+				format: "icu-message",
+				messageSource: "Sign in again"
 			}
 		}
 	}
@@ -140,22 +152,30 @@ const AccountSavedCardExpiryContent = defineContentType({
 			expiresLabel: {
 				type: "string",
 				minLength: 1,
-				title: "Label before a working card's date"
+				title: "Label before a working card's date",
+				format: "icu-message",
+				messageSource: "Expires"
 			},
 			expiredLabel: {
 				type: "string",
 				minLength: 1,
-				title: "Label before an expired card's date"
+				title: "Label before an expired card's date",
+				format: "icu-message",
+				messageSource: "Expired"
 			},
 			expiredText: {
 				type: "string",
 				minLength: 1,
-				title: "Expired card with no date"
+				title: "Expired card with no date",
+				format: "icu-message",
+				messageSource: "Expired"
 			},
 			unusableText: {
 				type: "string",
 				minLength: 1,
-				title: "Unusable card"
+				title: "Unusable card",
+				format: "icu-message",
+				messageSource: "This card can't be used"
 			}
 		}
 	}
@@ -163,15 +183,32 @@ const AccountSavedCardExpiryContent = defineContentType({
 const AccountSavedCardRemoveTriggerContent = defineContentType({
 	id: "account-saved-card-remove-trigger",
 	title: "Account Saved Card Remove Trigger",
-	description: "Label of the control that opens a saved card's removal prompt.",
+	description: "Label of the control that opens a saved card's removal prompt, and the card's last digits read to assistive technology.",
 	schema: {
 		type: "object",
 		additionalProperties: false,
-		properties: { text: {
-			type: "string",
-			minLength: 1,
-			title: "Trigger label"
-		} }
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Trigger label",
+				format: "icu-message",
+				messageSource: "Remove"
+			},
+			cardEndingIn: {
+				type: "string",
+				minLength: 1,
+				title: "Card last digits",
+				description: "Read to assistive technology after the card name.",
+				format: "icu-message",
+				messageSource: "ending in {lastDigits}",
+				messageArguments: {
+					type: "object",
+					properties: { lastDigits: { type: "string" } }
+				},
+				messageExample: { lastDigits: "4242" }
+			}
+		}
 	}
 });
 const AccountSavedCardRemoveTitleContent = defineContentType({
@@ -184,22 +221,41 @@ const AccountSavedCardRemoveTitleContent = defineContentType({
 		properties: { text: {
 			type: "string",
 			minLength: 1,
-			title: "Prompt title"
+			title: "Prompt title",
+			format: "icu-message",
+			messageSource: "Remove this card?"
 		} }
 	}
 });
 const AccountSavedCardRemoveDescriptionContent = defineContentType({
-	id: "account-saved-card-remove-description",
+	id: "account-saved-card-remove-body",
 	title: "Account Saved Card Remove Description",
-	description: "What removing the card means, shown after the card in the removal prompt.",
+	description: "What removing the card means, shown after the card in the removal prompt, and the card's last digits read to assistive technology.",
 	schema: {
 		type: "object",
 		additionalProperties: false,
-		properties: { text: {
-			type: "string",
-			minLength: 1,
-			title: "Consequence"
-		} }
+		properties: {
+			text: {
+				type: "string",
+				minLength: 1,
+				title: "Consequence",
+				format: "icu-message",
+				messageSource: "It will no longer be offered when you pay. This can't be undone."
+			},
+			cardEndingIn: {
+				type: "string",
+				minLength: 1,
+				title: "Card last digits",
+				description: "Read to assistive technology after the card name.",
+				format: "icu-message",
+				messageSource: "ending in {lastDigits}",
+				messageArguments: {
+					type: "object",
+					properties: { lastDigits: { type: "string" } }
+				},
+				messageExample: { lastDigits: "4242" }
+			}
+		}
 	}
 });
 const AccountSavedCardRemoveCancelContent = defineContentType({
@@ -212,7 +268,9 @@ const AccountSavedCardRemoveCancelContent = defineContentType({
 		properties: { text: {
 			type: "string",
 			minLength: 1,
-			title: "Cancel label"
+			title: "Cancel label",
+			format: "icu-message",
+			messageSource: "Cancel"
 		} }
 	}
 });
@@ -227,12 +285,16 @@ const AccountSavedCardRemoveConfirmContent = defineContentType({
 			text: {
 				type: "string",
 				minLength: 1,
-				title: "Confirm label"
+				title: "Confirm label",
+				format: "icu-message",
+				messageSource: "Remove card"
 			},
 			pendingText: {
 				type: "string",
 				minLength: 1,
-				title: "Label while removing"
+				title: "Label while removing",
+				format: "icu-message",
+				messageSource: "Removing…"
 			}
 		}
 	}
@@ -248,22 +310,30 @@ const AccountSavedCardsRemoveFeedbackContent = defineContentType({
 			successText: {
 				type: "string",
 				minLength: 1,
-				title: "Card removed"
+				title: "Card removed",
+				format: "icu-message",
+				messageSource: "The card was removed."
 			},
 			failureText: {
 				type: "string",
 				minLength: 1,
-				title: "Card not removed"
+				title: "Card not removed",
+				format: "icu-message",
+				messageSource: "We couldn't remove the card. Please try again."
 			},
 			sessionExpiredText: {
 				type: "string",
 				minLength: 1,
-				title: "Session expired message"
+				title: "Session expired message",
+				format: "icu-message",
+				messageSource: "Your session has expired."
 			},
 			signInLabel: {
 				type: "string",
 				minLength: 1,
-				title: "Sign-in link label"
+				title: "Sign-in link label",
+				format: "icu-message",
+				messageSource: "Sign in again"
 			}
 		}
 	}
@@ -353,7 +423,7 @@ const AccountSavedCardsRootDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "The signed-in shopper's saved cards, read with no cart. Renders nothing unless the session is loggedIn, and no chrome of its own: compose AccountSavedCardsHeading, AccountSavedCardsRemoveFeedback, AccountSavedCardsLoading, AccountSavedCardsError, AccountSavedCardsEmpty, and AccountSavedCardsList (with an AccountSavedCardItem inside) as children. Exactly one of Loading, Error, Empty, or List renders at a time; the state is on data-fs-account-saved-cards-state. It owns the removal state and supplies the savedCard.remove write to every AccountSavedCardRemove inside, placed or default, so the write sits here rather than on the control that dispatches it; with no remove control composed the write is never called. Must be inside a SessionRoot, normally the my-account layout's. See account-saved-cards.md."
+	guideline: "The signed-in shopper's saved cards, read with no cart. Renders nothing unless the session is loggedIn, and no chrome of its own: compose AccountSavedCardsHeading, AccountSavedCardsRemoveFeedback, AccountSavedCardsLoading, AccountSavedCardsError, AccountSavedCardsEmpty, and AccountSavedCardsList (with an AccountSavedCardItem inside) as children. Exactly one of Loading, Error, Empty, or List renders at a time; the state is on data-fs-account-saved-cards-state. It owns the removal state and supplies the savedCard.remove write to every AccountSavedCardRemove inside, so the write sits here rather than on the control that dispatches it; with no remove control composed the write is never called. Must be inside a SessionRoot, normally the my-account layout's. See account-saved-cards.md."
 });
 const AccountSavedCardsHeadingDefinition = defineComponent({
 	name: "AccountSavedCardsHeading",
@@ -376,7 +446,7 @@ const AccountSavedCardsHeadingDefinition = defineComponent({
 		default: "h2",
 		label: "Heading level"
 	} },
-	guideline: "The section heading, rendered in every state. `as` sets the level from h2 to h6 (default h2); there is no h1, because the page title belongs to the page shell — pick the level that fits where the section is nested, or omit the heading. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.heading). Must be inside AccountSavedCardsRoot."
+	guideline: "The section heading, rendered in every state. `as` sets the level from h2 to h6 (default h2); there is no h1, because the page title belongs to the page shell — pick the level that fits where the section is nested, or omit the heading. Text is children, or else the text message. Must be inside AccountSavedCardsRoot."
 });
 const AccountSavedCardsListDefinition = defineComponent({
 	name: "AccountSavedCardsList",
@@ -404,7 +474,7 @@ const AccountSavedCardItemDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "One saved card as a list row. It provides the card to the CardSummary parts, AccountSavedCardExpiry, and AccountSavedCardRemove. With no children it renders CardSummary (mark, network name, mask, last four digits), AccountSavedCardExpiry, and AccountSavedCardRemove, whose text is then always the catalog wording; compose them as children to rearrange them or to reword them from the CMS, keep AccountSavedCardExpiry in any custom row, and leave AccountSavedCardRemove out only for a read-only list. An expired row carries data-fs-account-saved-card-expired, an unusable one data-fs-account-saved-card-unusable, and a row whose removal is pending data-fs-account-saved-card-removing, for a swatch to dim. Never shows more than the last four digits. Must be inside AccountSavedCardsList."
+	guideline: "One saved card as a list row. It provides the card to the CardSummary parts, AccountSavedCardExpiry, and AccountSavedCardRemove. It renders only its children, so compose CardSummary, AccountSavedCardExpiry and AccountSavedCardRemove in it; keep AccountSavedCardExpiry in any row, and leave AccountSavedCardRemove out only for a read-only list. An expired row carries data-fs-account-saved-card-expired, an unusable one data-fs-account-saved-card-unusable, and a row whose removal is pending data-fs-account-saved-card-removing, for a swatch to dim. Never shows more than the last four digits. Must be inside AccountSavedCardsList."
 });
 const AccountSavedCardExpiryDefinition = defineComponent({
 	name: "AccountSavedCardExpiry",
@@ -417,7 +487,7 @@ const AccountSavedCardExpiryDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "When a saved card expires: \"Expires 05/28\" for a working card, \"Expired 05/24\" (or \"Expired\" with no date) for an expired one, and \"This card can't be used\", with no date, for an unusable one. Renders nothing for a working card with no date. The label comes from the CMS entry, then the catalog (fs/saved-cards.expires, .expired, .expired-no-date, .unusable); the component always places the MM/YY date after it, and only a placed element reads the CMS entry. The state is on data-fs-account-saved-card-expiry-status (usable, expired, unusable). Must be inside AccountSavedCardItem."
+	guideline: "When a saved card expires: \"Expires 05/28\" for a working card, \"Expired 05/24\" (or \"Expired\" with no date) for an expired one, and \"This card can't be used\", with no date, for an unusable one. Renders nothing for a working card with no date. The label is the expiresLabel, expiredLabel, expiredText or unusableText message; the component always places the MM/YY date after it. The state is on data-fs-account-saved-card-expiry-status (usable, expired, unusable). Must be inside AccountSavedCardItem."
 });
 const AccountSavedCardsEmptyDefinition = defineComponent({
 	name: "AccountSavedCardsEmpty",
@@ -430,7 +500,7 @@ const AccountSavedCardsEmptyDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "States that the shopper has no saved cards. Renders only once the read resolved with none — never while loading or after a failure. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.empty). Must be inside AccountSavedCardsRoot."
+	guideline: "States that the shopper has no saved cards. Renders only once the read resolved with none — never while loading or after a failure. Text is children, or else the text message. Must be inside AccountSavedCardsRoot."
 });
 const AccountSavedCardsLoadingDefinition = defineComponent({
 	name: "AccountSavedCardsLoading",
@@ -447,7 +517,7 @@ const AccountSavedCardsLoadingDefinition = defineComponent({
 		default: 2,
 		label: "Placeholder rows"
 	} },
-	guideline: "Placeholder rows while the saved cards load, plus one polite live region that announces the wait (CMS entry, then the catalog fs/saved-cards.loading). The rows are hidden from assistive technology; style them through data-fs-account-saved-cards-loading-row. Without this part the section shows no loading look. Must be inside AccountSavedCardsRoot."
+	guideline: "Placeholder rows while the saved cards load, plus one polite live region that announces the wait (the text message). The rows are hidden from assistive technology; style them through data-fs-account-saved-cards-loading-row. Without this part the section shows no loading look. Must be inside AccountSavedCardsRoot."
 });
 const AccountSavedCardsErrorDefinition = defineComponent({
 	name: "AccountSavedCardsError",
@@ -460,7 +530,7 @@ const AccountSavedCardsErrorDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "An alert shown when the saved cards cannot be read. An expired session says so and links to sign-in, returning the shopper to this page; any other failure says the cards could not be loaded. The wording comes from the CMS entry, then the catalog (fs/saved-cards.session-expired, .sign-in, .load-failed), never from the server; children replace it for every failure and drop the link. Must be inside AccountSavedCardsRoot."
+	guideline: "An alert shown when the saved cards cannot be read. An expired session says so and links to sign-in, returning the shopper to this page; any other failure says the cards could not be loaded. The wording is the sessionExpiredText, signInLabel and text messages, never from the server; children replace it for every failure and drop the link. Must be inside AccountSavedCardsRoot."
 });
 const AccountSavedCardRemoveDefinition = defineComponent({
 	name: "AccountSavedCardRemove",
@@ -473,7 +543,7 @@ const AccountSavedCardRemoveDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Lets the shopper remove the row's card after confirming. State-only controller: wrap one AlertDialogRoot and it becomes controlled, so never set open or onOpenChange on it. Compose AlertDialogRoot > (AccountSavedCardRemoveTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AccountSavedCardRemoveTitle + AccountSavedCardRemoveDescription + AccountSavedCardRemoveCancel + AccountSavedCardRemoveConfirm))), Cancel before Confirm so the safe action takes focus. With no children it renders that prompt with catalog text; compose the parts to reword them from the CMS. The prompt stays open while the removal runs and closes when it fails; on success the row leaves the list. AccountSavedCardsRoot supplies the savedCard.remove write, and the outcome goes unreported unless the section composes AccountSavedCardsRemoveFeedback. Must be inside AccountSavedCardItem."
+	guideline: "Lets the shopper remove the row's card after confirming. State-only controller: wrap one AlertDialogRoot and it becomes controlled, so never set open or onOpenChange on it. Compose AlertDialogRoot > (AccountSavedCardRemoveTrigger + AlertDialogPortal > (AlertDialogBackdrop + AlertDialogViewport > AlertDialogPopup > (AccountSavedCardRemoveTitle + AccountSavedCardRemoveDescription + AccountSavedCardRemoveCancel + AccountSavedCardRemoveConfirm))), Cancel before Confirm so the safe action takes focus. With no children it renders nothing. The prompt stays open while the removal runs and closes when it fails; on success the row leaves the list. AccountSavedCardsRoot supplies the savedCard.remove write, and the outcome goes unreported unless the section composes AccountSavedCardsRemoveFeedback. Must be inside AccountSavedCardItem."
 });
 const AccountSavedCardRemoveTriggerDefinition = defineComponent({
 	name: "AccountSavedCardRemoveTrigger",
@@ -486,7 +556,7 @@ const AccountSavedCardRemoveTriggerDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Opens the removal prompt. Its accessible name is its text followed by the card, e.g. \"Remove Visa ending in 1234\"; the card part is visually hidden. Disabled while any removal in the section is pending. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.trigger). Direct child of the AlertDialogRoot inside AccountSavedCardRemove."
+	guideline: "Opens the removal prompt. Its accessible name is its text followed by the card, e.g. \"Remove Visa ending in 1234\"; the card part is visually hidden. Disabled while any removal in the section is pending. Text is children, or else the text message; the card part is the cardEndingIn message. Direct child of the AlertDialogRoot inside AccountSavedCardRemove."
 });
 const AccountSavedCardRemoveTitleDefinition = defineComponent({
 	name: "AccountSavedCardRemoveTitle",
@@ -499,7 +569,7 @@ const AccountSavedCardRemoveTitleDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "The removal prompt's question and its accessible name. Required inside AlertDialogPopup. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.title). Must be inside AccountSavedCardRemove."
+	guideline: "The removal prompt's question and its accessible name. Required inside AlertDialogPopup. Text is children, or else the text message. Must be inside AccountSavedCardRemove."
 });
 const AccountSavedCardRemoveDescriptionDefinition = defineComponent({
 	name: "AccountSavedCardRemoveDescription",
@@ -512,7 +582,7 @@ const AccountSavedCardRemoveDescriptionDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Names the card and states the consequence; screen readers announce it with the prompt. With no children it renders CardSummary and then the text, which resolves the CMS entry, then the catalog (fs/saved-cards.remove.description); children replace both, so keep a CardSummary in them for the prompt to name the card. Inside AlertDialogPopup, after AccountSavedCardRemoveTitle. Must be inside AccountSavedCardRemove."
+	guideline: "Names the card and states the consequence; screen readers announce it with the prompt. With no children it renders CardSummary, which reads the cardEndingIn message of this part as its endingIn, and then the text message; children replace both, so keep a CardSummary in them for the prompt to name the card. Inside AlertDialogPopup, after AccountSavedCardRemoveTitle. Must be inside AccountSavedCardRemove."
 });
 const AccountSavedCardRemoveCancelDefinition = defineComponent({
 	name: "AccountSavedCardRemoveCancel",
@@ -525,7 +595,7 @@ const AccountSavedCardRemoveCancelDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Closes the removal prompt and keeps the card. Disabled while the removal runs. Place it before AccountSavedCardRemoveConfirm so it takes focus when the prompt opens. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.cancel). Must be inside AccountSavedCardRemove."
+	guideline: "Closes the removal prompt and keeps the card. Disabled while the removal runs. Place it before AccountSavedCardRemoveConfirm so it takes focus when the prompt opens. Text is children, or else the text message. Must be inside AccountSavedCardRemove."
 });
 const AccountSavedCardRemoveConfirmDefinition = defineComponent({
 	name: "AccountSavedCardRemoveConfirm",
@@ -538,7 +608,7 @@ const AccountSavedCardRemoveConfirmDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Removes the card. It dispatches savedCard.remove through the write AccountSavedCardsRoot supplies and declares none of its own. While the removal runs it is busy and shows its pending text; one removal runs at a time in the section. Text resolves children, then the CMS entry, then the catalog (fs/saved-cards.remove.confirm, .pending). Must be inside AccountSavedCardRemove."
+	guideline: "Removes the card. It dispatches savedCard.remove through the write AccountSavedCardsRoot supplies and declares none of its own. While the removal runs it is busy and shows its pending text; one removal runs at a time in the section. Text is children, or else the text message; the pendingText message while removing. Must be inside AccountSavedCardRemove."
 });
 const AccountSavedCardsRemoveFeedbackDefinition = defineComponent({
 	name: "AccountSavedCardsRemoveFeedback",
@@ -551,7 +621,7 @@ const AccountSavedCardsRemoveFeedbackDefinition = defineComponent({
 		category: "identity"
 	},
 	schema: {},
-	guideline: "Tells the shopper how a card removal ended: a status message that takes focus when the card was removed, or an alert when it was not, with a sign-in link back to this page when the session expired. Renders in every state of the section, so the message outlives the removed row and an emptied list; it stays until the next removal starts. Without this part a removal's outcome goes unreported. The wording comes from the CMS entry, then the catalog (fs/saved-cards.remove.success, .failed, fs/saved-cards.session-expired, .sign-in), never from the server; the outcome is on data-fs-account-saved-cards-remove-feedback-outcome. Must be inside AccountSavedCardsRoot."
+	guideline: "Tells the shopper how a card removal ended: a status message that takes focus when the card was removed, or an alert when it was not, with a sign-in link back to this page when the session expired. Renders in every state of the section, so the message outlives the removed row and an emptied list; it stays until the next removal starts. Without this part a removal's outcome goes unreported. The wording is the successText, failureText, sessionExpiredText and signInLabel messages, never the server's; the outcome is on data-fs-account-saved-cards-remove-feedback-outcome. Must be inside AccountSavedCardsRoot."
 });
 /**
 * One removal at a time: each success replaces the whole cached list, so two in flight could land out
@@ -620,14 +690,14 @@ function AccountSavedCardsRoot({ $data: $dataProp, $actions: $actionsProp, class
 		})
 	});
 }
-function AccountSavedCardsHeading({ as: Tag = "h2", $content, className, children, ...props }) {
+function AccountSavedCardsHeading({ as: Tag = "h2", $content, $locale, className, children, ...props }) {
 	useAccountSavedCards();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardsHeadingContent, $content);
 	return /* @__PURE__ */ jsx(Tag, {
 		...props,
 		className,
 		"data-fs-account-saved-cards-heading": "",
-		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.heading" }))
+		children: children ?? format("text")
 	});
 }
 function AccountSavedCardsList({ className, children, ...props }) {
@@ -664,26 +734,23 @@ function AccountSavedCardItem({ $data: $dataProp, className, children, ...props
 			children: /* @__PURE__ */ jsx(CardSummaryRoot, {
 				network: card.network.name,
 				lastDigits: card.lastDigits,
-				children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(CardSummary, {}),
-					/* @__PURE__ */ jsx(AccountSavedCardExpiry, {}),
-					/* @__PURE__ */ jsx(AccountSavedCardRemove, {})
-				] })
+				children
 			})
 		})
 	});
 }
-function AccountSavedCardExpiry({ $content, className, ...props }) {
+function AccountSavedCardExpiry({ $content, $locale, className, ...props }) {
 	const { status, expiry } = useAccountSavedCard();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardExpiryContent, $content);
+	const { formatDate } = useStorefrontFormatters();
 	const state = savedCardState(status);
 	const date = state === "unusable" ? null : validExpiry(expiry);
 	if (state === "usable" && !date) return null;
 	let label;
-	if (state === "unusable") label = resolveAuthoredCopy($content?.unusableText, intl.formatMessage({ id: "fs/saved-cards.unusable" }));
-	else if (!date) label = resolveAuthoredCopy($content?.expiredText, intl.formatMessage({ id: "fs/saved-cards.expired-no-date" }));
-	else if (state === "expired") label = resolveAuthoredCopy($content?.expiredLabel, intl.formatMessage({ id: "fs/saved-cards.expired" }));
-	else label = resolveAuthoredCopy($content?.expiresLabel, intl.formatMessage({ id: "fs/saved-cards.expires" }));
+	if (state === "unusable") label = format("unusableText");
+	else if (!date) label = format("expiredText");
+	else if (state === "expired") label = format("expiredLabel");
+	else label = format("expiresLabel");
 	const month = date ? String(date.month).padStart(2, "0") : "";
 	return /* @__PURE__ */ jsxs("p", {
 		...props,
@@ -705,7 +772,7 @@ function AccountSavedCardExpiry({ $content, className, ...props }) {
 			/* @__PURE__ */ jsx("span", {
 				"data-fs-sr-only": "",
 				className: "sr-only",
-				children: intl.formatDate(Date.UTC(date.year, date.month - 1, 1), {
+				children: formatDate(Date.UTC(date.year, date.month - 1, 1), {
 					month: "long",
 					year: "numeric",
 					timeZone: "UTC"
@@ -714,26 +781,25 @@ function AccountSavedCardExpiry({ $content, className, ...props }) {
 		] }) : null]
 	});
 }
-function AccountSavedCardsEmpty({ $content, className, children, ...props }) {
+function AccountSavedCardsEmpty({ $content, $locale, className, children, ...props }) {
 	const { state } = useAccountSavedCards();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardsEmptyContent, $content);
 	if (state !== "empty") return null;
 	return /* @__PURE__ */ jsx("p", {
 		...props,
 		className,
 		"data-fs-account-saved-cards-empty": "",
-		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.empty" }))
+		children: children ?? format("text")
 	});
 }
 const DEFAULT_SKELETON_COUNT = 2;
-function AccountSavedCardsLoading({ skeletonCount = DEFAULT_SKELETON_COUNT, $content, className, ...props }) {
+function AccountSavedCardsLoading({ skeletonCount = DEFAULT_SKELETON_COUNT, $content, $locale, className, ...props }) {
 	const { state } = useAccountSavedCards();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardsLoadingContent, $content);
 	const loading = state === "loading";
-	const label = resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.loading" }));
 	const rows = Number.isFinite(skeletonCount) ? Math.max(1, Math.trunc(skeletonCount)) : DEFAULT_SKELETON_COUNT;
 	const [announcement, setAnnouncement] = useState("");
-	const pendingLabel = loading ? label : "";
+	const pendingLabel = loading ? format("text") : "";
 	useEffect(() => {
 		setAnnouncement(pendingLabel);
 	}, [pendingLabel]);
@@ -749,9 +815,9 @@ function AccountSavedCardsLoading({ skeletonCount = DEFAULT_SKELETON_COUNT, $con
 		children: announcement
 	})] });
 }
-function AccountSavedCardsError({ $content, className, children, ...props }) {
+function AccountSavedCardsError({ $content, $locale, className, children, ...props }) {
 	const { state, errorCode } = useAccountSavedCards();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardsErrorContent, $content);
 	const { path } = useStorefrontRoute();
 	if (state !== "error") return null;
 	const sessionExpired = errorCode === "UNAUTHORIZED";
@@ -762,15 +828,15 @@ function AccountSavedCardsError({ $content, className, children, ...props }) {
 		"data-fs-account-saved-cards-error": "",
 		"data-fs-account-saved-cards-error-code": sessionExpired ? "unauthorized" : "failed",
 		children: children ?? (sessionExpired ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			resolveAuthoredCopy($content?.sessionExpiredText, intl.formatMessage({ id: "fs/saved-cards.session-expired" })),
+			format("sessionExpiredText"),
 			" ",
 			/* @__PURE__ */ jsx(NavigationLink, {
 				href: signInTarget(path),
 				prefetch: false,
 				"data-fs-account-saved-cards-sign-in": "",
-				children: resolveAuthoredCopy($content?.signInLabel, intl.formatMessage({ id: "fs/saved-cards.sign-in" }))
+				children: format("signInLabel")
 			})
-		] }) : resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.load-failed" })))
+		] }) : format("text"))
 	});
 }
 function AccountSavedCardRemove({ children }) {
@@ -791,14 +857,13 @@ function AccountSavedCardRemove({ children }) {
 		blocked,
 		close
 	]);
-	const prompt = children ?? /* @__PURE__ */ jsx(AccountSavedCardRemoveDefaultPrompt, {});
-	if (!isValidElement(prompt)) return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
+	if (!isValidElement(children)) return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
 		value,
-		children: prompt
+		children
 	});
 	return /* @__PURE__ */ jsx(AccountSavedCardRemoveContext, {
 		value,
-		children: cloneElement(prompt, {
+		children: cloneElement(children, {
 			open,
 			onOpenChange: (next) => {
 				if (next ? blocked : pending) return;
@@ -807,75 +872,65 @@ function AccountSavedCardRemove({ children }) {
 		})
 	});
 }
-function AccountSavedCardRemoveDefaultPrompt({ open, onOpenChange }) {
-	return /* @__PURE__ */ jsxs(AlertDialogRoot, {
-		open,
-		onOpenChange,
-		children: [/* @__PURE__ */ jsx(AccountSavedCardRemoveTrigger, {}), /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
-			/* @__PURE__ */ jsx(AccountSavedCardRemoveTitle, {}),
-			/* @__PURE__ */ jsx(AccountSavedCardRemoveDescription, {}),
-			/* @__PURE__ */ jsx(AccountSavedCardRemoveCancel, {}),
-			/* @__PURE__ */ jsx(AccountSavedCardRemoveConfirm, {})
-		] }) })] })]
-	});
-}
-function AccountSavedCardRemoveTrigger({ $content, className, children, disabled, ...props }) {
+function AccountSavedCardRemoveTrigger({ $content, $locale, className, children, disabled, ...props }) {
 	const { blocked } = useAccountSavedCardRemove();
 	const { name, lastFour } = useCardSummary();
-	const intl = useIntl();
-	const card = [name, lastFour ? intl.formatMessage({ id: "fs/card.ending-in" }, { lastDigits: lastFour }) : null].filter(Boolean).join(" ");
+	const { format } = useMessageFormatter(AccountSavedCardRemoveTriggerContent, $content);
+	const card = [name, lastFour ? format("cardEndingIn", { lastDigits: lastFour }) : null].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsxs(AlertDialogTrigger, {
 		...props,
 		className,
 		disabled: blocked || disabled,
 		"data-fs-account-saved-card-remove-trigger": "",
-		children: [children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.trigger" })), card ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
+		children: [children ?? format("text"), card ? /* @__PURE__ */ jsxs(Fragment$1, { children: [" ", /* @__PURE__ */ jsx("span", {
 			"data-fs-sr-only": "",
 			className: "sr-only",
 			children: card
 		})] }) : null]
 	});
 }
-function AccountSavedCardRemoveTitle({ $content, className, children, ...props }) {
+function AccountSavedCardRemoveTitle({ $content, $locale, className, children, ...props }) {
 	useAccountSavedCardRemove();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveTitleContent, $content);
 	return /* @__PURE__ */ jsx(AlertDialogTitle, {
 		...props,
 		className,
 		"data-fs-account-saved-card-remove-title": "",
-		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.title" }))
+		children: children ?? format("text")
 	});
 }
-function AccountSavedCardRemoveDescription({ $content, className, children, ...props }) {
+function AccountSavedCardRemoveDescription({ $content, $locale, className, children, ...props }) {
 	useAccountSavedCardRemove();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveDescriptionContent, $content);
+	const cardEndingIn = $content?.cardEndingIn;
+	const cardSummaryContent = useMemo(() => ({ endingIn: cardEndingIn }), [cardEndingIn]);
 	return /* @__PURE__ */ jsx(AlertDialogDescription, {
 		...props,
 		className,
 		"data-fs-account-saved-card-remove-description": "",
 		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(CardSummary, {}),
+			/* @__PURE__ */ jsx(CardSummary, { $content: cardSummaryContent }),
 			" ",
-			resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.description" }))
+			format("text")
 		] })
 	});
 }
-function AccountSavedCardRemoveCancel({ $content, className, children, disabled, ...props }) {
+function AccountSavedCardRemoveCancel({ $content, $locale, className, children, disabled, ...props }) {
 	const { pending } = useAccountSavedCardRemove();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveCancelContent, $content);
 	return /* @__PURE__ */ jsx(AlertDialogClose, {
 		...props,
 		className,
 		disabled: pending || disabled,
 		"data-fs-account-saved-card-remove-cancel": "",
-		children: children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.cancel" }))
+		children: children ?? format("text")
 	});
 }
-function AccountSavedCardRemoveConfirm({ $content, className, children, onClick, ...props }) {
+function AccountSavedCardRemoveConfirm({ $content, $locale, className, children, onClick, ...props }) {
 	const { id, pending, close } = useAccountSavedCardRemove();
 	const { removal } = useAccountSavedCards();
 	const remove = useActionsOverride(void 0)?.savedCard?.remove;
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardRemoveConfirmContent, $content);
 	async function handleClick(event) {
 		onClick?.(event);
 		if (event.defaultPrevented || !remove || !removal.begin(id)) return;
@@ -897,7 +952,7 @@ function AccountSavedCardRemoveConfirm({ $content, className, children, onClick,
 		"data-fs-account-saved-card-remove-confirm": "",
 		...pending ? { "data-fs-account-saved-card-remove-confirm-pending": "" } : {},
 		onClick: handleClick,
-		children: pending ? resolveAuthoredCopy($content?.pendingText, intl.formatMessage({ id: "fs/saved-cards.remove.pending" })) : children ?? resolveAuthoredCopy($content?.text, intl.formatMessage({ id: "fs/saved-cards.remove.confirm" }))
+		children: pending ? format("pendingText") : children ?? format("text")
 	});
 }
 function feedbackOutcome(outcome) {
@@ -905,19 +960,19 @@ function feedbackOutcome(outcome) {
 	if (outcome.kind === "removed") return "removed";
 	return outcome.code === "UNAUTHORIZED" ? "unauthorized" : "failed";
 }
-function AccountSavedCardsRemoveFeedback({ $content, className, ...props }) {
+function AccountSavedCardsRemoveFeedback({ $content, $locale, className, ...props }) {
 	const { removal: { outcome } } = useAccountSavedCards();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountSavedCardsRemoveFeedbackContent, $content);
 	const { path } = useStorefrontRoute();
 	const statusRef = useRef(null);
 	const kind = feedbackOutcome(outcome);
-	const successText = resolveAuthoredCopy($content?.successText, intl.formatMessage({ id: "fs/saved-cards.remove.success" }));
 	const [announcement, setAnnouncement] = useState("");
+	const removed = outcome?.kind === "removed";
+	const successText = removed ? format("successText") : "";
 	useEffect(() => {
-		const removed = outcome?.kind === "removed";
-		setAnnouncement(removed ? successText : "");
+		setAnnouncement(successText);
 		if (removed) statusRef.current?.focus();
-	}, [outcome, successText]);
+	}, [removed, successText]);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className,
@@ -933,19 +988,19 @@ function AccountSavedCardsRemoveFeedback({ $content, className, ...props }) {
 			kind === "unauthorized" ? /* @__PURE__ */ jsxs("div", {
 				role: "alert",
 				children: [
-					resolveAuthoredCopy($content?.sessionExpiredText, intl.formatMessage({ id: "fs/saved-cards.session-expired" })),
+					format("sessionExpiredText"),
 					" ",
 					/* @__PURE__ */ jsx(NavigationLink, {
 						href: signInTarget(path),
 						prefetch: false,
 						"data-fs-account-saved-cards-remove-feedback-sign-in": "",
-						children: resolveAuthoredCopy($content?.signInLabel, intl.formatMessage({ id: "fs/saved-cards.sign-in" }))
+						children: format("signInLabel")
 					})
 				]
 			}) : null,
 			kind === "failed" ? /* @__PURE__ */ jsx("div", {
 				role: "alert",
-				children: resolveAuthoredCopy($content?.failureText, intl.formatMessage({ id: "fs/saved-cards.remove.failed" }))
+				children: format("failureText")
 			}) : null
 		]
 	});