@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/free-shipping-progress/free-shipping-progress.js

@@ -1,19 +1,83 @@
 "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 { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { isFiniteAmount } from "../cart/cart.js";
 import { Meter } from "../../particles/meter/meter.js";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/matter/free-shipping-progress/free-shipping-progress.tsx
+const FreeShippingProgressMessageContent = defineContentType({
+	id: "free-shipping-progress-message",
+	title: "Free Shipping Progress Message",
+	description: "The below-threshold and earned free-shipping messages.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Below-threshold label",
+				description: "Shown while the cart is below the threshold; value is the formatted amount still missing.",
+				format: "icu-message",
+				messageSource: "{value} away from free shipping",
+				messageArguments: {
+					type: "object",
+					properties: { value: { type: "string" } }
+				},
+				messageExample: { value: "$25.00" }
+			},
+			qualifiedLabel: {
+				type: "string",
+				title: "Qualified label",
+				format: "icu-message",
+				messageSource: "You got free shipping!"
+			}
+		}
+	}
+});
+const FreeShippingProgressBarContent = defineContentType({
+	id: "free-shipping-progress-bar",
+	title: "Free Shipping Progress Bar",
+	description: "The value text a screen reader announces for the progress bar.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			valueText: {
+				type: "string",
+				title: "Below-threshold value text",
+				description: "Announced while the cart is below the threshold; value is the formatted amount still missing.",
+				format: "icu-message",
+				messageSource: "{value} left for free shipping",
+				messageArguments: {
+					type: "object",
+					properties: { value: { type: "string" } }
+				},
+				messageExample: { value: "$25.00" }
+			},
+			qualifiedValueText: {
+				type: "string",
+				title: "Qualified value text",
+				format: "icu-message",
+				messageSource: "Free shipping earned"
+			}
+		}
+	}
+});
 const fragment = `
   fragment FreeShippingProgressData on Query {
     cart {
       id
-      total {
-        amount
-        currencyCode
+      totalizers {
+        id
+        value {
+          amount
+          currencyCode
+        }
       }
       freeShippingProgress {
         threshold {
@@ -45,6 +109,62 @@ function formatCurrency(value, locale, currency) {
 function clamp01(value) {
 	return Math.min(Math.max(value, 0), 1);
 }
+function previewCart({ threshold, remaining, qualified, itemsTotal }, currency) {
+	if (qualified === void 0 && threshold === void 0 && remaining === void 0 && itemsTotal === void 0) return null;
+	return {
+		id: "preview",
+		totalizers: itemsTotal === void 0 ? [] : [{
+			id: "Items",
+			value: {
+				amount: itemsTotal,
+				currencyCode: currency
+			}
+		}],
+		freeShippingProgress: {
+			threshold: threshold == null ? null : {
+				amount: threshold,
+				currencyCode: currency
+			},
+			remaining: {
+				amount: remaining ?? threshold ?? 0,
+				currencyCode: currency
+			},
+			qualified: qualified ?? false
+		}
+	};
+}
+function itemsSubtotal(cart) {
+	const itemsAmount = cart.totalizers?.find((totalizer) => totalizer.id === "Items")?.value.amount;
+	return isFiniteAmount(itemsAmount) ? Number(itemsAmount) : null;
+}
+function usableThreshold(threshold) {
+	if (threshold == null) return null;
+	const parsed = Number(threshold.amount);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+function fillRatio(isQualified, thresholdAmount, covered) {
+	if (isQualified) return 1;
+	if (thresholdAmount === null) return 0;
+	return clamp01(covered / thresholdAmount);
+}
+function computeProgress(fsp, items, thresholdAmount) {
+	if (items === null) {
+		const isQualified = fsp.qualified;
+		const liveRemaining = !isQualified && isFiniteAmount(fsp.remaining.amount) ? Math.max(Number(fsp.remaining.amount), 0) : 0;
+		return {
+			isQualified,
+			fill: fillRatio(isQualified, thresholdAmount, (thresholdAmount ?? 0) - liveRemaining),
+			liveRemaining
+		};
+	}
+	const isQualified = fsp.qualified || thresholdAmount !== null && items >= thresholdAmount;
+	const liveRemaining = isQualified || thresholdAmount === null ? 0 : Math.max(thresholdAmount - items, 0);
+	return {
+		isQualified,
+		fill: fillRatio(isQualified, thresholdAmount, items),
+		liveRemaining
+	};
+}
 const FreeShippingProgressRootDefinition = defineComponent({
 	name: "FreeShippingProgressRoot",
 	importPath: "@vtex/faststore/components",
@@ -62,69 +182,43 @@ const FreeShippingProgressBarDefinition = defineComponent({
 	name: "FreeShippingProgressBar",
 	importPath: "@vtex/faststore/components",
 	component: FreeShippingProgressBar,
+	content: FreeShippingProgressBarContent,
 	editor: {
 		label: "Free Shipping Progress Bar",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Meter bar that fills toward the free-shipping goal, full when earned. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
+	guideline: "Meter bar that fills toward the free-shipping goal, full when earned; screen readers announce the $content fields valueText ({value} is the formatted remaining amount) and qualifiedValueText. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
 });
 const FreeShippingProgressMessageDefinition = defineComponent({
 	name: "FreeShippingProgressMessage",
 	importPath: "@vtex/faststore/components",
 	component: FreeShippingProgressMessage,
+	content: FreeShippingProgressMessageContent,
 	editor: {
 		label: "Free Shipping Progress Message",
 		category: "commerce"
 	},
-	schema: {
-		label: {
-			type: "string",
-			default: "faltam {value} para frete grátis",
-			label: "Below-threshold Label"
-		},
-		qualifiedLabel: {
-			type: "string",
-			default: "você ganhou frete grátis!",
-			label: "Qualified Label"
-		}
-	},
-	guideline: "Below-threshold vs earned copy, front-formatted from the active storefront context. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
+	schema: {},
+	guideline: "Below-threshold vs earned copy from the $content fields label ({value} is the formatted remaining amount) and qualifiedLabel; children replace both. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md."
 });
-function FreeShippingProgressRoot({ threshold, remaining, qualified, cartTotal, $data: $dataProp, className, children, ...props }) {
+function FreeShippingProgressRoot({ threshold, remaining, qualified, itemsTotal, $data: $dataProp, className, children, ...props }) {
 	const { currency } = useStorefrontContext();
-	const cart = useDataOverride($dataProp) ?? (qualified !== void 0 || threshold !== void 0 || remaining !== void 0 || cartTotal !== void 0 ? {
-		id: "preview",
-		total: {
-			amount: cartTotal ?? 0,
-			currencyCode: currency
-		},
-		freeShippingProgress: {
-			threshold: threshold != null ? {
-				amount: threshold,
-				currencyCode: currency
-			} : null,
-			remaining: {
-				amount: remaining ?? 0,
-				currencyCode: currency
-			},
-			qualified: qualified ?? false
-		}
-	} : null);
+	const cart = useDataOverride($dataProp) ?? previewCart({
+		threshold,
+		remaining,
+		qualified,
+		itemsTotal
+	}, currency);
 	const fsp = cart?.freeShippingProgress;
 	if (!cart || fsp == null) return null;
-	const parsedThreshold = fsp.threshold != null ? Number(fsp.threshold.amount) : null;
-	const cartTotalAmount = Number(cart.total?.amount ?? 0);
-	const thresholdAmount = parsedThreshold != null && Number.isFinite(parsedThreshold) && parsedThreshold > 0 ? parsedThreshold : null;
-	const isQualified = fsp.qualified || thresholdAmount != null && cartTotalAmount >= thresholdAmount;
-	const liveRemaining = isQualified || thresholdAmount == null ? 0 : Math.max(thresholdAmount - cartTotalAmount, 0);
-	const value = {
-		isQualified,
-		fill: isQualified ? 1 : thresholdAmount != null ? clamp01(cartTotalAmount / thresholdAmount) : 0,
-		liveRemaining
-	};
+	const { isQualified, fill, liveRemaining } = computeProgress(fsp, itemsSubtotal(cart), usableThreshold(fsp.threshold));
 	return /* @__PURE__ */ jsx(FreeShippingProgressContext, {
-		value,
+		value: {
+			isQualified,
+			fill,
+			liveRemaining
+		},
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
 			className,
@@ -133,11 +227,13 @@ function FreeShippingProgressRoot({ threshold, remaining, qualified, cartTotal,
 		})
 	});
 }
-function FreeShippingProgressBar({ className, ...props }) {
+function FreeShippingProgressBar({ $content, $locale, className, ...props }) {
 	const { fill, isQualified, liveRemaining } = useFreeShippingProgress();
 	const { locale, currency } = useStorefrontContext();
-	const ariaValueText = isQualified ? "frete grátis conquistado" : `${formatCurrency(liveRemaining, locale, currency)} restantes para frete grátis`;
+	const { format } = useMessageFormatter(FreeShippingProgressBarContent, $content);
+	const ariaValueText = isQualified ? format("qualifiedValueText") : format("valueText", { value: formatCurrency(liveRemaining, locale, currency) });
 	return /* @__PURE__ */ jsx(Meter.Root, {
+		"aria-label": "Progresso para frete grátis",
 		...props,
 		value: Math.round(fill * 100),
 		min: 0,
@@ -148,15 +244,19 @@ function FreeShippingProgressBar({ className, ...props }) {
 		children: /* @__PURE__ */ jsx(Meter.Track, { children: /* @__PURE__ */ jsx(Meter.Indicator, {}) })
 	});
 }
-function FreeShippingProgressMessage({ label = "faltam {value} para frete grátis", qualifiedLabel = "você ganhou frete grátis!", className, children, ...props }) {
+function FreeShippingProgressMessage({ $content, $locale, className, children, ...props }) {
 	const { isQualified, liveRemaining } = useFreeShippingProgress();
 	const { locale, currency } = useStorefrontContext();
-	const text = isQualified ? qualifiedLabel : label.replace("{value}", formatCurrency(liveRemaining, locale, currency));
+	const { format } = useMessageFormatter(FreeShippingProgressMessageContent, $content);
+	function message() {
+		if (isQualified) return format("qualifiedLabel");
+		return format("label", { value: formatCurrency(liveRemaining, locale, currency) });
+	}
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className,
 		"data-fs-free-shipping-progress-message": "",
-		children: children ?? text
+		children: children ?? message()
 	});
 }
 const FreeShippingProgress = {
@@ -165,6 +265,6 @@ const FreeShippingProgress = {
 	Message: FreeShippingProgressMessage
 };
 //#endregion
-export { FreeShippingProgress, FreeShippingProgressBar, FreeShippingProgressBarDefinition, FreeShippingProgressMessage, FreeShippingProgressMessageDefinition, FreeShippingProgressRoot, FreeShippingProgressRootDefinition };
+export { FreeShippingProgress, FreeShippingProgressBar, FreeShippingProgressBarContent, FreeShippingProgressBarDefinition, FreeShippingProgressMessage, FreeShippingProgressMessageContent, FreeShippingProgressMessageDefinition, FreeShippingProgressRoot, FreeShippingProgressRootDefinition };
 
 //# sourceMappingURL=free-shipping-progress.js.map

package/dist/matter/free-shipping-progress/free-shipping-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"free-shipping-progress.js","names":[],"sources":["../../../src/matter/free-shipping-progress/free-shipping-progress.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext } from 'react';\nimport { Meter } from '../../particles/meter/meter.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = { amount: number | string; currencyCode: string };\n\ntype FreeShippingProgressData = {\n  cart?: {\n    id: string;\n    total?: MoneyValue | null;\n    freeShippingProgress?: {\n      threshold: MoneyValue | null;\n      remaining: MoneyValue;\n      qualified: boolean;\n    } | null;\n  } | null;\n};\n\ntype FreeShippingProgressContextValue = {\n  isQualified: boolean;\n  fill: number;\n  liveRemaining: number;\n};\n\nexport type FreeShippingProgressRootProps = ComponentPropsWithRef<'div'> & {\n  threshold?: number;\n  remaining?: number;\n  qualified?: boolean;\n  cartTotal?: number;\n  $data?: FreeShippingProgressData['cart'] | null;\n};\n\nexport type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'>;\nexport type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  qualifiedLabel?: string;\n};\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — narrow cart slice (total + freeShippingProgress)\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment FreeShippingProgressData on Query {\n    cart {\n      id\n      total {\n        amount\n        currencyCode\n      }\n      freeShippingProgress {\n        threshold {\n          amount\n          currencyCode\n        }\n        remaining {\n          amount\n          currencyCode\n        }\n        qualified\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst FSP_CONTEXT_UNSET = Symbol('FreeShippingProgressContextUnset');\n\nconst FreeShippingProgressContext = createContext<FreeShippingProgressContextValue | typeof FSP_CONTEXT_UNSET>(\n  FSP_CONTEXT_UNSET,\n);\n\nfunction useFreeShippingProgress(): FreeShippingProgressContextValue {\n  const ctx = useContext(FreeShippingProgressContext);\n  if (ctx === FSP_CONTEXT_UNSET) {\n    throw new Error('useFreeShippingProgress() must be used inside a <FreeShippingProgressRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatCurrency(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(Math.max(value, 0), 1);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const FreeShippingProgressRootDefinition = defineComponent<FreeShippingProgressRootProps>({\n  name: 'FreeShippingProgressRoot',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Free Shipping Progress', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Free-shipping progress bar for the top of a cart/mini-cart drawer: shows how much more to spend for free shipping and flips to an earned state when met. Renders nothing until a destination and an eligible promotion exist (self-hides on null). See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressBarDefinition = defineComponent<FreeShippingProgressBarProps>({\n  name: 'FreeShippingProgressBar',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressBar,\n  editor: { label: 'Free Shipping Progress Bar', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Meter bar that fills toward the free-shipping goal, full when earned. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressMessageDefinition = defineComponent<FreeShippingProgressMessageProps>({\n  name: 'FreeShippingProgressMessage',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressMessage,\n  editor: { label: 'Free Shipping Progress Message', category: 'commerce' },\n  schema: {\n    label: { type: 'string', default: 'faltam {value} para frete grátis', label: 'Below-threshold Label' },\n    qualifiedLabel: { type: 'string', default: 'você ganhou frete grátis!', label: 'Qualified Label' },\n  },\n  guideline:\n    'Below-threshold vs earned copy, front-formatted from the active storefront context. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function FreeShippingProgressRoot({\n  threshold,\n  remaining,\n  qualified,\n  cartTotal,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressRootProps) {\n  // Only the synthesized preview cart below needs it; the leaves read the context where they format.\n  const { currency } = useStorefrontContext();\n  const $data = useDataOverride($dataProp);\n\n  // Story / presentational overrides synthesize the field when no live cart is present.\n  const cart =\n    $data ??\n    (qualified !== undefined || threshold !== undefined || remaining !== undefined || cartTotal !== undefined\n      ? {\n          id: 'preview',\n          total: { amount: cartTotal ?? 0, currencyCode: currency },\n          freeShippingProgress: {\n            threshold: threshold != null ? { amount: threshold, currencyCode: currency } : null,\n            remaining: { amount: remaining ?? 0, currencyCode: currency },\n            qualified: qualified ?? false,\n          },\n        }\n      : null);\n\n  const fsp = cart?.freeShippingProgress;\n  if (!cart || fsp == null) return null;\n\n  const parsedThreshold = fsp.threshold != null ? Number(fsp.threshold.amount) : null;\n  const cartTotalAmount = Number(cart.total?.amount ?? 0);\n  // Usable threshold: present, finite, positive. Null/NaN/zero → no fill, no remaining.\n  const thresholdAmount =\n    parsedThreshold != null && Number.isFinite(parsedThreshold) && parsedThreshold > 0 ? parsedThreshold : null;\n\n  const isQualified = fsp.qualified || (thresholdAmount != null && cartTotalAmount >= thresholdAmount);\n  const liveRemaining = isQualified || thresholdAmount == null ? 0 : Math.max(thresholdAmount - cartTotalAmount, 0);\n  const fill = isQualified ? 1 : thresholdAmount != null ? clamp01(cartTotalAmount / thresholdAmount) : 0;\n\n  const value: FreeShippingProgressContextValue = { isQualified, fill, liveRemaining };\n\n  return (\n    <FreeShippingProgressContext value={value}>\n      <div {...props} className={className} data-fs-free-shipping-progress-root=\"\">\n        {children}\n      </div>\n    </FreeShippingProgressContext>\n  );\n}\n\nexport function FreeShippingProgressBar({ className, ...props }: FreeShippingProgressBarProps) {\n  const { fill, isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const ariaValueText = isQualified\n    ? 'frete grátis conquistado'\n    : `${formatCurrency(liveRemaining, locale, currency)} restantes para frete grátis`;\n\n  return (\n    <Meter.Root\n      {...props}\n      value={Math.round(fill * 100)}\n      min={0}\n      max={100}\n      getAriaValueText={() => ariaValueText}\n      className={className}\n      data-fs-free-shipping-progress-bar=\"\"\n    >\n      <Meter.Track>\n        <Meter.Indicator />\n      </Meter.Track>\n    </Meter.Root>\n  );\n}\n\nexport function FreeShippingProgressMessage({\n  label = 'faltam {value} para frete grátis',\n  qualifiedLabel = 'você ganhou frete grátis!',\n  className,\n  children,\n  ...props\n}: FreeShippingProgressMessageProps) {\n  const { isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const text = isQualified ? qualifiedLabel : label.replace('{value}', formatCurrency(liveRemaining, locale, currency));\n\n  return (\n    <div {...props} className={className} data-fs-free-shipping-progress-message=\"\">\n      {children ?? text}\n    </div>\n  );\n}\n\nexport const FreeShippingProgress = {\n  Root: FreeShippingProgressRoot,\n  Bar: FreeShippingProgressBar,\n  Message: FreeShippingProgressMessage,\n};\n"],"mappings":"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"}
+{"version":3,"file":"free-shipping-progress.js","names":[],"sources":["../../../src/matter/free-shipping-progress/free-shipping-progress.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, createContext, useContext } from 'react';\nimport { Meter } from '../../particles/meter/meter.js';\nimport { useStorefrontContext } from '../../sdk/context/storefront-context.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { isFiniteAmount } from '../cart/cart.js';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = { amount: number | string; currencyCode: string };\n\ntype FreeShippingProgressData = {\n  cart?: {\n    id: string;\n    totalizers?: { id: string; value: MoneyValue }[] | null;\n    freeShippingProgress?: {\n      threshold: MoneyValue | null;\n      remaining: MoneyValue;\n      qualified: boolean;\n    } | null;\n  } | null;\n};\n\ntype FreeShippingProgressContextValue = {\n  isQualified: boolean;\n  fill: number;\n  liveRemaining: number;\n};\n\nexport type FreeShippingProgressRootProps = ComponentPropsWithRef<'div'> & {\n  threshold?: number;\n  remaining?: number;\n  qualified?: boolean;\n  itemsTotal?: number;\n  $data?: FreeShippingProgressData['cart'] | null;\n};\n\nexport const FreeShippingProgressMessageContent = defineContentType({\n  id: 'free-shipping-progress-message',\n  title: 'Free Shipping Progress Message',\n  description: 'The below-threshold and earned free-shipping messages.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: {\n        type: 'string',\n        title: 'Below-threshold label',\n        description: 'Shown while the cart is below the threshold; value is the formatted amount still missing.',\n        format: 'icu-message',\n        messageSource: '{value} away from free shipping',\n        messageArguments: { type: 'object', properties: { value: { type: 'string' } } },\n        messageExample: { value: '$25.00' },\n      },\n      qualifiedLabel: {\n        type: 'string',\n        title: 'Qualified label',\n        format: 'icu-message',\n        messageSource: 'You got free shipping!',\n      },\n    },\n  },\n});\n\nexport const FreeShippingProgressBarContent = defineContentType({\n  id: 'free-shipping-progress-bar',\n  title: 'Free Shipping Progress Bar',\n  description: 'The value text a screen reader announces for the progress bar.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      valueText: {\n        type: 'string',\n        title: 'Below-threshold value text',\n        description: 'Announced while the cart is below the threshold; value is the formatted amount still missing.',\n        format: 'icu-message',\n        messageSource: '{value} left for free shipping',\n        messageArguments: { type: 'object', properties: { value: { type: 'string' } } },\n        messageExample: { value: '$25.00' },\n      },\n      qualifiedValueText: {\n        type: 'string',\n        title: 'Qualified value text',\n        format: 'icu-message',\n        messageSource: 'Free shipping earned',\n      },\n    },\n  },\n});\n\nexport type FreeShippingProgressBarProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof FreeShippingProgressBarContent>;\n  };\nexport type FreeShippingProgressMessageProps = ComponentPropsWithRef<'div'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof FreeShippingProgressMessageContent>;\n  };\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — narrow cart slice (Items totalizer + freeShippingProgress)\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment FreeShippingProgressData on Query {\n    cart {\n      id\n      totalizers {\n        id\n        value {\n          amount\n          currencyCode\n        }\n      }\n      freeShippingProgress {\n        threshold {\n          amount\n          currencyCode\n        }\n        remaining {\n          amount\n          currencyCode\n        }\n        qualified\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst FSP_CONTEXT_UNSET = Symbol('FreeShippingProgressContextUnset');\n\nconst FreeShippingProgressContext = createContext<FreeShippingProgressContextValue | typeof FSP_CONTEXT_UNSET>(\n  FSP_CONTEXT_UNSET,\n);\n\nfunction useFreeShippingProgress(): FreeShippingProgressContextValue {\n  const ctx = useContext(FreeShippingProgressContext);\n  if (ctx === FSP_CONTEXT_UNSET) {\n    throw new Error('useFreeShippingProgress() must be used inside a <FreeShippingProgressRoot> subtree.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatCurrency(value: number, locale: string, currency: string): string {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);\n}\n\nfunction clamp01(value: number): number {\n  return Math.min(Math.max(value, 0), 1);\n}\n\ntype FreeShippingProgressCart = NonNullable<FreeShippingProgressData['cart']>;\ntype FreeShippingProgressState = NonNullable<FreeShippingProgressCart['freeShippingProgress']>;\n\nfunction previewCart(\n  {\n    threshold,\n    remaining,\n    qualified,\n    itemsTotal,\n  }: Pick<FreeShippingProgressRootProps, 'threshold' | 'remaining' | 'qualified' | 'itemsTotal'>,\n  currency: string,\n): FreeShippingProgressCart | null {\n  if (qualified === undefined && threshold === undefined && remaining === undefined && itemsTotal === undefined) {\n    return null;\n  }\n  return {\n    id: 'preview',\n    totalizers:\n      itemsTotal === undefined ? [] : [{ id: 'Items', value: { amount: itemsTotal, currencyCode: currency } }],\n    freeShippingProgress: {\n      threshold: threshold == null ? null : { amount: threshold, currencyCode: currency },\n      remaining: { amount: remaining ?? threshold ?? 0, currencyCode: currency },\n      qualified: qualified ?? false,\n    },\n  };\n}\n\n// The server measures the Items totalizer, never the grand total (shipping and discounts do not count).\nfunction itemsSubtotal(cart: FreeShippingProgressCart): number | null {\n  const itemsAmount = cart.totalizers?.find((totalizer) => totalizer.id === 'Items')?.value.amount;\n  return isFiniteAmount(itemsAmount) ? Number(itemsAmount) : null;\n}\n\n// Usable threshold: present, finite, positive. Null/NaN/zero → no fill, no remaining.\nfunction usableThreshold(threshold: MoneyValue | null): number | null {\n  if (threshold == null) return null;\n  const parsed = Number(threshold.amount);\n  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;\n}\n\nfunction fillRatio(isQualified: boolean, thresholdAmount: number | null, covered: number): number {\n  if (isQualified) return 1;\n  if (thresholdAmount === null) return 0;\n  return clamp01(covered / thresholdAmount);\n}\n\nfunction computeProgress(\n  fsp: FreeShippingProgressState,\n  items: number | null,\n  thresholdAmount: number | null,\n): FreeShippingProgressContextValue {\n  if (items === null) {\n    // No usable Items amount: show the server's own answer rather than guess.\n    const isQualified = fsp.qualified;\n    const liveRemaining =\n      !isQualified && isFiniteAmount(fsp.remaining.amount) ? Math.max(Number(fsp.remaining.amount), 0) : 0;\n    const fill = fillRatio(isQualified, thresholdAmount, (thresholdAmount ?? 0) - liveRemaining);\n    return { isQualified, fill, liveRemaining };\n  }\n\n  const isQualified = fsp.qualified || (thresholdAmount !== null && items >= thresholdAmount);\n  const liveRemaining = isQualified || thresholdAmount === null ? 0 : Math.max(thresholdAmount - items, 0);\n  return { isQualified, fill: fillRatio(isQualified, thresholdAmount, items), liveRemaining };\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const FreeShippingProgressRootDefinition = defineComponent<FreeShippingProgressRootProps>({\n  name: 'FreeShippingProgressRoot',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  editor: { label: 'Free Shipping Progress', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Free-shipping progress bar for the top of a cart/mini-cart drawer: shows how much more to spend for free shipping and flips to an earned state when met. Renders nothing until a destination and an eligible promotion exist (self-hides on null). See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressBarDefinition = defineComponent<FreeShippingProgressBarProps>({\n  name: 'FreeShippingProgressBar',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressBar,\n  content: FreeShippingProgressBarContent,\n  editor: { label: 'Free Shipping Progress Bar', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Meter bar that fills toward the free-shipping goal, full when earned; screen readers announce the $content fields valueText ({value} is the formatted remaining amount) and qualifiedValueText. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\nexport const FreeShippingProgressMessageDefinition = defineComponent<FreeShippingProgressMessageProps>({\n  name: 'FreeShippingProgressMessage',\n  importPath: '@vtex/faststore/components',\n  component: FreeShippingProgressMessage,\n  content: FreeShippingProgressMessageContent,\n  editor: { label: 'Free Shipping Progress Message', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Below-threshold vs earned copy from the $content fields label ({value} is the formatted remaining amount) and qualifiedLabel; children replace both. Must be inside FreeShippingProgressRoot. See free-shipping-progress.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function FreeShippingProgressRoot({\n  threshold,\n  remaining,\n  qualified,\n  itemsTotal,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressRootProps) {\n  // Only the synthesized preview cart below needs it; the leaves read the context where they format.\n  const { currency } = useStorefrontContext();\n  const $data = useDataOverride($dataProp);\n\n  // Story / presentational overrides synthesize the field when no live cart is present.\n  const cart = $data ?? previewCart({ threshold, remaining, qualified, itemsTotal }, currency);\n\n  const fsp = cart?.freeShippingProgress;\n  if (!cart || fsp == null) return null;\n\n  const { isQualified, fill, liveRemaining } = computeProgress(\n    fsp,\n    itemsSubtotal(cart),\n    usableThreshold(fsp.threshold),\n  );\n\n  const value: FreeShippingProgressContextValue = { isQualified, fill, liveRemaining };\n\n  return (\n    <FreeShippingProgressContext value={value}>\n      <div {...props} className={className} data-fs-free-shipping-progress-root=\"\">\n        {children}\n      </div>\n    </FreeShippingProgressContext>\n  );\n}\n\nexport function FreeShippingProgressBar({ $content, $locale, className, ...props }: FreeShippingProgressBarProps) {\n  const { fill, isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const { format } = useMessageFormatter(FreeShippingProgressBarContent, $content);\n  const ariaValueText = isQualified\n    ? format('qualifiedValueText')\n    : format('valueText', { value: formatCurrency(liveRemaining, locale, currency) });\n\n  return (\n    <Meter.Root\n      aria-label=\"Progresso para frete grátis\"\n      {...props}\n      value={Math.round(fill * 100)}\n      min={0}\n      max={100}\n      getAriaValueText={() => ariaValueText}\n      className={className}\n      data-fs-free-shipping-progress-bar=\"\"\n    >\n      <Meter.Track>\n        <Meter.Indicator />\n      </Meter.Track>\n    </Meter.Root>\n  );\n}\n\nexport function FreeShippingProgressMessage({\n  $content,\n  $locale,\n  className,\n  children,\n  ...props\n}: FreeShippingProgressMessageProps) {\n  const { isQualified, liveRemaining } = useFreeShippingProgress();\n  const { locale, currency } = useStorefrontContext();\n  const { format } = useMessageFormatter(FreeShippingProgressMessageContent, $content);\n\n  function message(): string {\n    if (isQualified) return format('qualifiedLabel');\n    return format('label', { value: formatCurrency(liveRemaining, locale, currency) });\n  }\n\n  return (\n    <div {...props} className={className} data-fs-free-shipping-progress-message=\"\">\n      {children ?? message()}\n    </div>\n  );\n}\n\nexport const FreeShippingProgress = {\n  Root: FreeShippingProgressRoot,\n  Bar: FreeShippingProgressBar,\n  Message: FreeShippingProgressMessage,\n};\n"],"mappings":";;;;;;;;;;;;AA0CA,MAAa,qCAAqC,kBAAkB;CAClE,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IACL,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;IACf,kBAAkB;KAAE,MAAM;KAAU,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE;IAAE;IAC9E,gBAAgB,EAAE,OAAO,SAAS;GACpC;GACA,gBAAgB;IACd,MAAM;IACN,OAAO;IACP,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;AAED,MAAa,iCAAiC,kBAAkB;CAC9D,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,WAAW;IACT,MAAM;IACN,OAAO;IACP,aAAa;IACb,QAAQ;IACR,eAAe;IACf,kBAAkB;KAAE,MAAM;KAAU,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,EAAE;IAAE;IAC9E,gBAAgB,EAAE,OAAO,SAAS;GACpC;GACA,oBAAoB;IAClB,MAAM;IACN,OAAO;IACP,QAAQ;IACR,eAAe;GACjB;EACF;CACF;AACF,CAAC;AAeD,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;AA8B/B,MAAM,oBAAoB,OAAO,kCAAkC;AAEnE,MAAM,8BAA8B,cAClC,iBACF;AAEA,SAAS,0BAA4D;CACnE,MAAM,MAAM,WAAW,2BAA2B;CAClD,IAAI,QAAQ,mBACV,MAAM,IAAI,MAAM,qFAAqF;CAEvG,OAAO;AACT;AAMA,SAAS,eAAe,OAAe,QAAgB,UAA0B;CAC/E,OAAO,IAAI,KAAK,aAAa,QAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAO,KAAK;AACpF;AAEA,SAAS,QAAQ,OAAuB;CACtC,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC;AACvC;AAKA,SAAS,YACP,EACE,WACA,WACA,WACA,cAEF,UACiC;CACjC,IAAI,cAAc,KAAA,KAAa,cAAc,KAAA,KAAa,cAAc,KAAA,KAAa,eAAe,KAAA,GAClG,OAAO;CAET,OAAO;EACL,IAAI;EACJ,YACE,eAAe,KAAA,IAAY,CAAC,IAAI,CAAC;GAAE,IAAI;GAAS,OAAO;IAAE,QAAQ;IAAY,cAAc;GAAS;EAAE,CAAC;EACzG,sBAAsB;GACpB,WAAW,aAAa,OAAO,OAAO;IAAE,QAAQ;IAAW,cAAc;GAAS;GAClF,WAAW;IAAE,QAAQ,aAAa,aAAa;IAAG,cAAc;GAAS;GACzE,WAAW,aAAa;EAC1B;CACF;AACF;AAGA,SAAS,cAAc,MAA+C;CACpE,MAAM,cAAc,KAAK,YAAY,MAAM,cAAc,UAAU,OAAO,OAAO,CAAC,EAAE,MAAM;CAC1F,OAAO,eAAe,WAAW,IAAI,OAAO,WAAW,IAAI;AAC7D;AAGA,SAAS,gBAAgB,WAA6C;CACpE,IAAI,aAAa,MAAM,OAAO;CAC9B,MAAM,SAAS,OAAO,UAAU,MAAM;CACtC,OAAO,OAAO,SAAS,MAAM,KAAK,SAAS,IAAI,SAAS;AAC1D;AAEA,SAAS,UAAU,aAAsB,iBAAgC,SAAyB;CAChG,IAAI,aAAa,OAAO;CACxB,IAAI,oBAAoB,MAAM,OAAO;CACrC,OAAO,QAAQ,UAAU,eAAe;AAC1C;AAEA,SAAS,gBACP,KACA,OACA,iBACkC;CAClC,IAAI,UAAU,MAAM;EAElB,MAAM,cAAc,IAAI;EACxB,MAAM,gBACJ,CAAC,eAAe,eAAe,IAAI,UAAU,MAAM,IAAI,KAAK,IAAI,OAAO,IAAI,UAAU,MAAM,GAAG,CAAC,IAAI;EAErG,OAAO;GAAE;GAAa,MADT,UAAU,aAAa,kBAAkB,mBAAmB,KAAK,aACrD;GAAG;EAAc;CAC5C;CAEA,MAAM,cAAc,IAAI,aAAc,oBAAoB,QAAQ,SAAS;CAC3E,MAAM,gBAAgB,eAAe,oBAAoB,OAAO,IAAI,KAAK,IAAI,kBAAkB,OAAO,CAAC;CACvG,OAAO;EAAE;EAAa,MAAM,UAAU,aAAa,iBAAiB,KAAK;EAAG;CAAc;AAC5F;AAMA,MAAa,qCAAqC,gBAA+C;CAC/F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,QAAQ;EAAE,OAAO;EAA0B,UAAU;CAAW;CAChE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAA8B,UAAU;CAAW;CACpE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,wCAAwC,gBAAkD;CACrG,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAkC,UAAU;CAAW;CACxE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAMD,SAAgB,yBAAyB,EACvC,WACA,WACA,WACA,YACA,OAAO,WACP,WACA,UACA,GAAG,SAC6B;CAEhC,MAAM,EAAE,aAAa,qBAAqB;CAI1C,MAAM,OAHQ,gBAAgB,SAGb,KAAK,YAAY;EAAE;EAAW;EAAW;EAAW;CAAW,GAAG,QAAQ;CAE3F,MAAM,MAAM,MAAM;CAClB,IAAI,CAAC,QAAQ,OAAO,MAAM,OAAO;CAEjC,MAAM,EAAE,aAAa,MAAM,kBAAkB,gBAC3C,KACA,cAAc,IAAI,GAClB,gBAAgB,IAAI,SAAS,CAC/B;CAIA,OACE,oBAAC,6BAAD;EAA6B,OAAO;GAHY;GAAa;GAAM;EAG3B;EACtC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAkB;GAAW,uCAAoC;GACvE;EACE,CAAA;CACsB,CAAA;AAEjC;AAEA,SAAgB,wBAAwB,EAAE,UAAU,SAAS,WAAW,GAAG,SAAuC;CAChH,MAAM,EAAE,MAAM,aAAa,kBAAkB,wBAAwB;CACrE,MAAM,EAAE,QAAQ,aAAa,qBAAqB;CAClD,MAAM,EAAE,WAAW,oBAAoB,gCAAgC,QAAQ;CAC/E,MAAM,gBAAgB,cAClB,OAAO,oBAAoB,IAC3B,OAAO,aAAa,EAAE,OAAO,eAAe,eAAe,QAAQ,QAAQ,EAAE,CAAC;CAElF,OACE,oBAAC,MAAM,MAAP;EACE,cAAW;EACX,GAAI;EACJ,OAAO,KAAK,MAAM,OAAO,GAAG;EAC5B,KAAK;EACL,KAAK;EACL,wBAAwB;EACb;EACX,sCAAmC;EAEnC,UAAA,oBAAC,MAAM,OAAP,EAAA,UACE,oBAAC,MAAM,WAAP,CAAkB,CAAA,EACP,CAAA;CACH,CAAA;AAEhB;AAEA,SAAgB,4BAA4B,EAC1C,UACA,SACA,WACA,UACA,GAAG,SACgC;CACnC,MAAM,EAAE,aAAa,kBAAkB,wBAAwB;CAC/D,MAAM,EAAE,QAAQ,aAAa,qBAAqB;CAClD,MAAM,EAAE,WAAW,oBAAoB,oCAAoC,QAAQ;CAEnF,SAAS,UAAkB;EACzB,IAAI,aAAa,OAAO,OAAO,gBAAgB;EAC/C,OAAO,OAAO,SAAS,EAAE,OAAO,eAAe,eAAe,QAAQ,QAAQ,EAAE,CAAC;CACnF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,0CAAuC;EAC1E,UAAA,YAAY,QAAQ;CAClB,CAAA;AAET;AAEA,MAAa,uBAAuB;CAClC,MAAM;CACN,KAAK;CACL,SAAS;AACX"}

package/dist/matter/identity-edit/identity-edit.d.ts

@@ -1,25 +1,67 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ReactNode } from "react";
 //#region src/matter/identity-edit/identity-edit.d.ts
+export declare const IdentityEditButtonContent: {
+  readonly id: "identity-edit-button";
+  readonly title: "Identity Edit Button";
+  readonly description: "The label of the button that opens the identity form.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Button label";
+        readonly format: "icu-message";
+        readonly messageSource: "Edit";
+      };
+    };
+  };
+};
+export declare const IdentityEditCancelButtonContent: {
+  readonly id: "identity-edit-cancel-button";
+  readonly title: "Identity Edit Cancel Button";
+  readonly description: "The label of the button that closes the identity form without saving.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Button label";
+        readonly format: "icu-message";
+        readonly messageSource: "Cancel";
+      };
+    };
+  };
+};
 export type IdentityEditControllerProps = {
   children?: ReactNode;
 };
 export type IdentityEditPanelProps = {
   children?: ReactNode;
 };
-export type IdentityEditButtonProps = {
-  /** Text shown when no children are composed. */
-  label?: string;
+export type IdentityEditButtonProps = MessageLocaleProp & {
+  className?: string;
+  /** Compose custom button content (e.g. an Icon plus text); falls back to the `label` message. */
+  children?: ReactNode;
+  /** The label shown when no children are composed. */
+  $content?: ContentValue<typeof IdentityEditButtonContent>;
+};
+export type IdentityEditCancelButtonProps = MessageLocaleProp & {
   className?: string;
-  /** Compose custom button content (e.g. an Icon plus text); falls back to `label`. */
+  /** Compose custom button content; falls back to the `label` message. */
   children?: ReactNode;
+  /** The label shown when no children are composed. */
+  $content?: ContentValue<typeof IdentityEditCancelButtonContent>;
 };
 export declare const IdentityEditControllerDefinition: ComponentDefinition<IdentityEditControllerProps>;
 export declare const IdentitySummaryViewDefinition: ComponentDefinition<IdentityEditPanelProps>;
 export declare const IdentityEditFormDefinition: ComponentDefinition<IdentityEditPanelProps>;
 export declare const IdentityEditButtonDefinition: ComponentDefinition<IdentityEditButtonProps>;
-export declare const IdentityEditCancelButtonDefinition: ComponentDefinition<IdentityEditButtonProps>;
+export declare const IdentityEditCancelButtonDefinition: ComponentDefinition<IdentityEditCancelButtonProps>;
 /**
  * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.
  *
@@ -32,10 +74,10 @@ export declare function IdentityEditController({ children }: IdentityEditControl
 export declare function IdentitySummaryView({ children }: IdentityEditPanelProps): import("react/jsx-runtime").JSX.Element | null;
 /** Renders its children only while the section shows the form. */
 export declare function IdentityEditForm({ children }: IdentityEditPanelProps): import("react/jsx-runtime").JSX.Element | null;
-/** Opens the form. Renders `children` or the `label` fallback. */
-export declare function IdentityEditButton({ label, className, children }: IdentityEditButtonProps): import("react/jsx-runtime").JSX.Element;
-/** Returns to the summary without saving. Renders `children` or the `label` fallback. */
-export declare function IdentityEditCancelButton({ label, className, children }: IdentityEditButtonProps): import("react/jsx-runtime").JSX.Element;
+/** Opens the form. Renders `children` or the `label` message. */
+export declare function IdentityEditButton({ $content, $locale, className, children }: IdentityEditButtonProps): import("react/jsx-runtime").JSX.Element;
+/** Returns to the summary without saving. Renders `children` or the `label` message. */
+export declare function IdentityEditCancelButton({ $content, $locale, className, children }: IdentityEditCancelButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare const IdentityEdit: {
   Controller: typeof IdentityEditController;
   ControllerDefinition: ComponentDefinition<IdentityEditControllerProps>;
@@ -46,7 +88,7 @@ export declare const IdentityEdit: {
   EditButton: typeof IdentityEditButton;
   EditButtonDefinition: ComponentDefinition<IdentityEditButtonProps>;
   CancelButton: typeof IdentityEditCancelButton;
-  CancelButtonDefinition: ComponentDefinition<IdentityEditButtonProps>;
+  CancelButtonDefinition: ComponentDefinition<IdentityEditCancelButtonProps>;
 };
 //#endregion
 //# sourceMappingURL=identity-edit.d.ts.map

package/dist/matter/identity-edit/identity-edit.js

@@ -1,6 +1,8 @@
 "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 { createContext, useContext, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 //#region src/matter/identity-edit/identity-edit.tsx
@@ -10,6 +12,36 @@ function useIdentityEditContext() {
 	if (!ctx) throw new Error("IdentitySummaryView, IdentityEditForm and the edit buttons must be used inside an IdentityEditController.");
 	return ctx;
 }
+const IdentityEditButtonContent = defineContentType({
+	id: "identity-edit-button",
+	title: "Identity Edit Button",
+	description: "The label of the button that opens the identity form.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Edit"
+		} }
+	}
+});
+const IdentityEditCancelButtonContent = defineContentType({
+	id: "identity-edit-cancel-button",
+	title: "Identity Edit Cancel Button",
+	description: "The label of the button that closes the identity form without saving.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Cancel"
+		} }
+	}
+});
 const IdentityEditControllerDefinition = defineComponent({
 	name: "IdentityEditController",
 	importPath: "@vtex/faststore/components",
@@ -50,33 +82,27 @@ const IdentityEditButtonDefinition = defineComponent({
 	name: "IdentityEditButton",
 	importPath: "@vtex/faststore/components",
 	component: IdentityEditButton,
+	content: IdentityEditButtonContent,
 	requiresContext: "identity-edit",
 	editor: {
 		label: "Identity Edit Button",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		default: "editar",
-		label: "Button label"
-	} },
-	guideline: "Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on `label`. Must be inside an IdentityEditController."
+	schema: {},
+	guideline: "Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on the $content field label. Must be inside an IdentityEditController."
 });
 const IdentityEditCancelButtonDefinition = defineComponent({
 	name: "IdentityEditCancelButton",
 	importPath: "@vtex/faststore/components",
 	component: IdentityEditCancelButton,
+	content: IdentityEditCancelButtonContent,
 	requiresContext: "identity-edit",
 	editor: {
 		label: "Identity Edit Cancel Button",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		default: "cancelar",
-		label: "Button label"
-	} },
-	guideline: "Returns the identity section to its summary without saving. Place it inside an IdentityEditForm. Must be inside an IdentityEditController."
+	schema: {},
+	guideline: "Returns the identity section to its summary without saving. Its label is the $content field label unless children are composed. Place it inside an IdentityEditForm. Must be inside an IdentityEditController."
 });
 /**
 * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.
@@ -108,26 +134,28 @@ function IdentityEditForm({ children }) {
 	if (mode !== "edit") return null;
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 }
-/** Opens the form. Renders `children` or the `label` fallback. */
-function IdentityEditButton({ label = "editar", className, children }) {
+/** Opens the form. Renders `children` or the `label` message. */
+function IdentityEditButton({ $content, $locale, className, children }) {
 	const { setMode } = useIdentityEditContext();
+	const { format } = useMessageFormatter(IdentityEditButtonContent, $content);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-fs-identity-edit-button": "",
 		className,
 		onClick: () => setMode("edit"),
-		children: children ?? label
+		children: children ?? format("label")
 	});
 }
-/** Returns to the summary without saving. Renders `children` or the `label` fallback. */
-function IdentityEditCancelButton({ label = "cancelar", className, children }) {
+/** Returns to the summary without saving. Renders `children` or the `label` message. */
+function IdentityEditCancelButton({ $content, $locale, className, children }) {
 	const { setMode } = useIdentityEditContext();
+	const { format } = useMessageFormatter(IdentityEditCancelButtonContent, $content);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-fs-identity-edit-cancel-button": "",
 		className,
 		onClick: () => setMode("view"),
-		children: children ?? label
+		children: children ?? format("label")
 	});
 }
 const IdentityEdit = {
@@ -143,6 +171,6 @@ const IdentityEdit = {
 	CancelButtonDefinition: IdentityEditCancelButtonDefinition
 };
 //#endregion
-export { IdentityEdit, IdentityEditButton, IdentityEditButtonDefinition, IdentityEditCancelButton, IdentityEditCancelButtonDefinition, IdentityEditController, IdentityEditControllerDefinition, IdentityEditForm, IdentityEditFormDefinition, IdentitySummaryView, IdentitySummaryViewDefinition };
+export { IdentityEdit, IdentityEditButton, IdentityEditButtonContent, IdentityEditButtonDefinition, IdentityEditCancelButton, IdentityEditCancelButtonContent, IdentityEditCancelButtonDefinition, IdentityEditController, IdentityEditControllerDefinition, IdentityEditForm, IdentityEditFormDefinition, IdentitySummaryView, IdentitySummaryViewDefinition };
 
 //# sourceMappingURL=identity-edit.js.map

package/dist/matter/identity-edit/identity-edit.js.map

@@ -1 +1 @@
-{"version":3,"file":"identity-edit.js","names":[],"sources":["../../../src/matter/identity-edit/identity-edit.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo, useState } from 'react';\n\n// ---------------------------------------------------------------------------\n// Identity view/edit toggle.\n//\n// The identity section shows a summary of who the shopper is until they ask to change it, and returns to\n// the summary when they say so — this component owns the mode rather than a page authoring it\n// (ADR-0006). Saving does not move it; whether it should is a sequencing question left to the\n// flow-of-steps RFC (#611). The delivery section owns no such mode of its own — its view/edit toggle\n// was removed with no replacement, so ShippingAddressFieldset always renders once resolved. See\n// identity-edit.md.\n// ---------------------------------------------------------------------------\n\n/** Internal: the section's two states never reach the schema, because each has its own component. */\ntype IdentityEditMode = 'view' | 'edit';\n\ntype IdentityEditContextValue = {\n  mode: IdentityEditMode;\n  setMode: (mode: IdentityEditMode) => void;\n};\n\nconst IdentityEditContext = createContext<IdentityEditContextValue | undefined>(undefined);\n\nfunction useIdentityEditContext(): IdentityEditContextValue {\n  const ctx = useContext(IdentityEditContext);\n  if (!ctx) {\n    throw new Error(\n      'IdentitySummaryView, IdentityEditForm and the edit buttons must be used inside an IdentityEditController.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentityEditControllerProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditPanelProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditButtonProps = {\n  /** Text shown when no children are composed. */\n  label?: string;\n  className?: string;\n  /** Compose custom button content (e.g. an Icon plus text); falls back to `label`. */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentityEditControllerDefinition = defineComponent<IdentityEditControllerProps>({\n  name: 'IdentityEditController',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditController,\n  providesContext: 'identity-edit',\n  editor: { label: 'Identity Edit Controller', category: 'commerce' },\n  schema: {},\n  guideline:\n    \"Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form stays open and no descendant needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a FormRoot over ClientProfileFieldset, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own.\",\n});\n\nexport const IdentitySummaryViewDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentitySummaryView',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryView,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Summary View', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the summary, and nothing while it shows the form. Takes no props: which state it gates is which component it is. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditFormDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentityEditForm',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditForm,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Form', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose a FormRoot holding ClientProfileFieldset and its controls inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'editar', label: 'Button label' },\n  },\n  guideline:\n    'Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on `label`. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditCancelButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditCancelButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditCancelButton,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Cancel Button', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'cancelar', label: 'Button label' },\n  },\n  guideline:\n    'Returns the identity section to its summary without saving. Place it inside an IdentityEditForm. Must be inside an IdentityEditController.',\n});\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\n/**\n * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.\n *\n * The mode moves only when the shopper presses one of this section's own buttons. Saving the form does\n * not close the section — the confirmation stays readable, and whether finishing a form should collapse\n * anything is a sequencing question this component deliberately has no opinion on.\n */\nexport function IdentityEditController({ children }: IdentityEditControllerProps) {\n  const [mode, setMode] = useState<IdentityEditMode>('view');\n\n  const value = useMemo<IdentityEditContextValue>(() => ({ mode, setMode }), [mode]);\n\n  return <IdentityEditContext.Provider value={value}>{children}</IdentityEditContext.Provider>;\n}\n\n/** Renders its children only while the section shows the summary. */\nexport function IdentitySummaryView({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'view') return null;\n  return <>{children}</>;\n}\n\n/** Renders its children only while the section shows the form. */\nexport function IdentityEditForm({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'edit') return null;\n  return <>{children}</>;\n}\n\n/** Opens the form. Renders `children` or the `label` fallback. */\nexport function IdentityEditButton({ label = 'editar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-button=\"\" className={className} onClick={() => setMode('edit')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n/** Returns to the summary without saving. Renders `children` or the `label` fallback. */\nexport function IdentityEditCancelButton({ label = 'cancelar', className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  return (\n    <button type=\"button\" data-fs-identity-edit-cancel-button=\"\" className={className} onClick={() => setMode('view')}>\n      {children ?? label}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentityEdit = {\n  Controller: IdentityEditController,\n  ControllerDefinition: IdentityEditControllerDefinition,\n  SummaryView: IdentitySummaryView,\n  SummaryViewDefinition: IdentitySummaryViewDefinition,\n  Form: IdentityEditForm,\n  FormDefinition: IdentityEditFormDefinition,\n  EditButton: IdentityEditButton,\n  EditButtonDefinition: IdentityEditButtonDefinition,\n  CancelButton: IdentityEditCancelButton,\n  CancelButtonDefinition: IdentityEditCancelButtonDefinition,\n};\n"],"mappings":";;;;;;AAwBA,MAAM,sBAAsB,cAAoD,KAAA,CAAS;AAEzF,SAAS,yBAAmD;CAC1D,MAAM,MAAM,WAAW,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MACR,2GACF;CAEF,OAAO;AACT;AA0BA,MAAa,mCAAmC,gBAA6C;CAC3F,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA4B,UAAU;CAAW;CAClE,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAAwC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,6BAA6B,gBAAwC;CAChF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAW;CAC5D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,+BAA+B,gBAAyC;CACnF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAwB,UAAU;CAAS;CAC5D,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAU,OAAO;CAAe,EACpE;CACA,WACE;AACJ,CAAC;AAED,MAAa,qCAAqC,gBAAyC;CACzF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAA+B,UAAU;CAAS;CACnE,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAY,OAAO;CAAe,EACtE;CACA,WACE;AACJ,CAAC;;;;;;;;AAaD,SAAgB,uBAAuB,EAAE,YAAyC;CAChF,MAAM,CAAC,MAAM,WAAW,SAA2B,MAAM;CAEzD,MAAM,QAAQ,eAAyC;EAAE;EAAM;CAAQ,IAAI,CAAC,IAAI,CAAC;CAEjF,OAAO,oBAAC,oBAAoB,UAArB;EAAqC;EAAQ;CAAuC,CAAA;AAC7F;;AAGA,SAAgB,oBAAoB,EAAE,YAAoC;CACxE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,iBAAiB,EAAE,YAAoC;CACrE,MAAM,EAAE,SAAS,uBAAuB;CACxC,IAAI,SAAS,QAAQ,OAAO;CAC5B,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;AACvB;;AAGA,SAAgB,mBAAmB,EAAE,QAAQ,UAAU,WAAW,YAAqC;CACrG,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,gCAA6B;EAAc;EAAW,eAAe,QAAQ,MAAM;EACtG,UAAA,YAAY;CACP,CAAA;AAEZ;;AAGA,SAAgB,yBAAyB,EAAE,QAAQ,YAAY,WAAW,YAAqC;CAC7G,MAAM,EAAE,YAAY,uBAAuB;CAC3C,OACE,oBAAC,UAAD;EAAQ,MAAK;EAAS,uCAAoC;EAAc;EAAW,eAAe,QAAQ,MAAM;EAC7G,UAAA,YAAY;CACP,CAAA;AAEZ;AAMA,MAAa,eAAe;CAC1B,YAAY;CACZ,sBAAsB;CACtB,aAAa;CACb,uBAAuB;CACvB,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,sBAAsB;CACtB,cAAc;CACd,wBAAwB;AAC1B"}
+{"version":3,"file":"identity-edit.js","names":[],"sources":["../../../src/matter/identity-edit/identity-edit.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { createContext, type ReactNode, useContext, useMemo, useState } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\n// ---------------------------------------------------------------------------\n// Identity view/edit toggle.\n//\n// The identity section shows a summary of who the shopper is until they ask to change it, and returns to\n// the summary when they say so — this component owns the mode rather than a page authoring it\n// (ADR-0006). Saving does not move it; whether it should is a sequencing question left to the\n// flow-of-steps RFC (#611). The delivery section owns no such mode of its own — its view/edit toggle\n// was removed with no replacement, so ShippingAddressFieldset always renders once resolved. See\n// identity-edit.md.\n// ---------------------------------------------------------------------------\n\n/** Internal: the section's two states never reach the schema, because each has its own component. */\ntype IdentityEditMode = 'view' | 'edit';\n\ntype IdentityEditContextValue = {\n  mode: IdentityEditMode;\n  setMode: (mode: IdentityEditMode) => void;\n};\n\nconst IdentityEditContext = createContext<IdentityEditContextValue | undefined>(undefined);\n\nfunction useIdentityEditContext(): IdentityEditContextValue {\n  const ctx = useContext(IdentityEditContext);\n  if (!ctx) {\n    throw new Error(\n      'IdentitySummaryView, IdentityEditForm and the edit buttons must be used inside an IdentityEditController.',\n    );\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const IdentityEditButtonContent = defineContentType({\n  id: 'identity-edit-button',\n  title: 'Identity Edit Button',\n  description: 'The label of the button that opens the identity form.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Button label', format: 'icu-message', messageSource: 'Edit' },\n    },\n  },\n});\n\nexport const IdentityEditCancelButtonContent = defineContentType({\n  id: 'identity-edit-cancel-button',\n  title: 'Identity Edit Cancel Button',\n  description: 'The label of the button that closes the identity form without saving.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Button label', format: 'icu-message', messageSource: 'Cancel' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type IdentityEditControllerProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditPanelProps = {\n  children?: ReactNode;\n};\n\nexport type IdentityEditButtonProps = MessageLocaleProp & {\n  className?: string;\n  /** Compose custom button content (e.g. an Icon plus text); falls back to the `label` message. */\n  children?: ReactNode;\n  /** The label shown when no children are composed. */\n  $content?: ContentValue<typeof IdentityEditButtonContent>;\n};\n\nexport type IdentityEditCancelButtonProps = MessageLocaleProp & {\n  className?: string;\n  /** Compose custom button content; falls back to the `label` message. */\n  children?: ReactNode;\n  /** The label shown when no children are composed. */\n  $content?: ContentValue<typeof IdentityEditCancelButtonContent>;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const IdentityEditControllerDefinition = defineComponent<IdentityEditControllerProps>({\n  name: 'IdentityEditController',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditController,\n  providesContext: 'identity-edit',\n  editor: { label: 'Identity Edit Controller', category: 'commerce' },\n  schema: {},\n  guideline:\n    \"Owns the identity section's summary/form toggle: starts on the summary, opens on IdentityEditButton and returns on IdentityEditCancelButton. Saving does not move it, so the form stays open and no descendant needs to know about a section around it. Self-contained: collapsing tells nothing else, so no other section opens as a result. Compose an IdentitySummaryView holding the summary parts and an IdentityEditForm holding a FormRoot over ClientProfileFieldset, plus an IdentityEditButton in the heading and an IdentityEditCancelButton next to the form. No state is named anywhere: which state a part belongs to is which component it is. Renders no DOM of its own.\",\n});\n\nexport const IdentitySummaryViewDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentitySummaryView',\n  importPath: '@vtex/faststore/components',\n  component: IdentitySummaryView,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Summary View', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the summary, and nothing while it shows the form. Takes no props: which state it gates is which component it is. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditFormDefinition = defineComponent<IdentityEditPanelProps>({\n  name: 'IdentityEditForm',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditForm,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Form', category: 'commerce' },\n  schema: {},\n  guideline:\n    'Renders its children only while the identity section shows the form, and nothing while it shows the summary. Compose a FormRoot holding ClientProfileFieldset and its controls inside, plus an IdentityEditCancelButton. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditButtonDefinition = defineComponent<IdentityEditButtonProps>({\n  name: 'IdentityEditButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditButton,\n  content: IdentityEditButtonContent,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Button', category: 'action' },\n  schema: {},\n  guideline:\n    'Opens the identity form. Place it in the section heading, inside an IdentitySummaryView so it disappears while the form is open. Compose an Icon plus text as children, or rely on the $content field label. Must be inside an IdentityEditController.',\n});\n\nexport const IdentityEditCancelButtonDefinition = defineComponent<IdentityEditCancelButtonProps>({\n  name: 'IdentityEditCancelButton',\n  importPath: '@vtex/faststore/components',\n  component: IdentityEditCancelButton,\n  content: IdentityEditCancelButtonContent,\n  requiresContext: 'identity-edit',\n  editor: { label: 'Identity Edit Cancel Button', category: 'action' },\n  schema: {},\n  guideline:\n    'Returns the identity section to its summary without saving. Its label is the $content field label unless children are composed. Place it inside an IdentityEditForm. Must be inside an IdentityEditController.',\n});\n\n// ---------------------------------------------------------------------------\n// Components\n// ---------------------------------------------------------------------------\n\n/**\n * Owns the identity section's mode and provides it to descendants. Renders no DOM of its own.\n *\n * The mode moves only when the shopper presses one of this section's own buttons. Saving the form does\n * not close the section — the confirmation stays readable, and whether finishing a form should collapse\n * anything is a sequencing question this component deliberately has no opinion on.\n */\nexport function IdentityEditController({ children }: IdentityEditControllerProps) {\n  const [mode, setMode] = useState<IdentityEditMode>('view');\n\n  const value = useMemo<IdentityEditContextValue>(() => ({ mode, setMode }), [mode]);\n\n  return <IdentityEditContext.Provider value={value}>{children}</IdentityEditContext.Provider>;\n}\n\n/** Renders its children only while the section shows the summary. */\nexport function IdentitySummaryView({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'view') return null;\n  return <>{children}</>;\n}\n\n/** Renders its children only while the section shows the form. */\nexport function IdentityEditForm({ children }: IdentityEditPanelProps) {\n  const { mode } = useIdentityEditContext();\n  if (mode !== 'edit') return null;\n  return <>{children}</>;\n}\n\n/** Opens the form. Renders `children` or the `label` message. */\nexport function IdentityEditButton({ $content, $locale, className, children }: IdentityEditButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  const { format } = useMessageFormatter(IdentityEditButtonContent, $content);\n  return (\n    <button type=\"button\" data-fs-identity-edit-button=\"\" className={className} onClick={() => setMode('edit')}>\n      {children ?? format('label')}\n    </button>\n  );\n}\n\n/** Returns to the summary without saving. Renders `children` or the `label` message. */\nexport function IdentityEditCancelButton({ $content, $locale, className, children }: IdentityEditCancelButtonProps) {\n  const { setMode } = useIdentityEditContext();\n  const { format } = useMessageFormatter(IdentityEditCancelButtonContent, $content);\n  return (\n    <button type=\"button\" data-fs-identity-edit-cancel-button=\"\" className={className} onClick={() => setMode('view')}>\n      {children ?? format('label')}\n    </button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace Export\n// ---------------------------------------------------------------------------\n\nexport const IdentityEdit = {\n  Controller: IdentityEditController,\n  ControllerDefinition: IdentityEditControllerDefinition,\n  SummaryView: IdentitySummaryView,\n  SummaryViewDefinition: IdentitySummaryViewDefinition,\n  Form: IdentityEditForm,\n  FormDefinition: IdentityEditFormDefinition,\n  EditButton: IdentityEditButton,\n  EditButtonDefinition: IdentityEditButtonDefinition,\n  CancelButton: IdentityEditCancelButton,\n  CancelButtonDefinition: IdentityEditCancelButtonDefinition,\n};\n"],"mappings":"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"}