@vtex/faststore 0.0.8 → 0.0.11

package/dist/particles/binding-switcher/binding-switcher.js

@@ -0,0 +1,194 @@
+"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 { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
+import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { Select } from "../select/select.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/binding-switcher/binding-switcher.tsx
+const BindingSwitcherContent = defineContentType({
+	id: "binding-switcher",
+	title: "Binding Switcher",
+	description: "Label of the binding select and the notice shown when a page has no equivalent in the chosen binding.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Label",
+				format: "icu-message",
+				messageSource: "Language"
+			},
+			notice: {
+				type: "string",
+				title: "No-equivalent notice",
+				description: "Shown when the page loaded with fs_notice=no-equivalent.",
+				format: "icu-message",
+				messageSource: "This page isn't available in the selected language."
+			}
+		}
+	}
+});
+/**
+* `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an
+* own key, the value is a non-null object, and `locale` is a string. Fewer than two counted
+* entries yields an empty list.
+*/
+function bindingSwitcherOptions(bindings, activeLocale) {
+	if (bindings == null) return [];
+	const counted = [];
+	for (const [id, value] of Object.entries(bindings)) {
+		if (!isCountedBinding(value)) continue;
+		counted.push({
+			id,
+			locale: value.locale,
+			currency: value.currency
+		});
+	}
+	if (counted.length < 2) return [];
+	const localeCount = /* @__PURE__ */ new Map();
+	for (const entry of counted) localeCount.set(entry.locale, (localeCount.get(entry.locale) ?? 0) + 1);
+	const options = counted.map((entry) => {
+		let label = languageName(entry.locale);
+		if ((localeCount.get(entry.locale) ?? 0) > 1 && typeof entry.currency === "string" && entry.currency.length > 0) label += ` (${entry.currency})`;
+		return {
+			id: entry.id,
+			label
+		};
+	});
+	options.sort((a, b) => compareOptions(a, b, activeLocale));
+	return options;
+}
+function isCountedBinding(value) {
+	return typeof value === "object" && value !== null && typeof value.locale === "string";
+}
+function languageName(locale) {
+	try {
+		const name = new Intl.DisplayNames([locale], {
+			type: "language",
+			languageDisplay: "standard"
+		}).of(locale);
+		if (!name) return locale;
+		return name;
+	} catch {
+		return locale;
+	}
+}
+function compareOptions(a, b, activeLocale) {
+	try {
+		return a.label.localeCompare(b.label, activeLocale) || a.id.localeCompare(b.id, activeLocale);
+	} catch {
+		return a.label.localeCompare(b.label) || a.id.localeCompare(b.id);
+	}
+}
+/** How long the control stays disabled after a started navigation that never unloads the page. */
+const NAVIGATION_TIMEOUT_MS = 1e4;
+const BindingSwitcherDefinition = defineComponent({
+	name: "BindingSwitcher",
+	importPath: "@vtex/faststore/components",
+	component: BindingSwitcher,
+	content: BindingSwitcherContent,
+	editor: {
+		label: "Binding Switcher",
+		category: "action"
+	},
+	actions: { locale: ["set"] },
+	schema: { bindings: {
+		type: "object",
+		label: "Bindings"
+	} },
+	guideline: "Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings. Its label and no-equivalent notice come from the $content fields label and notice."
+});
+function BindingSwitcher({ bindings, $actions: $actionsProp, $locale, $content, className, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const { bindingId, locale } = useStorefrontContext();
+	const options = useMemo(() => bindingSwitcherOptions(bindings, locale), [bindings, locale]);
+	const [pending, setPending] = useState(false);
+	const { path } = useStorefrontRoute();
+	const [noticePath, setNoticePath] = useState(null);
+	const noticeVisible = noticePath !== null && noticePath === path;
+	const pendingTimeout = useRef(void 0);
+	const messages = useMessageFormatter(BindingSwitcherContent, $content);
+	const optionCount = options.length;
+	useEffect(() => {
+		if (optionCount < 2) return;
+		const url = new URL(globalThis.location.href);
+		if (url.searchParams.get("fs_notice") !== "no-equivalent") return;
+		setNoticePath(path);
+		url.searchParams.delete("fs_notice");
+		globalThis.history.replaceState(globalThis.history.state, "", `${url.pathname}${url.search}${url.hash}`);
+	}, [optionCount, path]);
+	useEffect(() => {
+		if (noticePath !== null && path !== noticePath) setNoticePath(null);
+	}, [noticePath, path]);
+	useEffect(() => {
+		function onPageShow(event) {
+			if (!event.persisted) return;
+			clearTimeout(pendingTimeout.current);
+			setPending(false);
+		}
+		globalThis.addEventListener("pageshow", onPageShow);
+		return () => {
+			globalThis.removeEventListener("pageshow", onPageShow);
+			clearTimeout(pendingTimeout.current);
+		};
+	}, []);
+	async function handleChange(value) {
+		if (value === null || value === bindingId) return;
+		const set = $actions?.locale?.set;
+		if (!set) {
+			console.error("[BindingSwitcher] no locale.set");
+			return;
+		}
+		setPending(true);
+		let navigated = false;
+		try {
+			navigated = await set({ bindingId: value }) === true;
+		} finally {
+			if (navigated) pendingTimeout.current = setTimeout(() => setPending(false), NAVIGATION_TIMEOUT_MS);
+			else setPending(false);
+		}
+	}
+	if (optionCount < 2) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-binding-switcher": "",
+		"aria-busy": pending || void 0,
+		...pending ? { "data-fs-binding-switcher-pending": "" } : {},
+		children: [noticeVisible ? /* @__PURE__ */ jsx("output", {
+			"data-fs-binding-switcher-notice": "",
+			children: messages.format("notice")
+		}) : null, /* @__PURE__ */ jsxs(Select.Root, {
+			value: bindingId,
+			onValueChange: handleChange,
+			disabled: pending,
+			children: [
+				/* @__PURE__ */ jsx(Select.Label, { children: messages.format("label") }),
+				/* @__PURE__ */ jsxs(Select.Trigger, {
+					disabled: pending,
+					children: [/* @__PURE__ */ jsx(Select.Value, { children: (value) => options.find((option) => option.id === value)?.label ?? value ?? "" }), /* @__PURE__ */ jsx(Select.Icon, { children: "▾" })]
+				}),
+				/* @__PURE__ */ jsx(Select.Positioner, {
+					align: "start",
+					sideOffset: 4,
+					alignItemWithTrigger: false,
+					children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, {
+						value: option.id,
+						label: option.label,
+						children: option.label
+					}, option.id)) }) })
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { BindingSwitcher, BindingSwitcherContent, BindingSwitcherDefinition, bindingSwitcherOptions };
+
+//# sourceMappingURL=binding-switcher.js.map

package/dist/particles/binding-switcher/binding-switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"binding-switcher.js","names":[],"sources":["../../../src/particles/binding-switcher/binding-switcher.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, useEffect, useMemo, useRef, useState } from 'react';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { Select } from '../select/select.js';\n\nexport const BindingSwitcherContent = defineContentType({\n  id: 'binding-switcher',\n  title: 'Binding Switcher',\n  description: 'Label of the binding select and the notice shown when a page has no equivalent in the chosen binding.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'Language' },\n      notice: {\n        type: 'string',\n        title: 'No-equivalent notice',\n        description: 'Shown when the page loaded with fs_notice=no-equivalent.',\n        format: 'icu-message',\n        messageSource: \"This page isn't available in the selected language.\",\n      },\n    },\n  },\n});\n\nexport type BindingSwitcherBinding = {\n  locale?: unknown;\n  currency?: unknown;\n  salesChannel?: unknown;\n  url?: unknown;\n  country?: unknown;\n  timezone?: unknown;\n};\n\ntype BindingSwitcherOption = {\n  id: string;\n  label: string;\n};\n\n/**\n * `foundation.json` `localization.bindings`, keyed by binding id. An entry counts only when it is an\n * own key, the value is a non-null object, and `locale` is a string. Fewer than two counted\n * entries yields an empty list.\n */\nexport function bindingSwitcherOptions(\n  bindings: Record<string, BindingSwitcherBinding> | null | undefined,\n  activeLocale: string,\n): { id: string; label: string }[] {\n  if (bindings == null) return [];\n\n  const counted: { id: string; locale: string; currency: unknown }[] = [];\n  for (const [id, value] of Object.entries(bindings)) {\n    if (!isCountedBinding(value)) continue;\n    counted.push({ id, locale: value.locale, currency: value.currency });\n  }\n  if (counted.length < 2) return [];\n\n  const localeCount = new Map<string, number>();\n  for (const entry of counted) {\n    localeCount.set(entry.locale, (localeCount.get(entry.locale) ?? 0) + 1);\n  }\n\n  const options = counted.map((entry) => {\n    let label = languageName(entry.locale);\n    const shared = (localeCount.get(entry.locale) ?? 0) > 1;\n    if (shared && typeof entry.currency === 'string' && entry.currency.length > 0) {\n      label += ` (${entry.currency})`;\n    }\n    return { id: entry.id, label };\n  });\n\n  options.sort((a, b) => compareOptions(a, b, activeLocale));\n  return options;\n}\n\nfunction isCountedBinding(value: unknown): value is BindingSwitcherBinding & { locale: string } {\n  return typeof value === 'object' && value !== null && typeof (value as BindingSwitcherBinding).locale === 'string';\n}\n\nfunction languageName(locale: string): string {\n  try {\n    const name = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);\n    if (!name) return locale;\n    return name;\n  } catch {\n    return locale;\n  }\n}\n\nfunction compareOptions(a: BindingSwitcherOption, b: BindingSwitcherOption, activeLocale: string): number {\n  try {\n    return a.label.localeCompare(b.label, activeLocale) || a.id.localeCompare(b.id, activeLocale);\n  } catch {\n    return a.label.localeCompare(b.label) || a.id.localeCompare(b.id);\n  }\n}\n\n/** How long the control stays disabled after a started navigation that never unloads the page. */\nconst NAVIGATION_TIMEOUT_MS = 10_000;\n\nexport type BindingSwitcherProps = Omit<ComponentPropsWithRef<'div'>, 'children'> &\n  MessageLocaleProp & {\n    /** `foundation.json` `localization.bindings`, keyed by binding id. No library default. */\n    bindings?: Record<string, BindingSwitcherBinding> | null;\n    /** Injected from `actions: { locale: ['set'] }`. */\n    $actions?: ComponentActions;\n    /** `label` is the accessible name, rendered as `Select.Label`; `notice` shows on `fs_notice=no-equivalent`. */\n    $content?: ContentValue<typeof BindingSwitcherContent>;\n  };\n\nexport const BindingSwitcherDefinition = defineComponent<BindingSwitcherProps>({\n  name: 'BindingSwitcher',\n  importPath: '@vtex/faststore/components',\n  component: BindingSwitcher,\n  content: BindingSwitcherContent,\n  editor: { label: 'Binding Switcher', category: 'action' },\n  actions: { locale: ['set'] },\n  schema: {\n    bindings: { type: 'object', label: 'Bindings' },\n  },\n  guideline:\n    'Lists the bindings a store declares and switches the whole binding (locale, currency, sales channel) through locale.set. Renders nothing when fewer than two bindings are present; the store passes bindings as $data.Global.localization.bindings. Its label and no-equivalent notice come from the $content fields label and notice.',\n});\n\nexport function BindingSwitcher({\n  bindings,\n  $actions: $actionsProp,\n  $locale,\n  $content,\n  className,\n  ...props\n}: BindingSwitcherProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { bindingId, locale } = useStorefrontContext();\n  const options = useMemo(() => bindingSwitcherOptions(bindings, locale), [bindings, locale]);\n  const [pending, setPending] = useState(false);\n  const { path } = useStorefrontRoute();\n  // The path the notice arrived on: the layout stays mounted across client navigations, and the\n  // notice belongs to that one visit of the page it was shown on.\n  const [noticePath, setNoticePath] = useState<string | null>(null);\n  const noticeVisible = noticePath !== null && noticePath === path;\n  const pendingTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const messages = useMessageFormatter(BindingSwitcherContent, $content);\n  const optionCount = options.length;\n\n  // Hidden on the first render. `location` is read after mount so the notice cannot mismatch\n  // hydration, and so a store with fewer than two bindings leaves the query alone.\n  useEffect(() => {\n    if (optionCount < 2) return;\n    const url = new URL(globalThis.location.href);\n    if (url.searchParams.get('fs_notice') !== 'no-equivalent') return;\n    setNoticePath(path);\n    url.searchParams.delete('fs_notice');\n    globalThis.history.replaceState(globalThis.history.state, '', `${url.pathname}${url.search}${url.hash}`);\n  }, [optionCount, path]);\n\n  useEffect(() => {\n    if (noticePath !== null && path !== noticePath) setNoticePath(null);\n  }, [noticePath, path]);\n\n  // A page restored from the back/forward cache comes back with the state it left with.\n  useEffect(() => {\n    function onPageShow(event: PageTransitionEvent) {\n      if (!event.persisted) return;\n      clearTimeout(pendingTimeout.current);\n      setPending(false);\n    }\n    globalThis.addEventListener('pageshow', onPageShow);\n    return () => {\n      globalThis.removeEventListener('pageshow', onPageShow);\n      clearTimeout(pendingTimeout.current);\n    };\n  }, []);\n\n  async function handleChange(value: string | null) {\n    if (value === null || value === bindingId) return;\n    const set = $actions?.locale?.set;\n    if (!set) {\n      console.error('[BindingSwitcher] no locale.set');\n      return;\n    }\n    setPending(true);\n    let navigated = false;\n    try {\n      navigated = (await set({ bindingId: value })) === true;\n    } finally {\n      // A started navigation keeps the control disabled until the next document replaces this one, or\n      // until the timeout when the page never unloads (a cancelled `beforeunload`, a 204, a download).\n      if (navigated) {\n        pendingTimeout.current = setTimeout(() => setPending(false), NAVIGATION_TIMEOUT_MS);\n      } else {\n        setPending(false);\n      }\n    }\n  }\n\n  if (optionCount < 2) return null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-binding-switcher=\"\"\n      aria-busy={pending || undefined}\n      {...(pending ? { 'data-fs-binding-switcher-pending': '' } : {})}\n    >\n      {noticeVisible ? <output data-fs-binding-switcher-notice=\"\">{messages.format('notice')}</output> : null}\n      <Select.Root value={bindingId} onValueChange={handleChange} disabled={pending}>\n        <Select.Label>{messages.format('label')}</Select.Label>\n        <Select.Trigger disabled={pending}>\n          <Select.Value>{(value) => options.find((option) => option.id === value)?.label ?? value ?? ''}</Select.Value>\n          <Select.Icon>▾</Select.Icon>\n        </Select.Trigger>\n        <Select.Positioner align=\"start\" sideOffset={4} alignItemWithTrigger={false}>\n          <Select.Popup>\n            <Select.List>\n              {options.map((option) => (\n                <Select.Item key={option.id} value={option.id} label={option.label}>\n                  {option.label}\n                </Select.Item>\n              ))}\n            </Select.List>\n          </Select.Popup>\n        </Select.Positioner>\n      </Select.Root>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/particles/card-summary/card-network.d.ts

@@ -0,0 +1,17 @@
+//#region src/particles/card-summary/card-network.d.ts
+/**
+ * The one network → mark mapping every card surface shares, so a name marks the same everywhere.
+ * Values are base-dialect names only; a network outside it renders by name, never with a wrong mark.
+ */
+export type CardNetworkIconName = 'visa' | 'mastercard' | 'amex' | 'diners' | 'elo-card';
+/** Network key (name lowercased, non-letters removed) → base-dialect icon name. */
+export declare const CARD_NETWORK_ICON_BY_KEY: Readonly<Record<string, CardNetworkIconName>>;
+/**
+ * Distinct icon names the map can produce. A store that renders a card mark lists these under
+ * `icons.include` in its `foundation.json`: the names come from data, so the compiler cannot see them.
+ */
+export declare const CARD_NETWORK_ICON_NAMES: readonly CardNetworkIconName[];
+/** The base-dialect icon for a network's display name, or `null` when unmapped. */
+export declare function cardNetworkIcon(name: string): CardNetworkIconName | null;
+//#endregion
+//# sourceMappingURL=card-network.d.ts.map

package/dist/particles/card-summary/card-network.js

@@ -0,0 +1,25 @@
+//#region src/particles/card-summary/card-network.ts
+/** Network key (name lowercased, non-letters removed) → base-dialect icon name. */
+const CARD_NETWORK_ICON_BY_KEY = Object.freeze({
+	visa: "visa",
+	mastercard: "mastercard",
+	amex: "amex",
+	americanexpress: "amex",
+	diners: "diners",
+	dinersclub: "diners",
+	elo: "elo-card"
+});
+/**
+* Distinct icon names the map can produce. A store that renders a card mark lists these under
+* `icons.include` in its `foundation.json`: the names come from data, so the compiler cannot see them.
+*/
+const CARD_NETWORK_ICON_NAMES = Object.freeze([...new Set(Object.values(CARD_NETWORK_ICON_BY_KEY))]);
+/** The base-dialect icon for a network's display name, or `null` when unmapped. */
+function cardNetworkIcon(name) {
+	const key = name.toLowerCase().replaceAll(/[^a-z]/g, "");
+	return Object.hasOwn(CARD_NETWORK_ICON_BY_KEY, key) ? CARD_NETWORK_ICON_BY_KEY[key] ?? null : null;
+}
+//#endregion
+export { CARD_NETWORK_ICON_BY_KEY, CARD_NETWORK_ICON_NAMES, cardNetworkIcon };
+
+//# sourceMappingURL=card-network.js.map

package/dist/particles/card-summary/card-network.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-network.js","names":[],"sources":["../../../src/particles/card-summary/card-network.ts"],"sourcesContent":["/**\n * The one network → mark mapping every card surface shares, so a name marks the same everywhere.\n * Values are base-dialect names only; a network outside it renders by name, never with a wrong mark.\n */\n\nexport type CardNetworkIconName = 'visa' | 'mastercard' | 'amex' | 'diners' | 'elo-card';\n\n/** Network key (name lowercased, non-letters removed) → base-dialect icon name. */\nexport const CARD_NETWORK_ICON_BY_KEY: Readonly<Record<string, CardNetworkIconName>> = Object.freeze({\n  visa: 'visa',\n  mastercard: 'mastercard',\n  amex: 'amex',\n  americanexpress: 'amex',\n  diners: 'diners',\n  dinersclub: 'diners',\n  elo: 'elo-card',\n});\n\n/**\n * Distinct icon names the map can produce. A store that renders a card mark lists these under\n * `icons.include` in its `foundation.json`: the names come from data, so the compiler cannot see them.\n */\nexport const CARD_NETWORK_ICON_NAMES: readonly CardNetworkIconName[] = Object.freeze([\n  ...new Set(Object.values(CARD_NETWORK_ICON_BY_KEY)),\n]);\n\n/** The base-dialect icon for a network's display name, or `null` when unmapped. */\nexport function cardNetworkIcon(name: string): CardNetworkIconName | null {\n  const key = name.toLowerCase().replaceAll(/[^a-z]/g, '');\n  // Own keys only: an inherited one (`constructor`) would hand Icon a function.\n  return Object.hasOwn(CARD_NETWORK_ICON_BY_KEY, key) ? (CARD_NETWORK_ICON_BY_KEY[key] ?? null) : null;\n}\n"],"mappings":";;AAQA,MAAa,2BAA0E,OAAO,OAAO;CACnG,MAAM;CACN,YAAY;CACZ,MAAM;CACN,iBAAiB;CACjB,QAAQ;CACR,YAAY;CACZ,KAAK;AACP,CAAC;;;;;AAMD,MAAa,0BAA0D,OAAO,OAAO,CACnF,GAAG,IAAI,IAAI,OAAO,OAAO,wBAAwB,CAAC,CACpD,CAAC;;AAGD,SAAgB,gBAAgB,MAA0C;CACxE,MAAM,MAAM,KAAK,YAAY,CAAC,CAAC,WAAW,WAAW,EAAE;CAEvD,OAAO,OAAO,OAAO,0BAA0B,GAAG,IAAK,yBAAyB,QAAQ,OAAQ;AAClG"}

package/dist/particles/card-summary/card-summary.d.ts

@@ -0,0 +1,113 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { CardNetworkIconName } from "./card-network.js";
+import { ReactNode } from "react";
+//#region src/particles/card-summary/card-summary.d.ts
+/**
+ * CardSummary particle (no business coupling — ADR-0001): a saved card's identity — network mark,
+ * label or network name, mask, last four digits — as parts the schema arranges. A row that owns
+ * card data wraps its children in CardSummaryRoot and declares `card-summary` in its own
+ * providesContext; the parts read the card from there. Each part decides from the data, never from
+ * which other parts are composed, so any arrangement keeps the network identifiable.
+ */
+export type CardSummaryValue = Readonly<{
+  /** The network's display name as given. */
+  network: string;
+  /** The base-dialect icon for the network, or `null` when unmapped. */
+  icon: CardNetworkIconName | null;
+  /** The trimmed label, or `null` when absent or blank. */
+  label: string | null;
+  /** `label ?? network`, or `null` when both are blank. */
+  name: string | null;
+  /** At most four digits; `''` when none. */
+  lastFour: string;
+}>;
+/** The card the nearest CardSummaryRoot provides. Throws outside one. */
+export declare function useCardSummary(): CardSummaryValue;
+export type CardSummaryRootProps = Readonly<{
+  /** The network's display name from the platform, e.g. `Visa`. Selects the mark by exact key match. */
+  network: string;
+  /** The card's last digits. Only the trailing four digit characters ever reach the parts. */
+  lastDigits: string;
+  /** The shopper's own name for the card. Shown in place of the network name when non-blank. */
+  label?: string | null;
+  children?: ReactNode;
+}>;
+export type CardSummaryProps = MessageLocaleProp & Readonly<{
+  className?: string;
+  /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */
+  children?: ReactNode;
+  $content?: ContentValue<typeof CardSummaryContent>;
+}>;
+export type CardSummaryPartProps = {
+  className?: string;
+};
+export type CardSummaryMarkProps = Readonly<CardSummaryPartProps>;
+export type CardSummaryNameProps = Readonly<CardSummaryPartProps>;
+export type CardSummaryDigitsProps = Readonly<CardSummaryPartProps>;
+export type CardSummaryMaskProps = Readonly<CardSummaryPartProps & {
+  /** The masking symbol shown before the digits. Defaults to `••••`; empty renders nothing. */
+  mask?: string;
+  /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */
+  children?: ReactNode;
+}>;
+export declare const CardSummaryContent: {
+  readonly id: "card-summary";
+  readonly title: "Card Summary";
+  readonly description: "The card's last digits as read to assistive technology.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly endingIn: {
+        readonly type: "string";
+        readonly title: "Card last digits";
+        readonly format: "icu-message";
+        readonly messageSource: "ending in {lastDigits}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly lastDigits: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly lastDigits: "4242";
+        };
+      };
+    };
+  };
+};
+export declare const CardSummaryDefinition: ComponentDefinition<CardSummaryProps>;
+export declare const CardSummaryMarkDefinition: ComponentDefinition<Readonly<CardSummaryPartProps>>;
+export declare const CardSummaryNameDefinition: ComponentDefinition<Readonly<CardSummaryPartProps>>;
+export declare const CardSummaryMaskDefinition: ComponentDefinition<Readonly<CardSummaryPartProps & {
+  /** The masking symbol shown before the digits. Defaults to `••••`; empty renders nothing. */
+  mask?: string;
+  /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */
+  children?: ReactNode;
+}>>;
+export declare const CardSummaryDigitsDefinition: ComponentDefinition<Readonly<CardSummaryPartProps>>;
+/**
+ * Provides one card to the parts, keeping only its last four digits. No definition on purpose: a
+ * schema cannot supply the card, so a matter row renders it and declares 'card-summary' itself.
+ */
+export declare function CardSummaryRoot({ network, lastDigits, label, children }: CardSummaryRootProps): import("react/jsx-runtime").JSX.Element;
+/** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */
+export declare function CardSummary({ className, children, $content }: CardSummaryProps): import("react/jsx-runtime").JSX.Element;
+/** The network's mark, and the network itself when a label takes the name. */
+export declare function CardSummaryMark({ className }: CardSummaryMarkProps): import("react/jsx-runtime").JSX.Element | null;
+/** The label, or else the network name. Renders nothing when both are blank. */
+export declare function CardSummaryName({ className }: CardSummaryNameProps): import("react/jsx-runtime").JSX.Element | null;
+/** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */
+export declare function CardSummaryMask({ className, mask, children }: CardSummaryMaskProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The last four digits, read with CardSummary's endingIn message. With no such text, outside a
+ * CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when
+ * there are no digits.
+ */
+export declare function CardSummaryDigits({ className }: CardSummaryDigitsProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=card-summary.d.ts.map

package/dist/particles/card-summary/card-summary.js

@@ -0,0 +1,221 @@
+"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 { Icon } from "../icon/icon.js";
+import { cardNetworkIcon } from "./card-network.js";
+import { createContext, useContext, useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/particles/card-summary/card-summary.tsx
+const CardSummaryContext = createContext(null);
+const CardSummaryEndingInContext = createContext(null);
+/** The card the nearest CardSummaryRoot provides. Throws outside one. */
+function useCardSummary() {
+	const ctx = useContext(CardSummaryContext);
+	if (!ctx) throw new Error("CardSummary parts must be used inside CardSummaryRoot.");
+	return ctx;
+}
+const CardSummaryContent = defineContentType({
+	id: "card-summary",
+	title: "Card Summary",
+	description: "The card's last digits as read to assistive technology.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { endingIn: {
+			type: "string",
+			title: "Card last digits",
+			format: "icu-message",
+			messageSource: "ending in {lastDigits}",
+			messageArguments: {
+				type: "object",
+				properties: { lastDigits: { type: "string" } }
+			},
+			messageExample: { lastDigits: "4242" }
+		} }
+	}
+});
+const CardSummaryDefinition = defineComponent({
+	name: "CardSummary",
+	importPath: "@vtex/faststore/components",
+	component: CardSummary,
+	content: CardSummaryContent,
+	requiresContext: "card-summary",
+	editor: {
+		label: "Card Summary",
+		category: "content"
+	},
+	schema: {},
+	guideline: "A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Its endingIn message is what CardSummaryDigits reads to screen readers. Must be inside a card-summary provider."
+});
+const CardSummaryMarkDefinition = defineComponent({
+	name: "CardSummaryMark",
+	importPath: "@vtex/faststore/components",
+	component: CardSummaryMark,
+	requiresContext: "card-summary",
+	editor: {
+		label: "Card Summary Mark",
+		category: "content"
+	},
+	schema: {},
+	guideline: "The card network's mark. When the card has a label, it also carries the network: hidden text beside the mark, or the network name as visible text for a network with no mark. Renders nothing for an unlabelled card on a network with no mark, since the name says it. On an unlabelled card the glyph is decorative and CardSummaryName announces the network, so compose both: Mark without Name leaves screen readers no network. Marks come from data, so the store lists CARD_NETWORK_ICON_NAMES under icons.include. Must be inside a card-summary provider."
+});
+const CardSummaryNameDefinition = defineComponent({
+	name: "CardSummaryName",
+	importPath: "@vtex/faststore/components",
+	component: CardSummaryName,
+	requiresContext: "card-summary",
+	editor: {
+		label: "Card Summary Name",
+		category: "content"
+	},
+	schema: {},
+	guideline: "The shopper's label for the card, or else its network name; nothing when both are blank. Read-only. On an unlabelled card it is the only part a screen reader hears the network from. Must be inside a card-summary provider."
+});
+const CardSummaryMaskDefinition = defineComponent({
+	name: "CardSummaryMask",
+	importPath: "@vtex/faststore/components",
+	component: CardSummaryMask,
+	requiresContext: "card-summary",
+	editor: {
+		label: "Card Summary Mask",
+		category: "content"
+	},
+	schema: { mask: {
+		type: "string",
+		default: "••••",
+		label: "Mask"
+	} },
+	guideline: "Decoration standing for the hidden digits: the mask text (•••• by default), or children such as an icon in its place. Keep children inline. Always hidden from assistive technology; dropping it changes nothing a screen reader hears. Renders nothing when empty or when the card has no digits. Must be inside a card-summary provider."
+});
+const CardSummaryDigitsDefinition = defineComponent({
+	name: "CardSummaryDigits",
+	importPath: "@vtex/faststore/components",
+	component: CardSummaryDigits,
+	requiresContext: "card-summary",
+	editor: {
+		label: "Card Summary Digits",
+		category: "content"
+	},
+	schema: {},
+	guideline: "The last four digits, announced to screen readers with the endingIn message of the CardSummary around it; outside one, or with that message missing, screen readers hear the bare digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider."
+});
+/**
+* Provides one card to the parts, keeping only its last four digits. No definition on purpose: a
+* schema cannot supply the card, so a matter row renders it and declares 'card-summary' itself.
+*/
+function CardSummaryRoot({ network, lastDigits, label, children }) {
+	const value = useMemo(() => {
+		const trimmedLabel = label?.trim() || null;
+		return {
+			network,
+			icon: cardNetworkIcon(network),
+			label: trimmedLabel,
+			name: trimmedLabel ?? (network.trim() ? network : null),
+			lastFour: lastDigits.replaceAll(/\D/g, "").slice(-4)
+		};
+	}, [
+		network,
+		lastDigits,
+		label
+	]);
+	return /* @__PURE__ */ jsx(CardSummaryContext.Provider, {
+		value,
+		children
+	});
+}
+/** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */
+function CardSummary({ className, children, $content }) {
+	const { icon, label } = useCardSummary();
+	const { format } = useMessageFormatter(CardSummaryContent, $content);
+	const endingIn = useMemo(() => (lastDigits) => format("endingIn", { lastDigits }), [format]);
+	return /* @__PURE__ */ jsx(CardSummaryEndingInContext, {
+		value: endingIn,
+		children: /* @__PURE__ */ jsx("span", {
+			className,
+			"data-fs-card-summary": "",
+			"data-fs-card-summary-network": icon ?? void 0,
+			...label ? { "data-fs-card-summary-labeled": "" } : {},
+			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(CardSummaryMark, {}),
+				/* @__PURE__ */ jsx(CardSummaryName, {}),
+				/* @__PURE__ */ jsx(CardSummaryMask, {}),
+				/* @__PURE__ */ jsx(CardSummaryDigits, {})
+			] })
+		})
+	});
+}
+/** The network's mark, and the network itself when a label takes the name. */
+function CardSummaryMark({ className }) {
+	const { network, icon, label } = useCardSummary();
+	if (!icon && (!label || !network.trim())) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+		className,
+		"data-fs-card-summary-mark": "",
+		children: [
+			icon ? /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				"data-fs-card-summary-icon": ""
+			}) : null,
+			label && icon ? /* @__PURE__ */ jsx("span", {
+				"data-fs-sr-only": "",
+				className: "sr-only",
+				children: network
+			}) : null,
+			label && !icon ? /* @__PURE__ */ jsx("span", {
+				"data-fs-card-summary-network-name": "",
+				children: network
+			}) : null
+		]
+	}), " "] });
+}
+/** The label, or else the network name. Renders nothing when both are blank. */
+function CardSummaryName({ className }) {
+	const { name } = useCardSummary();
+	if (!name) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className,
+		"data-fs-card-summary-name": "",
+		children: name
+	}), " "] });
+}
+/** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */
+function CardSummaryMask({ className, mask = "••••", children }) {
+	const { lastFour } = useCardSummary();
+	const content = children ?? mask;
+	if (!lastFour || !content) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className,
+		"data-fs-card-summary-mask": "",
+		"aria-hidden": "true",
+		children: content
+	}), " "] });
+}
+/**
+* The last four digits, read with CardSummary's endingIn message. With no such text, outside a
+* CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when
+* there are no digits.
+*/
+function CardSummaryDigits({ className }) {
+	const { lastFour } = useCardSummary();
+	const endingIn = useContext(CardSummaryEndingInContext);
+	if (!lastFour) return null;
+	const spoken = endingIn ? endingIn(lastFour) : "";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className,
+		"data-fs-card-summary-digits": "",
+		children: spoken ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: lastFour
+		}), /* @__PURE__ */ jsx("span", {
+			"data-fs-sr-only": "",
+			className: "sr-only",
+			children: spoken
+		})] }) : /* @__PURE__ */ jsx("span", { children: lastFour })
+	}), " "] });
+}
+//#endregion
+export { CardSummary, CardSummaryContent, CardSummaryDefinition, CardSummaryDigits, CardSummaryDigitsDefinition, CardSummaryMark, CardSummaryMarkDefinition, CardSummaryMask, CardSummaryMaskDefinition, CardSummaryName, CardSummaryNameDefinition, CardSummaryRoot, useCardSummary };
+
+//# sourceMappingURL=card-summary.js.map

