@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/account-address-book/account-address-form.js

@@ -1,21 +1,20 @@
 "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 { resolveSiteRelativeHref } from "../../utils/safe-href.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useStorefrontNavigation } from "../../sdk/navigation/use-storefront-navigation.js";
 import { Field, FieldsetFieldContext, TEXT_FIELD_VALUE, useBoundField, useFieldsetField, useFieldsetFieldNames } from "../../particles/field/field.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
-import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
 import { useSession } from "../session/session.js";
-import { loggableErrorName } from "../../utils/loggable-error-name.js";
 import { Button } from "../../particles/button/button.js";
-import { ACCOUNT_FIELD_LABELS, ACCOUNT_MAX_LENGTH } from "../../sdk/address/constants.js";
+import { loggableErrorName } from "../../utils/loggable-error-name.js";
+import { ACCOUNT_MAX_LENGTH } from "../../sdk/address/constants.js";
 import { useOptionalAccountAddressBook } from "./account-address-book.js";
 import { useToast } from "../../particles/toast/toast.js";
 import { Select } from "../../particles/select/select.js";
 import { AccountAddressFormContext, useAccountAddressForm } from "./account-address-form-context.js";
-import { AccountAddressCountryNotice, AddressCountryControl } from "./account-address-country.js";
 import { FormRoot, useFormRegistry } from "../../particles/form/form.js";
 import { addressFields } from "../../sdk/address/address-fields.js";
 import { loadCountryRules } from "../../sdk/address/country-rules.js";
@@ -25,7 +24,7 @@ import { applyCountrySwitch, initialAddressCountry } from "./account-address-cou
 import { dependentsOf, usePostalCodeAutofill } from "./account-address-postal-autofill.js";
 import { useOptionalAccountAddressRecord } from "./account-address-record.js";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useFormContext, useWatch } from "react-hook-form";
 //#region src/matter/account-address-book/account-address-form.tsx
 const DEFAULT_COUNTRY = "BRA";
@@ -50,20 +49,39 @@ const EDITABLE_FIELDS = [
 ];
 const SERVER_REQUIRED = {
 	code: "required",
-	messageId: "fs/address.error.required"
+	message: "required"
 };
 const SERVER_INVALID = {
 	code: "invalid",
-	messageId: "fs/address.error.invalid"
+	message: "invalid"
+};
+const ERROR_FIELDS = {
+	unrenderedField: "unrenderedFieldMessage",
+	notFound: "notFoundMessage",
+	unauthorized: "unauthorizedMessage",
+	saveFailed: "saveFailedMessage",
+	rulesFailed: "rulesFailedMessage",
+	countrySwitchFailed: "countrySwitchFailedMessage",
+	unsupportedCountry: "unsupportedCountryMessage"
 };
