@vtex/faststore 0.0.10 → 0.0.12

package/dist/matter/client-profile-form/client-profile-fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"client-profile-fieldset.js","names":[],"sources":["../../../src/matter/client-profile-form/client-profile-fieldset.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport type { DocumentType } from '../../particles/document-field/document-field.js';\nimport { DOCUMENTS, DocumentField, isSupportedDocumentType } from '../../particles/document-field/document-field.js';\nimport type { FieldRule } from '../../particles/field/field.js';\nimport {\n  Field,\n  FieldBinding,\n  FieldsetFieldContext,\n  useFieldsetField,\n  useFieldsetFieldNames,\n  useNoAncestorFieldset,\n} from '../../particles/field/field.js';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { useFormRegistry } from '../../particles/form/form.js';\nimport type { PhoneCountry } from '../../particles/phone-field/phone-field.js';\nimport { PhoneField, toE164 } from '../../particles/phone-field/phone-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { useEntityDataResolved } from '../../sdk/data/entity-resolution-context.js';\nimport { useReactiveDataSettled } from '../../sdk/data/use-reactive-data-settled.js';\nimport type { ClientProfileUpdateInput } from '../../sdk/identity/operations.js';\nimport { useSession } from '../session/session.js';\n\n/**\n * `ClientProfileFieldset` — the composable, one-Save write of the `ClientProfile` sibling entity\n * (RFC: Composable Entity Forms, `Proposal > Design > The fieldset`). It registers itself with the\n * enclosing `FormRoot` under the `clientProfile` namespace and dispatches\n * `$actions.identity.clientProfileUpdate` for its own submit slot; it renders no `<form>` of its own.\n *\n * The four controls below are the smallest placeable unit: each calls `useFieldsetField` for its full\n * field name, renders a `FieldBinding` carrying the field's static facts, and — inside it — either the\n * default anatomy or the author's own children. No control's field contract carries a blocking\n * `RegisterOptions` key (no `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`); requiredness\n * on the phone control rides on its own `requirement` prop instead, which only ever gates required\n * validation — a field the store does not want is omitted from the page, not switched off by a prop.\n *\n * The fieldset's context name is `client-profile-fieldset`, not `client-profile`: the shipped\n * `ClientProfilePhoneControl` (`matter/client-profile/client-profile.tsx`) already requires\n * `client-profile` and writes on blur, so reusing that name here would let an on-blur control compile\n * inside this batched fieldset and write immediately. `ClientProfileFieldsetPhoneControl` carries the\n * same container prefix as the context it requires, naming the collision rather than hiding it.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — colocated on the fieldset, its own data root\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ClientProfileFieldsetData on Query {\n    clientProfile {\n      __typename\n      id\n      firstName\n      lastName\n      phone\n      document\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The `$data` slice forwarded by the reactive runtime — the ClientProfile sibling entity, unwrapped. */\nexport type ClientProfileFieldsetData = {\n  firstName?: string | null;\n  lastName?: string | null;\n  phone?: string | null;\n  document?: string | null;\n} | null;\n\n/** The four keys this fieldset registers under its namespace. */\ntype ProfileFieldKey = 'firstName' | 'lastName' | 'phone' | 'document';\n\n/** What the fieldset publishes to its controls. Carries no live value — react-hook-form owns those. */\ntype ClientProfileFieldsetContextValue = Readonly<{\n  namespace: 'clientProfile';\n  /** Seeds, resolved from `$data`. Empty string, never null, so a control never seeds `undefined`. */\n  saved: Readonly<Record<ProfileFieldKey, string>>;\n  /** True when the session reports `canEditData: false`. */\n  readOnly: boolean;\n  /** Phone mask/validation country, from the fieldset's own prop. */\n  country: PhoneCountry;\n  /** Locale document type; the document control renders only when supported. */\n  documentType: string | undefined;\n  /** The fieldset's own validation rules, per key. Present and empty today (Decision 6). */\n  rules: Readonly<Partial<Record<ProfileFieldKey, FieldRule>>>;\n}>;\n\n/** No control publishes a rule today — a blocking `RegisterOptions` key would reopen the same submit\n * block for a read-only session (Decision 6): `readOnly` disables a control's rendered `<input>` via a\n * plain HTML attribute, never react-hook-form's own `disabled` registration option (`field.tsx`'s\n * `useController` call takes no `disabled`), so a required field would stay fully registered and\n * validated while the shopper has no way to focus or edit it. Kept as a stable empty object so the\n * context value's identity does not churn on every render. */\nconst NO_RULES: Readonly<Partial<Record<ProfileFieldKey, FieldRule>>> = {};\n\n/**\n * Rows `ClientProfileFieldsetSkeleton` draws when nobody says otherwise: one per control in the full\n * anatomy — first name, last name, phone, document. It is a default and not a derivation, because\n * the composed children are opaque here. A page that composes fewer sets `skeletonCount` to what it\n * composed, or the form jumps by the difference when the controls take the skeleton's place.\n */\nconst CLIENT_PROFILE_SKELETON_ROWS = 4;\n\nconst CLIENT_PROFILE_FIELDSET_UNSET = Symbol('ClientProfileFieldsetContextUnset');\n\nconst ClientProfileFieldsetContext = createContext<\n  ClientProfileFieldsetContextValue | typeof CLIENT_PROFILE_FIELDSET_UNSET\n>(CLIENT_PROFILE_FIELDSET_UNSET);\n\nfunction useClientProfileFieldsetContext(): ClientProfileFieldsetContextValue {\n  const ctx = useContext(ClientProfileFieldsetContext);\n  if (ctx === CLIENT_PROFILE_FIELDSET_UNSET) {\n    throw new Error('ClientProfileFieldset controls must be used inside ClientProfileFieldset.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type ClientProfileFieldsetProps = {\n  /** Phone mask/validation country, provided to the phone control via context. */\n  country?: PhoneCountry;\n  /** Locale document type; the document control renders only when supported. */\n  documentType?: string;\n  /** Placeholder rows the loading skeleton draws. Set it to the number of controls composed here. */\n  skeletonCount?: number;\n  /** Announced politely while the profile resolves. Blank means no announcement. */\n  loadingLabel?: string;\n  /** Announced politely once the controls mount. Blank means no announcement. */\n  loadedLabel?: string;\n  /** Accessible name of the `<fieldset>` group. Blank means no name is exposed. */\n  groupLabel?: string;\n  className?: string;\n  children?: ReactNode;\n  /** `ClientProfileFieldsetData` slice forwarded by the reactive runtime. */\n  $data?: ClientProfileFieldsetData;\n  /** Compiler-injected; carries `identity.clientProfileUpdate`. */\n  $actions?: ComponentActions;\n};\n\ntype ProfileTextControlProps = { label?: string; placeholder?: string; className?: string; children?: ReactNode };\n\nexport type ClientProfileFirstNameControlProps = ProfileTextControlProps;\nexport type ClientProfileLastNameControlProps = ProfileTextControlProps;\n\nexport type ClientProfileFieldsetPhoneControlProps = {\n  label?: string;\n  placeholder?: string;\n  /**\n   * Raises the field to required. The composite owns it; the contract carries no rule (Decision 6),\n   * so here the raise is the whole of the resolution. Unset is no opinion, which leaves the phone\n   * optional.\n   */\n  requirement?: 'mandatory' | 'optional';\n  errorInvalid?: string;\n  errorRequired?: string;\n  className?: string;\n  /** Given, replaces PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy. */\n  children?: ReactNode;\n};\n\nexport type ClientProfileDocumentControlProps = {\n  label?: string;\n  placeholder?: string;\n  errorMessage?: string;\n  className?: string;\n  /** Given, replaces DocumentField's default Field.Label + DocumentFieldInput + Field.Error anatomy. */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ClientProfileFieldsetDefinition = defineComponent<ClientProfileFieldsetProps>({\n  name: 'ClientProfileFieldset',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFieldset,\n  fragment,\n  fetchStrategy: 'reactive',\n  skeleton: ClientProfileFieldsetSkeleton,\n  requiresContext: ['form', 'session'],\n  providesContext: 'client-profile-fieldset',\n  actions: { identity: ['clientProfileUpdate'] },\n  editor: { label: 'Client Profile Fieldset', category: 'identity' },\n  schema: {\n    country: { type: 'string', default: 'US', label: 'Phone country (US or BR)' },\n    documentType: { type: 'string', label: 'Document type (e.g. CPF)' },\n    skeletonCount: { type: 'number', default: 4, label: 'Skeleton rows' },\n    loadingLabel: { type: 'string', default: 'Loading your details', label: 'Loading announcement' },\n    loadedLabel: { type: 'string', default: 'Your details are ready', label: 'Loaded announcement' },\n    groupLabel: { type: 'string', default: 'Your details', label: 'Accessible group name' },\n  },\n  guideline:\n    'Registers a batched write of the ClientProfile entity with the enclosing FormRoot; renders one Fieldset.Root and no <form>. Must be inside a FormRoot with a SessionRoot ancestor. Compose ClientProfileFirstNameControl / ClientProfileLastNameControl / ClientProfileFieldsetPhoneControl / ClientProfileDocumentControl as children, in any order. The controls mount only once the profile has resolved, with skeletonCount placeholder rows in their place until then — set it to the number of controls composed, or the form jumps by the difference. Style the announcement sr-only. Dispatches only the fields the shopper changed. groupLabel names the group as its accessible name; blank emits no aria-label, and a composed FieldsetLegend wins over it.',\n});\n\nexport const ClientProfileFirstNameControlDefinition = defineComponent<ClientProfileFirstNameControlProps>({\n  name: 'ClientProfileFirstNameControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFirstNameControl,\n  requiresContext: 'client-profile-fieldset',\n  providesContext: 'field',\n  editor: { label: 'Client Profile First Name Control', category: 'identity' },\n  schema: {\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n  },\n  guideline:\n    \"The bound first-name control; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order.\",\n});\n\nexport const ClientProfileLastNameControlDefinition = defineComponent<ClientProfileLastNameControlProps>({\n  name: 'ClientProfileLastNameControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileLastNameControl,\n  requiresContext: 'client-profile-fieldset',\n  providesContext: 'field',\n  editor: { label: 'Client Profile Last Name Control', category: 'identity' },\n  schema: {\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n  },\n  guideline:\n    \"The bound last-name control; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order.\",\n});\n\nexport const ClientProfileFieldsetPhoneControlDefinition = defineComponent<ClientProfileFieldsetPhoneControlProps>({\n  name: 'ClientProfileFieldsetPhoneControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFieldsetPhoneControl,\n  requiresContext: 'client-profile-fieldset',\n  // Provides both names (mirrors shipping-address.tsx:595's Decision 7): 'field' is what every\n  // fieldset Control declares (RFC:503), but this control also composes PhoneField, whose\n  // PhoneFieldInput part requires 'phone-field' — a page composing\n  // ClientProfileFieldsetPhoneControl > PhoneFieldInput would otherwise fail the build with a\n  // context-constraint violation, since PhoneField itself (the only 'phone-field' provider) never\n  // appears in the page schema (finding F1).\n  providesContext: ['field', 'phone-field'],\n  editor: { label: 'Client Profile Fieldset Phone Control', category: 'identity' },\n  schema: {\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    // No default: an unset requirement is no opinion, not a raise to mandatory.\n    requirement: { type: ['mandatory', 'optional'] as const, label: 'Requirement' },\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    errorInvalid: { type: 'string', label: 'Invalid error message' },\n    errorRequired: { type: 'string', label: 'Required error message' },\n  },\n  guideline:\n    \"The bound phone control; must be a descendant of ClientProfileFieldset. Distinct from ClientProfilePhoneControl (matter/client-profile), which writes on blur and requires the client-profile context — the two cannot compile into each other's container. Composes the PhoneField particle: recomposable (RFC:503) — given children, they replace PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order; childless keeps today's order. Its className styles PhoneField's own root, the node that lays out label, input and error — not the wrapper, which carries only the data-fs-client-profile-fieldset-field=\\\"phone\\\" styling hook. A store that does not want a phone field omits this element from the page: requirement only governs required validation, never visibility.\",\n});\n\nexport const ClientProfileDocumentControlDefinition = defineComponent<ClientProfileDocumentControlProps>({\n  name: 'ClientProfileDocumentControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileDocumentControl,\n  requiresContext: 'client-profile-fieldset',\n  // Provides both names, same reasoning as ClientProfileFieldsetPhoneControlDefinition above: this\n  // control composes DocumentField, whose DocumentFieldInput part requires 'document-field' — a page\n  // composing ClientProfileDocumentControl > DocumentFieldInput would otherwise fail the build\n  // (finding F1).\n  providesContext: ['field', 'document-field'],\n  editor: { label: 'Client Profile Document Control', category: 'identity' },\n  schema: {\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n  },\n  guideline:\n    \"The bound tax-document control; must be a descendant of ClientProfileFieldset. Renders nothing, and registers no field name, when the fieldset's documentType is unsupported. Composes the DocumentField particle: recomposable (RFC:503) — given children, they replace DocumentField's default Field.Label + DocumentFieldInput + Field.Error anatomy, in any order; childless keeps today's order.\",\n});\n\n// ---------------------------------------------------------------------------\n// Fieldset root\n// ---------------------------------------------------------------------------\n\n/**\n * Registers a batched write of the `ClientProfile` entity with the enclosing `FormRoot`\n * (`registerFieldset`, namespace `clientProfile`) on mount, unconditionally — so this fieldset keeps its\n * original dispatch slot even while its own query is still resolving. Its children — the seed values and\n * the field-name registry its controls need — render only once the entity has resolved; until then the\n * `Fieldset.Root` carries `-pending` and renders `ClientProfileFieldsetSkeleton` (Decision 5).\n * `dispatch` and `toPayload` are `useCallback([])`-stable and read `$actions`/`country`/`documentType`\n * through a ref, so the registration effect runs exactly once per mount regardless of how often the\n * parent re-renders.\n *\n * \"Resolved\" is two conditions, because `$data` alone cannot answer it. Under the reactive runtime the\n * slice is defined from the first render — `useReactiveEntity` hands down `fallbackData` while the cache\n * read is incomplete — so an empty server answer looks exactly like a resolved one, and the controls\n * would mount and seed `''` before the shopper's real profile arrives. `useSeedAdoption` re-seeds a\n * clean field with `defaultValue` on every render, but once the field turns dirty no later seed\n * ever reaches it again: a shopper who starts typing before the real profile arrives locks that\n * empty seed in for good, and even a shopper who does not type sees the field flash from `''` to\n * the real data. `useReactiveDataSettled` supplies the missing half: the page query's own\n * in-flight state, latched so it only ever goes pending → settled. The `$data === undefined` half still\n * carries trees with no reactive root above them, where the slice arrives as a plain prop.\n *\n * Both ends of that wait are spoken: the fieldset carries `aria-busy` while it lasts and holds a polite\n * live region that announces `loadingLabel` and then `loadedLabel`. Style the region `sr-only` — it is\n * text meant for a screen reader, not for the page.\n */\nexport function ClientProfileFieldset({\n  country = 'US',\n  documentType,\n  skeletonCount = CLIENT_PROFILE_SKELETON_ROWS,\n  loadingLabel = 'Loading your details',\n  loadedLabel = 'Your details are ready',\n  groupLabel = 'Your details',\n  className,\n  children,\n  $data: $dataProp,\n  $actions: $actionsProp,\n}: ClientProfileFieldsetProps) {\n  // Nesting fieldsets has no legitimate use: useFieldsetField resolves the *nearest*\n  // FieldsetFieldContext, not the one owning a control's actual namespace, so a control nested two\n  // fieldsets deep would silently register under the wrong one and its write would be discarded on\n  // submit. Runtime registry integrity, mirroring the namespace-collision throw FormRoot already ships\n  // (form.tsx:280-288).\n  useNoAncestorFieldset('ClientProfileFieldset');\n\n  const $data = useDataOverride($dataProp);\n\n  const $actions = useActionsOverride($actionsProp);\n  // Three conditions, not two. `useReactiveDataSettled` latches one way and never re-arms, so on its\n  // own it answers \"has this page ever resolved\", not \"is what I am holding right now the server's\n  // answer\" — after the page query's entity ref moves to one this cache never stored, or its root is\n  // skipped for want of a variable, the slice silently regresses to `fallbackData` while the latch\n  // still reads settled. `useEntityDataResolved` is the per-entity half: unlatched, so it follows the\n  // slice back down and returns this fieldset to its skeleton instead of leaving live controls seeded\n  // from a placeholder.\n  const settled = useReactiveDataSettled();\n  const sliceResolved = useEntityDataResolved();\n  const resolved = settled && sliceResolved && $data !== undefined;\n  // Also enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { canEditData } = useSession();\n  const readOnly = !canEditData;\n\n  // Runs before useFormContext() below: useFormRegistry() throws the friendly \"Form parts must be used\n  // inside FormRoot.\" error when no FormRoot is above, so a FormRoot-less render fails there rather than\n  // reaching the getFieldState destructure, which throws an unhelpful TypeError instead (useFormContext()\n  // resolves to null outside a FormRoot, and destructuring null throws).\n  const { registerFieldset } = useFormRegistry();\n\n  // Decision 3, as later narrowed: this fieldset still reads dirtiness imperatively, but the rule is no\n  // longer the form's. `FormRoot` subscribes `dirtyFields` in render and decides which fieldsets to\n  // dispatch from it, by the fields each one has mounted, on react-hook-form's documented contract.\n  //\n  // The imperative read survives here because it asks a different question in a different place: which\n  // of *this* fieldset's own fields changed, resolved inside `toPayload` at submit time, by full\n  // registered field name — the shape `getFieldState` documents. `useFormContext()` adds no\n  // `formState` subscription of its own; one is created only when a caller reads a formState key off\n  // the `useForm`/`useFormState` proxy (or hands that already-subscribed object to `getFieldState`'s\n  // second argument). Calling `getFieldState(name)` with no second argument reads the current internal\n  // state directly, so this fieldset root still does not re-render on a keystroke.\n  const { getFieldState } = useFormContext();\n\n  const latest = useRef({ $actions, country, documentType, readOnly, getFieldState });\n  useEffect(() => {\n    latest.current = { $actions, country, documentType, readOnly, getFieldState };\n  }, [$actions, country, documentType, readOnly, getFieldState]);\n\n  const { registry: fieldsetRegistry, getFieldNames } = useFieldsetFieldNames('clientProfile');\n\n  const dispatch = useCallback(async (payload: Record<string, unknown>) => {\n    // Defence-in-depth: the UI disables every input while read-only, but `FormClear` sets values (and\n    // marks them dirty) on every registered field regardless of that disabled attribute — react-hook-\n    // form's own `useController` calls never receive a `disabled` registration option, so it has no\n    // notion of \"disabled\" of its own. Guarding here keeps the write from reaching the network even if\n    // some other composition dirties this fieldset while canEditData is false (the server also refuses,\n    // but a client-side guard should not depend on that).\n    if (latest.current.readOnly) {\n      throw new Error('ClientProfileFieldset cannot dispatch while the session is read-only.');\n    }\n    const update = latest.current.$actions?.identity?.clientProfileUpdate;\n    // Throwing is the contract's failure path: FormRoot catches it and records this fieldset's failure\n    // (form.tsx:264-266). Returning [] would report an unqualified success for a write that never\n    // happened.\n    if (!update) throw new Error('ClientProfileFieldset requires $actions.identity.clientProfileUpdate.');\n    return update(payload as ClientProfileUpdateInput);\n  }, []);\n\n  const toPayload = useCallback((values: Record<string, unknown>): Record<string, unknown> => {\n    const { country: activeCountry, documentType: activeDocumentType, getFieldState } = latest.current;\n    // FR-5: a key is emitted only when the shopper actually changed it — presence in `values` alone\n    // (every registered field is always present) is not enough. `dirtyFields` is not read directly;\n    // `getFieldState` is called with no second argument, which reads react-hook-form's current\n    // internal state without subscribing to it (Decision 3).\n    const isDirty = (key: ProfileFieldKey) => getFieldState(`clientProfile.${key}`).isDirty;\n    const payload: Record<string, string> = {};\n    if ('firstName' in values && isDirty('firstName')) payload.firstName = String(values.firstName ?? '').trim();\n    if ('lastName' in values && isDirty('lastName')) payload.lastName = String(values.lastName ?? '').trim();\n    if ('phone' in values && isDirty('phone')) {\n      const raw = String(values.phone ?? '').trim();\n      // toE164 on a blank value returns the bare country code, which would write \"+55\" over the\n      // shopper's number and fail every later save.\n      payload.phone = raw ? toE164(raw, activeCountry) : '';\n    }\n    // The type's own sanitiser (digits for CPF, SSN and SIN, letters kept for RFC). Omitted when the type is\n    // not supported: a value for a control that is no longer shown is never sent.\n    if ('document' in values && isDirty('document') && isSupportedDocumentType(activeDocumentType)) {\n      // The control only ever writes a string (the masked input's own value); `values` is typed `unknown`\n      // because the fieldset contract carries every field's value, so it is narrowed here, not stringified.\n      const rawDocument = typeof values.document === 'string' ? values.document : '';\n      payload.document = DOCUMENTS[activeDocumentType].sanitize(rawDocument);\n    }\n    return payload;\n  }, []);\n\n  useEffect(\n    () =>\n      registerFieldset({\n        namespace: 'clientProfile',\n        getFieldNames,\n        dispatch,\n        toPayload,\n        // Decision 1: the register is a machine identifier, the kebab-case ASCII rendering of this\n        // registration's own `namespace` (`clientProfile` → `client-profile`) — not authored per\n        // page (Decision 2).\n        label: 'client-profile',\n      }),\n    [registerFieldset, getFieldNames, dispatch, toPayload],\n  );\n\n  const saved = useMemo<Readonly<Record<ProfileFieldKey, string>>>(\n    () => ({\n      firstName: $data?.firstName ?? '',\n      lastName: $data?.lastName ?? '',\n      phone: $data?.phone ?? '',\n      document: $data?.document ?? '',\n    }),\n    [$data],\n  );\n\n  const contextValue = useMemo<ClientProfileFieldsetContextValue>(\n    () => ({ namespace: 'clientProfile', saved, readOnly, country, documentType, rules: NO_RULES }),\n    [saved, readOnly, country, documentType],\n  );\n\n  // Assistive technology only reports a change inside a region that was already in the tree, so a\n  // region mounted together with its text announces nothing. The region therefore sits in both\n  // branches and starts empty, with the wait written on the pass after mount and replaced — not\n  // cleared — once the controls are up: the skeleton is `aria-hidden`, so without this second\n  // message the form would materialise in silence (WCAG 2.1 SC 4.1.3).\n  const [announcement, setAnnouncement] = useState('');\n  const announced = resolved ? loadedLabel : loadingLabel;\n  useEffect(() => {\n    setAnnouncement(announced);\n  }, [announced]);\n\n  return (\n    <Fieldset.Root\n      className={className}\n      disabled={readOnly}\n      aria-busy={resolved ? undefined : true}\n      // FR-12: blank (or whitespace-only) means no name is exposed, mirroring the loadingLabel/\n      // loadedLabel convention. On the root itself (FR-13), so it is identical whether the fieldset\n      // is pending or resolved; a page-composed FieldsetLegend still wins via aria-labelledby.\n      {...(groupLabel?.trim() ? { 'aria-label': groupLabel } : {})}\n      data-fs-client-profile-fieldset=\"\"\n      {...(resolved ? {} : { 'data-fs-client-profile-fieldset-pending': '' })}\n      {...(readOnly ? { 'data-fs-client-profile-fieldset-readonly': '' } : {})}\n    >\n      {resolved ? (\n        <FieldsetFieldContext.Provider value={fieldsetRegistry}>\n          <ClientProfileFieldsetContext.Provider value={contextValue}>{children}</ClientProfileFieldsetContext.Provider>\n        </FieldsetFieldContext.Provider>\n      ) : (\n        <ClientProfileFieldsetSkeleton count={skeletonCount} />\n      )}\n      <output aria-live=\"polite\" data-fs-client-profile-fieldset-announcement=\"\">\n        {announcement}\n      </output>\n    </Fieldset.Root>\n  );\n}\n\n/**\n * The loading state of the fieldset, rendered in place of the controls until the entity resolves and\n * declared as the definition's `skeleton`. Purely visual: the wait is spoken by the fieldset's own live\n * region, so this is hidden from assistive technology rather than announced twice.\n */\nexport function ClientProfileFieldsetSkeleton({\n  count = CLIENT_PROFILE_SKELETON_ROWS,\n  className,\n  ...props\n}: ComponentPropsWithRef<'div'> & { count?: number }) {\n  return (\n    <div {...props} className={className} data-fs-client-profile-fieldset-skeleton=\"\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => (\n        <span key={i} data-fs-client-profile-fieldset-skeleton-field=\"\" />\n      ))}\n    </div>\n  );\n}\n\nClientProfileFieldset.Skeleton = ClientProfileFieldsetSkeleton;\n\n// ---------------------------------------------------------------------------\n// Text controls — first name, last name\n// ---------------------------------------------------------------------------\n\nfunction ProfileTextControl({\n  fieldKey,\n  attr,\n  autoComplete,\n  defaultLabel,\n  label,\n  placeholder,\n  className,\n  children,\n}: {\n  fieldKey: 'firstName' | 'lastName';\n  attr: string;\n  autoComplete: string;\n  defaultLabel: string;\n  label?: string;\n  placeholder?: string;\n  className?: string;\n  children?: ReactNode;\n}) {\n  const { namespace, saved, readOnly, rules } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, fieldKey);\n\n  return (\n    <FieldBinding\n      name={name}\n      label={label ?? defaultLabel}\n      placeholder={placeholder}\n      defaultValue={saved[fieldKey]}\n      rule={rules[fieldKey]}\n      disabled={readOnly}\n      autoComplete={autoComplete}\n    >\n      <Field.Root className={className} data-fs-client-profile-fieldset-field={attr}>\n        {children ?? (\n          <>\n            <Field.Label />\n            <Field.Control />\n            <Field.Error />\n          </>\n        )}\n      </Field.Root>\n    </FieldBinding>\n  );\n}\n\nexport function ClientProfileFirstNameControl({\n  label,\n  placeholder,\n  className,\n  children,\n}: ClientProfileFirstNameControlProps) {\n  return (\n    <ProfileTextControl\n      fieldKey=\"firstName\"\n      attr=\"first-name\"\n      autoComplete=\"given-name\"\n      defaultLabel=\"First name\"\n      label={label}\n      placeholder={placeholder}\n      className={className}\n    >\n      {children}\n    </ProfileTextControl>\n  );\n}\n\nexport function ClientProfileLastNameControl({\n  label,\n  placeholder,\n  className,\n  children,\n}: ClientProfileLastNameControlProps) {\n  return (\n    <ProfileTextControl\n      fieldKey=\"lastName\"\n      attr=\"last-name\"\n      autoComplete=\"family-name\"\n      defaultLabel=\"Last name\"\n      label={label}\n      placeholder={placeholder}\n      className={className}\n    >\n      {children}\n    </ProfileTextControl>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Phone control — the fieldset-bound counterpart of ClientProfilePhoneControl\n// ---------------------------------------------------------------------------\n\n/**\n * Composes `PhoneField` inside a `FieldBinding`, wrapped in a `data-fs-client-profile-fieldset-field=\"phone\"`\n * node — the same styling hook attribute the text controls carry on their own `Field.Root`.\n * `useFieldsetField` runs unconditionally, before `requirement` is even read — there is no suppressed\n * state for this control to second-guess; `requirement` only ever raises the field to required,\n * and left unset it raises nothing.\n */\nexport function ClientProfileFieldsetPhoneControl({\n  label,\n  placeholder,\n  requirement,\n  errorInvalid,\n  errorRequired,\n  className,\n  children,\n}: ClientProfileFieldsetPhoneControlProps) {\n  const { namespace, saved, readOnly, rules, country } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, 'phone');\n\n  const binding = (\n    <FieldBinding\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      defaultValue={saved.phone}\n      rule={rules.phone}\n      disabled={readOnly}\n    >\n      <PhoneField\n        country={country}\n        requirement={requirement}\n        errorInvalid={errorInvalid}\n        errorRequired={errorRequired}\n        className={className}\n      >\n        {children}\n      </PhoneField>\n    </FieldBinding>\n  );\n\n  // The wrapper carries no className of its own (Decision 1): className lands on PhoneField's own\n  // Field.Root, the node that actually stacks label, input and error, so it needs no flex slot here.\n  return <div data-fs-client-profile-fieldset-field=\"phone\">{binding}</div>;\n}\n\n// ---------------------------------------------------------------------------\n// Document control — self-gates on documentType, through an inner component\n// ---------------------------------------------------------------------------\n\ntype ClientProfileDocumentControlInnerProps = ClientProfileDocumentControlProps & { documentType: DocumentType };\n\n/**\n * `useFieldsetField` (through `useClientProfileFieldsetContext`'s namespace) lives only in this inner\n * component, mounted only once `ClientProfileDocumentControl` has already decided the document type is\n * supported. Splitting the decision from the registration this way (Decision 8) keeps a control that\n * renders nothing from registering a field name `FormClear` would otherwise dirty and dispatch.\n */\nfunction ClientProfileDocumentControlInner({\n  documentType,\n  label,\n  placeholder,\n  errorMessage,\n  className,\n  children,\n}: ClientProfileDocumentControlInnerProps) {\n  const { namespace, saved, readOnly, rules } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, 'document');\n\n  return (\n    <FieldBinding\n      name={name}\n      label={label ?? DOCUMENTS[documentType].name}\n      placeholder={placeholder}\n      defaultValue={saved.document}\n      rule={rules.document}\n      disabled={readOnly}\n    >\n      <DocumentField\n        documentType={documentType}\n        errorMessage={errorMessage}\n        className={className}\n        data-fs-client-profile-fieldset-field=\"document\"\n      >\n        {children}\n      </DocumentField>\n    </FieldBinding>\n  );\n}\n\nexport function ClientProfileDocumentControl({\n  label,\n  placeholder,\n  errorMessage,\n  className,\n  children,\n}: ClientProfileDocumentControlProps) {\n  const { documentType } = useClientProfileFieldsetContext();\n  if (!isSupportedDocumentType(documentType)) return null;\n\n  return (\n    <ClientProfileDocumentControlInner\n      documentType={documentType}\n      label={label}\n      placeholder={placeholder}\n      errorMessage={errorMessage}\n      className={className}\n    >\n      {children}\n    </ClientProfileDocumentControlInner>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client-profile-fieldset.js","names":[],"sources":["../../../src/matter/client-profile-form/client-profile-fieldset.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentTypeDefinition,\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport type { DocumentType } from '../../particles/document-field/document-field.js';\nimport { DOCUMENTS, DocumentField, isSupportedDocumentType } from '../../particles/document-field/document-field.js';\nimport type { FieldRule } from '../../particles/field/field.js';\nimport {\n  Field,\n  FieldBinding,\n  FieldsetFieldContext,\n  useFieldsetField,\n  useFieldsetFieldNames,\n  useNoAncestorFieldset,\n} from '../../particles/field/field.js';\nimport { Fieldset } from '../../particles/fieldset/fieldset.js';\nimport { type FormUserError, useFormRegistry } from '../../particles/form/form.js';\nimport type { PhoneCountry } from '../../particles/phone-field/phone-field.js';\nimport { PhoneField, toE164 } from '../../particles/phone-field/phone-field.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { useEntityDataResolved } from '../../sdk/data/entity-resolution-context.js';\nimport { useReactiveDataSettled } from '../../sdk/data/use-reactive-data-settled.js';\nimport { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport type { MessageFormatter } from '../../sdk/i18n/message-formatter.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport type { ClientProfileUpdateInput, ClientProfileUserError } from '../../sdk/identity/operations.js';\nimport { useSession } from '../session/session.js';\n\n/**\n * `ClientProfileFieldset` — the composable, one-Save write of the `ClientProfile` sibling entity\n * (RFC: Composable Entity Forms, `Proposal > Design > The fieldset`). It registers itself with the\n * enclosing `FormRoot` under the `clientProfile` namespace and dispatches\n * `$actions.identity.clientProfileUpdate` for its own submit slot; it renders no `<form>` of its own.\n *\n * The four controls below are the smallest placeable unit: each calls `useFieldsetField` for its full\n * field name, renders a `FieldBinding` carrying the field's static facts, and — inside it — either the\n * default anatomy or the author's own children. No control's field contract carries a blocking\n * `RegisterOptions` key (no `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`); requiredness\n * on the phone control rides on its own `requirement` prop instead, which only ever gates required\n * validation — a field the store does not want is omitted from the page, not switched off by a prop.\n *\n * The fieldset's context name is `client-profile-fieldset`, not `client-profile`: the shipped\n * `ClientProfilePhoneControl` (`matter/client-profile/client-profile.tsx`) already requires\n * `client-profile` and writes on blur, so reusing that name here would let an on-blur control compile\n * inside this batched fieldset and write immediately. `ClientProfileFieldsetPhoneControl` carries the\n * same container prefix as the context it requires, naming the collision rather than hiding it.\n */\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — colocated on the fieldset, its own data root\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ClientProfileFieldsetData on Query {\n    clientProfile {\n      __typename\n      id\n      firstName\n      lastName\n      phone\n      document\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const ClientProfileFieldsetContent = defineContentType({\n  id: 'client-profile-fieldset',\n  title: 'Client Profile Fieldset',\n  description: \"The profile fieldset's loading and loaded announcements and its accessible group name.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      loadingLabel: {\n        type: 'string',\n        title: 'Loading announcement',\n        format: 'icu-message',\n        messageSource: 'Loading your details',\n      },\n      loadedLabel: {\n        type: 'string',\n        title: 'Loaded announcement',\n        format: 'icu-message',\n        messageSource: 'Your details are ready',\n      },\n      groupLabel: {\n        type: 'string',\n        title: 'Accessible group name',\n        format: 'icu-message',\n        messageSource: 'Your details',\n        messageOptional: true,\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Generic error message',\n        description: 'Shown by FormError when the details could not be saved.',\n        format: 'icu-message',\n        messageSource: 'Unable to save your details. Please try again.',\n      },\n    },\n  },\n});\n\ntype ClientProfileUpdateErrorCode = 'MISSING_CART_CONTEXT' | 'CART_NOT_FOUND' | 'NO_PROFILE_FIELD_PROVIDED';\n\n/**\n * The message for each refusal of the profile write: every `ClientProfileUpdateErrorCode` plus the\n * client-minted transport failure. None is a fault the shopper can fix, so all share one message.\n * `dispatch` hands `FormError` this copy, and genericErrorMessage for an unknown code.\n */\nexport const CLIENT_PROFILE_FIELDSET_ERROR_FIELDS = {\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NO_PROFILE_FIELD_PROVIDED: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<\n  ClientProfileUpdateErrorCode | 'NETWORK_ERROR',\n  MessageFieldName<typeof ClientProfileFieldsetContent>\n>;\n\nfunction wordClientProfileError(\n  error: ClientProfileUserError,\n  { format }: MessageFormatter<typeof ClientProfileFieldsetContent>,\n): FormUserError {\n  return {\n    code: error.code,\n    message: formatErrorCode(\n      ClientProfileFieldsetContent,\n      CLIENT_PROFILE_FIELDSET_ERROR_FIELDS,\n      error,\n      format,\n      'genericErrorMessage',\n    ),\n  };\n}\n\nexport const ClientProfileFieldsetPhoneControlContent = defineContentType({\n  id: 'client-profile-fieldset-phone',\n  title: 'Client Profile Fieldset Phone Control',\n  description: \"The phone control's label and its validation messages.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'Phone' },\n      errorInvalid: {\n        type: 'string',\n        title: 'Invalid error message',\n        format: 'icu-message',\n        messageSource: 'Invalid phone number',\n      },\n      errorRequired: {\n        type: 'string',\n        title: 'Required error message',\n        format: 'icu-message',\n        messageSource: 'Phone number is required',\n      },\n    },\n  },\n});\n\nexport const ClientProfileFirstNameControlContent = defineContentType({\n  id: 'client-profile-first-name',\n  title: 'Client Profile First Name Control',\n  description: \"The first-name control's label.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'First name' },\n    },\n  },\n});\n\nexport const ClientProfileLastNameControlContent = defineContentType({\n  id: 'client-profile-last-name',\n  title: 'Client Profile Last Name Control',\n  description: \"The last-name control's label.\",\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Label', format: 'icu-message', messageSource: 'Last name' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** The `$data` slice forwarded by the reactive runtime — the ClientProfile sibling entity, unwrapped. */\nexport type ClientProfileFieldsetData = {\n  firstName?: string | null;\n  lastName?: string | null;\n  phone?: string | null;\n  document?: string | null;\n} | null;\n\n/** The four keys this fieldset registers under its namespace. */\ntype ProfileFieldKey = 'firstName' | 'lastName' | 'phone' | 'document';\n\n/** What the fieldset publishes to its controls. Carries no live value — react-hook-form owns those. */\ntype ClientProfileFieldsetContextValue = Readonly<{\n  namespace: 'clientProfile';\n  /** Seeds, resolved from `$data`. Empty string, never null, so a control never seeds `undefined`. */\n  saved: Readonly<Record<ProfileFieldKey, string>>;\n  /** True when the session reports `canEditData: false`. */\n  readOnly: boolean;\n  /** Phone mask/validation country, from the fieldset's own prop. */\n  country: PhoneCountry;\n  /** Locale document type; the document control renders only when supported. */\n  documentType: string | undefined;\n  /** The fieldset's own validation rules, per key. Present and empty today (Decision 6). */\n  rules: Readonly<Partial<Record<ProfileFieldKey, FieldRule>>>;\n}>;\n\n/** No control publishes a rule today — a blocking `RegisterOptions` key would reopen the same submit\n * block for a read-only session (Decision 6): `readOnly` disables a control's rendered `<input>` via a\n * plain HTML attribute, never react-hook-form's own `disabled` registration option (`field.tsx`'s\n * `useController` call takes no `disabled`), so a required field would stay fully registered and\n * validated while the shopper has no way to focus or edit it. Kept as a stable empty object so the\n * context value's identity does not churn on every render. */\nconst NO_RULES: Readonly<Partial<Record<ProfileFieldKey, FieldRule>>> = {};\n\n/**\n * Rows `ClientProfileFieldsetSkeleton` draws when nobody says otherwise: one per control in the full\n * anatomy — first name, last name, phone, document. It is a default and not a derivation, because\n * the composed children are opaque here. A page that composes fewer sets `skeletonCount` to what it\n * composed, or the form jumps by the difference when the controls take the skeleton's place.\n */\nconst CLIENT_PROFILE_SKELETON_ROWS = 4;\n\nconst CLIENT_PROFILE_FIELDSET_UNSET = Symbol('ClientProfileFieldsetContextUnset');\n\nconst ClientProfileFieldsetContext = createContext<\n  ClientProfileFieldsetContextValue | typeof CLIENT_PROFILE_FIELDSET_UNSET\n>(CLIENT_PROFILE_FIELDSET_UNSET);\n\nfunction useClientProfileFieldsetContext(): ClientProfileFieldsetContextValue {\n  const ctx = useContext(ClientProfileFieldsetContext);\n  if (ctx === CLIENT_PROFILE_FIELDSET_UNSET) {\n    throw new Error('ClientProfileFieldset controls must be used inside ClientProfileFieldset.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type ClientProfileFieldsetProps = MessageLocaleProp & {\n  /** Phone mask/validation country, provided to the phone control via context. */\n  country?: PhoneCountry;\n  /** Locale document type; the document control renders only when supported. */\n  documentType?: string;\n  /** Placeholder rows the loading skeleton draws. Set it to the number of controls composed here. */\n  skeletonCount?: number;\n  /** The loading and loaded announcements and the accessible group name. */\n  $content?: ContentValue<typeof ClientProfileFieldsetContent>;\n  className?: string;\n  children?: ReactNode;\n  /** `ClientProfileFieldsetData` slice forwarded by the reactive runtime. */\n  $data?: ClientProfileFieldsetData;\n  /** Compiler-injected; carries `identity.clientProfileUpdate`. */\n  $actions?: ComponentActions;\n};\n\ntype ProfileTextControlProps<T extends ContentTypeDefinition> = MessageLocaleProp & {\n  placeholder?: string;\n  /** The control's label. */\n  $content?: ContentValue<T>;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type ClientProfileFirstNameControlProps = ProfileTextControlProps<typeof ClientProfileFirstNameControlContent>;\nexport type ClientProfileLastNameControlProps = ProfileTextControlProps<typeof ClientProfileLastNameControlContent>;\n\nexport type ClientProfileFieldsetPhoneControlProps = MessageLocaleProp & {\n  placeholder?: string;\n  /**\n   * Raises the field to required. The composite owns it; the contract carries no rule (Decision 6),\n   * so here the raise is the whole of the resolution. Unset is no opinion, which leaves the phone\n   * optional.\n   */\n  requirement?: 'mandatory' | 'optional';\n  /** The label and the invalid and required messages. */\n  $content?: ContentValue<typeof ClientProfileFieldsetPhoneControlContent>;\n  className?: string;\n  /** Given, replaces PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy. */\n  children?: ReactNode;\n};\n\nexport type ClientProfileDocumentControlProps = {\n  label?: string;\n  placeholder?: string;\n  errorMessage?: string;\n  className?: string;\n  /** Given, replaces DocumentField's default Field.Label + DocumentFieldInput + Field.Error anatomy. */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ClientProfileFieldsetDefinition = defineComponent<ClientProfileFieldsetProps>({\n  name: 'ClientProfileFieldset',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFieldset,\n  content: ClientProfileFieldsetContent,\n  fragment,\n  fetchStrategy: 'reactive',\n  skeleton: ClientProfileFieldsetSkeleton,\n  requiresContext: ['form', 'session'],\n  providesContext: 'client-profile-fieldset',\n  actions: { identity: ['clientProfileUpdate'] },\n  editor: { label: 'Client Profile Fieldset', category: 'identity' },\n  schema: {\n    country: { type: 'string', default: 'US', label: 'Phone country (US or BR)' },\n    documentType: { type: 'string', label: 'Document type (e.g. CPF)' },\n    skeletonCount: { type: 'number', default: 4, label: 'Skeleton rows' },\n  },\n  guideline:\n    'Registers a batched write of the ClientProfile entity with the enclosing FormRoot; renders one Fieldset.Root and no <form>. Must be inside a FormRoot with a SessionRoot ancestor. Compose ClientProfileFirstNameControl / ClientProfileLastNameControl / ClientProfileFieldsetPhoneControl / ClientProfileDocumentControl as children, in any order. The controls mount only once the profile has resolved, with skeletonCount placeholder rows in their place until then — set it to the number of controls composed, or the form jumps by the difference. Style the announcement sr-only; it reads the $content fields loadingLabel and loadedLabel. Dispatches only the fields the shopper changed. The $content field groupLabel names the group as its accessible name; an unauthored one emits no aria-label, and a composed FieldsetLegend wins over it.',\n});\n\nexport const ClientProfileFirstNameControlDefinition = defineComponent<ClientProfileFirstNameControlProps>({\n  name: 'ClientProfileFirstNameControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFirstNameControl,\n  content: ClientProfileFirstNameControlContent,\n  requiresContext: 'client-profile-fieldset',\n  providesContext: 'field',\n  editor: { label: 'Client Profile First Name Control', category: 'identity' },\n  schema: {\n    placeholder: { type: 'string', label: 'Placeholder' },\n  },\n  guideline:\n    \"The bound first-name control, labelled by the $content field label; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order.\",\n});\n\nexport const ClientProfileLastNameControlDefinition = defineComponent<ClientProfileLastNameControlProps>({\n  name: 'ClientProfileLastNameControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileLastNameControl,\n  content: ClientProfileLastNameControlContent,\n  requiresContext: 'client-profile-fieldset',\n  providesContext: 'field',\n  editor: { label: 'Client Profile Last Name Control', category: 'identity' },\n  schema: {\n    placeholder: { type: 'string', label: 'Placeholder' },\n  },\n  guideline:\n    \"The bound last-name control, labelled by the $content field label; must be a descendant of ClientProfileFieldset. Renders Field.Root > Field.Label + Field.Control + Field.Error by default, or the composed children in the author's own order.\",\n});\n\nexport const ClientProfileFieldsetPhoneControlDefinition = defineComponent<ClientProfileFieldsetPhoneControlProps>({\n  name: 'ClientProfileFieldsetPhoneControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileFieldsetPhoneControl,\n  content: ClientProfileFieldsetPhoneControlContent,\n  requiresContext: 'client-profile-fieldset',\n  // Provides both names (mirrors shipping-address.tsx:595's Decision 7): 'field' is what every\n  // fieldset Control declares (RFC:503), but this control also composes PhoneField, whose\n  // PhoneFieldInput part requires 'phone-field' — a page composing\n  // ClientProfileFieldsetPhoneControl > PhoneFieldInput would otherwise fail the build with a\n  // context-constraint violation, since PhoneField itself (the only 'phone-field' provider) never\n  // appears in the page schema (finding F1).\n  providesContext: ['field', 'phone-field'],\n  editor: { label: 'Client Profile Fieldset Phone Control', category: 'identity' },\n  schema: {\n    placeholder: { type: 'string', label: 'Placeholder' },\n    // No default: an unset requirement is no opinion, not a raise to mandatory.\n    requirement: { type: ['mandatory', 'optional'] as const, label: 'Requirement' },\n  },\n  guideline:\n    \"The bound phone control; must be a descendant of ClientProfileFieldset. Its label and its invalid and required messages are the $content fields label, errorInvalid and errorRequired. Distinct from ClientProfilePhoneControl (matter/client-profile), which writes on blur and requires the client-profile context — the two cannot compile into each other's container. Composes the PhoneField particle: recomposable (RFC:503) — given children, they replace PhoneField's default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order; childless keeps today's order. Its className styles PhoneField's own root, the node that lays out label, input and error — not the wrapper, which carries only the data-fs-client-profile-fieldset-field=\\\"phone\\\" styling hook. A store that does not want a phone field omits this element from the page: requirement only governs required validation, never visibility.\",\n});\n\nexport const ClientProfileDocumentControlDefinition = defineComponent<ClientProfileDocumentControlProps>({\n  name: 'ClientProfileDocumentControl',\n  importPath: '@vtex/faststore/components',\n  component: ClientProfileDocumentControl,\n  requiresContext: 'client-profile-fieldset',\n  // Provides both names, same reasoning as ClientProfileFieldsetPhoneControlDefinition above: this\n  // control composes DocumentField, whose DocumentFieldInput part requires 'document-field' — a page\n  // composing ClientProfileDocumentControl > DocumentFieldInput would otherwise fail the build\n  // (finding F1).\n  providesContext: ['field', 'document-field'],\n  editor: { label: 'Client Profile Document Control', category: 'identity' },\n  schema: {\n    // No default (Decision 1): absence means the platform's value, applied at render time by\n    // the control itself, not baked into the schema.\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    errorMessage: { type: 'string', label: 'Error message' },\n  },\n  guideline:\n    \"The bound tax-document control; must be a descendant of ClientProfileFieldset. Renders nothing, and registers no field name, when the fieldset's documentType is unsupported. Composes the DocumentField particle: recomposable (RFC:503) — given children, they replace DocumentField's default Field.Label + DocumentFieldInput + Field.Error anatomy, in any order; childless keeps today's order.\",\n});\n\n// ---------------------------------------------------------------------------\n// Fieldset root\n// ---------------------------------------------------------------------------\n\n/**\n * Registers a batched write of the `ClientProfile` entity with the enclosing `FormRoot`\n * (`registerFieldset`, namespace `clientProfile`) on mount, unconditionally — so this fieldset keeps its\n * original dispatch slot even while its own query is still resolving. Its children — the seed values and\n * the field-name registry its controls need — render only once the entity has resolved; until then the\n * `Fieldset.Root` carries `-pending` and renders `ClientProfileFieldsetSkeleton` (Decision 5).\n * `dispatch` and `toPayload` are `useCallback([])`-stable and read `$actions`/`country`/`documentType`\n * through a ref, so the registration effect runs exactly once per mount regardless of how often the\n * parent re-renders.\n *\n * \"Resolved\" is two conditions, because `$data` alone cannot answer it. Under the reactive runtime the\n * slice is defined from the first render — `useReactiveEntity` hands down `fallbackData` while the cache\n * read is incomplete — so an empty server answer looks exactly like a resolved one, and the controls\n * would mount and seed `''` before the shopper's real profile arrives. `useSeedAdoption` re-seeds a\n * clean field with `defaultValue` on every render, but once the field turns dirty no later seed\n * ever reaches it again: a shopper who starts typing before the real profile arrives locks that\n * empty seed in for good, and even a shopper who does not type sees the field flash from `''` to\n * the real data. `useReactiveDataSettled` supplies the missing half: the page query's own\n * in-flight state, latched so it only ever goes pending → settled. The `$data === undefined` half still\n * carries trees with no reactive root above them, where the slice arrives as a plain prop.\n *\n * Both ends of that wait are spoken: the fieldset carries `aria-busy` while it lasts and holds a polite\n * live region that announces the `loadingLabel` and then the `loadedLabel` message. Style the region `sr-only` — it is\n * text meant for a screen reader, not for the page.\n */\nexport function ClientProfileFieldset({\n  country = 'US',\n  documentType,\n  skeletonCount = CLIENT_PROFILE_SKELETON_ROWS,\n  $content,\n  $locale,\n  className,\n  children,\n  $data: $dataProp,\n  $actions: $actionsProp,\n}: ClientProfileFieldsetProps) {\n  // Nesting fieldsets has no legitimate use: useFieldsetField resolves the *nearest*\n  // FieldsetFieldContext, not the one owning a control's actual namespace, so a control nested two\n  // fieldsets deep would silently register under the wrong one and its write would be discarded on\n  // submit. Runtime registry integrity, mirroring the namespace-collision throw FormRoot already ships\n  // (form.tsx:280-288).\n  useNoAncestorFieldset('ClientProfileFieldset');\n\n  const $data = useDataOverride($dataProp);\n\n  const $actions = useActionsOverride($actionsProp);\n  const messages = useMessageFormatter(ClientProfileFieldsetContent, $content);\n  const { format } = messages;\n  const groupLabel = format('groupLabel');\n  // Three conditions, not two. `useReactiveDataSettled` latches one way and never re-arms, so on its\n  // own it answers \"has this page ever resolved\", not \"is what I am holding right now the server's\n  // answer\" — after the page query's entity ref moves to one this cache never stored, or its root is\n  // skipped for want of a variable, the slice silently regresses to `fallbackData` while the latch\n  // still reads settled. `useEntityDataResolved` is the per-entity half: unlatched, so it follows the\n  // slice back down and returns this fieldset to its skeleton instead of leaving live controls seeded\n  // from a placeholder.\n  const settled = useReactiveDataSettled();\n  const sliceResolved = useEntityDataResolved();\n  const resolved = settled && sliceResolved && $data !== undefined;\n  // Also enforces the SessionRoot ancestor: useSession() throws when rendered outside one.\n  const { canEditData } = useSession();\n  const readOnly = !canEditData;\n\n  // Runs before useFormContext() below: useFormRegistry() throws the friendly \"Form parts must be used\n  // inside FormRoot.\" error when no FormRoot is above, so a FormRoot-less render fails there rather than\n  // reaching the getFieldState destructure, which throws an unhelpful TypeError instead (useFormContext()\n  // resolves to null outside a FormRoot, and destructuring null throws).\n  const { registerFieldset } = useFormRegistry();\n\n  // Decision 3, as later narrowed: this fieldset still reads dirtiness imperatively, but the rule is no\n  // longer the form's. `FormRoot` subscribes `dirtyFields` in render and decides which fieldsets to\n  // dispatch from it, by the fields each one has mounted, on react-hook-form's documented contract.\n  //\n  // The imperative read survives here because it asks a different question in a different place: which\n  // of *this* fieldset's own fields changed, resolved inside `toPayload` at submit time, by full\n  // registered field name — the shape `getFieldState` documents. `useFormContext()` adds no\n  // `formState` subscription of its own; one is created only when a caller reads a formState key off\n  // the `useForm`/`useFormState` proxy (or hands that already-subscribed object to `getFieldState`'s\n  // second argument). Calling `getFieldState(name)` with no second argument reads the current internal\n  // state directly, so this fieldset root still does not re-render on a keystroke.\n  const { getFieldState } = useFormContext();\n\n  const latest = useRef({ $actions, country, documentType, readOnly, getFieldState, messages });\n  useEffect(() => {\n    latest.current = { $actions, country, documentType, readOnly, getFieldState, messages };\n  }, [$actions, country, documentType, readOnly, getFieldState, messages]);\n\n  const { registry: fieldsetRegistry, getFieldNames } = useFieldsetFieldNames('clientProfile');\n\n  const dispatch = useCallback(async (payload: Record<string, unknown>) => {\n    // Defence-in-depth: the UI disables every input while read-only, but `FormClear` sets values (and\n    // marks them dirty) on every registered field regardless of that disabled attribute — react-hook-\n    // form's own `useController` calls never receive a `disabled` registration option, so it has no\n    // notion of \"disabled\" of its own. Guarding here keeps the write from reaching the network even if\n    // some other composition dirties this fieldset while canEditData is false (the server also refuses,\n    // but a client-side guard should not depend on that).\n    if (latest.current.readOnly) {\n      throw new Error('ClientProfileFieldset cannot dispatch while the session is read-only.');\n    }\n    const update = latest.current.$actions?.identity?.clientProfileUpdate;\n    // Throwing is the contract's failure path: FormRoot catches it and records this fieldset's failure\n    // (form.tsx:264-266). Returning [] would report an unqualified success for a write that never\n    // happened.\n    if (!update) throw new Error('ClientProfileFieldset requires $actions.identity.clientProfileUpdate.');\n    const userErrors = await update(payload as ClientProfileUpdateInput);\n    return userErrors.map((error) => wordClientProfileError(error, latest.current.messages));\n  }, []);\n\n  const toPayload = useCallback((values: Record<string, unknown>): Record<string, unknown> => {\n    const { country: activeCountry, documentType: activeDocumentType, getFieldState } = latest.current;\n    // FR-5: a key is emitted only when the shopper actually changed it — presence in `values` alone\n    // (every registered field is always present) is not enough. `dirtyFields` is not read directly;\n    // `getFieldState` is called with no second argument, which reads react-hook-form's current\n    // internal state without subscribing to it (Decision 3).\n    const isDirty = (key: ProfileFieldKey) => getFieldState(`clientProfile.${key}`).isDirty;\n    const payload: Record<string, string> = {};\n    if ('firstName' in values && isDirty('firstName')) payload.firstName = String(values.firstName ?? '').trim();\n    if ('lastName' in values && isDirty('lastName')) payload.lastName = String(values.lastName ?? '').trim();\n    if ('phone' in values && isDirty('phone')) {\n      const raw = String(values.phone ?? '').trim();\n      // toE164 on a blank value returns the bare country code, which would write \"+55\" over the\n      // shopper's number and fail every later save.\n      payload.phone = raw ? toE164(raw, activeCountry) : '';\n    }\n    // The type's own sanitiser (digits for CPF, SSN and SIN, letters kept for RFC). Omitted when the type is\n    // not supported: a value for a control that is no longer shown is never sent.\n    if ('document' in values && isDirty('document') && isSupportedDocumentType(activeDocumentType)) {\n      // The control only ever writes a string (the masked input's own value); `values` is typed `unknown`\n      // because the fieldset contract carries every field's value, so it is narrowed here, not stringified.\n      const rawDocument = typeof values.document === 'string' ? values.document : '';\n      payload.document = DOCUMENTS[activeDocumentType].sanitize(rawDocument);\n    }\n    return payload;\n  }, []);\n\n  useEffect(\n    () =>\n      registerFieldset({\n        namespace: 'clientProfile',\n        getFieldNames,\n        dispatch,\n        toPayload,\n        // Decision 1: the register is a machine identifier, the kebab-case ASCII rendering of this\n        // registration's own `namespace` (`clientProfile` → `client-profile`) — not authored per\n        // page (Decision 2).\n        label: 'client-profile',\n      }),\n    [registerFieldset, getFieldNames, dispatch, toPayload],\n  );\n\n  const saved = useMemo<Readonly<Record<ProfileFieldKey, string>>>(\n    () => ({\n      firstName: $data?.firstName ?? '',\n      lastName: $data?.lastName ?? '',\n      phone: $data?.phone ?? '',\n      document: $data?.document ?? '',\n    }),\n    [$data],\n  );\n\n  const contextValue = useMemo<ClientProfileFieldsetContextValue>(\n    () => ({ namespace: 'clientProfile', saved, readOnly, country, documentType, rules: NO_RULES }),\n    [saved, readOnly, country, documentType],\n  );\n\n  // Assistive technology only reports a change inside a region that was already in the tree, so a\n  // region mounted together with its text announces nothing. The region therefore sits in both\n  // branches and starts empty, with the wait written on the pass after mount and replaced — not\n  // cleared — once the controls are up: the skeleton is `aria-hidden`, so without this second\n  // message the form would materialise in silence (WCAG 2.1 SC 4.1.3).\n  const [announcement, setAnnouncement] = useState('');\n  const announced = format(resolved ? 'loadedLabel' : 'loadingLabel');\n  useEffect(() => {\n    setAnnouncement(announced);\n  }, [announced]);\n\n  return (\n    <Fieldset.Root\n      className={className}\n      disabled={readOnly}\n      aria-busy={resolved ? undefined : true}\n      // FR-12: a missing message means no name is exposed. On the root itself (FR-13), so it is identical whether the fieldset\n      // is pending or resolved; a page-composed FieldsetLegend still wins via aria-labelledby.\n      {...(groupLabel.trim() ? { 'aria-label': groupLabel } : {})}\n      data-fs-client-profile-fieldset=\"\"\n      {...(resolved ? {} : { 'data-fs-client-profile-fieldset-pending': '' })}\n      {...(readOnly ? { 'data-fs-client-profile-fieldset-readonly': '' } : {})}\n    >\n      {resolved ? (\n        <FieldsetFieldContext.Provider value={fieldsetRegistry}>\n          <ClientProfileFieldsetContext.Provider value={contextValue}>{children}</ClientProfileFieldsetContext.Provider>\n        </FieldsetFieldContext.Provider>\n      ) : (\n        <ClientProfileFieldsetSkeleton count={skeletonCount} />\n      )}\n      <output aria-live=\"polite\" data-fs-client-profile-fieldset-announcement=\"\">\n        {announcement}\n      </output>\n    </Fieldset.Root>\n  );\n}\n\n/**\n * The loading state of the fieldset, rendered in place of the controls until the entity resolves and\n * declared as the definition's `skeleton`. Purely visual: the wait is spoken by the fieldset's own live\n * region, so this is hidden from assistive technology rather than announced twice.\n */\nexport function ClientProfileFieldsetSkeleton({\n  count = CLIENT_PROFILE_SKELETON_ROWS,\n  className,\n  ...props\n}: ComponentPropsWithRef<'div'> & { count?: number }) {\n  return (\n    <div {...props} className={className} data-fs-client-profile-fieldset-skeleton=\"\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => (\n        <span key={i} data-fs-client-profile-fieldset-skeleton-field=\"\" />\n      ))}\n    </div>\n  );\n}\n\nClientProfileFieldset.Skeleton = ClientProfileFieldsetSkeleton;\n\n// ---------------------------------------------------------------------------\n// Text controls — first name, last name\n// ---------------------------------------------------------------------------\n\nfunction ProfileTextControl({\n  fieldKey,\n  attr,\n  autoComplete,\n  label,\n  placeholder,\n  className,\n  children,\n}: Readonly<{\n  fieldKey: 'firstName' | 'lastName';\n  attr: string;\n  autoComplete: string;\n  /** Formatted by the owning control. */\n  label: string;\n  placeholder?: string;\n  className?: string;\n  children?: ReactNode;\n}>) {\n  const { namespace, saved, readOnly, rules } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, fieldKey);\n\n  return (\n    <FieldBinding\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      defaultValue={saved[fieldKey]}\n      rule={rules[fieldKey]}\n      disabled={readOnly}\n      autoComplete={autoComplete}\n    >\n      <Field.Root className={className} data-fs-client-profile-fieldset-field={attr}>\n        {children ?? (\n          <>\n            <Field.Label />\n            <Field.Control />\n            <Field.Error />\n          </>\n        )}\n      </Field.Root>\n    </FieldBinding>\n  );\n}\n\nexport function ClientProfileFirstNameControl({\n  placeholder,\n  $content,\n  $locale,\n  className,\n  children,\n}: ClientProfileFirstNameControlProps) {\n  const { format } = useMessageFormatter(ClientProfileFirstNameControlContent, $content);\n  return (\n    <ProfileTextControl\n      fieldKey=\"firstName\"\n      attr=\"first-name\"\n      autoComplete=\"given-name\"\n      label={format('label')}\n      placeholder={placeholder}\n      className={className}\n    >\n      {children}\n    </ProfileTextControl>\n  );\n}\n\nexport function ClientProfileLastNameControl({\n  placeholder,\n  $content,\n  $locale,\n  className,\n  children,\n}: ClientProfileLastNameControlProps) {\n  const { format } = useMessageFormatter(ClientProfileLastNameControlContent, $content);\n  return (\n    <ProfileTextControl\n      fieldKey=\"lastName\"\n      attr=\"last-name\"\n      autoComplete=\"family-name\"\n      label={format('label')}\n      placeholder={placeholder}\n      className={className}\n    >\n      {children}\n    </ProfileTextControl>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Phone control — the fieldset-bound counterpart of ClientProfilePhoneControl\n// ---------------------------------------------------------------------------\n\n/**\n * Composes `PhoneField` inside a `FieldBinding`, wrapped in a `data-fs-client-profile-fieldset-field=\"phone\"`\n * node — the same styling hook attribute the text controls carry on their own `Field.Root`.\n * `useFieldsetField` runs unconditionally, before `requirement` is even read — there is no suppressed\n * state for this control to second-guess; `requirement` only ever raises the field to required,\n * and left unset it raises nothing.\n */\nexport function ClientProfileFieldsetPhoneControl({\n  placeholder,\n  requirement,\n  $content,\n  $locale,\n  className,\n  children,\n}: ClientProfileFieldsetPhoneControlProps) {\n  const { namespace, saved, readOnly, rules, country } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, 'phone');\n  const { format } = useMessageFormatter(ClientProfileFieldsetPhoneControlContent, $content);\n\n  const binding = (\n    <FieldBinding\n      name={name}\n      label={format('label')}\n      placeholder={placeholder}\n      defaultValue={saved.phone}\n      rule={rules.phone}\n      disabled={readOnly}\n    >\n      <PhoneField\n        country={country}\n        requirement={requirement}\n        errorInvalid={format('errorInvalid')}\n        errorRequired={format('errorRequired')}\n        className={className}\n      >\n        {children}\n      </PhoneField>\n    </FieldBinding>\n  );\n\n  // The wrapper carries no className of its own (Decision 1): className lands on PhoneField's own\n  // Field.Root, the node that actually stacks label, input and error, so it needs no flex slot here.\n  return <div data-fs-client-profile-fieldset-field=\"phone\">{binding}</div>;\n}\n\n// ---------------------------------------------------------------------------\n// Document control — self-gates on documentType, through an inner component\n// ---------------------------------------------------------------------------\n\ntype ClientProfileDocumentControlInnerProps = ClientProfileDocumentControlProps & { documentType: DocumentType };\n\n/**\n * `useFieldsetField` (through `useClientProfileFieldsetContext`'s namespace) lives only in this inner\n * component, mounted only once `ClientProfileDocumentControl` has already decided the document type is\n * supported. Splitting the decision from the registration this way (Decision 8) keeps a control that\n * renders nothing from registering a field name `FormClear` would otherwise dirty and dispatch.\n */\nfunction ClientProfileDocumentControlInner({\n  documentType,\n  label,\n  placeholder,\n  errorMessage,\n  className,\n  children,\n}: ClientProfileDocumentControlInnerProps) {\n  const { namespace, saved, readOnly, rules } = useClientProfileFieldsetContext();\n  const name = useFieldsetField(namespace, 'document');\n\n  return (\n    <FieldBinding\n      name={name}\n      label={label ?? DOCUMENTS[documentType].name}\n      placeholder={placeholder}\n      defaultValue={saved.document}\n      rule={rules.document}\n      disabled={readOnly}\n    >\n      <DocumentField\n        documentType={documentType}\n        errorMessage={errorMessage}\n        className={className}\n        data-fs-client-profile-fieldset-field=\"document\"\n      >\n        {children}\n      </DocumentField>\n    </FieldBinding>\n  );\n}\n\nexport function ClientProfileDocumentControl({\n  label,\n  placeholder,\n  errorMessage,\n  className,\n  children,\n}: ClientProfileDocumentControlProps) {\n  const { documentType } = useClientProfileFieldsetContext();\n  if (!isSupportedDocumentType(documentType)) return null;\n\n  return (\n    <ClientProfileDocumentControlInner\n      documentType={documentType}\n      label={label}\n      placeholder={placeholder}\n      errorMessage={errorMessage}\n      className={className}\n    >\n      {children}\n    </ClientProfileDocumentControlInner>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/delivery-options/delivery-options-accordion.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ShippingOption } from "../shipping-simulator/shipping-simulator.js";
@@ -5,11 +6,9 @@ import { ComponentActions } from "../../sdk/actions/types.js";
 import { RawDeliveryOptionsData } from "./use-delivery-option-selection.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/matter/delivery-options/delivery-options-accordion.d.ts
-export type DeliveryOptionsAccordionProps = ComponentPropsWithRef<'button'> & {
+export type DeliveryOptionsAccordionProps = ComponentPropsWithRef<'button'> & MessageLocaleProp & {
   /** Optional prefix shown before the summary value on the trigger row (e.g. "Forma de entrega"). */
   label?: string;
-  /** Text shown on the trigger row while nothing is selected. */
-  placeholder?: string;
   /** Separator between the selected option name and price on the trigger row. */
   separator?: string;
   /** Disclosure icon shown on the trigger. The compiler's per-route sprite is built from explicit
@@ -23,8 +22,54 @@ export type DeliveryOptionsAccordionProps = ComponentPropsWithRef<'button'> & {
   $actions?: ComponentActions;
   /** Local/dev fallback rows, used only when the reactive fetch resolves no options. */
   mockOptions?: ShippingOption[];
+  /** The placeholder, the text that replaces a zero price, and the selection error messages. */
+  $content?: ContentValue<typeof DeliveryOptionsAccordionContent>;
+};
+export declare const DeliveryOptionsAccordionContent: {
+  readonly id: "delivery-options-accordion";
+  readonly title: "Delivery Options Accordion";
+  readonly description: "Text shown on the trigger while nothing is selected, instead of a zero price for the selected option, and when a selection is refused.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly placeholder: {
+        readonly type: "string";
+        readonly title: "Placeholder";
+        readonly format: "icu-message";
+        readonly messageSource: "Select a delivery option";
+      };
+      readonly freeLabel: {
+        readonly type: "string";
+        readonly title: "Free price label";
+        readonly format: "icu-message";
+        readonly messageSource: "Free";
+      };
+      readonly optionUnavailableMessage: {
+        readonly type: "string";
+        readonly title: "Option unavailable message";
+        readonly description: "Shown when the picked option is no longer offered for the cart.";
+        readonly format: "icu-message";
+        readonly messageSource: "This delivery option is no longer available. Choose another one.";
+      };
+      readonly missingAddressMessage: {
+        readonly type: "string";
+        readonly title: "Missing address message";
+        readonly description: "Shown when no delivery address is saved on the cart yet.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a delivery address before choosing a delivery option.";
+      };
+      readonly genericErrorMessage: {
+        readonly type: "string";
+        readonly title: "Generic failure message";
+        readonly description: "Shown for a network failure and for every refusal the shopper cannot act on.";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to update the delivery option. Please try again.";
+      };
+    };
+  };
 };
 export declare const DeliveryOptionsAccordionDefinition: ComponentDefinition<DeliveryOptionsAccordionProps>;