package/dist/particles/card-summary/card-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-summary.js","names":[],"sources":["../../../src/particles/card-summary/card-summary.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { Icon } from '../icon/icon.js';\nimport { type CardNetworkIconName, cardNetworkIcon } from './card-network.js';\n\n/**\n * CardSummary particle (no business coupling — ADR-0001): a saved card's identity — network mark,\n * label or network name, mask, last four digits — as parts the schema arranges. A row that owns\n * card data wraps its children in CardSummaryRoot and declares `card-summary` in its own\n * providesContext; the parts read the card from there. Each part decides from the data, never from\n * which other parts are composed, so any arrangement keeps the network identifiable.\n */\n\nexport type CardSummaryValue = Readonly<{\n  /** The network's display name as given. */\n  network: string;\n  /** The base-dialect icon for the network, or `null` when unmapped. */\n  icon: CardNetworkIconName | null;\n  /** The trimmed label, or `null` when absent or blank. */\n  label: string | null;\n  /** `label ?? network`, or `null` when both are blank. */\n  name: string | null;\n  /** At most four digits; `''` when none. */\n  lastFour: string;\n}>;\n\nconst CardSummaryContext = createContext<CardSummaryValue | null>(null);\n\n/** The screen-reader text for the digits, formatted by the CardSummary wrapper from its own content. */\ntype CardSummaryEndingIn = (lastDigits: string) => string;\n\nconst CardSummaryEndingInContext = createContext<CardSummaryEndingIn | null>(null);\n\n/** The card the nearest CardSummaryRoot provides. Throws outside one. */\nexport function useCardSummary(): CardSummaryValue {\n  const ctx = useContext(CardSummaryContext);\n  if (!ctx) throw new Error('CardSummary parts must be used inside CardSummaryRoot.');\n  return ctx;\n}\n\nexport type CardSummaryRootProps = Readonly<{\n  /** The network's display name from the platform, e.g. `Visa`. Selects the mark by exact key match. */\n  network: string;\n  /** The card's last digits. Only the trailing four digit characters ever reach the parts. */\n  lastDigits: string;\n  /** The shopper's own name for the card. Shown in place of the network name when non-blank. */\n  label?: string | null;\n  children?: ReactNode;\n}>;\n\nexport type CardSummaryProps = MessageLocaleProp &\n  Readonly<{\n    className?: string;\n    /** The parts, in order. Defaults to Mark, Name, Mask, Digits. */\n    children?: ReactNode;\n    $content?: ContentValue<typeof CardSummaryContent>;\n  }>;\n\nexport type CardSummaryPartProps = {\n  className?: string;\n};\n\nexport type CardSummaryMarkProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryNameProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryDigitsProps = Readonly<CardSummaryPartProps>;\n\nexport type CardSummaryMaskProps = Readonly<\n  CardSummaryPartProps & {\n    /** The masking symbol shown before the digits. Defaults to `••••`; empty renders nothing. */\n    mask?: string;\n    /** Replaces `mask`, e.g. with an icon. Always hidden from assistive technology. */\n    children?: ReactNode;\n  }\n>;\n\nexport const CardSummaryContent = defineContentType({\n  id: 'card-summary',\n  title: 'Card Summary',\n  description: \"The card's last digits as read to assistive technology.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      endingIn: {\n        type: 'string',\n        title: 'Card last digits',\n        format: 'icu-message',\n        messageSource: 'ending in {lastDigits}',\n        messageArguments: { type: 'object', properties: { lastDigits: { type: 'string' } } },\n        messageExample: { lastDigits: '4242' },\n      },\n    },\n  },\n});\n\nexport const CardSummaryDefinition = defineComponent<CardSummaryProps>({\n  name: 'CardSummary',\n  importPath: '@vtex/faststore/components',\n  component: CardSummary,\n  content: CardSummaryContent,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary', category: 'content' },\n  schema: {},\n  guideline:\n    \"A saved card's identity: network mark, label or else network name, mask, last four digits, in that order by default. Compose CardSummaryMark / Name / Mask / Digits as children to reorder or drop a part; the reading order follows the composition. The default satisfies the rule that the mark and the digits always show; a custom composition that drops either gives that up. Its endingIn message is what CardSummaryDigits reads to screen readers. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMarkDefinition = defineComponent<CardSummaryMarkProps>({\n  name: 'CardSummaryMark',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMark,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mark', category: 'content' },\n  schema: {},\n  guideline:\n    \"The card network's mark. When the card has a label, it also carries the network: hidden text beside the mark, or the network name as visible text for a network with no mark. Renders nothing for an unlabelled card on a network with no mark, since the name says it. On an unlabelled card the glyph is decorative and CardSummaryName announces the network, so compose both: Mark without Name leaves screen readers no network. Marks come from data, so the store lists CARD_NETWORK_ICON_NAMES under icons.include. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryNameDefinition = defineComponent<CardSummaryNameProps>({\n  name: 'CardSummaryName',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryName,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Name', category: 'content' },\n  schema: {},\n  guideline:\n    \"The shopper's label for the card, or else its network name; nothing when both are blank. Read-only. On an unlabelled card it is the only part a screen reader hears the network from. Must be inside a card-summary provider.\",\n});\n\nexport const CardSummaryMaskDefinition = defineComponent<CardSummaryMaskProps>({\n  name: 'CardSummaryMask',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryMask,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Mask', category: 'content' },\n  schema: {\n    mask: { type: 'string', default: '••••', label: 'Mask' },\n  },\n  guideline:\n    'Decoration standing for the hidden digits: the mask text (•••• by default), or children such as an icon in its place. Keep children inline. Always hidden from assistive technology; dropping it changes nothing a screen reader hears. Renders nothing when empty or when the card has no digits. Must be inside a card-summary provider.',\n});\n\nexport const CardSummaryDigitsDefinition = defineComponent<CardSummaryDigitsProps>({\n  name: 'CardSummaryDigits',\n  importPath: '@vtex/faststore/components',\n  component: CardSummaryDigits,\n  requiresContext: 'card-summary',\n  editor: { label: 'Card Summary Digits', category: 'content' },\n  schema: {},\n  guideline:\n    'The last four digits, announced to screen readers with the endingIn message of the CardSummary around it; outside one, or with that message missing, screen readers hear the bare digits. Never more than four digits. Renders nothing when the card has no digits. Must be inside a card-summary provider.',\n});\n\n/**\n * Provides one card to the parts, keeping only its last four digits. No definition on purpose: a\n * schema cannot supply the card, so a matter row renders it and declares 'card-summary' itself.\n */\nexport function CardSummaryRoot({ network, lastDigits, label, children }: CardSummaryRootProps) {\n  const value = useMemo<CardSummaryValue>(() => {\n    const trimmedLabel = label?.trim() || null;\n    return {\n      network,\n      icon: cardNetworkIcon(network),\n      label: trimmedLabel,\n      name: trimmedLabel ?? (network.trim() ? network : null),\n      lastFour: lastDigits.replaceAll(/\\D/g, '').slice(-4),\n    };\n  }, [network, lastDigits, label]);\n\n  return <CardSummaryContext.Provider value={value}>{children}</CardSummaryContext.Provider>;\n}\n\n/** The wrapper: the composed parts, or Mark, Name, Mask and Digits by default. */\nexport function CardSummary({ className, children, $content }: CardSummaryProps) {\n  const { icon, label } = useCardSummary();\n  const { format } = useMessageFormatter(CardSummaryContent, $content);\n  // Formatted on demand, so a composition without Digits never reports the message missing.\n  const endingIn = useMemo<CardSummaryEndingIn>(() => (lastDigits) => format('endingIn', { lastDigits }), [format]);\n  return (\n    <CardSummaryEndingInContext value={endingIn}>\n      <span\n        className={className}\n        data-fs-card-summary=\"\"\n        data-fs-card-summary-network={icon ?? undefined}\n        {...(label ? { 'data-fs-card-summary-labeled': '' } : {})}\n      >\n        {children ?? (\n          <>\n            <CardSummaryMark />\n            <CardSummaryName />\n            <CardSummaryMask />\n            <CardSummaryDigits />\n          </>\n        )}\n      </span>\n    </CardSummaryEndingInContext>\n  );\n}\n\n// Each part ends with a space: accessible names concatenate inline siblings with no separator, so\n// without it a screen reader hears \"MastercardCompany card\". A flex container drops it visually.\n\n/** The network's mark, and the network itself when a label takes the name. */\nexport function CardSummaryMark({ className }: CardSummaryMarkProps) {\n  const { network, icon, label } = useCardSummary();\n  if (!icon && (!label || !network.trim())) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mark=\"\">\n        {icon ? <Icon name={icon} data-fs-card-summary-icon=\"\" /> : null}\n        {label && icon ? (\n          <span data-fs-sr-only=\"\" className=\"sr-only\">\n            {network}\n          </span>\n        ) : null}\n        {label && !icon ? <span data-fs-card-summary-network-name=\"\">{network}</span> : null}\n      </span>{' '}\n    </>\n  );\n}\n\n/** The label, or else the network name. Renders nothing when both are blank. */\nexport function CardSummaryName({ className }: CardSummaryNameProps) {\n  const { name } = useCardSummary();\n  if (!name) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-name=\"\">\n        {name}\n      </span>{' '}\n    </>\n  );\n}\n\n/** Decoration for the hidden digits. Renders nothing when empty or when there are no digits. */\nexport function CardSummaryMask({ className, mask = '••••', children }: CardSummaryMaskProps) {\n  const { lastFour } = useCardSummary();\n  const content = children ?? mask;\n  if (!lastFour || !content) return null;\n  return (\n    <>\n      <span className={className} data-fs-card-summary-mask=\"\" aria-hidden=\"true\">\n        {content}\n      </span>{' '}\n    </>\n  );\n}\n\n/**\n * The last four digits, read with CardSummary's endingIn message. With no such text, outside a\n * CardSummary or with the message missing, the digits themselves stay audible. Renders nothing when\n * there are no digits.\n */\nexport function CardSummaryDigits({ className }: CardSummaryDigitsProps) {\n  const { lastFour } = useCardSummary();\n  const endingIn = useContext(CardSummaryEndingInContext);\n  if (!lastFour) return null;\n  const spoken = endingIn ? endingIn(lastFour) : '';\n  return (\n    <>\n      <span className={className} data-fs-card-summary-digits=\"\">\n        {spoken ? (\n          <>\n            <span aria-hidden=\"true\">{lastFour}</span>\n            <span data-fs-sr-only=\"\" className=\"sr-only\">\n              {spoken}\n            </span>\n          </>\n        ) : (\n          <span>{lastFour}</span>\n        )}\n      </span>{' '}\n    </>\n  );\n}\n"],"mappings":"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"}