-const ERROR_MESSAGE_IDS = {
-	unrenderedField: "fs/address-form.error.unrendered-field",
-	notFound: "fs/address-form.error.not-found",
-	unauthorized: "fs/address-form.error.unauthorized",
-	saveFailed: "fs/address-form.error.save-failed",
-	rulesFailed: "fs/address-form.error.rules-failed",
-	countrySwitchFailed: "fs/address-form.error.country-switch-failed",
-	unsupportedCountry: "fs/address-form.error.unsupported-country"
+const LABEL_FIELDS = {
+	cep: "cepLabel",
+	city: "cityLabel",
+	commune: "communeLabel",
+	complement: "complementLabel",
+	county: "countyLabel",
+	department: "departmentLabel",
+	district: "districtLabel",
+	municipality: "municipalityLabel",
+	neighborhood: "neighborhoodLabel",
+	number: "numberLabel",
+	postalCode: "postalCodeLabel",
+	postcode: "postcodeLabel",
+	province: "provinceLabel",
+	region: "regionLabel",
+	state: "stateLabel",
+	street: "streetLabel",
+	town: "townLabel"
 };
 function toDraft(address) {
 	if (!address) return {};
@@ -73,7 +91,7 @@ function isBlankDraft(draft) {
 	return EDITABLE_FIELDS.every((field) => (draft[field] ?? "").trim() === "");
 }
 function toCountry(code) {
-	return resolveAuthoredCopy(code, DEFAULT_COUNTRY).trim().toUpperCase();
+	return (code?.trim() || DEFAULT_COUNTRY).toUpperCase();
 }
 /** A refusal's code decides the message when it names no field on screen; a named field reads as unrendered. */
 function toFormError({ code, field }) {
@@ -120,15 +138,11 @@ function splitByScreen(found, controls) {
 		formLevel: offScreen ? "unrenderedField" : null
 	};
 }
-function successTitle({ edited, addedMessage, savedMessage, intl }) {
-	if (edited) return resolveAuthoredCopy(savedMessage, intl.formatMessage({ id: "fs/address-form.saved" }));
-	return resolveAuthoredCopy(addedMessage, intl.formatMessage({ id: "fs/address-form.added" }));
-}
-function describeStatus(status, blockedMessage, intl) {
+function describeStatus(status, { format }) {
 	if (status === null) return "";
-	if (status.kind === "filled") return intl.formatMessage({ id: "fs/address-form.status.filled" }, { count: status.count });
-	const fallback = status.kind === "fields" ? intl.formatMessage({ id: "fs/address-form.status.fields" }, { count: status.count }) : intl.formatMessage({ id: "fs/address-form.status.failed" });
-	return resolveAuthoredCopy(blockedMessage, fallback);
+	if (status.kind === "filled") return format("statusFilled", { count: status.count });
+	if (status.kind === "fields") return format("statusFields", { count: status.count });
+	return format("statusFailed");
 }
 function focusFirstInvalid(form, errors) {
 	if (!form) return;
@@ -153,7 +167,7 @@ function useFormPlacement() {
 		mode: seed ? "edit" : "add"
 	};
 }
-function AccountAddressFormRoot({ defaultCountry, addedMessage, savedMessage, blockedMessage, returnHref, $actions, className, children, ...props }) {
+function AccountAddressFormRoot({ defaultCountry, $content, $locale, returnHref, $actions, className, children, ...props }) {
 	const { state: sessionState } = useSession();
 	useToast();
 	const { book, record, mode } = useFormPlacement();
@@ -174,25 +188,14 @@ function AccountAddressFormRoot({ defaultCountry, addedMessage, savedMessage, bl
 		"data-fs-account-address-form-mode": mode,
 		children: /* @__PURE__ */ jsx(AccountAddressFieldset, {
 			defaultCountry,
-			addedMessage,
-			savedMessage,
-			blockedMessage,
+			$content,
 			returnHref,
 			$actions,
 			writing,
 			setWriting,
 			switchTarget,
 			setSwitchTarget,
-			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx(AddressCountryControl, {}),
-				/* @__PURE__ */ jsx(AccountAddressCountryNotice, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormRecipientName, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormFields, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormReference, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormError, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormSubmit, {}),
-				/* @__PURE__ */ jsx(AccountAddressFormCancel, {})
-			] })
+			children
 		})
 	});
 }
@@ -200,11 +203,11 @@ function AccountAddressFormRoot({ defaultCountry, addedMessage, savedMessage, bl
 * The form's one fieldset under its FormRoot. It reads and writes the draft through react-hook-form,
 * and owns the rules, the errors, the country switch, the postal-code fill and the write.
 */
-function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, blockedMessage, returnHref, $actions: $actionsProp, writing, setWriting, switchTarget, setSwitchTarget, children }) {
+function AccountAddressFieldset({ defaultCountry, $content, returnHref, $actions: $actionsProp, writing, setWriting, switchTarget, setSwitchTarget, children }) {
 	const { registerFieldset } = useFormRegistry();
 	const { getValues, setValue, subscribe } = useFormContext();
 	const toast = useToast();
-	const intl = useIntl();
+	const messages = useMessageFormatter(AccountAddressFormContent, $content);
 	const $actions = useActionsOverride($actionsProp);
 	const { push } = useStorefrontNavigation();
 	const { book, seed, mode } = useFormPlacement();
@@ -218,6 +221,7 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 	const [fieldErrors, setFieldErrors] = useState({});
 	const [formError, setFormError] = useState(null);
 	const [status, setStatus] = useState(null);
+	const [fieldLabel, setFieldLabel] = useState(null);
 	const pendingRef = useRef(false);
 	const mountedRef = useRef(true);
 	useEffect(() => {
@@ -359,6 +363,10 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 		seedDraft
 	]);
 	const registerField = useCallback((name) => registry.registerFieldName(fieldPath(name)), [registry]);
+	const registerFieldLabel = useCallback((label) => {
+		setFieldLabel(() => label);
+		return () => setFieldLabel((current) => current === label ? null : current);
+	}, []);
 	const applyFill = useCallback((filled) => {
 		writeDraft(filled);
 		setFieldErrors((previous) => {
@@ -429,10 +437,13 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 		if (formLevel === null && Object.keys(onScreen).length === 0) return null;
 		return [{
 			code: "ADDRESS_FORM_BLOCKED",
-			message: describeStatus(block(onScreen, formLevel), blockedMessage, intl)
+			message: describeStatus(block(onScreen, formLevel), messages)
 		}];
 	}
-	/** Puts each refusal on the field it names, and the rest on the form: a save never fails silently. */
+	/**
+	* Puts each refusal on the field it names, and the rest on the form: a save never fails silently.
+	* Returns what `dispatch` hands `FormRoot`: the form's own status copy, never the server's `message`.
+	*/
 	function refuse(userErrors) {
 		const errors = {};
 		const controls = mountedFields();
@@ -443,7 +454,10 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 			if (name && controls.has(name) && onField) errors[name] ??= userError.code === "MISSING_REQUIRED_FIELD" ? SERVER_REQUIRED : SERVER_INVALID;
 			else formLevel ??= toFormError(userError);
 		}
-		block(errors, formLevel);
+		return [{
+			code: userErrors[0]?.code,
+			message: describeStatus(block(errors, formLevel), messages)
+		}];
 	}
 	function toPayload(values) {
 		const current = {
@@ -482,17 +496,9 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 		setWriting(true);
 		try {
 			const userErrors = await write(payload);
-			if (userErrors.length > 0) {
-				refuse(userErrors);
-				return userErrors;
-			}
+			if (userErrors.length > 0) return refuse(userErrors);
 			toast.add({
-				title: successTitle({
-					edited: seed !== null,
-					addedMessage,
-					savedMessage,
-					intl
-				}),
+				title: messages.format(seed === null ? "addedMessage" : "savedMessage"),
 				type: "success"
 			});
 			if (mountedRef.current) closeForm();
@@ -571,7 +577,9 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 		setField,
 		registerField,
 		close: closeForm,
-		countryChoice
+		countryChoice,
+		fieldLabel,
+		registerFieldLabel
 	}), [
 		mode,
 		country,
@@ -583,7 +591,9 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 		setField,
 		registerField,
 		closeForm,
-		countryChoice
+		countryChoice,
+		fieldLabel,
+		registerFieldLabel
 	]);
 	return /* @__PURE__ */ jsx(FieldsetFieldContext, {
 		value: registry,
@@ -595,13 +605,26 @@ function AccountAddressFieldset({ defaultCountry, addedMessage, savedMessage, bl
 				"data-fs-account-address-form-status": "",
 				"data-fs-sr-only": "",
 				className: "sr-only",
-				children: describeStatus(status, blockedMessage, intl)
+				children: describeStatus(status, messages)
 			})]
 		})
 	});
 }
-function fieldErrorText(error, intl) {
-	return intl.formatMessage({ id: error.messageId }, error.values);
+/** RecipientName and Reference never get a postal-code error: only a country field does. */
+function labelFieldErrorText({ format }, { message, values }) {
+	if (message === "required") return format("requiredError");
+	if (message === "tooLong") return format("tooLongError", { maxLength: String(values?.maxLength ?? "") });
+	return format("invalidError");
+}
+function countryFieldErrorText({ format }, { message, values }) {
+	const example = String(values?.example ?? "");
+	switch (message) {
+		case "required": return format("requiredError");
+		case "tooLong": return format("tooLongError", { maxLength: String(values?.maxLength ?? "") });
+		case "cep": return format("cepError", { example });
+		case "postalCode": return format("postalCodeError", { example });
+		case "invalid": return format("invalidError");
+	}
 }
 /** Registers the field with the form while it is on screen and returns its value. */
 function useAddressFieldValue(name) {
@@ -622,10 +645,9 @@ function chooseOption(setField, name, value, descriptors) {
 	setField(name, value);
 	for (const dependent of dependentsOf(name, descriptors)) setField(dependent, "");
 }
-function AddressTextField({ name, label, maxLength, inputMode, placeholder, className }) {
+function AddressTextField({ name, label, errorText, maxLength, inputMode, placeholder, className }) {
 	const { fieldErrors, setField } = useAccountAddressForm();
 	const value = useAddressFieldValue(name);
-	const intl = useIntl();
 	const error = fieldErrors[name];
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		className,
@@ -643,15 +665,14 @@ function AddressTextField({ name, label, maxLength, inputMode, placeholder, clas
 			}),
 			error ? /* @__PURE__ */ jsx(Field.Error, {
 				match: true,
-				children: fieldErrorText(error, intl)
+				children: errorText(error)
 			}) : null
 		]
 	});
 }
-function AddressSelectField({ name, label, options, placeholder, className, onChange }) {
+function AddressSelectField({ name, label, errorText, options, placeholder, className, onChange }) {
 	const { fieldErrors } = useAccountAddressForm();
 	const value = useAddressFieldValue(name);
-	const intl = useIntl();
 	const errorId = useId();
 	const error = fieldErrors[name];
 	return /* @__PURE__ */ jsxs("div", {
@@ -681,28 +702,30 @@ function AddressSelectField({ name, label, options, placeholder, className, onCh
 		}), error ? /* @__PURE__ */ jsx("p", {
 			id: errorId,
 			"data-fs-account-address-form-field-error": "",
-			children: fieldErrorText(error, intl)
+			children: errorText(error)
 		}) : null]
 	});
 }
-function AccountAddressFormRecipientName({ label, className }) {
+function AccountAddressFormRecipientName({ $content, className }) {
 	const { rules } = useAccountAddressForm();
-	const intl = useIntl();
+	const messages = useMessageFormatter(AccountAddressFormRecipientNameContent, $content);
 	if (!rules) return null;
 	return /* @__PURE__ */ jsx(AddressTextField, {
 		name: "recipientName",
-		label: resolveAuthoredCopy(label, intl.formatMessage({ id: ACCOUNT_FIELD_LABELS.recipientName })),
+		label: messages.format("label"),
+		errorText: (error) => labelFieldErrorText(messages, error),
 		maxLength: ACCOUNT_MAX_LENGTH.recipientName,
 		className
 	});
 }
-function AccountAddressFormReference({ label, className }) {
+function AccountAddressFormReference({ $content, className }) {
 	const { rules } = useAccountAddressForm();
-	const intl = useIntl();
+	const messages = useMessageFormatter(AccountAddressFormReferenceContent, $content);
 	if (!rules) return null;
 	return /* @__PURE__ */ jsx(AddressTextField, {
 		name: "reference",
-		label: resolveAuthoredCopy(label, intl.formatMessage({ id: ACCOUNT_FIELD_LABELS.reference })),
+		label: messages.format("label"),
+		errorText: (error) => labelFieldErrorText(messages, error),
 		maxLength: ACCOUNT_MAX_LENGTH.reference,
 		className
 	});
@@ -710,20 +733,25 @@ function AccountAddressFormReference({ label, className }) {
 /**
 * One field per descriptor the country's rules give for the draft, in the order the country's form lists them.
 * A complete postal code fills the empty state, city, neighborhood and street the shopper has not typed;
-* the fill is announced once.
+* the fill is announced once. Its labels also word the country notice's list of fields left behind.
 */
-function AccountAddressFormFields({ className }) {
-	const { rules, draft, setField } = useAccountAddressForm();
-	const intl = useIntl();
+function AccountAddressFormFields({ $content, className }) {
+	const { rules, draft, setField, registerFieldLabel } = useAccountAddressForm();
+	const messages = useMessageFormatter(AccountAddressFormFieldsContent, $content);
+	const { format } = messages;
+	const fieldLabel = useCallback((key) => format(LABEL_FIELDS[key]), [format]);
+	useEffect(() => registerFieldLabel(fieldLabel), [registerFieldLabel, fieldLabel]);
 	if (!rules) return null;
 	const descriptors = addressFields(rules, draft);
+	const errorText = (error) => countryFieldErrorText(messages, error);
 	return descriptors.map((descriptor) => {
-		const { name, control, labelId, maxLength, inputMode, options, placeholder } = descriptor;
-		const label = intl.formatMessage({ id: labelId });
-		const hint = placeholder ? intl.formatMessage({ id: placeholder.id }, placeholder.values) : void 0;
+		const { name, control, maxLength, inputMode, options, placeholder } = descriptor;
+		const label = fieldLabel(descriptor.label);
+		const hint = placeholder?.key === "street" ? format("streetPlaceholder") : placeholder && format("postalCodePlaceholder", { example: placeholder.values.example ?? "" });
 		if (control === "select") return /* @__PURE__ */ jsx(AddressSelectField, {
 			name,
 			label,
+			errorText,
 			options: options ?? [],
 			placeholder: hint,
 			className,
@@ -732,6 +760,7 @@ function AccountAddressFormFields({ className }) {
 		return /* @__PURE__ */ jsx(AddressTextField, {
 			name,
 			label,
+			errorText,
 			maxLength,
 			inputMode,
 			placeholder: hint,
@@ -739,30 +768,21 @@ function AccountAddressFormFields({ className }) {
 		}, name);
 	});
 }
-function AccountAddressFormError({ unrenderedFieldMessage, notFoundMessage, unauthorizedMessage, saveFailedMessage, rulesFailedMessage, countrySwitchFailedMessage, unsupportedCountryMessage, className, ...props }) {
+function AccountAddressFormError({ $content, $locale, className, ...props }) {
 	const { formError } = useAccountAddressForm();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountAddressFormErrorContent, $content);
 	if (!formError) return null;
-	const authored = {
-		unrenderedField: unrenderedFieldMessage,
-		notFound: notFoundMessage,
-		unauthorized: unauthorizedMessage,
-		saveFailed: saveFailedMessage,
-		rulesFailed: rulesFailedMessage,
-		countrySwitchFailed: countrySwitchFailedMessage,
-		unsupportedCountry: unsupportedCountryMessage
-	};
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		role: "alert",
 		className,
 		"data-fs-account-address-form-error": formError,
-		children: resolveAuthoredCopy(authored[formError], intl.formatMessage({ id: ERROR_MESSAGE_IDS[formError] }))
+		children: format(ERROR_FIELDS[formError])
 	});
 }
-function AccountAddressFormSubmit({ label, className, children, ...props }) {
+function AccountAddressFormSubmit({ $content, $locale, className, children, ...props }) {
 	const { country, rules, formError, pending, countryChoice } = useAccountAddressForm();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountAddressFormSubmitContent, $content);
 	const switching = countryChoice.selected !== country;
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
@@ -771,12 +791,12 @@ function AccountAddressFormSubmit({ label, className, children, ...props }) {
 		disabled: rules === null || formError === "rulesFailed" || pending || switching,
 		"aria-busy": pending || void 0,
 		"data-fs-account-address-form-submit": "",
-		children: children ?? resolveAuthoredCopy(label, intl.formatMessage({ id: "fs/address-form.submit" }))
+		children: children ?? format("label")
 	});
 }
-function AccountAddressFormCancel({ label, className, children, onClick, ...props }) {
+function AccountAddressFormCancel({ $content, $locale, className, children, onClick, ...props }) {
 	const { close, pending } = useAccountAddressForm();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(AccountAddressFormCancelContent, $content);
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		type: "button",
@@ -787,13 +807,65 @@ function AccountAddressFormCancel({ label, className, children, onClick, ...prop
 			close();
 		},
 		"data-fs-account-address-form-cancel": "",
-		children: children ?? resolveAuthoredCopy(label, intl.formatMessage({ id: "fs/address-form.cancel" }))
+		children: children ?? format("label")
 	});
 }
+const AccountAddressFormContent = defineContentType({
+	id: "account-address-form",
+	title: "Account Address Form",
+	description: "The messages the address form shows or announces when a save ends or a postal code fills fields.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			addedMessage: {
+				type: "string",
+				title: "Address added message",
+				format: "icu-message",
+				messageSource: "Address added."
+			},
+			savedMessage: {
+				type: "string",
+				title: "Address saved message",
+				format: "icu-message",
+				messageSource: "Address saved."
+			},
+			statusFilled: {
+				type: "string",
+				title: "Fields filled from the postal code",
+				format: "icu-message",
+				messageSource: "{count, plural, one {# field filled from the postal code.} other {# fields filled from the postal code.}}",
+				messageArguments: {
+					type: "object",
+					properties: { count: { type: "integer" } }
+				},
+				messageExample: { count: 2 }
+			},
+			statusFields: {
+				type: "string",
+				title: "Save blocked by fields",
+				format: "icu-message",
+				messageSource: "Address not saved. {count, plural, one {# field needs attention.} other {# fields need attention.}}",
+				messageArguments: {
+					type: "object",
+					properties: { count: { type: "integer" } }
+				},
+				messageExample: { count: 2 }
+			},
+			statusFailed: {
+				type: "string",
+				title: "Save failed",
+				format: "icu-message",
+				messageSource: "Address not saved."
+			}
+		}
+	}
+});
 const AccountAddressFormRootDefinition = defineComponent({
 	name: "AccountAddressFormRoot",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormRoot,
+	content: AccountAddressFormContent,
 	requiresContext: "session",
 	providesContext: "account-address-form",
 	actions: { address: ["create", "update"] },
@@ -807,45 +879,247 @@ const AccountAddressFormRootDefinition = defineComponent({
 			default: "BRA",
 			label: "Preferred country (ISO-3)"
 		},
-		addedMessage: {
-			type: "string",
-			label: "Address added message"
-		},
-		savedMessage: {
-			type: "string",
-			label: "Address saved message"
-		},
-		blockedMessage: {
-			type: "string",
-			label: "Save blocked message"
-		},
 		returnHref: {
 			type: "link",
 			default: { standard: "address" },
 			label: "Return page"
 		}
 	},
-	guideline: "The form that adds an address or corrects a saved one, with the fields, order and options of the address's country. Opens through AccountAddressBookAddTrigger and AccountAddressBookEditTrigger, placed by AccountAddressBookFormSlot or AccountAddressBookFormDialog. Requires a SessionRoot and a mounted ToastProvider ancestor: saving shows a toast and closes the form. On its own page (add: no ancestor; edit: inside AccountAddressRecord) leaving the form, by a save, a save with no changes or Cancel, goes to returnHref instead, so mount the ToastProvider in the layout for the toast to outlive the navigation. A new address takes defaultCountry when the store ships there or the list is unknown, else the first country the store ships to; the shopper picks another through AddressCountryControl. A saved address keeps its own country, shown as text. A save the form or the server blocks marks each field, moves focus to the first one and announces it, and keeps what was typed. With no children it renders AddressCountryControl, AccountAddressCountryNotice, RecipientName, Fields, Reference, Error, Submit and Cancel; that control gets no list there and shows defaultCountry as text, so compose AddressCountryControl explicitly to offer the choice. See account-address-book.md."
+	guideline: "The form that adds an address or corrects a saved one, with the fields, order and options of the address's country. Opens through AccountAddressBookAddTrigger and AccountAddressBookEditTrigger, placed by AccountAddressBookFormSlot or AccountAddressBookFormDialog. Requires a SessionRoot and a mounted ToastProvider ancestor: saving shows a toast and closes the form. On its own page (add: no ancestor; edit: inside AccountAddressRecord) leaving the form, by a save, a save with no changes or Cancel, goes to returnHref instead, so mount the ToastProvider in the layout for the toast to outlive the navigation. A new address takes defaultCountry when the store ships there or the list is unknown, else the first country the store ships to; the shopper picks another through AddressCountryControl. A saved address keeps its own country, shown as text. A save the form or the server blocks marks each field, moves focus to the first one and announces it, and keeps what was typed. It renders only its children, so compose AddressCountryControl, AccountAddressCountryNotice, RecipientName, Fields, Reference, Error, Submit and Cancel in it. See account-address-book.md."
+});
+const AccountAddressFormRecipientNameContent = defineContentType({
+	id: "account-address-form-recipient-name",
+	title: "Account Address Form Recipient Name",
+	description: "The recipient name field's label and errors.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Field label",
+				format: "icu-message",
+				messageSource: "Recipient name"
+			},
+			requiredError: {
+				type: "string",
+				title: "Required field error",
+				format: "icu-message",
+				messageSource: "This field is required."
+			},
+			invalidError: {
+				type: "string",
+				title: "Invalid field error",
+				format: "icu-message",
+				messageSource: "Check this field."
+			},
+			tooLongError: {
+				type: "string",
+				title: "Too long error",
+				format: "icu-message",
+				messageSource: "Use {maxLength} characters or fewer.",
+				messageArguments: {
+					type: "object",
+					properties: { maxLength: { type: "string" } }
+				},
+				messageExample: { maxLength: "200" }
+			}
+		}
+	}
 });
 const AccountAddressFormRecipientNameDefinition = defineComponent({
 	name: "AccountAddressFormRecipientName",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormRecipientName,
+	content: AccountAddressFormRecipientNameContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Recipient Name",
 		category: "input"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Field label"
-	} },
+	schema: {},
 	guideline: "The name of the person who receives the order. Required for every country. Place it first, before AccountAddressFormFields. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
 });
