@vtex/faststore 0.0.4 → 0.0.6

package/dist/matter/billing-address/billing-address.d.ts

@@ -0,0 +1,165 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/billing-address/billing-address.d.ts
+/**
+ * The `BillingAddress` matter (specs/billing-address.md, T11 of the Credit Card epic;
+ * docs/features/credit-card/rfc.md § D6). A "same as delivery" toggle (default on) plus, when off, a
+ * country-specific address form that persists via `$actions.payment.setBillingAddress`
+ * (already shipped by T4, zero consumers before this task).
+ *
+ * The shared `Address` composition RFC D6 names (shipping and billing as two control matters over
+ * one set of reusable particles) is DEFERRED — an implementation-time call the engineer resolved
+ * narrow (specs/billing-address.md Decision 1). This component builds its own controls and imports
+ * `countryDescriptors` from `../shipping-address/country-descriptors.js`; `matter/shipping-address/`
+ * is read, never modified — zero bytes of that directory change here.
+ *
+ * There is NO read-back path for a persisted billing address (specs/billing-address.md Decision 3):
+ * `type Payment` carries no `billingAddress` field, and `setBillingAddress` itself resolves only
+ * `userErrors`, discarding the mutation's own echo. This component declares no fragment and renders
+ * nothing below the toggle while "same as delivery" is checked, not even the delivery address
+ * (specs/stop-re-rendering-the-full-delivery.md, T175). The custom-address form always starts blank,
+ * and its own local state is the sole source of truth for what was typed.
+ *
+ * Only a boolean rides the shared `draft` (`billingAddressDifferent`, widened onto `PaymentDraft` by
+ * this task under sole ownership of `use-payment-method-selection.ts` — specs/billing-address.md
+ * Decision 5); the address itself is persisted server-side by this component's own action call, never
+ * passed through the draft. `setBillingAddress` is dispatched at exactly two points (Decision 9): the
+ * toggle's transition back to "same as delivery", and the custom form's explicit submit control —
+ * never on mount, never per keystroke.
+ *
+ * **`draft.billingAddressDifferent` only ever becomes `true` once `setBillingAddress` has actually
+ * persisted a different address (PR #544 N1).** Unchecking "same as delivery" opens the form
+ * (`formOpen`, local-only state below) but does not touch the draft — `gateway.ts`'s own doc comment
+ * ("`setBillingAddress` already persisted it … so the gateway reads it from there") is the contract
+ * this must not break: publishing `true` before anything is persisted would point the gateway at an
+ * `invoiceData` address nothing ever wrote. The engineer's own resolution for this (session of
+ * 2026-07-31): the new-address fields become required whenever "different" is selected, so this
+ * component's own submit blocks on an incomplete address (`isBillingAddressFormValid`) — but that
+ * alone cannot stop a shopper from declining "same as delivery" and clicking Place Order without ever
+ * opening the form's own submit control, which is why the draft write itself is gated on success, not
+ * merely the submit button.
+ *
+ * **The native `required` attribute below is cosmetic here, not an enforcement mechanism (PR #544
+ * N7).** This file renders no `aria-required` at all — only `required` (native HTML). There is no
+ * `<form>` in this render tree and the submit control is `type="button"`, so the browser's own
+ * constraint validation never runs — nothing in this file or its tests may claim this attribute itself
+ * prevents a shopper from placing an order with an unsaved address; the actual submit gate is
+ * `isBillingAddressFormValid`, read at the submit control's own `disabled` below. Since T38
+ * (specs/harden-and-verify-accessibility-across-the.md FR-6) each rendered field does carry a
+ * `Field.Error`, but it is driven by a local blur-tracked `touched` set and this same non-blank rule,
+ * never by `required`'s own native `ValidityState` — so this paragraph's point is unchanged: `required`
+ * itself still enforces nothing here. What this component owes, and
+ * does: make the gap **visible** — an inline `role="status"` notice while the form is open and nothing
+ * has been persisted yet — and publish that same fact (`setDraftBillingAddressUnsaved`) onto the
+ * shared draft, from the identical expression the notice renders from (T24,
+ * specs/cardholder-document-submit-gate.md FR-6). **The actual hard block lives elsewhere**: T24's
+ * `usePaymentSubmitGate()` reads that published fact and refuses Place Order client-side — this
+ * component's own job stops at publishing the fact and showing the notice, never at gating the CTA
+ * itself. See `specs/billing-address.md`'s Documentation Gaps #1 for the deferral this closes.
+ */
+/**
+ * Local-only values for the "different" address form, keyed by the country descriptor's own
+ * canonical field names — a plain string index signature, not a closed set of properties, so a future
+ * country descriptor introducing a new field name needs no type change here (mirrors
+ * `FieldDescriptor.name: string`'s own deliberately untyped choice; specs/billing-address.md
+ * Decision 7). `postalCode` and `country` are named explicitly because this component's own logic
+ * reads both directly. Never carries a `recipientName` key: `PaymentBillingAddressUpdateInput` has no
+ * such field (Decision 4) — the render loop filters it out of whatever the descriptor lists.
+ */
+export type BillingAddressFormDraft = Readonly<{
+  postalCode: string;
+  country: string;
+  [fieldName: string]: string;
+}>;
+export type BillingAddressProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+  /** The "same as delivery" toggle's own accessible label. */
+  sameAsDeliveryLabel?: string;
+  /** ISO 3166-1 alpha-3 default country for the custom-address form's country selector. */
+  defaultCountry?: string;
+  /** Label for the country selector inside the custom-address form. */
+  countryLabel?: string;
+  /** Label for the control that persists a custom billing address. */
+  submitLabel?: string;
+  /** Label on the submit control while the mutation is in flight. */
+  submitPendingLabel?: string;
+  /** Shown when the selected method's validator marks a billing address required. */
+  requiredNoticeLabel?: string;
+  /** Label for the recipient-name descriptor field. Not rendered by the custom-address form today
+   *  (`OMITTED_FORM_FIELD_NAMES` — the write contract has no matching input slot, Decision 4); kept
+   *  for parity with the other seven field labels this same map covers. */
+  recipientNameLabel?: string;
+  /** Label for the street descriptor field. */
+  streetLabel?: string;
+  /** Label for the street-number descriptor field. */
+  numberLabel?: string;
+  /** Label for the complement descriptor field. Its "(optional)" suffix is the only signal that the
+   *  field is not required — `OPTIONAL_FORM_FIELD_NAMES` drives the actual `required` attribute
+   *  independently, so authoring this without the suffix loses the optionality cue, not the behavior
+   *  (R7). */
+  complementLabel?: string;
+  /** Label for the neighborhood descriptor field. Unused when the active country's descriptor has no
+   *  `neighborhood` field (e.g. USA). */
+  neighborhoodLabel?: string;
+  /** Label for the city descriptor field. */
+  cityLabel?: string;
+  /** Label for the state descriptor field. */
+  stateLabel?: string;
+  /** Label for the postal-code descriptor field. */
+  postalCodeLabel?: string;
+  /** Shown while the form is open and no address has been persisted yet (PR #544 N7) — the shopper
+   * declined "same as delivery" but has not (or not yet again) had a submit succeed, so Place Order
+   * will bill the delivery address unless they save one first. Rendered `role="status"`, not
+   * `role="alert"`: it is a persistent, advisory condition of the form being open, not a one-off
+   * announcement reacting to a rejected action (see this file's own existing `-error` alert for that
+   * shape) — see `specs/billing-address.md`'s Accessibility Contract for the site count this choice is
+   * measured against. */
+  unsavedAddressNoticeLabel?: string;
+  /** Always-on billing-match disclaimer (requirement 12.20): tells the shopper their billing address
+   *  must match the one their card issuer or bank statement holds, so an AVS mismatch does not get the
+   *  order declined with no explanation on screen. Gated on this prop and `billingMatchNoticeVisible`
+   *  only — reads no `usePayment()` value, no local state, no `$data` (FR-4), unlike the two notices
+   *  above. */
+  billingMatchNoticeLabel?: string;
+  /** Switches the billing-match disclaimer above on or off. Defaults to `true` (Decision 5 — the
+   *  requirement's own intent); subordinate to `billingMatchNoticeLabel.trim()`, which alone can still
+   *  suppress an empty notice (FR-3) regardless of this prop's value. */
+  billingMatchNoticeVisible?: boolean;
+  /**
+   * Shown as a `Field.Error` under a required, blank, touched field (T38, FR-6/FR-7) — the same
+   * non-blank rule `isBillingAddressFormValid` already applies, except `complement`
+   * (`OPTIONAL_FORM_FIELD_NAMES`), which is never marked invalid. One prop, not one per field: every
+   * rendered field shares the same rule, so seven props would be seven ways to say the same sentence.
+   * Resolved through `resolveAuthoredCopy`.
+   */
+  fieldRequiredMessage?: string;
+  /** Disables the toggle, every form field, the country selector, and the submit control. */
+  disabled?: boolean;
+  /** Compiler-injected action surface; carries `payment.setBillingAddress`. */
+  $actions?: ComponentActions;
+};
+/**
+ * Whether the toggle reads as "same as delivery" — `true` whenever the published flag is `null`
+ * (never touched, the default) or `false` (explicitly reverted); only an explicit `true` means the
+ * shopper is on the custom-address path. Takes no closure over component state, so it is safe to call
+ * fresh on every render.
+ */
+export declare function resolveSameAsDelivery(billingAddressDifferent: boolean | null | undefined): boolean;
+/**
+ * Whether the custom-address form may be submitted. Stricter than the server's own
+ * `MISSING_BILLING_ADDRESS_FIELDS` floor ("sameAsDelivery is false but postalCode **or country** was
+ * omitted" [source: `core.graphql:2857-2858`]) — every field the active country's descriptor renders,
+ * except `complement` (`OPTIONAL_FORM_FIELD_NAMES`), must be non-blank (PR #544 N1 item 1: the
+ * engineer's own rule that the new-address fields are required once "different" is selected). Resolves
+ * the descriptor from `formDraft.country` itself rather than taking a second parameter, so this stays a
+ * single self-contained fact about one `BillingAddressFormDraft` value. `country` itself is not part of
+ * `descriptor.fields` (Decision 7) and is never checked here — it always carries a non-blank value from
+ * `defaultCountry` or the selector's own current value (review F12), so it can never be the field this
+ * gate would fail on.
+ */
+export declare function isBillingAddressFormValid(formDraft: BillingAddressFormDraft): boolean;
+export declare const BillingAddressDefinition: ComponentDefinition<BillingAddressProps>;
+export declare function BillingAddress({ sameAsDeliveryLabel, defaultCountry, countryLabel, submitLabel, submitPendingLabel, requiredNoticeLabel, unsavedAddressNoticeLabel, billingMatchNoticeLabel, billingMatchNoticeVisible, recipientNameLabel, streetLabel, numberLabel, complementLabel, neighborhoodLabel, cityLabel, stateLabel, postalCodeLabel, fieldRequiredMessage, disabled, className, $actions: $actionsProp, ...props }: BillingAddressProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=billing-address.d.ts.map

package/dist/matter/billing-address/billing-address.js

@@ -0,0 +1,408 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { Checkbox } from "../../particles/checkbox/checkbox.js";
+import { Field } from "../../particles/field/field.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { resolveAuthoredCopy } from "../../utils/resolve-authored-copy.js";
+import { Icon } from "../../particles/icon/icon.js";
+import { Select } from "../../particles/select/select.js";
+import { usePayment } from "../payment/payment.js";
+import { getAvailableCountries, getCountryDescriptor } from "../shipping-address/country-descriptors.js";
+import { useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/billing-address/billing-address.tsx
+/** Canonical field names the custom-address form never renders, even when a country descriptor
+* lists them — because the write contract has no matching input slot (Decision 4). */
+const OMITTED_FORM_FIELD_NAMES = /* @__PURE__ */ new Set(["recipientName"]);
+/** Descriptor field names the custom-address form renders but never marks required, even while
+* "different" is selected (PR #544 N1 item 1 — the engineer's own rule, verbatim: "if the person says
+* the address is different, the new address fields must be required"). `complement` is the one
+* exception: `complementLabel`'s own default already labels it optional ("Complement (optional)"),
+* and neither a real-world address nor the server's own write contract treats it as load-bearing.
+* Shared between the `required` attribute below and `isBillingAddressFormValid`, so the two never
+* drift apart. An authored `complementLabel` that drops the "(optional)" suffix loses that visual cue
+* without changing this set — the two are independent (R7, billing-address.md). */
+const OPTIONAL_FORM_FIELD_NAMES = /* @__PURE__ */ new Set(["complement"]);
+/**
+* English override for the descriptor's own country display names (`'Brasil'`, `'Estados Unidos'`) —
+* `country-descriptors.ts` is shared with `shipping-address` and out of this task's write scope
+* (`matter/shipping-address/` is read-only here), and its labels are Portuguese regardless of country.
+* T31 (specs/make-the-payment-components-authored-copy.md, Decision 5) turned the eight *field* labels
+* this same reasoning used to justify (`FIELD_LABELS_EN`) into schema props instead, but deliberately
+* left this one a plain map: a prop per ISO code does not scale the way eight named field-label props
+* do, and the epic block's own wording covers field labels only. Keyed by the descriptor's own ISO
+* code.
+*/
+const COUNTRY_LABELS_EN = {
+	BRA: "Brazil",
+	USA: "United States"
+};
+/** Resolves a country's English display name, falling back to the descriptor's own label (then the
+* raw ISO code) for a country this map does not yet cover. */
+function getCountryLabel(iso) {
+	return COUNTRY_LABELS_EN[iso] ?? getCountryDescriptor(iso)?.label ?? iso;
+}
+/**
+* Whether the toggle reads as "same as delivery" — `true` whenever the published flag is `null`
+* (never touched, the default) or `false` (explicitly reverted); only an explicit `true` means the
+* shopper is on the custom-address path. Takes no closure over component state, so it is safe to call
+* fresh on every render.
+*/
+function resolveSameAsDelivery(billingAddressDifferent) {
+	return billingAddressDifferent !== true;
+}
+/**
+* Whether the custom-address form may be submitted. Stricter than the server's own
+* `MISSING_BILLING_ADDRESS_FIELDS` floor ("sameAsDelivery is false but postalCode **or country** was
+* omitted" [source: `core.graphql:2857-2858`]) — every field the active country's descriptor renders,
+* except `complement` (`OPTIONAL_FORM_FIELD_NAMES`), must be non-blank (PR #544 N1 item 1: the
+* engineer's own rule that the new-address fields are required once "different" is selected). Resolves
+* the descriptor from `formDraft.country` itself rather than taking a second parameter, so this stays a
+* single self-contained fact about one `BillingAddressFormDraft` value. `country` itself is not part of
+* `descriptor.fields` (Decision 7) and is never checked here — it always carries a non-blank value from
+* `defaultCountry` or the selector's own current value (review F12), so it can never be the field this
+* gate would fail on.
+*/
+function isBillingAddressFormValid(formDraft) {
+	const descriptor = getCountryDescriptor(formDraft.country);
+	if (!descriptor) return false;
+	return descriptor.fields.filter((field) => !OMITTED_FORM_FIELD_NAMES.has(field.name) && !OPTIONAL_FORM_FIELD_NAMES.has(field.name)).every((field) => (formDraft[field.name] ?? "").trim().length > 0);
+}
+const BillingAddressDefinition = defineComponent({
+	name: "BillingAddress",
+	importPath: "@vtex/faststore/components",
+	component: BillingAddress,
+	requiresContext: "payment",
+	actions: { payment: ["setBillingAddress"] },
+	editor: {
+		label: "Billing Address",
+		category: "commerce"
+	},
+	schema: {
+		sameAsDeliveryLabel: {
+			type: "string",
+			default: "Billing address same as delivery address",
+			label: "Same-as-delivery toggle label"
+		},
+		defaultCountry: {
+			type: "string",
+			default: "BRA",
+			label: "Default country (ISO-3)"
+		},
+		countryLabel: {
+			type: "string",
+			default: "Country",
+			label: "Country field label"
+		},
+		submitLabel: {
+			type: "string",
+			default: "Save billing address",
+			label: "Submit button label"
+		},
+		submitPendingLabel: {
+			type: "string",
+			default: "Saving...",
+			label: "Submit button pending label"
+		},
+		requiredNoticeLabel: {
+			type: "string",
+			default: "This payment method requires a billing address.",
+			label: "Required-billing-address notice label"
+		},
+		unsavedAddressNoticeLabel: {
+			type: "string",
+			default: "No billing address has been saved yet — the delivery address will be used unless you save one below.",
+			label: "Unsaved-address notice label"
+		},
+		billingMatchNoticeLabel: {
+			type: "string",
+			default: "Your billing address must match the one on your card or bank statement, or your bank may decline the order.",
+			label: "Billing-match disclaimer"
+		},
+		billingMatchNoticeVisible: {
+			type: "boolean",
+			default: true,
+			label: "Show the billing-match disclaimer"
+		},
+		recipientNameLabel: {
+			type: "string",
+			default: "Recipient's name",
+			label: "Recipient name field label"
+		},
+		streetLabel: {
+			type: "string",
+			default: "Street",
+			label: "Street field label"
+		},
+		numberLabel: {
+			type: "string",
+			default: "Number",
+			label: "Number field label"
+		},
+		complementLabel: {
+			type: "string",
+			default: "Complement (optional)",
+			label: "Complement field label"
+		},
+		neighborhoodLabel: {
+			type: "string",
+			default: "Neighborhood",
+			label: "Neighborhood field label"
+		},
+		cityLabel: {
+			type: "string",
+			default: "City",
+			label: "City field label"
+		},
+		stateLabel: {
+			type: "string",
+			default: "State",
+			label: "State field label"
+		},
+		postalCodeLabel: {
+			type: "string",
+			default: "Postal code",
+			label: "Postal code field label"
+		},
+		fieldRequiredMessage: {
+			type: "string",
+			default: "This field is required.",
+			label: "Field required message"
+		},
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		}
+	},
+	guideline: "Same-as-delivery toggle (default on) for the billing address; when off, mounts a country-specific address form (reusing shipping-address's country descriptors) and persists it via $actions.payment.setBillingAddress on an explicit submit control. Re-checking the toggle dispatches sameAsDelivery: true only once an address was actually persisted (otherwise it's a local no-op — there's nothing on the server to revert). Publishes only a boolean (never the address) onto the shared payment draft for usePlaceOrder to read. While the form is open and nothing has been saved yet, renders an inline status notice — the required attribute on the form's own fields is not a submit gate; Place Order can still complete billed to the delivery address if the shopper never saves. Must be inside a PaymentSectionRoot or PaymentSectionController; place as a sibling of CardEntry/SavedCards/Installments/SaveCard/PlaceOrder, never nested inside any of them. See billing-address.md."
+});
+function BillingAddress({ sameAsDeliveryLabel = "Billing address same as delivery address", defaultCountry = "BRA", countryLabel = "Country", submitLabel = "Save billing address", submitPendingLabel = "Saving...", requiredNoticeLabel = "This payment method requires a billing address.", unsavedAddressNoticeLabel = "No billing address has been saved yet — the delivery address will be used unless you save one below.", billingMatchNoticeLabel = "Your billing address must match the one on your card or bank statement, or your bank may decline the order.", billingMatchNoticeVisible = true, recipientNameLabel = "Recipient's name", streetLabel = "Street", numberLabel = "Number", complementLabel = "Complement (optional)", neighborhoodLabel = "Neighborhood", cityLabel = "City", stateLabel = "State", postalCodeLabel = "Postal code", fieldRequiredMessage, disabled = false, className, $actions: $actionsProp, ...props }) {
+	const $actions = useActionsOverride($actionsProp);
+	const fieldLabels = {
+		recipientName: recipientNameLabel,
+		street: streetLabel,
+		number: numberLabel,
+		complement: complementLabel,
+		neighborhood: neighborhoodLabel,
+		city: cityLabel,
+		state: stateLabel,
+		postalCode: postalCodeLabel
+	};
+	const { draft, selectedMethod, setDraftBillingAddressDifferent, setDraftBillingAddressUnsaved, placing, cardPaymentCollapsed } = usePayment();
+	const instanceKey = useId();
+	const panelId = useId();
+	const [formDraft, setFormDraft] = useState(() => ({
+		postalCode: "",
+		country: getCountryDescriptor(defaultCountry) ? defaultCountry : getAvailableCountries()[0] ?? defaultCountry,
+		street: "",
+		number: "",
+		complement: "",
+		neighborhood: "",
+		city: "",
+		state: ""
+	}));
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState(null);
+	const [touched, setTouched] = useState(() => /* @__PURE__ */ new Set());
+	const [formOpen, setFormOpen] = useState(() => !resolveSameAsDelivery(draft.billingAddressDifferent));
+	useEffect(() => {
+		setFormOpen(!resolveSameAsDelivery(draft.billingAddressDifferent));
+	}, [draft.billingAddressDifferent]);
+	const sameAsDelivery = !formOpen;
+	const unsavedAddressNoticeVisible = !cardPaymentCollapsed && formOpen && draft.billingAddressDifferent !== true;
+	useEffect(() => {
+		setDraftBillingAddressUnsaved(instanceKey, unsavedAddressNoticeVisible);
+		return () => setDraftBillingAddressUnsaved(instanceKey, false);
+	}, [
+		instanceKey,
+		unsavedAddressNoticeVisible,
+		setDraftBillingAddressUnsaved
+	]);
+	const billingAddressRequired = selectedMethod?.validator.billingAddressRequired ?? false;
+	const fieldsDisabled = disabled || pending;
+	const requiredMessage = resolveAuthoredCopy(fieldRequiredMessage, "This field is required.");
+	const renderableFields = (getCountryDescriptor(formDraft.country)?.fields ?? []).filter((field) => !OMITTED_FORM_FIELD_NAMES.has(field.name));
+	async function handleSameAsDeliveryChange(nextSameAsDelivery) {
+		setError(null);
+		if (!nextSameAsDelivery) {
+			setFormOpen(true);
+			return;
+		}
+		if (draft.billingAddressDifferent !== true) {
+			setFormOpen(false);
+			return;
+		}
+		const setBillingAddress = $actions?.payment?.setBillingAddress;
+		if (!setBillingAddress) return;
+		setPending(true);
+		try {
+			const [firstError] = await setBillingAddress({ sameAsDelivery: true });
+			if (firstError) setError(firstError.message);
+			else {
+				setDraftBillingAddressDifferent(false);
+				setFormOpen(false);
+			}
+		} finally {
+			setPending(false);
+		}
+	}
+	function handleFieldChange(name, value) {
+		setFormDraft((prev) => ({
+			...prev,
+			[name]: value
+		}));
+	}
+	/** Marks a field touched on its first blur (T38, FR-6). Idempotent on every later blur — a `Set`
+	* already containing `name` is returned unchanged, so this never triggers a redundant re-render. */
+	function handleFieldBlur(name) {
+		setTouched((prev) => prev.has(name) ? prev : new Set(prev).add(name));
+	}
+	/**
+	* A rendered field is invalid once the shopper has touched it, it is blank, and it is not
+	* `complement` (T38, FR-6, INV-3/INV-4). Mirrors `isBillingAddressFormValid`'s own per-field rule —
+	* the two are never allowed to disagree about which fields are required, since both read
+	* `OPTIONAL_FORM_FIELD_NAMES`.
+	*/
+	function isFieldInvalid(name) {
+		return touched.has(name) && !OPTIONAL_FORM_FIELD_NAMES.has(name) && (formDraft[name] ?? "").trim().length === 0;
+	}
+	function handleCountryChange(value) {
+		setFormDraft((prev) => ({
+			...prev,
+			country: value ?? prev.country
+		}));
+	}
+	async function handleSubmit() {
+		const setBillingAddress = $actions?.payment?.setBillingAddress;
+		setError(null);
+		if (!setBillingAddress) return;
+		const isFieldActive = (name) => renderableFields.some((field) => field.name === name);
+		setPending(true);
+		try {
+			const [firstError] = await setBillingAddress({
+				sameAsDelivery: false,
+				postalCode: formDraft.postalCode,
+				country: formDraft.country,
+				...isFieldActive("street") ? { street: formDraft.street } : {},
+				...isFieldActive("number") ? { number: formDraft.number } : {},
+				...isFieldActive("complement") ? { complement: formDraft.complement } : {},
+				...isFieldActive("neighborhood") ? { neighborhood: formDraft.neighborhood } : {},
+				...isFieldActive("city") ? { city: formDraft.city } : {},
+				...isFieldActive("state") ? { state: formDraft.state } : {}
+			});
+			if (firstError) setError(firstError.message);
+			else setDraftBillingAddressDifferent(true);
+		} finally {
+			setPending(false);
+		}
+	}
+	if (cardPaymentCollapsed) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		inert: placing,
+		"aria-disabled": placing || void 0,
+		"data-fs-billing-address": "",
+		...placing ? { "data-fs-billing-address-placing": "" } : {},
+		...pending ? { "data-fs-billing-address-pending": "" } : {},
+		...sameAsDelivery ? { "data-fs-billing-address-same-as-delivery": "" } : {},
+		children: [
+			billingMatchNoticeVisible && billingMatchNoticeLabel.trim() ? /* @__PURE__ */ jsx("p", {
+				"data-fs-billing-address-match-notice": "",
+				children: billingMatchNoticeLabel
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				"data-fs-billing-address-toggle-field": "",
+				children: [/* @__PURE__ */ jsx(Field.Root, {
+					disabled: fieldsDisabled,
+					"data-fs-field-root": "",
+					children: /* @__PURE__ */ jsxs(Field.Label, { children: [/* @__PURE__ */ jsx(Checkbox.Root, {
+						checked: sameAsDelivery,
+						onCheckedChange: handleSameAsDeliveryChange,
+						disabled: fieldsDisabled,
+						"aria-controls": panelId,
+						children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Icon, { name: "checked" }) })
+					}), sameAsDeliveryLabel] })
+				}), billingAddressRequired ? /* @__PURE__ */ jsx("p", {
+					"data-fs-billing-address-required-note": "",
+					children: requiredNoticeLabel
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: panelId,
+				"data-fs-billing-address-panel": "",
+				hidden: sameAsDelivery,
+				children: sameAsDelivery ? null : /* @__PURE__ */ jsxs("div", {
+					"data-fs-billing-address-form": "",
+					children: [
+						unsavedAddressNoticeVisible ? /* @__PURE__ */ jsx("p", {
+							role: "status",
+							"data-fs-billing-address-unsaved-notice": "",
+							children: unsavedAddressNoticeLabel
+						}) : null,
+						/* @__PURE__ */ jsxs(Field.Root, {
+							disabled: fieldsDisabled,
+							"data-fs-field-root": "",
+							"data-fs-billing-address-field": "country",
+							children: [/* @__PURE__ */ jsx(Field.Label, { children: countryLabel }), /* @__PURE__ */ jsxs(Select.Root, {
+								value: formDraft.country,
+								onValueChange: handleCountryChange,
+								disabled: fieldsDisabled,
+								required: true,
+								children: [/* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, { children: (value) => value ? getCountryLabel(value) : value }), /* @__PURE__ */ jsx(Select.Icon, { children: "▾" })] }), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Popup, { children: /* @__PURE__ */ jsx(Select.List, { children: getAvailableCountries().map((iso) => {
+									const label = getCountryLabel(iso);
+									return /* @__PURE__ */ jsx(Select.Item, {
+										value: iso,
+										label,
+										children: label
+									}, iso);
+								}) }) }) }) })]
+							})]
+						}),
+						renderableFields.map((field) => {
+							const invalid = isFieldInvalid(field.name);
+							return /* @__PURE__ */ jsxs(Field.Root, {
+								disabled: fieldsDisabled,
+								invalid,
+								"data-fs-field-root": "",
+								"data-fs-billing-address-field": field.name,
+								children: [
+									/* @__PURE__ */ jsx(Field.Label, { children: fieldLabels[field.name] || field.label }),
+									/* @__PURE__ */ jsx(Field.Control, {
+										value: formDraft[field.name] ?? "",
+										onChange: (event) => handleFieldChange(field.name, event.currentTarget.value),
+										onBlur: () => handleFieldBlur(field.name),
+										disabled: fieldsDisabled,
+										required: !OPTIONAL_FORM_FIELD_NAMES.has(field.name)
+									}),
+									invalid ? /* @__PURE__ */ jsx(Field.Error, {
+										match: true,
+										children: requiredMessage
+									}) : null
+								]
+							}, field.name);
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: handleSubmit,
+							disabled: fieldsDisabled || !isBillingAddressFormValid(formDraft),
+							"data-fs-billing-address-submit": "",
+							children: pending ? submitPendingLabel : submitLabel
+						})
+					]
+				})
+			}),
+			error ? /* @__PURE__ */ jsx("div", {
+				role: "alert",
+				"data-fs-billing-address-error": "",
+				children: error
+			}) : null
+		]
+	});
+}
+//#endregion
+export { BillingAddress, BillingAddressDefinition, isBillingAddressFormValid, resolveSameAsDelivery };
+
+//# sourceMappingURL=billing-address.js.map