-export declare function DeliveryOptionsAccordion({ label, placeholder, separator, icon, panelClassName, $data, $actions: $actionsProp, mockOptions, className, children, ...props }: DeliveryOptionsAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DeliveryOptionsAccordion({ $content, $locale, label, separator, icon, panelClassName, $data, $actions: $actionsProp, mockOptions, className, children, ...props }: DeliveryOptionsAccordionProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=delivery-options-accordion.d.ts.map

package/dist/matter/delivery-options/delivery-options-accordion.js

@@ -1,10 +1,13 @@
 "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 { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { RadioGroup, RadioRoot } from "../../particles/radio/radio.js";
-import { OptionItemContext, ShippingSimulatorContext, ShippingSimulatorOptionName, ShippingSimulatorOptionPrice } from "../shipping-simulator/shipping-simulator.js";
+import { OptionItemContext, ShippingSimulatorContext, ShippingSimulatorOptionName, ShippingSimulatorOptionPrice, isFreeAmount } from "../shipping-simulator/shipping-simulator.js";
 import { useDeliveryOptionSelection } from "./use-delivery-option-selection.js";
 import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "../../particles/accordion/accordion.js";
 import { useState } from "react";
@@ -61,10 +64,63 @@ const fragment = `
 `;
 const ACCORDION_ITEM_VALUE = "delivery-options";
 const DEFAULT_PANEL_CLASS = "overflow-hidden transition-[height] duration-200 ease-out h-[var(--accordion-panel-height)] data-starting-style:h-0 data-ending-style:h-0";
+const DeliveryOptionsAccordionContent = defineContentType({
+	id: "delivery-options-accordion",
+	title: "Delivery Options Accordion",
+	description: "Text shown on the trigger while nothing is selected, instead of a zero price for the selected option, and when a selection is refused.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			placeholder: {
+				type: "string",
+				title: "Placeholder",
+				format: "icu-message",
+				messageSource: "Select a delivery option"
+			},
+			freeLabel: {
+				type: "string",
+				title: "Free price label",
+				format: "icu-message",
+				messageSource: "Free"
+			},
+			optionUnavailableMessage: {
+				type: "string",
+				title: "Option unavailable message",
+				description: "Shown when the picked option is no longer offered for the cart.",
+				format: "icu-message",
+				messageSource: "This delivery option is no longer available. Choose another one."
+			},
+			missingAddressMessage: {
+				type: "string",
+				title: "Missing address message",
+				description: "Shown when no delivery address is saved on the cart yet.",
+				format: "icu-message",
+				messageSource: "Enter a delivery address before choosing a delivery option."
+			},
+			genericErrorMessage: {
+				type: "string",
+				title: "Generic failure message",
+				description: "Shown for a network failure and for every refusal the shopper cannot act on.",
+				format: "icu-message",
+				messageSource: "Unable to update the delivery option. Please try again."
+			}
+		}
+	}
+});
+/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */
+const DELIVERY_OPTIONS_ACCORDION_ERROR_FIELDS = {
+	OPTION_UNAVAILABLE: "optionUnavailableMessage",
+	MISSING_SHIPPING_ADDRESS: "missingAddressMessage",
+	MISSING_CART_CONTEXT: "genericErrorMessage",
+	CART_NOT_FOUND: "genericErrorMessage",
+	NETWORK_ERROR: "genericErrorMessage"
+};
 const DeliveryOptionsAccordionDefinition = defineComponent({
 	name: "DeliveryOptionsAccordion",
 	importPath: "@vtex/faststore/components",
 	component: DeliveryOptionsAccordion,
+	content: DeliveryOptionsAccordionContent,
 	fragment,
 	fetchStrategy: "reactive",
 	actions: { shipping: ["selectOption"] },
@@ -77,11 +133,6 @@ const DeliveryOptionsAccordionDefinition = defineComponent({
 			type: "string",
 			label: "Trigger label prefix"
 		},
-		placeholder: {
-			type: "string",
-			default: "Selecionar forma de entrega",
-			label: "Placeholder"
-		},
 		separator: {
 			type: "string",
 			default: " — ",
@@ -98,9 +149,9 @@ const DeliveryOptionsAccordionDefinition = defineComponent({
 		}
 	},
 	providesContext: ["shipping-simulator", "shipping-simulator-option"],
-	guideline: "Collapsed delivery-option picker: a single summary row that expands the whole-cart option list inline (an accordion, not an overlay) and collapses it the moment a row is picked, echoing the choice (name + price) back on the trigger or a placeholder when nothing is selected. Reuses the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children, exactly like DeliveryOptionsRoot. Selecting a row dispatches $actions.shipping.selectOption; mockOptions is a local/dev-only fallback whose selection stays local. Use instead of a DeliveryOptionsController overlay (Dialog/Drawer) when the picker should expand in the page flow rather than surface in an overlay."
+	guideline: "Collapsed delivery-option picker: a single summary row that expands the whole-cart option list inline (an accordion, not an overlay) and collapses it the moment a row is picked, echoing the choice (name + price) back on the trigger or its $content.placeholder when nothing is selected; its $content.freeLabel replaces a zero price in that echo. Reuses the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children, exactly like DeliveryOptionsRoot. Selecting a row dispatches $actions.shipping.selectOption; a refusal shows inline, worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). mockOptions is a local/dev-only fallback whose selection stays local. Use instead of a DeliveryOptionsController overlay (Dialog/Drawer) when the picker should expand in the page flow rather than surface in an overlay."
 });
-function DeliveryOptionsAccordion({ label, placeholder = "Selecionar forma de entrega", separator = " — ", icon = "caret-down", panelClassName = DEFAULT_PANEL_CLASS, $data, $actions: $actionsProp, mockOptions, className, children, ...props }) {
+function DeliveryOptionsAccordion({ $content, $locale, label, separator = " — ", icon = "caret-down", panelClassName = DEFAULT_PANEL_CLASS, $data, $actions: $actionsProp, mockOptions, className, children, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
 	const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({
 		$data,
@@ -108,7 +159,9 @@ function DeliveryOptionsAccordion({ label, placeholder = "Selecionar forma de en
 		mockOptions
 	});
 	const [open, setOpen] = useState(false);
+	const { format } = useMessageFormatter(DeliveryOptionsAccordionContent, $content);
 	const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;
+	const errorMessage = selectionError ? formatErrorCode(DeliveryOptionsAccordionContent, DELIVERY_OPTIONS_ACCORDION_ERROR_FIELDS, selectionError, format, "genericErrorMessage") : null;
 	function handleValueChange(optionId) {
 		selectOption(optionId, { onSettled: (ok) => {
 			if (ok) setOpen(false);
@@ -144,12 +197,12 @@ function DeliveryOptionsAccordion({ label, placeholder = "Selecionar forma de en
 											"data-fs-delivery-options-accordion-separator": "",
 											children: separator
 										}),
-										/* @__PURE__ */ jsx(ShippingSimulatorOptionPrice, {})
+										/* @__PURE__ */ jsx(ShippingSimulatorOptionPrice, { children: isFreeAmount(selectedOption.price.amount) ? format("freeLabel") : void 0 })
 									]
 								})
 							}) : /* @__PURE__ */ jsx("span", {
 								"data-fs-delivery-options-accordion-placeholder": "",
-								children: placeholder
+								children: format("placeholder")
 							}),
 							/* @__PURE__ */ jsx("span", {
 								"data-fs-delivery-options-accordion-icon": "",
@@ -163,11 +216,11 @@ function DeliveryOptionsAccordion({ label, placeholder = "Selecionar forma de en
 					children: /* @__PURE__ */ jsxs("div", {
 						"data-fs-delivery-options": "",
 						className: "pt-3",
-						children: [selectionError ? /* @__PURE__ */ jsx("div", {
+						children: [errorMessage === null ? null : /* @__PURE__ */ jsx("div", {
 							role: "alert",
 							"data-fs-delivery-options-error": "",
-							children: selectionError
-						}) : null, options.length > 0 ? /* @__PURE__ */ jsx(RadioGroup, {
+							children: errorMessage
+						}), options.length > 0 ? /* @__PURE__ */ jsx(RadioGroup, {
 							value: selectedOptionId ?? "",
 							onValueChange: handleValueChange,
 							className: "flex flex-col gap-3",
@@ -186,6 +239,6 @@ function DeliveryOptionsAccordion({ label, placeholder = "Selecionar forma de en
 	});
 }
 //#endregion
-export { DeliveryOptionsAccordion, DeliveryOptionsAccordionDefinition };
+export { DELIVERY_OPTIONS_ACCORDION_ERROR_FIELDS, DeliveryOptionsAccordion, DeliveryOptionsAccordionContent, DeliveryOptionsAccordionDefinition };
 
 //# sourceMappingURL=delivery-options-accordion.js.map

package/dist/matter/delivery-options/delivery-options-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"delivery-options-accordion.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options-accordion.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useState } from 'react';\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from '../../particles/accordion/accordion.js';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { RadioGroup, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport {\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n  ShippingSimulatorOptionName,\n  ShippingSimulatorOptionPrice,\n} from '../shipping-simulator/shipping-simulator.js';\nimport { type RawDeliveryOptionsData, useDeliveryOptionSelection } from './use-delivery-option-selection.js';\n\n/**\n * `DeliveryOptionsAccordion` presents the whole-cart delivery-option list as a single summary/trigger\n * row that expands the full list inline, then collapses it once an option is picked and the selection\n * succeeds — with the trigger reflecting the chosen option's name + price (or a placeholder when\n * nothing is selected yet).\n * It is the inline (non-overlay) sibling of the `DeliveryOptionsController` Dialog/Drawer surfaces:\n * same fragment, `$data` shape, selection rule, and reuse of the FSPG-832 option leaves as the per-option\n * template placed as `children`, but the option list expands/collapses in the normal page flow\n * directly below the trigger instead of surfacing in an overlay — no Portal, no Backdrop, no\n * fixed/z-index positioning.\n *\n * The Accordion particle differs from Drawer/Dialog in the control surface this component adapts to:\n * it has no `open`/`onOpenChange` boolean; Base UI models disclosure as a controlled *array* of open\n * item values (`value` + `onValueChange`), so a single-open accordion is `[]` (collapsed) or\n * `[ACCORDION_ITEM_VALUE]` (expanded). There is no overlay chrome (title bar, close button, swipe\n * edge), so those props are dropped; the panel collapse is a height animation rather than a slide.\n *\n * It owns the expand/collapse state and the selection→collapse coordination internally (neither is\n * expressible by composing `Accordion` + `DeliveryOptionsRoot` in a schema), and shares the selection\n * engine with `DeliveryOptionsRoot` via `useDeliveryOptionSelection`. Real options dispatch\n * `$actions.shipping.selectOption` and the panel collapses only once the mutation resolves without a\n * `userError` — a rejected option keeps the panel open with an inline `role=\"alert\"` (US-4);\n * `mockOptions` update local state only and collapse immediately.\n */\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsAccordionData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// Stable value identifying the single accordion item; the controlled open state is `[]` (collapsed)\n// or `[ACCORDION_ITEM_VALUE]` (expanded).\nconst ACCORDION_ITEM_VALUE = 'delivery-options';\n\n// Base UI drives the collapse with the `--accordion-panel-height` CSS var it sets on the panel, so\n// the list expands/collapses in flow with a height transition (overflow-hidden clips it mid-animation).\nconst DEFAULT_PANEL_CLASS =\n  'overflow-hidden transition-[height] duration-200 ease-out h-[var(--accordion-panel-height)] data-starting-style:h-0 data-ending-style:h-0';\n\nexport type DeliveryOptionsAccordionProps = ComponentPropsWithRef<'button'> & {\n  /** Optional prefix shown before the summary value on the trigger row (e.g. \"Forma de entrega\"). */\n  label?: string;\n  /** Text shown on the trigger row while nothing is selected. */\n  placeholder?: string;\n  /** Separator between the selected option name and price on the trigger row. */\n  separator?: string;\n  /** Disclosure icon shown on the trigger. The compiler's per-route sprite is built from explicit\n   * `icon`-typed prop values in the schema, so a page must set this rather than rely on the default. */\n  icon?: string;\n  /** Overrides the default collapsible panel styling (height-animation + overflow clip). */\n  panelClassName?: string;\n  /** Shipping slice forwarded by the reactive runtime; `null` until shipping resolves. */\n  $data?: RawDeliveryOptionsData | null;\n  /** Compiler-injected action surface; carries `shipping.selectOption`. */\n  $actions?: ComponentActions;\n  /** Local/dev fallback rows, used only when the reactive fetch resolves no options. */\n  mockOptions?: ShippingOption[];\n};\n\nexport const DeliveryOptionsAccordionDefinition = defineComponent<DeliveryOptionsAccordionProps>({\n  name: 'DeliveryOptionsAccordion',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsAccordion,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  editor: { label: 'Delivery Options Accordion', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Trigger label prefix' },\n    placeholder: { type: 'string', default: 'Selecionar forma de entrega', label: 'Placeholder' },\n    separator: { type: 'string', default: ' — ', label: 'Summary separator' },\n    icon: { type: 'icon', default: 'caret-down', label: 'Disclosure icon' },\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  // Re-provides the reused option leaves' runtime contexts (Decision 2): `shipping-simulator-option`\n  // for the leaves composed as direct children here, plus the outer `shipping-simulator` this\n  // accordion also provides at runtime.\n  providesContext: ['shipping-simulator', 'shipping-simulator-option'],\n  guideline:\n    'Collapsed delivery-option picker: a single summary row that expands the whole-cart option list inline (an accordion, not an overlay) and collapses it the moment a row is picked, echoing the choice (name + price) back on the trigger or a placeholder when nothing is selected. Reuses the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children, exactly like DeliveryOptionsRoot. Selecting a row dispatches $actions.shipping.selectOption; mockOptions is a local/dev-only fallback whose selection stays local. Use instead of a DeliveryOptionsController overlay (Dialog/Drawer) when the picker should expand in the page flow rather than surface in an overlay.',\n});\n\nexport function DeliveryOptionsAccordion({\n  label,\n  placeholder = 'Selecionar forma de entrega',\n  separator = ' — ',\n  icon = 'caret-down',\n  panelClassName = DEFAULT_PANEL_CLASS,\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsAccordionProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n  const [open, setOpen] = useState(false);\n  const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;\n\n  function handleValueChange(optionId: string) {\n    selectOption(optionId, {\n      onSettled: (ok) => {\n        if (ok) setOpen(false);\n      },\n    });\n  }\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <AccordionRoot\n        openMultiple={false}\n        value={open ? [ACCORDION_ITEM_VALUE] : []}\n        onValueChange={(value) => setOpen(value.length > 0)}\n        data-fs-delivery-options-accordion=\"\"\n      >\n        <AccordionItem value={ACCORDION_ITEM_VALUE}>\n          <AccordionHeader className=\"m-0\">\n            <AccordionTrigger {...props} className={className} data-fs-delivery-options-accordion-trigger=\"\">\n              {label ? <span data-fs-delivery-options-accordion-label=\"\">{label}</span> : null}\n              {selectedOption ? (\n                <OptionItemContext value={selectedOption}>\n                  <span data-fs-delivery-options-accordion-value=\"\">\n                    <ShippingSimulatorOptionName />\n                    <span data-fs-delivery-options-accordion-separator=\"\">{separator}</span>\n                    <ShippingSimulatorOptionPrice />\n                  </span>\n                </OptionItemContext>\n              ) : (\n                <span data-fs-delivery-options-accordion-placeholder=\"\">{placeholder}</span>\n              )}\n              <span data-fs-delivery-options-accordion-icon=\"\">\n                <Icon name={icon} />\n              </span>\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel className={panelClassName} data-fs-delivery-options-accordion-panel=\"\">\n            <div data-fs-delivery-options=\"\" className=\"pt-3\">\n              {selectionError ? (\n                <div role=\"alert\" data-fs-delivery-options-error=\"\">\n                  {selectionError}\n                </div>\n              ) : null}\n              {options.length > 0 ? (\n                <RadioGroup\n                  value={selectedOptionId ?? ''}\n                  onValueChange={handleValueChange}\n                  className=\"flex flex-col gap-3\"\n                >\n                  {options.map((option) => (\n                    <OptionItemContext key={option.id} value={option}>\n                      <RadioRoot value={option.id}>{children}</RadioRoot>\n                    </OptionItemContext>\n                  ))}\n                </RadioGroup>\n              ) : null}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      </AccordionRoot>\n    </ShippingSimulatorContext>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"delivery-options-accordion.js","names":[],"sources":["../../../src/matter/delivery-options/delivery-options-accordion.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { useState } from 'react';\nimport {\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionRoot,\n  AccordionTrigger,\n} from '../../particles/accordion/accordion.js';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { RadioGroup, RadioRoot } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { formatErrorCode } from '../../sdk/i18n/format-error-code.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport {\n  isFreeAmount,\n  OptionItemContext,\n  type ShippingOption,\n  ShippingSimulatorContext,\n  ShippingSimulatorOptionName,\n  ShippingSimulatorOptionPrice,\n} from '../shipping-simulator/shipping-simulator.js';\nimport {\n  type DeliveryOptionSelectErrorCode,\n  type RawDeliveryOptionsData,\n  useDeliveryOptionSelection,\n} from './use-delivery-option-selection.js';\n\n/**\n * `DeliveryOptionsAccordion` presents the whole-cart delivery-option list as a single summary/trigger\n * row that expands the full list inline, then collapses it once an option is picked and the selection\n * succeeds — with the trigger reflecting the chosen option's name + price (or a placeholder when\n * nothing is selected yet).\n * It is the inline (non-overlay) sibling of the `DeliveryOptionsController` Dialog/Drawer surfaces:\n * same fragment, `$data` shape, selection rule, and reuse of the FSPG-832 option leaves as the per-option\n * template placed as `children`, but the option list expands/collapses in the normal page flow\n * directly below the trigger instead of surfacing in an overlay — no Portal, no Backdrop, no\n * fixed/z-index positioning.\n *\n * The Accordion particle differs from Drawer/Dialog in the control surface this component adapts to:\n * it has no `open`/`onOpenChange` boolean; Base UI models disclosure as a controlled *array* of open\n * item values (`value` + `onValueChange`), so a single-open accordion is `[]` (collapsed) or\n * `[ACCORDION_ITEM_VALUE]` (expanded). There is no overlay chrome (title bar, close button, swipe\n * edge), so those props are dropped; the panel collapse is a height animation rather than a slide.\n *\n * It owns the expand/collapse state and the selection→collapse coordination internally (neither is\n * expressible by composing `Accordion` + `DeliveryOptionsRoot` in a schema), and shares the selection\n * engine with `DeliveryOptionsRoot` via `useDeliveryOptionSelection`. Real options dispatch\n * `$actions.shipping.selectOption` and the panel collapses only once the mutation resolves without a\n * `userError` — a rejected option keeps the panel open with an inline `role=\"alert\"` (US-4);\n * `mockOptions` update local state only and collapse immediately.\n */\n\nconst fragment = /* GraphQL */ `\n  fragment DeliveryOptionsAccordionData on Query {\n    shipping {\n      id\n      options {\n        id\n        name\n        channel\n        shippingEstimate {\n          value\n          unit\n        }\n        price {\n          amount\n          currencyCode\n        }\n        listPrice {\n          amount\n          currencyCode\n        }\n      }\n      selectedOptionId\n    }\n  }\n`;\n\n// Stable value identifying the single accordion item; the controlled open state is `[]` (collapsed)\n// or `[ACCORDION_ITEM_VALUE]` (expanded).\nconst ACCORDION_ITEM_VALUE = 'delivery-options';\n\n// Base UI drives the collapse with the `--accordion-panel-height` CSS var it sets on the panel, so\n// the list expands/collapses in flow with a height transition (overflow-hidden clips it mid-animation).\nconst DEFAULT_PANEL_CLASS =\n  'overflow-hidden transition-[height] duration-200 ease-out h-[var(--accordion-panel-height)] data-starting-style:h-0 data-ending-style:h-0';\n\nexport type DeliveryOptionsAccordionProps = ComponentPropsWithRef<'button'> &\n  MessageLocaleProp & {\n    /** Optional prefix shown before the summary value on the trigger row (e.g. \"Forma de entrega\"). */\n    label?: string;\n    /** Separator between the selected option name and price on the trigger row. */\n    separator?: string;\n    /** Disclosure icon shown on the trigger. The compiler's per-route sprite is built from explicit\n     * `icon`-typed prop values in the schema, so a page must set this rather than rely on the default. */\n    icon?: string;\n    /** Overrides the default collapsible panel styling (height-animation + overflow clip). */\n    panelClassName?: string;\n    /** Shipping slice forwarded by the reactive runtime; `null` until shipping resolves. */\n    $data?: RawDeliveryOptionsData | null;\n    /** Compiler-injected action surface; carries `shipping.selectOption`. */\n    $actions?: ComponentActions;\n    /** Local/dev fallback rows, used only when the reactive fetch resolves no options. */\n    mockOptions?: ShippingOption[];\n    /** The placeholder, the text that replaces a zero price, and the selection error messages. */\n    $content?: ContentValue<typeof DeliveryOptionsAccordionContent>;\n  };\n\nexport const DeliveryOptionsAccordionContent = defineContentType({\n  id: 'delivery-options-accordion',\n  title: 'Delivery Options Accordion',\n  description:\n    'Text shown on the trigger while nothing is selected, instead of a zero price for the selected option, and when a selection is refused.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      placeholder: {\n        type: 'string',\n        title: 'Placeholder',\n        format: 'icu-message',\n        messageSource: 'Select a delivery option',\n      },\n      freeLabel: { type: 'string', title: 'Free price label', format: 'icu-message', messageSource: 'Free' },\n      optionUnavailableMessage: {\n        type: 'string',\n        title: 'Option unavailable message',\n        description: 'Shown when the picked option is no longer offered for the cart.',\n        format: 'icu-message',\n        messageSource: 'This delivery option is no longer available. Choose another one.',\n      },\n      missingAddressMessage: {\n        type: 'string',\n        title: 'Missing address message',\n        description: 'Shown when no delivery address is saved on the cart yet.',\n        format: 'icu-message',\n        messageSource: 'Enter a delivery address before choosing a delivery option.',\n      },\n      genericErrorMessage: {\n        type: 'string',\n        title: 'Generic failure message',\n        description: 'Shown for a network failure and for every refusal the shopper cannot act on.',\n        format: 'icu-message',\n        messageSource: 'Unable to update the delivery option. Please try again.',\n      },\n    },\n  },\n});\n\n/** The message for each code a selection can resolve. A code this map does not know shows genericErrorMessage. */\nexport const DELIVERY_OPTIONS_ACCORDION_ERROR_FIELDS = {\n  OPTION_UNAVAILABLE: 'optionUnavailableMessage',\n  MISSING_SHIPPING_ADDRESS: 'missingAddressMessage',\n  MISSING_CART_CONTEXT: 'genericErrorMessage',\n  CART_NOT_FOUND: 'genericErrorMessage',\n  NETWORK_ERROR: 'genericErrorMessage',\n} as const satisfies Record<DeliveryOptionSelectErrorCode, MessageFieldName<typeof DeliveryOptionsAccordionContent>>;\n\nexport const DeliveryOptionsAccordionDefinition = defineComponent<DeliveryOptionsAccordionProps>({\n  name: 'DeliveryOptionsAccordion',\n  importPath: '@vtex/faststore/components',\n  component: DeliveryOptionsAccordion,\n  content: DeliveryOptionsAccordionContent,\n  fragment,\n  fetchStrategy: 'reactive',\n  actions: { shipping: ['selectOption'] },\n  editor: { label: 'Delivery Options Accordion', category: 'commerce' },\n  schema: {\n    label: { type: 'string', label: 'Trigger label prefix' },\n    separator: { type: 'string', default: ' — ', label: 'Summary separator' },\n    icon: { type: 'icon', default: 'caret-down', label: 'Disclosure icon' },\n    mockOptions: { type: 'array', label: 'Mock options (local/dev fallback, ignored once real data has options)' },\n  },\n  // Re-provides the reused option leaves' runtime contexts (Decision 2): `shipping-simulator-option`\n  // for the leaves composed as direct children here, plus the outer `shipping-simulator` this\n  // accordion also provides at runtime.\n  providesContext: ['shipping-simulator', 'shipping-simulator-option'],\n  guideline:\n    'Collapsed delivery-option picker: a single summary row that expands the whole-cart option list inline (an accordion, not an overlay) and collapses it the moment a row is picked, echoing the choice (name + price) back on the trigger or its $content.placeholder when nothing is selected; its $content.freeLabel replaces a zero price in that echo. Reuses the FSPG-832 option leaves (ShippingSimulatorOption, OptionName, OptionEstimate, OptionPrice, OptionFreeBadge) as the per-option template placed as children, exactly like DeliveryOptionsRoot. Selecting a row dispatches $actions.shipping.selectOption; a refusal shows inline, worded by its code from its $content (genericErrorMessage for a network failure, every refusal the shopper cannot act on, and an unknown code). mockOptions is a local/dev-only fallback whose selection stays local. Use instead of a DeliveryOptionsController overlay (Dialog/Drawer) when the picker should expand in the page flow rather than surface in an overlay.',\n});\n\nexport function DeliveryOptionsAccordion({\n  $content,\n  $locale,\n  label,\n  separator = ' — ',\n  icon = 'caret-down',\n  panelClassName = DEFAULT_PANEL_CLASS,\n  $data,\n  $actions: $actionsProp,\n  mockOptions,\n  className,\n  children,\n  ...props\n}: DeliveryOptionsAccordionProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { options, selectedOptionId, selectionError, selectOption, contextValue } = useDeliveryOptionSelection({\n    $data,\n    $actions,\n    mockOptions,\n  });\n  const [open, setOpen] = useState(false);\n  const { format } = useMessageFormatter(DeliveryOptionsAccordionContent, $content);\n  const selectedOption = options.find((option) => option.id === selectedOptionId) ?? null;\n  const errorMessage = selectionError\n    ? formatErrorCode(\n        DeliveryOptionsAccordionContent,\n        DELIVERY_OPTIONS_ACCORDION_ERROR_FIELDS,\n        selectionError,\n        format,\n        'genericErrorMessage',\n      )\n    : null;\n\n  function handleValueChange(optionId: string) {\n    selectOption(optionId, {\n      onSettled: (ok) => {\n        if (ok) setOpen(false);\n      },\n    });\n  }\n\n  return (\n    <ShippingSimulatorContext value={contextValue}>\n      <AccordionRoot\n        openMultiple={false}\n        value={open ? [ACCORDION_ITEM_VALUE] : []}\n        onValueChange={(value) => setOpen(value.length > 0)}\n        data-fs-delivery-options-accordion=\"\"\n      >\n        <AccordionItem value={ACCORDION_ITEM_VALUE}>\n          <AccordionHeader className=\"m-0\">\n            <AccordionTrigger {...props} className={className} data-fs-delivery-options-accordion-trigger=\"\">\n              {label ? <span data-fs-delivery-options-accordion-label=\"\">{label}</span> : null}\n              {selectedOption ? (\n                <OptionItemContext value={selectedOption}>\n                  <span data-fs-delivery-options-accordion-value=\"\">\n                    <ShippingSimulatorOptionName />\n                    <span data-fs-delivery-options-accordion-separator=\"\">{separator}</span>\n                    <ShippingSimulatorOptionPrice>\n                      {isFreeAmount(selectedOption.price.amount) ? format('freeLabel') : undefined}\n                    </ShippingSimulatorOptionPrice>\n                  </span>\n                </OptionItemContext>\n              ) : (\n                <span data-fs-delivery-options-accordion-placeholder=\"\">{format('placeholder')}</span>\n              )}\n              <span data-fs-delivery-options-accordion-icon=\"\">\n                <Icon name={icon} />\n              </span>\n            </AccordionTrigger>\n          </AccordionHeader>\n          <AccordionPanel className={panelClassName} data-fs-delivery-options-accordion-panel=\"\">\n            <div data-fs-delivery-options=\"\" className=\"pt-3\">\n              {errorMessage === null ? null : (\n                <div role=\"alert\" data-fs-delivery-options-error=\"\">\n                  {errorMessage}\n                </div>\n              )}\n              {options.length > 0 ? (\n                <RadioGroup\n                  value={selectedOptionId ?? ''}\n                  onValueChange={handleValueChange}\n                  className=\"flex flex-col gap-3\"\n                >\n                  {options.map((option) => (\n                    <OptionItemContext key={option.id} value={option}>\n                      <RadioRoot value={option.id}>{children}</RadioRoot>\n                    </OptionItemContext>\n                  ))}\n                </RadioGroup>\n              ) : null}\n            </div>\n          </AccordionPanel>\n        </AccordionItem>\n      </AccordionRoot>\n    </ShippingSimulatorContext>\n  );\n}\n"],"mappings":"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"}