+const AccountAddressFormFieldsContent = defineContentType({
+	id: "account-address-form-fields",
+	title: "Account Address Form Fields",
+	description: "Labels, placeholders and errors of the fields the address's country asks for.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			cepLabel: {
+				type: "string",
+				title: "CEP label",
+				format: "icu-message",
+				messageSource: "CEP"
+			},
+			cityLabel: {
+				type: "string",
+				title: "City label",
+				format: "icu-message",
+				messageSource: "City"
+			},
+			communeLabel: {
+				type: "string",
+				title: "Commune label",
+				format: "icu-message",
+				messageSource: "Commune"
+			},
+			complementLabel: {
+				type: "string",
+				title: "Additional information label",
+				format: "icu-message",
+				messageSource: "Additional information (optional)"
+			},
+			countyLabel: {
+				type: "string",
+				title: "County label",
+				format: "icu-message",
+				messageSource: "County"
+			},
+			departmentLabel: {
+				type: "string",
+				title: "Department label",
+				format: "icu-message",
+				messageSource: "Department"
+			},
+			districtLabel: {
+				type: "string",
+				title: "District label",
+				format: "icu-message",
+				messageSource: "District"
+			},
+			municipalityLabel: {
+				type: "string",
+				title: "Municipality label",
+				format: "icu-message",
+				messageSource: "Municipality"
+			},
+			neighborhoodLabel: {
+				type: "string",
+				title: "Neighborhood label",
+				format: "icu-message",
+				messageSource: "Neighborhood"
+			},
+			numberLabel: {
+				type: "string",
+				title: "Number label",
+				format: "icu-message",
+				messageSource: "Number"
+			},
+			postalCodeLabel: {
+				type: "string",
+				title: "Postal code label",
+				format: "icu-message",
+				messageSource: "Postal code"
+			},
+			postcodeLabel: {
+				type: "string",
+				title: "Postcode label",
+				format: "icu-message",
+				messageSource: "Postcode"
+			},
+			provinceLabel: {
+				type: "string",
+				title: "Province label",
+				format: "icu-message",
+				messageSource: "Province"
+			},
+			regionLabel: {
+				type: "string",
+				title: "Region label",
+				format: "icu-message",
+				messageSource: "Region"
+			},
+			stateLabel: {
+				type: "string",
+				title: "State label",
+				format: "icu-message",
+				messageSource: "State"
+			},
+			streetLabel: {
+				type: "string",
+				title: "Street address label",
+				format: "icu-message",
+				messageSource: "Street address"
+			},
+			townLabel: {
+				type: "string",
+				title: "Town label",
+				format: "icu-message",
+				messageSource: "Town"
+			},
+			postalCodePlaceholder: {
+				type: "string",
+				title: "Postal code placeholder",
+				format: "icu-message",
+				messageSource: "Example: {example}",
+				messageArguments: {
+					type: "object",
+					properties: { example: { type: "string" } }
+				},
+				messageExample: { example: "01310-100" }
+			},
+			streetPlaceholder: {
+				type: "string",
+				title: "Street placeholder",
+				format: "icu-message",
+				messageSource: "Address line 1"
+			},
+			cepError: {
+				type: "string",
+				title: "Invalid CEP error",
+				format: "icu-message",
+				messageSource: "Enter a valid CEP (example: {example}).",
+				messageArguments: {
+					type: "object",
+					properties: { example: { type: "string" } }
+				},
+				messageExample: { example: "01310-100" }
+			},
+			postalCodeError: {
+				type: "string",
+				title: "Invalid postal code error",
+				format: "icu-message",
+				messageSource: "Enter a valid postal code (example: {example}).",
+				messageArguments: {
+					type: "object",
+					properties: { example: { type: "string" } }
+				},
+				messageExample: { example: "K1A 0A9" }
+			},
+			requiredError: {
+				type: "string",
+				title: "Required field error",
+				format: "icu-message",
+				messageSource: "This field is required."
+			},
+			invalidError: {
+				type: "string",
+				title: "Invalid field error",
+				format: "icu-message",
+				messageSource: "Check this field."
+			},
+			tooLongError: {
+				type: "string",
+				title: "Too long error",
+				format: "icu-message",
+				messageSource: "Use {maxLength} characters or fewer.",
+				messageArguments: {
+					type: "object",
+					properties: { maxLength: { type: "string" } }
+				},
+				messageExample: { maxLength: "100" }
+			}
+		}
+	}
+});
 const AccountAddressFormFieldsDefinition = defineComponent({
 	name: "AccountAddressFormFields",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormFields,
+	content: AccountAddressFormFieldsContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Fields",
@@ -854,93 +1128,182 @@ const AccountAddressFormFieldsDefinition = defineComponent({
 	schema: {},
 	guideline: "One field per field the address's country asks for, in the order that country's form lists them, with its labels, limits and lists: Brazil's city is a list that follows its state. Changing a list clears the fields that depend on it. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
 });
+const AccountAddressFormReferenceContent = defineContentType({
+	id: "account-address-form-reference",
+	title: "Account Address Form Reference",
+	description: "The reference field's label and errors.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Field label",
+				format: "icu-message",
+				messageSource: "Reference (optional)"
+			},
+			requiredError: {
+				type: "string",
+				title: "Required field error",
+				format: "icu-message",
+				messageSource: "This field is required."
+			},
+			invalidError: {
+				type: "string",
+				title: "Invalid field error",
+				format: "icu-message",
+				messageSource: "Check this field."
+			},
+			tooLongError: {
+				type: "string",
+				title: "Too long error",
+				format: "icu-message",
+				messageSource: "Use {maxLength} characters or fewer.",
+				messageArguments: {
+					type: "object",
+					properties: { maxLength: { type: "string" } }
+				},
+				messageExample: { maxLength: "750" }
+			}
+		}
+	}
+});
 const AccountAddressFormReferenceDefinition = defineComponent({
 	name: "AccountAddressFormReference",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormReference,
+	content: AccountAddressFormReferenceContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Reference",
 		category: "input"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Field label"
-	} },
+	schema: {},
 	guideline: "A landmark that helps the carrier find the address. Optional. Place it after AccountAddressFormFields. Shown once the country's rules have loaded. Must be inside AccountAddressFormRoot."
 });
+const AccountAddressFormErrorContent = defineContentType({
+	id: "account-address-form-error",
+	title: "Account Address Form Error",
+	description: "Messages for an error about the whole address form.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			unrenderedFieldMessage: {
+				type: "string",
+				title: "Field not shown message",
+				format: "icu-message",
+				messageSource: "This address needs details this form can't show, so it wasn't saved."
+			},
+			notFoundMessage: {
+				type: "string",
+				title: "Address gone message",
+				format: "icu-message",
+				messageSource: "This address no longer exists."
+			},
+			unauthorizedMessage: {
+				type: "string",
+				title: "Session expired message",
+				format: "icu-message",
+				messageSource: "Your session expired. Sign in again to save this address."
+			},
+			saveFailedMessage: {
+				type: "string",
+				title: "Save failed message",
+				format: "icu-message",
+				messageSource: "We couldn't save this address. Try again."
+			},
+			rulesFailedMessage: {
+				type: "string",
+				title: "Form failed to load message",
+				format: "icu-message",
+				messageSource: "We couldn't load this form. Close it and try again."
+			},
+			countrySwitchFailedMessage: {
+				type: "string",
+				title: "Country change failed message",
+				format: "icu-message",
+				messageSource: "We couldn't change the country. Try again."
+			},
+			unsupportedCountryMessage: {
+				type: "string",
+				title: "Country not delivered message",
+				format: "icu-message",
+				messageSource: "The store doesn't deliver to this country."
+			}
+		}
+	}
+});
 const AccountAddressFormErrorDefinition = defineComponent({
 	name: "AccountAddressFormError",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormError,
+	content: AccountAddressFormErrorContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Error",
 		category: "content"
 	},
+	schema: {},
+	guideline: "The error about the whole form, as an alert: a refusal on a field this form does not show, an address that no longer exists, an expired session, a failed save, a form that could not load, a country change that could not load, or a country the store doesn't deliver to. Renders nothing when there is none. Must be inside AccountAddressFormRoot."
+});
+const AccountAddressFormSubmitContent = defineContentType({
+	id: "account-address-form-submit",
+	title: "Account Address Form Submit",
+	description: "Label of the control that saves the address form.",
 	schema: {
-		unrenderedFieldMessage: {
-			type: "string",
-			label: "Field not shown message"
-		},
-		notFoundMessage: {
-			type: "string",
-			label: "Address gone message"
-		},
-		unauthorizedMessage: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
 			type: "string",
-			label: "Session expired message"
-		},
-		saveFailedMessage: {
-			type: "string",
-			label: "Save failed message"
-		},
-		rulesFailedMessage: {
-			type: "string",
-			label: "Form failed to load message"
-		},
-		countrySwitchFailedMessage: {
-			type: "string",
-			label: "Country change failed message"
-		},
-		unsupportedCountryMessage: {
-			type: "string",
-			label: "Country not delivered message"
-		}
-	},
-	guideline: "The error about the whole form, as an alert: a refusal on a field this form does not show, an address that no longer exists, an expired session, a failed save, a form that could not load, a country change that could not load, or a country the store doesn't deliver to. Renders nothing when there is none. Must be inside AccountAddressFormRoot."
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Save"
+		} }
+	}
 });
 const AccountAddressFormSubmitDefinition = defineComponent({
 	name: "AccountAddressFormSubmit",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormSubmit,
+	content: AccountAddressFormSubmitContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Submit",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Button label"
-	} },
+	schema: {},
 	guideline: "Saves the form. Disabled until the country's rules have loaded, while a country change loads, and while a save is in flight, and marked busy then. Must be inside AccountAddressFormRoot."
 });
+const AccountAddressFormCancelContent = defineContentType({
+	id: "account-address-form-cancel",
+	title: "Account Address Form Cancel",
+	description: "Label of the control that closes the address form.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label",
+			format: "icu-message",
+			messageSource: "Cancel"
+		} }
+	}
+});
 const AccountAddressFormCancelDefinition = defineComponent({
 	name: "AccountAddressFormCancel",
 	importPath: "@vtex/faststore/components",
 	component: AccountAddressFormCancel,
+	content: AccountAddressFormCancelContent,
 	requiresContext: "account-address-form",
 	editor: {
 		label: "Account Address Form Cancel",
 		category: "action"
 	},
-	schema: { label: {
-		type: "string",
-		label: "Button label"
-	} },
+	schema: {},
 	guideline: "Closes the form and drops what was typed. On its own page it goes to the returnHref of its root. Must be inside AccountAddressFormRoot."
 });
 //#endregion
-export { AccountAddressFormCancel, AccountAddressFormCancelDefinition, AccountAddressFormError, AccountAddressFormErrorDefinition, AccountAddressFormFields, AccountAddressFormFieldsDefinition, AccountAddressFormRecipientName, AccountAddressFormRecipientNameDefinition, AccountAddressFormReference, AccountAddressFormReferenceDefinition, AccountAddressFormRoot, AccountAddressFormRootDefinition, AccountAddressFormSubmit, AccountAddressFormSubmitDefinition };
+export { AccountAddressFormCancel, AccountAddressFormCancelContent, AccountAddressFormCancelDefinition, AccountAddressFormContent, AccountAddressFormError, AccountAddressFormErrorContent, AccountAddressFormErrorDefinition, AccountAddressFormFields, AccountAddressFormFieldsContent, AccountAddressFormFieldsDefinition, AccountAddressFormRecipientName, AccountAddressFormRecipientNameContent, AccountAddressFormRecipientNameDefinition, AccountAddressFormReference, AccountAddressFormReferenceContent, AccountAddressFormReferenceDefinition, AccountAddressFormRoot, AccountAddressFormRootDefinition, AccountAddressFormSubmit, AccountAddressFormSubmitContent, AccountAddressFormSubmitDefinition };
 
 //# sourceMappingURL=account-address-form.js.map