@vtex/faststore 0.0.8 → 0.0.11

package/dist/particles/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","names":[],"sources":["../../../src/particles/password-field/password-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ChangeEvent, useState } from 'react';\nimport { Field } from '../field/field.js';\nimport { Icon } from '../icon/icon.js';\nimport { Input } from '../input/input.js';\nimport { Toggle } from '../toggle/toggle.js';\n\nexport type PasswordFieldRequirement = 'mandatory' | 'optional';\n\nexport type PasswordFieldAutoComplete = 'current-password' | 'new-password';\n\nexport type PasswordFieldProps = {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  requirement?: PasswordFieldRequirement;\n  autoComplete?: PasswordFieldAutoComplete;\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  disabled?: boolean;\n  name?: string;\n  id?: string;\n  className?: string;\n};\n\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldProps>({\n  name: 'PasswordField',\n  importPath: '@vtex/faststore/components',\n  component: PasswordField,\n  editor: { label: 'Password Field', category: 'action' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    requirement: { type: ['mandatory', 'optional'] as const, default: 'mandatory', label: 'Requirement' },\n    autoComplete: {\n      type: ['current-password', 'new-password'] as const,\n      default: 'current-password',\n      label: 'Autocomplete',\n    },\n    showPasswordLabel: { type: 'string', default: 'Show password', label: 'Show password label' },\n    hidePasswordLabel: { type: 'string', default: 'Hide password', label: 'Hide password label' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational password input with a show/hide reveal toggle. Set autoComplete=\"new-password\" for recovery/set-password screens (default is \"current-password\" for sign-in). No validation beyond presence — invalid/errorMessage are caller-driven. No data layer: does not call login, does not read session.',\n});\n\n/**\n * Composes Field + Input + Toggle + Icon into a password input with a show/hide reveal\n * toggle. Presence-only validation is caller-driven via `invalid`/`errorMessage` — this\n * particle computes no validity of its own. `revealed` is local, uncontrolled UI state.\n */\nexport function PasswordField({\n  value,\n  defaultValue,\n  onValueChange,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  requirement = 'mandatory',\n  autoComplete = 'current-password',\n  showPasswordLabel = 'Show password',\n  hidePasswordLabel = 'Hide password',\n  disabled = false,\n  name,\n  id,\n  className,\n}: PasswordFieldProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    onValueChange?.(event.target.value);\n  }\n\n  return (\n    <Field.Root invalid={invalid} disabled={disabled} name={name} className={className} data-fs-password-field=\"\">\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <div data-fs-password-field-group=\"\">\n        <Input\n          id={id}\n          type={revealed ? 'text' : 'password'}\n          autoComplete={autoComplete}\n          // `aria-required`, not native `required`: `Input` is a Base UI `Field.Control`, and native\n          // constraint tracking would flip `aria-invalid` on its own — validity here is caller-driven.\n          aria-required={requirement === 'mandatory' ? 'true' : undefined}\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          defaultValue={value === undefined ? defaultValue : undefined}\n          onChange={handleChange}\n        />\n        <Toggle\n          type=\"button\"\n          pressed={revealed}\n          onPressedChange={setRevealed}\n          disabled={disabled}\n          aria-label={revealed ? hidePasswordLabel : showPasswordLabel}\n          data-fs-password-field-toggle=\"\"\n        >\n          <Icon name={revealed ? 'eye-off' : 'eye'} />\n        </Toggle>\n      </div>\n      <Field.Error match={invalid ? true : 'customError'}>{errorMessage}</Field.Error>\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,aAAa;GAAE,MAAM,CAAC,aAAa,UAAU;GAAY,SAAS;GAAa,OAAO;EAAc;EACpG,cAAc;GACZ,MAAM,CAAC,oBAAoB,cAAc;GACzC,SAAS;GACT,OAAO;EACT;EACA,mBAAmB;GAAE,MAAM;GAAU,SAAS;GAAiB,OAAO;EAAsB;EAC5F,mBAAmB;GAAE,MAAM;GAAU,SAAS;GAAiB,OAAO;EAAsB;EAC5F,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;AAOD,SAAgB,cAAc,EAC5B,OACA,cACA,eACA,UAAU,OACV,cACA,OACA,aACA,cAAc,aACd,eAAe,oBACf,oBAAoB,iBACpB,oBAAoB,iBACpB,WAAW,OACX,MACA,IACA,aACqB;CACrB,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,SAAS,aAAa,OAAsC;EAC1D,gBAAgB,MAAM,OAAO,KAAK;CACpC;CAEA,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAmB;EAAgB;EAAiB;EAAW,0BAAuB;EAA3G,UAAA;GACG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,qBAAC,OAAD;IAAK,gCAA6B;IAAlC,UAAA,CACE,oBAAC,OAAD;KACM;KACJ,MAAM,WAAW,SAAS;KACZ;KAGd,iBAAe,gBAAgB,cAAc,SAAS,KAAA;KACtD,YAAY;KACZ,gBAAe;KACf,aAAY;KACC;KACH;KACH;KACP,cAAc,UAAU,KAAA,IAAY,eAAe,KAAA;KACnD,UAAU;IACX,CAAA,GACD,oBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,iBAAiB;KACP;KACV,cAAY,WAAW,oBAAoB;KAC3C,iCAA8B;KAE9B,UAAA,oBAAC,MAAD,EAAM,MAAM,WAAW,YAAY,MAAQ,CAAA;IACrC,CAAA,CACL;;GACL,oBAAC,MAAM,OAAP;IAAa,OAAO,UAAU,OAAO;IAAgB,UAAA;GAA0B,CAAA;EACrE;;AAEhB"}
+{"version":3,"file":"password-field.js","names":[],"sources":["../../../src/particles/password-field/password-field.tsx"],"sourcesContent":["'use client';\nimport { defineComponent } from '@vtex/fs-core';\nimport { type ChangeEvent, useState } from 'react';\nimport { Field } from '../field/field.js';\nimport { Icon } from '../icon/icon.js';\nimport { Input } from '../input/input.js';\nimport { Toggle } from '../toggle/toggle.js';\n\nexport type PasswordFieldRequirement = 'mandatory' | 'optional';\n\nexport type PasswordFieldAutoComplete = 'current-password' | 'new-password';\n\nexport type PasswordFieldProps = {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  invalid?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  requirement?: PasswordFieldRequirement;\n  autoComplete?: PasswordFieldAutoComplete;\n  showPasswordLabel?: string;\n  hidePasswordLabel?: string;\n  disabled?: boolean;\n  name?: string;\n  id?: string;\n  className?: string;\n};\n\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldProps>({\n  name: 'PasswordField',\n  importPath: '@vtex/faststore/components',\n  component: PasswordField,\n  editor: { label: 'Password Field', category: 'action' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    requirement: { type: ['mandatory', 'optional'] as const, default: 'mandatory', label: 'Requirement' },\n    autoComplete: {\n      type: ['current-password', 'new-password'] as const,\n      default: 'current-password',\n      label: 'Autocomplete',\n    },\n    showPasswordLabel: { type: 'string', label: 'Show password label' },\n    hidePasswordLabel: { type: 'string', label: 'Hide password label' },\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n  },\n  guideline:\n    'Presentational password input with a show/hide reveal toggle. Set autoComplete=\"new-password\" for recovery/set-password screens (default is \"current-password\" for sign-in). The owner passes showPasswordLabel and hidePasswordLabel already formatted; they have no default. No validation beyond presence — invalid/errorMessage are caller-driven. No data layer: does not call login, does not read session.',\n});\n\n/**\n * Composes Field + Input + Toggle + Icon into a password input with a show/hide reveal\n * toggle. Presence-only validation is caller-driven via `invalid`/`errorMessage` — this\n * particle computes no validity of its own. `revealed` is local, uncontrolled UI state.\n */\nexport function PasswordField({\n  value,\n  defaultValue,\n  onValueChange,\n  invalid = false,\n  errorMessage,\n  label,\n  placeholder,\n  requirement = 'mandatory',\n  autoComplete = 'current-password',\n  showPasswordLabel,\n  hidePasswordLabel,\n  disabled = false,\n  name,\n  id,\n  className,\n}: Readonly<PasswordFieldProps>) {\n  const [revealed, setRevealed] = useState(false);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    onValueChange?.(event.target.value);\n  }\n\n  return (\n    <Field.Root invalid={invalid} disabled={disabled} name={name} className={className} data-fs-password-field=\"\">\n      {label ? <Field.Label>{label}</Field.Label> : null}\n      <div data-fs-password-field-group=\"\">\n        <Input\n          id={id}\n          type={revealed ? 'text' : 'password'}\n          autoComplete={autoComplete}\n          // `aria-required`, not native `required`: `Input` is a Base UI `Field.Control`, and native\n          // constraint tracking would flip `aria-invalid` on its own — validity here is caller-driven.\n          aria-required={requirement === 'mandatory' ? 'true' : undefined}\n          spellCheck={false}\n          autoCapitalize=\"off\"\n          autoCorrect=\"off\"\n          placeholder={placeholder}\n          disabled={disabled}\n          value={value}\n          defaultValue={value === undefined ? defaultValue : undefined}\n          onChange={handleChange}\n        />\n        <Toggle\n          type=\"button\"\n          pressed={revealed}\n          onPressedChange={setRevealed}\n          disabled={disabled}\n          aria-label={revealed ? hidePasswordLabel : showPasswordLabel}\n          data-fs-password-field-toggle=\"\"\n        >\n          <Icon name={revealed ? 'eye-off' : 'eye'} />\n        </Toggle>\n      </div>\n      <Field.Error match={invalid ? true : 'customError'}>{errorMessage}</Field.Error>\n    </Field.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;AA8BA,MAAa,0BAA0B,gBAAoC;CACzE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAS;CACtD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EACxC,aAAa;GAAE,MAAM;GAAU,OAAO;EAAc;EACpD,aAAa;GAAE,MAAM,CAAC,aAAa,UAAU;GAAY,SAAS;GAAa,OAAO;EAAc;EACpG,cAAc;GACZ,MAAM,CAAC,oBAAoB,cAAc;GACzC,SAAS;GACT,OAAO;EACT;EACA,mBAAmB;GAAE,MAAM;GAAU,OAAO;EAAsB;EAClE,mBAAmB;GAAE,MAAM;GAAU,OAAO;EAAsB;EAClE,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;CACjE;CACA,WACE;AACJ,CAAC;;;;;;AAOD,SAAgB,cAAc,EAC5B,OACA,cACA,eACA,UAAU,OACV,cACA,OACA,aACA,cAAc,aACd,eAAe,oBACf,mBACA,mBACA,WAAW,OACX,MACA,IACA,aAC+B;CAC/B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,SAAS,aAAa,OAAsC;EAC1D,gBAAgB,MAAM,OAAO,KAAK;CACpC;CAEA,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAmB;EAAgB;EAAiB;EAAW,0BAAuB;EAA3G,UAAA;GACG,QAAQ,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,IAAI;GAC9C,qBAAC,OAAD;IAAK,gCAA6B;IAAlC,UAAA,CACE,oBAAC,OAAD;KACM;KACJ,MAAM,WAAW,SAAS;KACZ;KAGd,iBAAe,gBAAgB,cAAc,SAAS,KAAA;KACtD,YAAY;KACZ,gBAAe;KACf,aAAY;KACC;KACH;KACH;KACP,cAAc,UAAU,KAAA,IAAY,eAAe,KAAA;KACnD,UAAU;IACX,CAAA,GACD,oBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,iBAAiB;KACP;KACV,cAAY,WAAW,oBAAoB;KAC3C,iCAA8B;KAE9B,UAAA,oBAAC,MAAD,EAAM,MAAM,WAAW,YAAY,MAAQ,CAAA;IACrC,CAAA,CACL;;GACL,oBAAC,MAAM,OAAP;IAAa,OAAO,UAAU,OAAO;IAAgB,UAAA;GAA0B,CAAA;EACrE;;AAEhB"}

package/dist/particles/payment-methods/payment-methods.d.ts

@@ -50,7 +50,7 @@ export declare const PaymentMethodsContent: {
 };
 /**
  * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported
- * because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to
+ * because a store's foundation has to list them under `icons.include` for a CMS-chosen name to
  * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model
  * rather than declaring it beside one makes the two impossible to drift apart.
  */

package/dist/particles/payment-methods/payment-methods.js

@@ -61,7 +61,7 @@ const PaymentMethodsContent = defineContentType({
 });
 /**
 * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported
-* because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to
+* because a store's foundation has to list them under `icons.include` for a CMS-chosen name to
 * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model
 * rather than declaring it beside one makes the two impossible to drift apart.
 */

package/dist/particles/payment-methods/payment-methods.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-methods.js","names":[],"sources":["../../../src/particles/payment-methods/payment-methods.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Icon } from '../icon/icon.js';\nimport { Image } from '../image/image.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsContent = defineContentType({\n  id: 'payment-methods',\n  title: 'Payment Methods',\n  description: 'Accepted payment methods shown as a strip of icons.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it.\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      methods: {\n        type: 'array',\n        title: 'Payment methods',\n        // Author-time guidance only: no read-time gate enforces item bounds, so its one consumer is\n        // the Content Platform Admin's form. An empty list still reaches the component, which\n        // self-hides on it. No ceiling — a merchant lists every method they accept.\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label'],\n          properties: {\n            // Inline rather than a named constant: the catalog scanner reads this file statically\n            // and rejects an identifier it cannot evaluate. `PAYMENT_METHOD_NAMES` derives from here.\n            method: {\n              type: 'string',\n              enum: [\n                'visa',\n                'amex',\n                'apple-pay',\n                'elo-card',\n                'diners',\n                'google-pay',\n                'mastercard',\n                'paypal',\n                'pix',\n                'stripe',\n              ],\n              title: 'Method',\n            },\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            iconUrl: {\n              type: 'string',\n              format: 'uri',\n              title: 'Custom icon',\n              widget: { 'ui:widget': 'media-gallery' },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported\n * because a store's `global.json` has to list them under `icons.include` for a CMS-chosen name to\n * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model\n * rather than declaring it beside one makes the two impossible to drift apart.\n */\nexport const PAYMENT_METHOD_NAMES = PaymentMethodsContent.schema.properties.methods.items.properties.method.enum;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PaymentMethodsContentValue = ContentValue<typeof PaymentMethodsContent>;\n\n/** One row of the strip. Derived from the model so the prop and content channels cannot drift. */\nexport type PaymentMethodItem = NonNullable<PaymentMethodsContentValue['methods']>[number];\n\ntype PaymentMethodName = NonNullable<PaymentMethodItem['method']>;\n\nexport type PaymentMethodsProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the section heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the accepted set, used when no CMS entry supplies one. */\n  methods?: readonly PaymentMethodItem[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: PaymentMethodsContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsDefinition = defineComponent({\n  name: 'PaymentMethods',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethods,\n  content: PaymentMethodsContent,\n  editor: { label: 'Payment Methods', category: 'content' },\n  schema: {\n    heading: { type: 'string', label: 'Heading' },\n    methods: { type: 'array', label: 'Payment methods' },\n  },\n  guideline:\n    \"The store's accepted payment methods as a strip of flags, both the heading and the list CMS-editable. Not PricingPaymentMethodsList, which renders a product's installment plans from commerce data. Every predefined method name must be listed in the store's icons.include. See payment-methods.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * A method that can render: a non-blank label plus exactly one glyph source. The two members are\n * what the union encodes — an upload names itself through `alt`, while a sprite glyph is decorative\n * and needs the label alongside it.\n */\ntype ResolvedMethod =\n  | { label: string; method: PaymentMethodName; src?: undefined }\n  | { label: string; method?: PaymentMethodName; src: string };\n\n/**\n * Drops every item that cannot render both a glyph and an accessible name. Neither read-time gate\n * enforces `minLength`, so a blank label reaches the component, and `method` is optional so that\n * Boleto can arrive through `iconUrl` — which leaves an item carrying neither, also legal and also\n * unrenderable. An icon with no name is the one thing F5 must not ship.\n */\nfunction resolveMethods(methods: readonly PaymentMethodItem[]): ResolvedMethod[] {\n  const resolved: ResolvedMethod[] = [];\n\n  for (const item of methods) {\n    if (!item.label.trim()) continue;\n\n    if (item.iconUrl?.trim()) {\n      resolved.push({ label: item.label, method: item.method, src: item.iconUrl });\n    } else if (item.method) {\n      resolved.push({ label: item.label, method: item.method });\n    }\n  }\n\n  return resolved;\n}\n\nexport function PaymentMethods({ heading, methods, $content, className, ...props }: PaymentMethodsProps) {\n  const sectionHeading = $content?.heading ?? heading;\n  const resolved = resolveMethods($content?.methods ?? methods ?? []);\n\n  if (resolved.length === 0) return null;\n\n  // A blank heading is unconfigured, not an empty value: no element and no group name, rather than\n  // an empty one. Trim to decide, never to render.\n  const named = Boolean(sectionHeading?.trim());\n\n  return (\n    <div {...props} className={className} data-fs-payment-methods=\"\">\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-payment-methods-heading=\"\">\n          {sectionHeading}\n        </h3>\n      ) : null}\n      {/* biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose\n          computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit\n          role is what holds the semantics the named list was chosen for. */}\n      <ul role=\"list\" data-fs-payment-methods-list=\"\" aria-label={named ? sectionHeading : undefined}>\n        {resolved.map((item, index) => (\n          <li key={index} data-fs-payment-method=\"\" data-fs-payment-method-name={item.method}>\n            {item.src === undefined ? (\n              <>\n                <Icon name={item.method} data-fs-payment-method-icon=\"\" />\n                <span data-fs-sr-only=\"\" className=\"sr-only\">\n                  {item.label}\n                </span>\n              </>\n            ) : (\n              <Image src={item.src} alt={item.label} data-fs-payment-method-icon=\"\" />\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AASA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAItB,YAAY;GACV,SAAS;IAAE,MAAM;IAAU,OAAO;GAAU;GAC5C,SAAS;IACP,MAAM;IACN,OAAO;IAIP,UAAU;IACV,OAAO;KACL,MAAM;KACN,sBAAsB;KACtB,UAAU,CAAC,OAAO;KAClB,YAAY;MAGV,QAAQ;OACN,MAAM;OACN,MAAM;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;OACF;OACA,OAAO;MACT;MACA,OAAO;OAAE,MAAM;OAAU,WAAW;OAAG,OAAO;MAAQ;MACtD,SAAS;OACP,MAAM;OACN,QAAQ;OACR,OAAO;OACP,QAAQ,EAAE,aAAa,gBAAgB;MACzC;KACF;IACF;GACF;EACF;CACF;AACF,CAAC;;;;;;;AAQD,MAAa,uBAAuB,sBAAsB,OAAO,WAAW,QAAQ,MAAM,WAAW,OAAO;AA0B5G,MAAa,2BAA2B,gBAAgB;CACtD,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAU;CACxD,QAAQ;EACN,SAAS;GAAE,MAAM;GAAU,OAAO;EAAU;EAC5C,SAAS;GAAE,MAAM;GAAS,OAAO;EAAkB;CACrD;CACA,WACE;AACJ,CAAC;;;;;;;AAqBD,SAAS,eAAe,SAAyD;CAC/E,MAAM,WAA6B,CAAC;CAEpC,KAAK,MAAM,QAAQ,SAAS;EAC1B,IAAI,CAAC,KAAK,MAAM,KAAK,GAAG;EAExB,IAAI,KAAK,SAAS,KAAK,GACrB,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;GAAQ,KAAK,KAAK;EAAQ,CAAC;OACtE,IAAI,KAAK,QACd,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO,CAAC;CAE5D;CAEA,OAAO;AACT;AAEA,SAAgB,eAAe,EAAE,SAAS,SAAS,UAAU,WAAW,GAAG,SAA8B;CACvG,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,WAAW,eAAe,UAAU,WAAW,WAAW,CAAC,CAAC;CAElE,IAAI,SAAS,WAAW,GAAG,OAAO;CAIlC,MAAM,QAAQ,QAAQ,gBAAgB,KAAK,CAAC;CAE5C,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,2BAAwB;EAA9D,UAAA,CACG,QACC,oBAAC,MAAD;GAAI,gBAAa;GAAG,mCAAgC;GACjD,UAAA;EACC,CAAA,IACF,MAIJ,oBAAC,MAAD;GAAI,MAAK;GAAO,gCAA6B;GAAG,cAAY,QAAQ,iBAAiB,KAAA;GAClF,UAAA,SAAS,KAAK,MAAM,UACnB,oBAAC,MAAD;IAAgB,0BAAuB;IAAG,+BAA6B,KAAK;IACzE,UAAA,KAAK,QAAQ,KAAA,IACZ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAQ,+BAA4B;IAAI,CAAA,GACzD,oBAAC,QAAD;KAAM,mBAAgB;KAAG,WAAU;KAChC,UAAA,KAAK;IACF,CAAA,CACN,EAAA,CAAA,IAEF,oBAAC,OAAD;KAAO,KAAK,KAAK;KAAK,KAAK,KAAK;KAAO,+BAA4B;IAAI,CAAA;GAEvE,GAXK,KAWL,CACL;EACC,CAAA,CACD;;AAET"}
+{"version":3,"file":"payment-methods.js","names":[],"sources":["../../../src/particles/payment-methods/payment-methods.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { Icon } from '../icon/icon.js';\nimport { Image } from '../image/image.js';\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsContent = defineContentType({\n  id: 'payment-methods',\n  title: 'Payment Methods',\n  description: 'Accepted payment methods shown as a strip of icons.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Neither property is required. A missing element key already omits the component before any\n    // required check runs, so requiring them would buy nothing and cost the prop fallback: an entry\n    // authoring one field alone would be shape-invalid and take the whole element down with it.\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      methods: {\n        type: 'array',\n        title: 'Payment methods',\n        // Author-time guidance only: no read-time gate enforces item bounds, so its one consumer is\n        // the Content Platform Admin's form. An empty list still reaches the component, which\n        // self-hides on it. No ceiling — a merchant lists every method they accept.\n        minItems: 1,\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label'],\n          properties: {\n            // Inline rather than a named constant: the catalog scanner reads this file statically\n            // and rejects an identifier it cannot evaluate. `PAYMENT_METHOD_NAMES` derives from here.\n            method: {\n              type: 'string',\n              enum: [\n                'visa',\n                'amex',\n                'apple-pay',\n                'elo-card',\n                'diners',\n                'google-pay',\n                'mastercard',\n                'paypal',\n                'pix',\n                'stripe',\n              ],\n              title: 'Method',\n            },\n            label: { type: 'string', minLength: 1, title: 'Label' },\n            iconUrl: {\n              type: 'string',\n              format: 'uri',\n              title: 'Custom icon',\n              widget: { 'ui:widget': 'media-gallery' },\n            },\n          },\n        },\n      },\n    },\n  },\n});\n\n/**\n * The payment glyphs the base icon dialect carries, and so the only names `method` admits. Exported\n * because a store's foundation has to list them under `icons.include` for a CMS-chosen name to\n * resolve at runtime — one import there instead of ten retyped strings. Reading it off the model\n * rather than declaring it beside one makes the two impossible to drift apart.\n */\nexport const PAYMENT_METHOD_NAMES = PaymentMethodsContent.schema.properties.methods.items.properties.method.enum;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PaymentMethodsContentValue = ContentValue<typeof PaymentMethodsContent>;\n\n/** One row of the strip. Derived from the model so the prop and content channels cannot drift. */\nexport type PaymentMethodItem = NonNullable<PaymentMethodsContentValue['methods']>[number];\n\ntype PaymentMethodName = NonNullable<PaymentMethodItem['method']>;\n\nexport type PaymentMethodsProps = ComponentPropsWithRef<'div'> & {\n  /** Authored fallback for the section heading, used when no CMS entry supplies one. */\n  heading?: string;\n  /** Authored fallback for the accepted set, used when no CMS entry supplies one. */\n  methods?: readonly PaymentMethodItem[];\n  /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n  $content?: PaymentMethodsContentValue;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PaymentMethodsDefinition = defineComponent({\n  name: 'PaymentMethods',\n  importPath: '@vtex/faststore/components',\n  component: PaymentMethods,\n  content: PaymentMethodsContent,\n  editor: { label: 'Payment Methods', category: 'content' },\n  schema: {\n    heading: { type: 'string', label: 'Heading' },\n    methods: { type: 'array', label: 'Payment methods' },\n  },\n  guideline:\n    \"The store's accepted payment methods as a strip of flags, both the heading and the list CMS-editable. Not PricingPaymentMethodsList, which renders a product's installment plans from commerce data. Every predefined method name must be listed in the store's icons.include. See payment-methods.md.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementation\n// ---------------------------------------------------------------------------\n\n/**\n * A method that can render: a non-blank label plus exactly one glyph source. The two members are\n * what the union encodes — an upload names itself through `alt`, while a sprite glyph is decorative\n * and needs the label alongside it.\n */\ntype ResolvedMethod =\n  | { label: string; method: PaymentMethodName; src?: undefined }\n  | { label: string; method?: PaymentMethodName; src: string };\n\n/**\n * Drops every item that cannot render both a glyph and an accessible name. Neither read-time gate\n * enforces `minLength`, so a blank label reaches the component, and `method` is optional so that\n * Boleto can arrive through `iconUrl` — which leaves an item carrying neither, also legal and also\n * unrenderable. An icon with no name is the one thing F5 must not ship.\n */\nfunction resolveMethods(methods: readonly PaymentMethodItem[]): ResolvedMethod[] {\n  const resolved: ResolvedMethod[] = [];\n\n  for (const item of methods) {\n    if (!item.label.trim()) continue;\n\n    if (item.iconUrl?.trim()) {\n      resolved.push({ label: item.label, method: item.method, src: item.iconUrl });\n    } else if (item.method) {\n      resolved.push({ label: item.label, method: item.method });\n    }\n  }\n\n  return resolved;\n}\n\nexport function PaymentMethods({ heading, methods, $content, className, ...props }: PaymentMethodsProps) {\n  const sectionHeading = $content?.heading ?? heading;\n  const resolved = resolveMethods($content?.methods ?? methods ?? []);\n\n  if (resolved.length === 0) return null;\n\n  // A blank heading is unconfigured, not an empty value: no element and no group name, rather than\n  // an empty one. Trim to decide, never to render.\n  const named = Boolean(sectionHeading?.trim());\n\n  return (\n    <div {...props} className={className} data-fs-payment-methods=\"\">\n      {named ? (\n        <h3 data-fs-text=\"\" data-fs-payment-methods-heading=\"\">\n          {sectionHeading}\n        </h3>\n      ) : null}\n      {/* biome-ignore lint/a11y/noRedundantRoles: WebKit drops the implicit list role from a ul whose\n          computed `list-style` is `none` — exactly what this component's swatch sets — so the explicit\n          role is what holds the semantics the named list was chosen for. */}\n      <ul role=\"list\" data-fs-payment-methods-list=\"\" aria-label={named ? sectionHeading : undefined}>\n        {resolved.map((item, index) => (\n          <li key={index} data-fs-payment-method=\"\" data-fs-payment-method-name={item.method}>\n            {item.src === undefined ? (\n              <>\n                <Icon name={item.method} data-fs-payment-method-icon=\"\" />\n                <span data-fs-sr-only=\"\" className=\"sr-only\">\n                  {item.label}\n                </span>\n              </>\n            ) : (\n              <Image src={item.src} alt={item.label} data-fs-payment-method-icon=\"\" />\n            )}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AASA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EAItB,YAAY;GACV,SAAS;IAAE,MAAM;IAAU,OAAO;GAAU;GAC5C,SAAS;IACP,MAAM;IACN,OAAO;IAIP,UAAU;IACV,OAAO;KACL,MAAM;KACN,sBAAsB;KACtB,UAAU,CAAC,OAAO;KAClB,YAAY;MAGV,QAAQ;OACN,MAAM;OACN,MAAM;QACJ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;OACF;OACA,OAAO;MACT;MACA,OAAO;OAAE,MAAM;OAAU,WAAW;OAAG,OAAO;MAAQ;MACtD,SAAS;OACP,MAAM;OACN,QAAQ;OACR,OAAO;OACP,QAAQ,EAAE,aAAa,gBAAgB;MACzC;KACF;IACF;GACF;EACF;CACF;AACF,CAAC;;;;;;;AAQD,MAAa,uBAAuB,sBAAsB,OAAO,WAAW,QAAQ,MAAM,WAAW,OAAO;AA0B5G,MAAa,2BAA2B,gBAAgB;CACtD,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAmB,UAAU;CAAU;CACxD,QAAQ;EACN,SAAS;GAAE,MAAM;GAAU,OAAO;EAAU;EAC5C,SAAS;GAAE,MAAM;GAAS,OAAO;EAAkB;CACrD;CACA,WACE;AACJ,CAAC;;;;;;;AAqBD,SAAS,eAAe,SAAyD;CAC/E,MAAM,WAA6B,CAAC;CAEpC,KAAK,MAAM,QAAQ,SAAS;EAC1B,IAAI,CAAC,KAAK,MAAM,KAAK,GAAG;EAExB,IAAI,KAAK,SAAS,KAAK,GACrB,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;GAAQ,KAAK,KAAK;EAAQ,CAAC;OACtE,IAAI,KAAK,QACd,SAAS,KAAK;GAAE,OAAO,KAAK;GAAO,QAAQ,KAAK;EAAO,CAAC;CAE5D;CAEA,OAAO;AACT;AAEA,SAAgB,eAAe,EAAE,SAAS,SAAS,UAAU,WAAW,GAAG,SAA8B;CACvG,MAAM,iBAAiB,UAAU,WAAW;CAC5C,MAAM,WAAW,eAAe,UAAU,WAAW,WAAW,CAAC,CAAC;CAElE,IAAI,SAAS,WAAW,GAAG,OAAO;CAIlC,MAAM,QAAQ,QAAQ,gBAAgB,KAAK,CAAC;CAE5C,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,2BAAwB;EAA9D,UAAA,CACG,QACC,oBAAC,MAAD;GAAI,gBAAa;GAAG,mCAAgC;GACjD,UAAA;EACC,CAAA,IACF,MAIJ,oBAAC,MAAD;GAAI,MAAK;GAAO,gCAA6B;GAAG,cAAY,QAAQ,iBAAiB,KAAA;GAClF,UAAA,SAAS,KAAK,MAAM,UACnB,oBAAC,MAAD;IAAgB,0BAAuB;IAAG,+BAA6B,KAAK;IACzE,UAAA,KAAK,QAAQ,KAAA,IACZ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,MAAM,KAAK;KAAQ,+BAA4B;IAAI,CAAA,GACzD,oBAAC,QAAD;KAAM,mBAAgB;KAAG,WAAU;KAChC,UAAA,KAAK;IACF,CAAA,CACN,EAAA,CAAA,IAEF,oBAAC,OAAD;KAAO,KAAK,KAAK;KAAK,KAAK,KAAK;KAAO,+BAA4B;IAAI,CAAA;GAEvE,GAXK,KAWL,CACL;EACC,CAAA,CACD;;AAET"}

package/dist/particles/phone-field/phone-field.d.ts

@@ -19,8 +19,8 @@ export type PhoneFieldProps = {
   /** Selects the phone mask and validation rule. */
   country?: PhoneCountry;
   /**
-   * Visible field label. No signature default (Decision 5 of the wrapped-field-particles spec) — an
-   * omitted label falls back to the field contract's `label` when bound, and to `'Phone'` when not.
+   * Visible field label, formatted by the owner. No default: an omitted label falls back to the field
+   * contract's `label` when bound, and renders empty when not.
    */
   label?: string;
   /** Disables the field when true. Falls back to the field contract's `disabled` when bound. */
@@ -37,9 +37,9 @@ export type PhoneFieldProps = {
    * particle's internal error string.
    */
   error?: string;
-  /** Error string shown when the input format is invalid. */
+  /** Error string shown when the input format is invalid, formatted by the owner. No default. */
   errorInvalid?: string;
-  /** Error string shown when the mandatory field is left empty. */
+  /** Error string shown when the mandatory field is left empty, formatted by the owner. No default. */
   errorRequired?: string;
   /**
    * Raises the field to required. It only ever raises: bound to a fieldset whose rule already says

package/dist/particles/phone-field/phone-field.js

@@ -151,7 +151,6 @@ const PhoneFieldDefinition = defineComponent({
 		},
 		label: {
 			type: "string",
-			default: "Phone",
 			label: "Label"
 		},
 		requirement: {
@@ -160,16 +159,14 @@ const PhoneFieldDefinition = defineComponent({
 		},
 		errorInvalid: {
 			type: "string",
-			default: "Invalid phone number",
 			label: "Invalid error message"
 		},
 		errorRequired: {
 			type: "string",
-			default: "Phone number is required",
 			label: "Required error message"
 		}
 	},
-	guideline: "Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value. Recomposable (RFC:503): given children, they replace the default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order."
+	guideline: "Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value; the owner supplies label, errorInvalid and errorRequired, which have no default. Recomposable (RFC:503): given children, they replace the default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order."
 });
 /**
 * Presentational, business-agnostic phone field. Composes the `field` and `input` particles: the
@@ -275,7 +272,7 @@ function PhoneFieldView({ ref, country, className, label, isDisabled, placeholde
 		})
 	});
 }
-function UnboundPhoneField({ value, defaultValue = "", onValueChange, country = "US", label, isDisabled = false, placeholder, invalid, error, errorInvalid = "Invalid phone number", errorRequired = "Phone number is required", requirement, onBlur, className, ref, children }) {
+function UnboundPhoneField({ value, defaultValue = "", onValueChange, country = "US", label, isDisabled = false, placeholder, invalid, error, errorInvalid, errorRequired, requirement, onBlur, className, ref, children }) {
 	const isControlled = value !== void 0;
 	const [internalRaw, setInternalRaw] = useState(defaultValue);
 	const [localInvalid, setLocalInvalid] = useState(false);
@@ -288,7 +285,7 @@ function UnboundPhoneField({ value, defaultValue = "", onValueChange, country =
 	}
 	const rawValue = isControlled ? value : internalRaw;
 	const maskedValue = applyPhoneMask(rawValue, country);
-	const resolvedLabel = label ?? "Phone";
+	const resolvedLabel = label ?? "";
 	const effectiveInvalid = invalid !== void 0 ? invalid : localInvalid;
 	const effectiveError = error !== void 0 ? error : effectiveInvalid ? localError : "";
 	function handleChange(event) {
@@ -303,11 +300,11 @@ function UnboundPhoneField({ value, defaultValue = "", onValueChange, country =
 		let fieldError = "";
 		if (requirement === "mandatory" && !rawValue.trim()) {
 			isFieldInvalid = true;
-			fieldError = errorRequired;
+			fieldError = errorRequired ?? "";
 		} else if (rawValue.trim()) {
 			const valid = validatePhoneNumber(rawValue, country);
 			isFieldInvalid = !valid;
-			fieldError = valid ? "" : errorInvalid;
+			fieldError = valid ? "" : errorInvalid ?? "";
 		}
 		setLocalInvalid(isFieldInvalid);
 		setLocalError(fieldError);
@@ -329,10 +326,10 @@ function UnboundPhoneField({ value, defaultValue = "", onValueChange, country =
 		children
 	});
 }
-function BoundPhoneField({ value: _value, defaultValue: _defaultValue, onValueChange, country = "US", label, isDisabled, placeholder, invalid, error, errorInvalid = "Invalid phone number", errorRequired = "Phone number is required", requirement, onBlur, className, ref: callerRef, contract, children }) {
+function BoundPhoneField({ value: _value, defaultValue: _defaultValue, onValueChange, country = "US", label, isDisabled, placeholder, invalid, error, errorInvalid, errorRequired, requirement, onBlur, className, ref: callerRef, contract, children }) {
 	const rule = useMemo(() => mergeFieldValidator(contract.rule, "phoneFormat", (rawValue) => {
 		const raw = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
-		return !raw.trim() || validatePhoneNumber(raw, country) || errorInvalid;
+		return !raw.trim() || validatePhoneNumber(raw, country) || (errorInvalid ?? false);
 	}), [
 		contract.rule,
 		errorInvalid,
@@ -346,7 +343,7 @@ function BoundPhoneField({ value: _value, defaultValue: _defaultValue, onValueCh
 	const { invalid: rhfInvalid, error: rhfError } = getFieldState(contract.name, useFormState({ name: contract.name }));
 	const composedRef = useComposedRef(callerRef, field.ref);
 	const maskedValue = applyPhoneMask(typeof field.value === "string" ? field.value : String(field.value ?? ""), country);
-	const resolvedLabel = label ?? contract.label ?? "Phone";
+	const resolvedLabel = label ?? contract.label ?? "";
 	const resolvedPlaceholder = placeholder ?? contract.placeholder;
 	const resolvedIsDisabled = isDisabled ?? contract.disabled ?? false;
 	const effectiveInvalid = invalid !== void 0 ? invalid : rhfInvalid;

package/dist/particles/phone-field/phone-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone-field.js","names":["BaseField"],"sources":["../../../src/particles/phone-field/phone-field.tsx"],"sourcesContent":["'use client';\nimport { Field as BaseField } from '@base-ui/react/field';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, FocusEvent, ReactNode, Ref } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport { useFormContext, useFormState } from 'react-hook-form';\nimport {\n  FieldBinding,\n  type FieldContract,\n  type FieldRule,\n  mergeFieldValidator,\n  TEXT_FIELD_VALUE,\n  useBoundField,\n  useField,\n} from '../field/field.js';\nimport { Input } from '../input/input.js';\nimport { useComposedRef } from '../shared/compose-refs.js';\n\n// ---------------------------------------------------------------------------\n// Country masks\n// ---------------------------------------------------------------------------\n\n/**\n * Country codes supported by PhoneField.\n * Only US and BR are implemented; every other ISO-2 code falls back to the US\n * format (Gap-06 in the PhoneField spec).\n */\nexport type PhoneCountry = 'US' | 'BR';\n\n/**\n * Returns true when `value` starts with the E.164 or bare country-code prefix\n * for the given country.\n *\n * US country code: 1   → \"+1…\" or \"1…\"\n * BR country code: 55  → \"+55…\" or \"55…\"\n */\nfunction isValidCountryCode(value: string, country: PhoneCountry): boolean {\n  switch (country) {\n    case 'US':\n      return value.startsWith('+1') || value.startsWith('1');\n    case 'BR':\n      return value.startsWith('+55') || value.startsWith('55');\n    default:\n      return false;\n  }\n}\n\n/**\n * Strips phone mask formatting from `value`.\n *\n * When the raw string carries a valid country-code prefix (e.g. \"+55…\"), the\n * returned value preserves the leading \"+\" so callers can detect E.164 intent.\n * Otherwise only digits are returned.\n *\n * `removePhoneMask(applyPhoneMask(raw, country), country) === raw` for all\n * valid raw values that do NOT carry a country-code prefix.\n */\nexport function removePhoneMask(value: string, country: PhoneCountry): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // Only treat as E.164 when the raw string explicitly carries a \"+\" prefix.\n  // A bare digit string that starts with the country-code digits (e.g. \"1234567890\"\n  // starting with \"1\") is a local number, not a country-code-prefixed one.\n  if (value.startsWith('+') && isValidCountryCode(value, country)) {\n    return `+${onlyDigits}`;\n  }\n\n  return onlyDigits;\n}\n\n/**\n * Formats `value` into the mask pattern for `country`, applying as many mask\n * characters as the digit count allows (progressive masking while typing).\n *\n * US:  (123) 456-7890   or   +1 (123) 456-7890\n * BR:  (11) 99999-9999  or   +55 (11) 99999-9999\n *\n * Non-US/BR countries fall back to the US mask.\n */\nexport function applyPhoneMask(value: string, country: PhoneCountry): string {\n  switch (country) {\n    case 'US':\n      return applyUSPhoneMask(value);\n    case 'BR':\n      return applyBRPhoneMask(value);\n    default:\n      return applyUSPhoneMask(value);\n  }\n}\n\nfunction applyUSPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+\" prefix and full country code\n  if (value.startsWith('+1') && onlyDigits.length >= 11) {\n    const local = value.replace('+1', '').replace(/\\D/g, '');\n    return `+1 ${formatUSNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"11234567890\")\n  if (onlyDigits.startsWith('1') && onlyDigits.length === 11) {\n    return `+1 ${formatUSNumber(onlyDigits.substring(1))}`;\n  }\n\n  return formatUSNumber(onlyDigits);\n}\n\nfunction formatUSNumber(digits: string): string {\n  // US local numbers cap at 10 digits — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 10);\n  if (local.length === 0) return '';\n  if (local.length <= 3) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 3)}) ${local.slice(3)}`;\n  return `(${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;\n}\n\nfunction applyBRPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+55\" prefix. 12 digits is a landline (+55 + 10 local),\n  // 13 is a mobile (+55 + 11 local); both strip the \"55\" country code.\n  if (value.startsWith('+55') && onlyDigits.length >= 12) {\n    const local = value.replace('+55', '').replace(/\\D/g, '');\n    return `+55 ${formatBRNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"5511999998888\" mobile, \"551133334444\" landline)\n  if (onlyDigits.startsWith('55') && (onlyDigits.length === 12 || onlyDigits.length === 13)) {\n    return `+55 ${formatBRNumber(onlyDigits.substring(2))}`;\n  }\n\n  return formatBRNumber(onlyDigits);\n}\n\nfunction formatBRNumber(digits: string): string {\n  // BR local numbers cap at 11 digits (mobile) — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 11);\n  if (local.length === 0) return '';\n  if (local.length <= 2) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 2)}) ${local.slice(2)}`;\n  // 7-10 digits: landline format  (XX) XXXX-XXXX\n  if (local.length <= 10) return `(${local.slice(0, 2)}) ${local.slice(2, 6)}-${local.slice(6)}`;\n  // 11 digits: mobile format  (XX) XXXXX-XXXX\n  return `(${local.slice(0, 2)}) ${local.slice(2, 7)}-${local.slice(7)}`;\n}\n\n// ---------------------------------------------------------------------------\n// Validation\n// ---------------------------------------------------------------------------\n\n/**\n * BR local part: 10 digits is a landline; 11 digits is a mobile, which must carry the mandatory\n * ninth digit \"9\" right after the two-digit DDD (the `phone` library rule the spec's Gap-05\n * reimplements — \"11899998888\" is mobile-shaped but not a real BR number).\n */\nfunction isValidBRLocal(digits: string): boolean {\n  if (digits.length === 10) return true;\n  return digits.length === 11 && digits[2] === '9';\n}\n\n/**\n * Validates a raw (unmasked) phone number string for the given country.\n *\n * NOTE: The spec (KD-3) calls for using the `phone` npm library for validation.\n * The library is listed in Gap-05 as a new dependency to add when available.\n * Until that dependency is installed, this implements an equivalent\n * digit-count validation that covers all spec key-scenarios for US and BR.\n * Country-code and non-country-code inputs are both handled.\n *\n * US valid forms:\n *   - 10 digits (local, e.g. \"1234567890\")\n *   - 11 raw digits with country code \"1\" (e.g. \"11234567890\")\n *   - E.164 \"+1\" + 10 digits (e.g. \"+11234567890\")\n *\n * BR valid forms:\n *   - 10 digits (landline, e.g. \"1133334444\")\n *   - 11 digits (mobile, e.g. \"11999998888\"; the ninth digit after the DDD must be \"9\")\n *   - E.164 \"+55\" + 10 or 11 digits (e.g. \"+5511999998888\")\n */\nexport function validatePhoneNumber(input: string, country: PhoneCountry): boolean {\n  if (!input || !input.trim()) return false;\n\n  const digits = input.replace(/\\D/g, '');\n\n  if (isValidCountryCode(input, country)) {\n    // Country-code branch: validate digit count including the country code digits.\n    if (country === 'US') {\n      // \"+1\" or \"1\" prefix + exactly 10 local digits = 11 raw digits\n      if (digits.length === 11) return true;\n      // Fall through: could be a 10-digit local number that starts with \"1\"\n    } else {\n      // BR: \"+55\" or \"55\" prefix + 10 or 11 local digits = 12 or 13 raw digits\n      if (digits.length === 12 || digits.length === 13) return isValidBRLocal(digits.slice(2));\n      // Fall through: could be local digits that happen to start with \"55\"\n    }\n  }\n\n  // Local (no country code) validation\n  if (country === 'US') {\n    return digits.length === 10;\n  }\n\n  return isValidBRLocal(digits);\n}\n\n/**\n * Normalizes a valid raw phone value to E.164 for persistence (legacy checkout parity): the\n * particle emits local digits (\"2015551234\") or a \"+\"-prefixed string; the profile stores\n * \"+12015551234\". Only call this on values `validatePhoneNumber` has already accepted — shared by\n * every binding that persists a phone value (`ClientProfilePhoneControl`, `ClientProfileFieldset`)\n * so there is exactly one normalization implementation.\n */\nexport function toE164(raw: string, country: PhoneCountry): string {\n  const unmasked = removePhoneMask(raw, country);\n  if (unmasked.startsWith('+')) return unmasked;\n  const code = country === 'BR' ? '55' : '1';\n  const localMax = country === 'BR' ? 11 : 10;\n  // A bare country-code prefix (\"12015551234\", \"5511999998888\") only needs the \"+\".\n  return unmasked.startsWith(code) && unmasked.length > localMax ? `+${unmasked}` : `+${code}${unmasked}`;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldRequirement = 'mandatory' | 'optional';\n\nexport type PhoneFieldProps = {\n  /** Controlled raw (unmasked) phone value. Unused on the bound path — react-hook-form owns the value. */\n  value?: string;\n  /** Uncontrolled initial raw value. Unused on the bound path — the field contract's `defaultValue` seeds it instead. */\n  defaultValue?: string;\n  /** Called with the raw (unmasked) value on every change. */\n  onValueChange?: (value: string) => void;\n  /** Selects the phone mask and validation rule. */\n  country?: PhoneCountry;\n  /**\n   * Visible field label. No signature default (Decision 5 of the wrapped-field-particles spec) — an\n   * omitted label falls back to the field contract's `label` when bound, and to `'Phone'` when not.\n   */\n  label?: string;\n  /** Disables the field when true. Falls back to the field contract's `disabled` when bound. */\n  isDisabled?: boolean;\n  /** Input placeholder text. Falls back to the field contract's `placeholder` when bound. */\n  placeholder?: string;\n  /**\n   * Externally-controlled invalid state. When provided, overrides the\n   * particle's internal blur-triggered validation result.\n   */\n  invalid?: boolean;\n  /**\n   * Externally-supplied error message. When provided, overrides the\n   * particle's internal error string.\n   */\n  error?: string;\n  /** Error string shown when the input format is invalid. */\n  errorInvalid?: string;\n  /** Error string shown when the mandatory field is left empty. */\n  errorRequired?: string;\n  /**\n   * Raises the field to required. It only ever raises: bound to a fieldset whose rule already says\n   * required, `'optional'` does not lower it.\n   *\n   * - `'mandatory'`: empty input blocks submission.\n   * - `'optional'`: empty input is allowed; format is still checked when a\n   *    value is present.\n   * - unset: no opinion, so a phone with no baseline is optional.\n   */\n  requirement?: PhoneFieldRequirement;\n  /** Called after the field loses focus (post-validation). */\n  onBlur?: () => void;\n  /** Additional class applied to the root element. */\n  className?: string;\n  /**\n   * Lands on the masked `<input type=\"tel\">` the particle renders. Composed with react-hook-form's own\n   * ref on the bound path — a caller ref and react-hook-form's ref are both honoured.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Given, replaces the default `Field.Label` + `PhoneFieldInput` + `Field.Error` anatomy — any order,\n   * any subset. `PhoneFieldInput` is the one part that carries the mask, the composed ref and the\n   * particle's own value/handlers; a composed generic `Field.Control` would call `useController` a\n   * second time for the same name (RFC's named, accepted double-binder hole).\n   */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PhoneFieldDefinition = defineComponent<PhoneFieldProps>({\n  name: 'PhoneField',\n  importPath: '@vtex/faststore/components',\n  component: PhoneField,\n  providesContext: 'phone-field',\n  editor: { label: 'Phone Field', category: 'action' },\n  schema: {\n    country: { type: 'string', default: 'US', label: 'Country (US or BR)' },\n    label: { type: 'string', default: 'Phone', label: 'Label' },\n    // No default: an unset requirement is no opinion, not a raise to mandatory.\n    requirement: { type: ['mandatory', 'optional'] as const, label: 'Requirement' },\n    errorInvalid: { type: 'string', default: 'Invalid phone number', label: 'Invalid error message' },\n    errorRequired: { type: 'string', default: 'Phone number is required', label: 'Required error message' },\n  },\n  guideline:\n    'Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value. Recomposable (RFC:503): given children, they replace the default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order.',\n});\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Presentational, business-agnostic phone field. Composes the `field` and `input` particles: the\n * `Field.Root` owns the invalid/disabled state and the `Field.Error match` slot, while the `Input`\n * particle renders the masked `<tel>` control. The particle stays reusable (checkout binding today,\n * MyAccount / extensions later); a binding owns the data source and persistence.\n *\n * US/BR masking, blur validation, and the `data-fs-phone-field*` attributes (plus the country variant\n * attribute) are kept; error strings remain props (a documented i18n divergence — the country tables\n * are internal, the copy is owner-supplied).\n *\n * Reads the field contract through `useField()` and `useFormContext()` and dispatches to a bound or an\n * unbound sub-component — \"bound\" means both are present. Every react-hook-form hook lives in\n * `BoundPhoneField`, so hook order never changes under a mounted component. Both sub-components render\n * the same `PhoneFieldView`, so the two paths cannot drift into different DOM.\n */\nexport function PhoneField({ requirement, ...props }: PhoneFieldProps): ReactNode {\n  const contract = useField();\n  const formContext = useFormContext();\n\n  if (contract && formContext) {\n    return <BoundPhoneField {...props} requirement={requirement} contract={contract} />;\n  }\n\n  return <UnboundPhoneField {...props} requirement={requirement} />;\n}\n\n// ---------------------------------------------------------------------------\n// Input part — catalogued, placeable (Decision 4). Carries the mask, the composed ref, and the\n// particle's own onChange/onBlur; a generic Field.Control cannot be this part, because the mask and\n// the country/requirement validator belong to PhoneField, not to react-hook-form's own registration.\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldInputContextValue = {\n  ref?: Ref<HTMLInputElement>;\n  value: string;\n  placeholder?: string;\n  /** Resolved by the binder, threaded here because this part is not the one that binds. */\n  required: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n};\n\nconst PhoneFieldInputContext = createContext<PhoneFieldInputContextValue | null>(null);\n\nfunction usePhoneFieldInputContext(): PhoneFieldInputContextValue {\n  const context = useContext(PhoneFieldInputContext);\n  if (!context) {\n    throw new Error('PhoneFieldInput must be a descendant of PhoneField.');\n  }\n  return context;\n}\n\nexport type PhoneFieldInputProps = { className?: string };\n\nexport const PhoneFieldInputDefinition = defineComponent<PhoneFieldInputProps>({\n  name: 'PhoneFieldInput',\n  importPath: '@vtex/faststore/components',\n  component: PhoneFieldInput,\n  requiresContext: 'phone-field',\n  editor: { label: 'Phone Field Input', category: 'action' },\n  schema: {},\n  guideline:\n    \"The masked <input type=\\\"tel\\\"> PhoneField owns. Must sit inside PhoneField, in either the default anatomy or an author's composed children. Carries the country mask, the composed ref, and PhoneField's own onChange/onBlur — a composed Field.Control here instead re-registers the field with react-hook-form and loses the mask (unsupported, RFC's named double-binder hole).\",\n});\n\n/** Renders the masked `<input>`, reading its value/handlers/ref from the enclosing `PhoneField`. */\nexport function PhoneFieldInput({ className }: PhoneFieldInputProps): ReactNode {\n  const { ref, value, placeholder, required, onChange, onBlur } = usePhoneFieldInputContext();\n\n  return (\n    <Input\n      ref={ref}\n      data-fs-phone-field-input=\"\"\n      type=\"tel\"\n      inputMode=\"numeric\"\n      // `aria-required`, not native `required`, for the reason password-field.tsx:89-91 records:\n      // `Input` is a Base UI `Field.Control`, and native constraint tracking would flip\n      // `aria-invalid` on its own, ahead of react-hook-form's own validation.\n      aria-required={required || undefined}\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      placeholder={placeholder}\n      className={className}\n    />\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Shared view — identical DOM whether bound or unbound\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldViewProps = {\n  ref?: Ref<HTMLInputElement>;\n  country: PhoneCountry;\n  className?: string;\n  label: string;\n  isDisabled: boolean;\n  placeholder?: string;\n  required: boolean;\n  maskedValue: string;\n  effectiveInvalid: boolean;\n  effectiveError: string;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n};\n\nfunction PhoneFieldView({\n  ref,\n  country,\n  className,\n  label,\n  isDisabled,\n  placeholder,\n  required,\n  maskedValue,\n  effectiveInvalid,\n  effectiveError,\n  onChange,\n  onBlur,\n  children,\n}: PhoneFieldViewProps) {\n  const inputContext = useMemo<PhoneFieldInputContextValue>(\n    () => ({ ref, value: maskedValue, placeholder, required, onChange, onBlur }),\n    [ref, maskedValue, placeholder, required, onChange, onBlur],\n  );\n\n  return (\n    // Deliberately the RAW Base UI Field primitives, not this package's own Field.Root/Label/Error\n    // wrapper, for the default anatomy: this reproduces exactly what rendered before Decision 3\n    // (when FieldContractBoundary shielded this subtree from the ambient contract) — the resolved\n    // `label`/`effectiveError` text renders unconditionally, and Field.Root's own dirty/touched\n    // fallback tracking stays in charge, rather than react-hook-form's. Composed children, below,\n    // use the package's own Field.* parts on purpose — that is what makes a childless Field.Label /\n    // Field.Error resolve real text (FR-5).\n    <BaseField.Root\n      data-fs-phone-field-root=\"\"\n      data-fs-phone-field-root-country={country}\n      data-fs-field-root=\"\"\n      className={className}\n      invalid={effectiveInvalid}\n      disabled={isDisabled}\n    >\n      <PhoneFieldInputContext.Provider value={inputContext}>\n        {children ?? (\n          <>\n            <BaseField.Label data-fs-phone-field-label=\"\" data-fs-field-label=\"\">\n              {label}\n            </BaseField.Label>\n            <PhoneFieldInput />\n            {effectiveError ? (\n              <BaseField.Error match data-fs-phone-field-error=\"\" data-fs-field-error=\"\">\n                {effectiveError}\n              </BaseField.Error>\n            ) : null}\n          </>\n        )}\n      </PhoneFieldInputContext.Provider>\n    </BaseField.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Unbound — today's body, moved verbatim\n// ---------------------------------------------------------------------------\n\ntype UnboundPhoneFieldProps = PhoneFieldProps;\n\nfunction UnboundPhoneField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  country = 'US',\n  label,\n  isDisabled = false,\n  placeholder,\n  invalid,\n  error,\n  errorInvalid = 'Invalid phone number',\n  errorRequired = 'Phone number is required',\n  requirement,\n  onBlur,\n  className,\n  ref,\n  children,\n}: UnboundPhoneFieldProps) {\n  const isControlled = value !== undefined;\n\n  const [internalRaw, setInternalRaw] = useState(defaultValue);\n  const [localInvalid, setLocalInvalid] = useState(false);\n  const [localError, setLocalError] = useState('');\n\n  // Clear local validation state when country changes so the next blur re-validates against the new\n  // country's rules. The comparison baseline lives in state, not a ref, and the compare-and-set runs\n  // during render (before paint), so a render React abandons without committing — a suspended\n  // transition, a Suspense retry — never leaves a stale baseline behind the way a ref write would.\n  const [prevCountry, setPrevCountry] = useState(country);\n  if (prevCountry !== country) {\n    setPrevCountry(country);\n    setLocalInvalid(false);\n    setLocalError('');\n  }\n\n  const rawValue = isControlled ? (value as string) : internalRaw;\n  const maskedValue = applyPhoneMask(rawValue, country);\n  const resolvedLabel = label ?? 'Phone';\n\n  // External props take precedence over internal validation state.\n  // When `invalid` is externally controlled, the error display is also fully\n  // controlled: use the explicit `error` prop, or fall back to empty string so\n  // no stale local error leaks through when the parent says the field is valid.\n  const effectiveInvalid = invalid !== undefined ? invalid : localInvalid;\n  const effectiveError = error !== undefined ? error : effectiveInvalid ? localError : '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n    const raw = removePhoneMask(event.target.value, country);\n    if (!isControlled) {\n      setInternalRaw(raw);\n    }\n    onValueChange?.(raw);\n  }\n\n  function handleBlur(_event: FocusEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n\n    let isFieldInvalid = false;\n    let fieldError = '';\n\n    if (requirement === 'mandatory' && !rawValue.trim()) {\n      isFieldInvalid = true;\n      fieldError = errorRequired;\n    } else if (rawValue.trim()) {\n      const valid = validatePhoneNumber(rawValue, country);\n      isFieldInvalid = !valid;\n      fieldError = valid ? '' : errorInvalid;\n    }\n    // optional + empty → no error, keep isFieldInvalid = false / fieldError = ''\n\n    setLocalInvalid(isFieldInvalid);\n    setLocalError(fieldError);\n    onBlur?.();\n  }\n\n  return (\n    <PhoneFieldView\n      ref={ref}\n      country={country}\n      className={className}\n      label={resolvedLabel}\n      isDisabled={isDisabled}\n      placeholder={placeholder}\n      required={requirement === 'mandatory'}\n      maskedValue={maskedValue}\n      effectiveInvalid={effectiveInvalid}\n      effectiveError={effectiveError}\n      onChange={handleChange}\n      onBlur={handleBlur}\n    >\n      {children}\n    </PhoneFieldView>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Bound — reads the field contract, binds through useController\n// ---------------------------------------------------------------------------\n\ntype BoundPhoneFieldProps = UnboundPhoneFieldProps & { contract: FieldContract };\n\nfunction BoundPhoneField({\n  value: _value,\n  defaultValue: _defaultValue,\n  onValueChange,\n  country = 'US',\n  label,\n  isDisabled,\n  placeholder,\n  invalid,\n  error,\n  errorInvalid = 'Invalid phone number',\n  errorRequired = 'Phone number is required',\n  requirement,\n  onBlur,\n  className,\n  ref: callerRef,\n  contract,\n  children,\n}: BoundPhoneFieldProps) {\n  // Format only. Requiredness is not decided here: `useBoundField` resolves it from the fieldset's\n  // baseline and the raise below, and installs the blank check, so the announcement and the\n  // validation cannot disagree. The check composes alongside whatever the fieldset validates —\n  // before this merge, any contract validator discarded the particle's own validation whole.\n  const rule = useMemo<FieldRule>(\n    () =>\n      mergeFieldValidator(contract.rule, 'phoneFormat', (rawValue) => {\n        const raw = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');\n        return !raw.trim() || validatePhoneNumber(raw, country) || errorInvalid;\n      }),\n    [contract.rule, errorInvalid, country],\n  );\n\n  const field = useBoundField(contract, TEXT_FIELD_VALUE, rule, {\n    required: requirement === 'mandatory',\n    message: errorRequired,\n  });\n  const { getFieldState } = useFormContext();\n  const { invalid: rhfInvalid, error: rhfError } = getFieldState(contract.name, useFormState({ name: contract.name }));\n\n  const composedRef = useComposedRef<HTMLInputElement>(callerRef, field.ref);\n\n  const rawValue = typeof field.value === 'string' ? field.value : String(field.value ?? '');\n  const maskedValue = applyPhoneMask(rawValue, country);\n  const resolvedLabel = label ?? contract.label ?? 'Phone';\n  const resolvedPlaceholder = placeholder ?? contract.placeholder;\n  const resolvedIsDisabled = isDisabled ?? contract.disabled ?? false;\n\n  const effectiveInvalid = invalid !== undefined ? invalid : rhfInvalid;\n  const effectiveError = error !== undefined ? error : effectiveInvalid ? (rhfError?.message ?? '') : '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const raw = removePhoneMask(event.target.value, country);\n    field.onChange(raw);\n    onValueChange?.(raw);\n  }\n\n  function handleBlur(_event: FocusEvent<HTMLInputElement>) {\n    field.onBlur();\n    onBlur?.();\n  }\n\n  return (\n    // Decision 3: replaces the empty-contract FieldContractBoundary with a re-provided contract\n    // carrying the RESOLVED name/label/placeholder — the values a composed childless Field.Label /\n    // Field.Error actually need, as opposed to the raw (possibly-undefined) ones the ambient\n    // contract from the enclosing FieldBinding carries. useBoundField above remains the sole binder\n    // for contract.name; this FieldBinding never registers anything itself.\n    <FieldBinding\n      name={contract.name}\n      label={resolvedLabel}\n      placeholder={resolvedPlaceholder}\n      defaultValue={contract.defaultValue}\n      rule={contract.rule}\n      options={contract.options}\n      disabled={resolvedIsDisabled}\n      readOnly={contract.readOnly}\n      autoComplete={contract.autoComplete}\n      inputMode={contract.inputMode}\n    >\n      <PhoneFieldView\n        ref={composedRef}\n        country={country}\n        className={className}\n        label={resolvedLabel}\n        isDisabled={resolvedIsDisabled}\n        placeholder={resolvedPlaceholder}\n        required={field.required}\n        maskedValue={maskedValue}\n        effectiveInvalid={effectiveInvalid}\n        effectiveError={effectiveError}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {children}\n      </PhoneFieldView>\n    </FieldBinding>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"phone-field.js","names":["BaseField"],"sources":["../../../src/particles/phone-field/phone-field.tsx"],"sourcesContent":["'use client';\nimport { Field as BaseField } from '@base-ui/react/field';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ChangeEvent, FocusEvent, ReactNode, Ref } from 'react';\nimport { createContext, useContext, useMemo, useState } from 'react';\nimport { useFormContext, useFormState } from 'react-hook-form';\nimport {\n  FieldBinding,\n  type FieldContract,\n  type FieldRule,\n  mergeFieldValidator,\n  TEXT_FIELD_VALUE,\n  useBoundField,\n  useField,\n} from '../field/field.js';\nimport { Input } from '../input/input.js';\nimport { useComposedRef } from '../shared/compose-refs.js';\n\n// ---------------------------------------------------------------------------\n// Country masks\n// ---------------------------------------------------------------------------\n\n/**\n * Country codes supported by PhoneField.\n * Only US and BR are implemented; every other ISO-2 code falls back to the US\n * format (Gap-06 in the PhoneField spec).\n */\nexport type PhoneCountry = 'US' | 'BR';\n\n/**\n * Returns true when `value` starts with the E.164 or bare country-code prefix\n * for the given country.\n *\n * US country code: 1   → \"+1…\" or \"1…\"\n * BR country code: 55  → \"+55…\" or \"55…\"\n */\nfunction isValidCountryCode(value: string, country: PhoneCountry): boolean {\n  switch (country) {\n    case 'US':\n      return value.startsWith('+1') || value.startsWith('1');\n    case 'BR':\n      return value.startsWith('+55') || value.startsWith('55');\n    default:\n      return false;\n  }\n}\n\n/**\n * Strips phone mask formatting from `value`.\n *\n * When the raw string carries a valid country-code prefix (e.g. \"+55…\"), the\n * returned value preserves the leading \"+\" so callers can detect E.164 intent.\n * Otherwise only digits are returned.\n *\n * `removePhoneMask(applyPhoneMask(raw, country), country) === raw` for all\n * valid raw values that do NOT carry a country-code prefix.\n */\nexport function removePhoneMask(value: string, country: PhoneCountry): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // Only treat as E.164 when the raw string explicitly carries a \"+\" prefix.\n  // A bare digit string that starts with the country-code digits (e.g. \"1234567890\"\n  // starting with \"1\") is a local number, not a country-code-prefixed one.\n  if (value.startsWith('+') && isValidCountryCode(value, country)) {\n    return `+${onlyDigits}`;\n  }\n\n  return onlyDigits;\n}\n\n/**\n * Formats `value` into the mask pattern for `country`, applying as many mask\n * characters as the digit count allows (progressive masking while typing).\n *\n * US:  (123) 456-7890   or   +1 (123) 456-7890\n * BR:  (11) 99999-9999  or   +55 (11) 99999-9999\n *\n * Non-US/BR countries fall back to the US mask.\n */\nexport function applyPhoneMask(value: string, country: PhoneCountry): string {\n  switch (country) {\n    case 'US':\n      return applyUSPhoneMask(value);\n    case 'BR':\n      return applyBRPhoneMask(value);\n    default:\n      return applyUSPhoneMask(value);\n  }\n}\n\nfunction applyUSPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+\" prefix and full country code\n  if (value.startsWith('+1') && onlyDigits.length >= 11) {\n    const local = value.replace('+1', '').replace(/\\D/g, '');\n    return `+1 ${formatUSNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"11234567890\")\n  if (onlyDigits.startsWith('1') && onlyDigits.length === 11) {\n    return `+1 ${formatUSNumber(onlyDigits.substring(1))}`;\n  }\n\n  return formatUSNumber(onlyDigits);\n}\n\nfunction formatUSNumber(digits: string): string {\n  // US local numbers cap at 10 digits — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 10);\n  if (local.length === 0) return '';\n  if (local.length <= 3) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 3)}) ${local.slice(3)}`;\n  return `(${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;\n}\n\nfunction applyBRPhoneMask(value: string): string {\n  const onlyDigits = value.replace(/\\D/g, '');\n\n  // E.164 with explicit \"+55\" prefix. 12 digits is a landline (+55 + 10 local),\n  // 13 is a mobile (+55 + 11 local); both strip the \"55\" country code.\n  if (value.startsWith('+55') && onlyDigits.length >= 12) {\n    const local = value.replace('+55', '').replace(/\\D/g, '');\n    return `+55 ${formatBRNumber(local)}`;\n  }\n\n  // Bare country-code prefix (e.g. \"5511999998888\" mobile, \"551133334444\" landline)\n  if (onlyDigits.startsWith('55') && (onlyDigits.length === 12 || onlyDigits.length === 13)) {\n    return `+55 ${formatBRNumber(onlyDigits.substring(2))}`;\n  }\n\n  return formatBRNumber(onlyDigits);\n}\n\nfunction formatBRNumber(digits: string): string {\n  // BR local numbers cap at 11 digits (mobile) — drop the overflow instead of growing the mask unbounded.\n  const local = digits.slice(0, 11);\n  if (local.length === 0) return '';\n  if (local.length <= 2) return `(${local}`;\n  if (local.length <= 6) return `(${local.slice(0, 2)}) ${local.slice(2)}`;\n  // 7-10 digits: landline format  (XX) XXXX-XXXX\n  if (local.length <= 10) return `(${local.slice(0, 2)}) ${local.slice(2, 6)}-${local.slice(6)}`;\n  // 11 digits: mobile format  (XX) XXXXX-XXXX\n  return `(${local.slice(0, 2)}) ${local.slice(2, 7)}-${local.slice(7)}`;\n}\n\n// ---------------------------------------------------------------------------\n// Validation\n// ---------------------------------------------------------------------------\n\n/**\n * BR local part: 10 digits is a landline; 11 digits is a mobile, which must carry the mandatory\n * ninth digit \"9\" right after the two-digit DDD (the `phone` library rule the spec's Gap-05\n * reimplements — \"11899998888\" is mobile-shaped but not a real BR number).\n */\nfunction isValidBRLocal(digits: string): boolean {\n  if (digits.length === 10) return true;\n  return digits.length === 11 && digits[2] === '9';\n}\n\n/**\n * Validates a raw (unmasked) phone number string for the given country.\n *\n * NOTE: The spec (KD-3) calls for using the `phone` npm library for validation.\n * The library is listed in Gap-05 as a new dependency to add when available.\n * Until that dependency is installed, this implements an equivalent\n * digit-count validation that covers all spec key-scenarios for US and BR.\n * Country-code and non-country-code inputs are both handled.\n *\n * US valid forms:\n *   - 10 digits (local, e.g. \"1234567890\")\n *   - 11 raw digits with country code \"1\" (e.g. \"11234567890\")\n *   - E.164 \"+1\" + 10 digits (e.g. \"+11234567890\")\n *\n * BR valid forms:\n *   - 10 digits (landline, e.g. \"1133334444\")\n *   - 11 digits (mobile, e.g. \"11999998888\"; the ninth digit after the DDD must be \"9\")\n *   - E.164 \"+55\" + 10 or 11 digits (e.g. \"+5511999998888\")\n */\nexport function validatePhoneNumber(input: string, country: PhoneCountry): boolean {\n  if (!input || !input.trim()) return false;\n\n  const digits = input.replace(/\\D/g, '');\n\n  if (isValidCountryCode(input, country)) {\n    // Country-code branch: validate digit count including the country code digits.\n    if (country === 'US') {\n      // \"+1\" or \"1\" prefix + exactly 10 local digits = 11 raw digits\n      if (digits.length === 11) return true;\n      // Fall through: could be a 10-digit local number that starts with \"1\"\n    } else {\n      // BR: \"+55\" or \"55\" prefix + 10 or 11 local digits = 12 or 13 raw digits\n      if (digits.length === 12 || digits.length === 13) return isValidBRLocal(digits.slice(2));\n      // Fall through: could be local digits that happen to start with \"55\"\n    }\n  }\n\n  // Local (no country code) validation\n  if (country === 'US') {\n    return digits.length === 10;\n  }\n\n  return isValidBRLocal(digits);\n}\n\n/**\n * Normalizes a valid raw phone value to E.164 for persistence (legacy checkout parity): the\n * particle emits local digits (\"2015551234\") or a \"+\"-prefixed string; the profile stores\n * \"+12015551234\". Only call this on values `validatePhoneNumber` has already accepted — shared by\n * every binding that persists a phone value (`ClientProfilePhoneControl`, `ClientProfileFieldset`)\n * so there is exactly one normalization implementation.\n */\nexport function toE164(raw: string, country: PhoneCountry): string {\n  const unmasked = removePhoneMask(raw, country);\n  if (unmasked.startsWith('+')) return unmasked;\n  const code = country === 'BR' ? '55' : '1';\n  const localMax = country === 'BR' ? 11 : 10;\n  // A bare country-code prefix (\"12015551234\", \"5511999998888\") only needs the \"+\".\n  return unmasked.startsWith(code) && unmasked.length > localMax ? `+${unmasked}` : `+${code}${unmasked}`;\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldRequirement = 'mandatory' | 'optional';\n\nexport type PhoneFieldProps = {\n  /** Controlled raw (unmasked) phone value. Unused on the bound path — react-hook-form owns the value. */\n  value?: string;\n  /** Uncontrolled initial raw value. Unused on the bound path — the field contract's `defaultValue` seeds it instead. */\n  defaultValue?: string;\n  /** Called with the raw (unmasked) value on every change. */\n  onValueChange?: (value: string) => void;\n  /** Selects the phone mask and validation rule. */\n  country?: PhoneCountry;\n  /**\n   * Visible field label, formatted by the owner. No default: an omitted label falls back to the field\n   * contract's `label` when bound, and renders empty when not.\n   */\n  label?: string;\n  /** Disables the field when true. Falls back to the field contract's `disabled` when bound. */\n  isDisabled?: boolean;\n  /** Input placeholder text. Falls back to the field contract's `placeholder` when bound. */\n  placeholder?: string;\n  /**\n   * Externally-controlled invalid state. When provided, overrides the\n   * particle's internal blur-triggered validation result.\n   */\n  invalid?: boolean;\n  /**\n   * Externally-supplied error message. When provided, overrides the\n   * particle's internal error string.\n   */\n  error?: string;\n  /** Error string shown when the input format is invalid, formatted by the owner. No default. */\n  errorInvalid?: string;\n  /** Error string shown when the mandatory field is left empty, formatted by the owner. No default. */\n  errorRequired?: string;\n  /**\n   * Raises the field to required. It only ever raises: bound to a fieldset whose rule already says\n   * required, `'optional'` does not lower it.\n   *\n   * - `'mandatory'`: empty input blocks submission.\n   * - `'optional'`: empty input is allowed; format is still checked when a\n   *    value is present.\n   * - unset: no opinion, so a phone with no baseline is optional.\n   */\n  requirement?: PhoneFieldRequirement;\n  /** Called after the field loses focus (post-validation). */\n  onBlur?: () => void;\n  /** Additional class applied to the root element. */\n  className?: string;\n  /**\n   * Lands on the masked `<input type=\"tel\">` the particle renders. Composed with react-hook-form's own\n   * ref on the bound path — a caller ref and react-hook-form's ref are both honoured.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Given, replaces the default `Field.Label` + `PhoneFieldInput` + `Field.Error` anatomy — any order,\n   * any subset. `PhoneFieldInput` is the one part that carries the mask, the composed ref and the\n   * particle's own value/handlers; a composed generic `Field.Control` would call `useController` a\n   * second time for the same name (RFC's named, accepted double-binder hole).\n   */\n  children?: ReactNode;\n};\n\n// ---------------------------------------------------------------------------\n// Definition\n// ---------------------------------------------------------------------------\n\nexport const PhoneFieldDefinition = defineComponent<PhoneFieldProps>({\n  name: 'PhoneField',\n  importPath: '@vtex/faststore/components',\n  component: PhoneField,\n  providesContext: 'phone-field',\n  editor: { label: 'Phone Field', category: 'action' },\n  schema: {\n    country: { type: 'string', default: 'US', label: 'Country (US or BR)' },\n    // Copy props carry no default: the owner formats them from its own message fields.\n    label: { type: 'string', label: 'Label' },\n    // No default: an unset requirement is no opinion, not a raise to mandatory.\n    requirement: { type: ['mandatory', 'optional'] as const, label: 'Requirement' },\n    errorInvalid: { type: 'string', label: 'Invalid error message' },\n    errorRequired: { type: 'string', label: 'Required error message' },\n  },\n  guideline:\n    'Locale-aware, business-agnostic phone number input composed from the field + input particles. Applies country masking, validates on blur, and exposes its value via onValueChange. Bind it to a data source (e.g. ClientProfilePhoneControl for checkout) to persist the value; the owner supplies label, errorInvalid and errorRequired, which have no default. Recomposable (RFC:503): given children, they replace the default Field.Label + PhoneFieldInput + Field.Error anatomy, in any order.',\n});\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * Presentational, business-agnostic phone field. Composes the `field` and `input` particles: the\n * `Field.Root` owns the invalid/disabled state and the `Field.Error match` slot, while the `Input`\n * particle renders the masked `<tel>` control. The particle stays reusable (checkout binding today,\n * MyAccount / extensions later); a binding owns the data source and persistence.\n *\n * US/BR masking, blur validation, and the `data-fs-phone-field*` attributes (plus the country variant\n * attribute) are kept; error strings remain props (a documented i18n divergence — the country tables\n * are internal, the copy is owner-supplied).\n *\n * Reads the field contract through `useField()` and `useFormContext()` and dispatches to a bound or an\n * unbound sub-component — \"bound\" means both are present. Every react-hook-form hook lives in\n * `BoundPhoneField`, so hook order never changes under a mounted component. Both sub-components render\n * the same `PhoneFieldView`, so the two paths cannot drift into different DOM.\n */\nexport function PhoneField({ requirement, ...props }: PhoneFieldProps): ReactNode {\n  const contract = useField();\n  const formContext = useFormContext();\n\n  if (contract && formContext) {\n    return <BoundPhoneField {...props} requirement={requirement} contract={contract} />;\n  }\n\n  return <UnboundPhoneField {...props} requirement={requirement} />;\n}\n\n// ---------------------------------------------------------------------------\n// Input part — catalogued, placeable (Decision 4). Carries the mask, the composed ref, and the\n// particle's own onChange/onBlur; a generic Field.Control cannot be this part, because the mask and\n// the country/requirement validator belong to PhoneField, not to react-hook-form's own registration.\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldInputContextValue = {\n  ref?: Ref<HTMLInputElement>;\n  value: string;\n  placeholder?: string;\n  /** Resolved by the binder, threaded here because this part is not the one that binds. */\n  required: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n};\n\nconst PhoneFieldInputContext = createContext<PhoneFieldInputContextValue | null>(null);\n\nfunction usePhoneFieldInputContext(): PhoneFieldInputContextValue {\n  const context = useContext(PhoneFieldInputContext);\n  if (!context) {\n    throw new Error('PhoneFieldInput must be a descendant of PhoneField.');\n  }\n  return context;\n}\n\nexport type PhoneFieldInputProps = { className?: string };\n\nexport const PhoneFieldInputDefinition = defineComponent<PhoneFieldInputProps>({\n  name: 'PhoneFieldInput',\n  importPath: '@vtex/faststore/components',\n  component: PhoneFieldInput,\n  requiresContext: 'phone-field',\n  editor: { label: 'Phone Field Input', category: 'action' },\n  schema: {},\n  guideline:\n    \"The masked <input type=\\\"tel\\\"> PhoneField owns. Must sit inside PhoneField, in either the default anatomy or an author's composed children. Carries the country mask, the composed ref, and PhoneField's own onChange/onBlur — a composed Field.Control here instead re-registers the field with react-hook-form and loses the mask (unsupported, RFC's named double-binder hole).\",\n});\n\n/** Renders the masked `<input>`, reading its value/handlers/ref from the enclosing `PhoneField`. */\nexport function PhoneFieldInput({ className }: PhoneFieldInputProps): ReactNode {\n  const { ref, value, placeholder, required, onChange, onBlur } = usePhoneFieldInputContext();\n\n  return (\n    <Input\n      ref={ref}\n      data-fs-phone-field-input=\"\"\n      type=\"tel\"\n      inputMode=\"numeric\"\n      // `aria-required`, not native `required`, for the reason password-field.tsx:89-91 records:\n      // `Input` is a Base UI `Field.Control`, and native constraint tracking would flip\n      // `aria-invalid` on its own, ahead of react-hook-form's own validation.\n      aria-required={required || undefined}\n      value={value}\n      onChange={onChange}\n      onBlur={onBlur}\n      placeholder={placeholder}\n      className={className}\n    />\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Shared view — identical DOM whether bound or unbound\n// ---------------------------------------------------------------------------\n\ntype PhoneFieldViewProps = {\n  ref?: Ref<HTMLInputElement>;\n  country: PhoneCountry;\n  className?: string;\n  label: string;\n  isDisabled: boolean;\n  placeholder?: string;\n  required: boolean;\n  maskedValue: string;\n  effectiveInvalid: boolean;\n  effectiveError: string;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  onBlur: (event: FocusEvent<HTMLInputElement>) => void;\n  children?: ReactNode;\n};\n\nfunction PhoneFieldView({\n  ref,\n  country,\n  className,\n  label,\n  isDisabled,\n  placeholder,\n  required,\n  maskedValue,\n  effectiveInvalid,\n  effectiveError,\n  onChange,\n  onBlur,\n  children,\n}: PhoneFieldViewProps) {\n  const inputContext = useMemo<PhoneFieldInputContextValue>(\n    () => ({ ref, value: maskedValue, placeholder, required, onChange, onBlur }),\n    [ref, maskedValue, placeholder, required, onChange, onBlur],\n  );\n\n  return (\n    // Deliberately the RAW Base UI Field primitives, not this package's own Field.Root/Label/Error\n    // wrapper, for the default anatomy: this reproduces exactly what rendered before Decision 3\n    // (when FieldContractBoundary shielded this subtree from the ambient contract) — the resolved\n    // `label`/`effectiveError` text renders unconditionally, and Field.Root's own dirty/touched\n    // fallback tracking stays in charge, rather than react-hook-form's. Composed children, below,\n    // use the package's own Field.* parts on purpose — that is what makes a childless Field.Label /\n    // Field.Error resolve real text (FR-5).\n    <BaseField.Root\n      data-fs-phone-field-root=\"\"\n      data-fs-phone-field-root-country={country}\n      data-fs-field-root=\"\"\n      className={className}\n      invalid={effectiveInvalid}\n      disabled={isDisabled}\n    >\n      <PhoneFieldInputContext.Provider value={inputContext}>\n        {children ?? (\n          <>\n            <BaseField.Label data-fs-phone-field-label=\"\" data-fs-field-label=\"\">\n              {label}\n            </BaseField.Label>\n            <PhoneFieldInput />\n            {effectiveError ? (\n              <BaseField.Error match data-fs-phone-field-error=\"\" data-fs-field-error=\"\">\n                {effectiveError}\n              </BaseField.Error>\n            ) : null}\n          </>\n        )}\n      </PhoneFieldInputContext.Provider>\n    </BaseField.Root>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Unbound — today's body, moved verbatim\n// ---------------------------------------------------------------------------\n\ntype UnboundPhoneFieldProps = PhoneFieldProps;\n\nfunction UnboundPhoneField({\n  value,\n  defaultValue = '',\n  onValueChange,\n  country = 'US',\n  label,\n  isDisabled = false,\n  placeholder,\n  invalid,\n  error,\n  errorInvalid,\n  errorRequired,\n  requirement,\n  onBlur,\n  className,\n  ref,\n  children,\n}: Readonly<UnboundPhoneFieldProps>) {\n  const isControlled = value !== undefined;\n\n  const [internalRaw, setInternalRaw] = useState(defaultValue);\n  const [localInvalid, setLocalInvalid] = useState(false);\n  const [localError, setLocalError] = useState('');\n\n  // Clear local validation state when country changes so the next blur re-validates against the new\n  // country's rules. The comparison baseline lives in state, not a ref, and the compare-and-set runs\n  // during render (before paint), so a render React abandons without committing — a suspended\n  // transition, a Suspense retry — never leaves a stale baseline behind the way a ref write would.\n  const [prevCountry, setPrevCountry] = useState(country);\n  if (prevCountry !== country) {\n    setPrevCountry(country);\n    setLocalInvalid(false);\n    setLocalError('');\n  }\n\n  const rawValue = isControlled ? (value as string) : internalRaw;\n  const maskedValue = applyPhoneMask(rawValue, country);\n  const resolvedLabel = label ?? '';\n\n  // External props take precedence over internal validation state.\n  // When `invalid` is externally controlled, the error display is also fully\n  // controlled: use the explicit `error` prop, or fall back to empty string so\n  // no stale local error leaks through when the parent says the field is valid.\n  const effectiveInvalid = invalid !== undefined ? invalid : localInvalid;\n  const effectiveError = error !== undefined ? error : effectiveInvalid ? localError : '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n    const raw = removePhoneMask(event.target.value, country);\n    if (!isControlled) {\n      setInternalRaw(raw);\n    }\n    onValueChange?.(raw);\n  }\n\n  function handleBlur(_event: FocusEvent<HTMLInputElement>) {\n    if (isDisabled) return;\n\n    let isFieldInvalid = false;\n    let fieldError = '';\n\n    if (requirement === 'mandatory' && !rawValue.trim()) {\n      isFieldInvalid = true;\n      fieldError = errorRequired ?? '';\n    } else if (rawValue.trim()) {\n      const valid = validatePhoneNumber(rawValue, country);\n      isFieldInvalid = !valid;\n      fieldError = valid ? '' : (errorInvalid ?? '');\n    }\n    // optional + empty → no error, keep isFieldInvalid = false / fieldError = ''\n\n    setLocalInvalid(isFieldInvalid);\n    setLocalError(fieldError);\n    onBlur?.();\n  }\n\n  return (\n    <PhoneFieldView\n      ref={ref}\n      country={country}\n      className={className}\n      label={resolvedLabel}\n      isDisabled={isDisabled}\n      placeholder={placeholder}\n      required={requirement === 'mandatory'}\n      maskedValue={maskedValue}\n      effectiveInvalid={effectiveInvalid}\n      effectiveError={effectiveError}\n      onChange={handleChange}\n      onBlur={handleBlur}\n    >\n      {children}\n    </PhoneFieldView>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Bound — reads the field contract, binds through useController\n// ---------------------------------------------------------------------------\n\ntype BoundPhoneFieldProps = UnboundPhoneFieldProps & { contract: FieldContract };\n\nfunction BoundPhoneField({\n  value: _value,\n  defaultValue: _defaultValue,\n  onValueChange,\n  country = 'US',\n  label,\n  isDisabled,\n  placeholder,\n  invalid,\n  error,\n  errorInvalid,\n  errorRequired,\n  requirement,\n  onBlur,\n  className,\n  ref: callerRef,\n  contract,\n  children,\n}: BoundPhoneFieldProps) {\n  // Format only. Requiredness is not decided here: `useBoundField` resolves it from the fieldset's\n  // baseline and the raise below, and installs the blank check, so the announcement and the\n  // validation cannot disagree. The check composes alongside whatever the fieldset validates —\n  // before this merge, any contract validator discarded the particle's own validation whole.\n  const rule = useMemo<FieldRule>(\n    () =>\n      mergeFieldValidator(contract.rule, 'phoneFormat', (rawValue) => {\n        const raw = typeof rawValue === 'string' ? rawValue : String(rawValue ?? '');\n        // `false`, never undefined: react-hook-form reads an undefined result as valid.\n        return !raw.trim() || validatePhoneNumber(raw, country) || (errorInvalid ?? false);\n      }),\n    [contract.rule, errorInvalid, country],\n  );\n\n  const field = useBoundField(contract, TEXT_FIELD_VALUE, rule, {\n    required: requirement === 'mandatory',\n    message: errorRequired,\n  });\n  const { getFieldState } = useFormContext();\n  const { invalid: rhfInvalid, error: rhfError } = getFieldState(contract.name, useFormState({ name: contract.name }));\n\n  const composedRef = useComposedRef<HTMLInputElement>(callerRef, field.ref);\n\n  const rawValue = typeof field.value === 'string' ? field.value : String(field.value ?? '');\n  const maskedValue = applyPhoneMask(rawValue, country);\n  const resolvedLabel = label ?? contract.label ?? '';\n  const resolvedPlaceholder = placeholder ?? contract.placeholder;\n  const resolvedIsDisabled = isDisabled ?? contract.disabled ?? false;\n\n  const effectiveInvalid = invalid !== undefined ? invalid : rhfInvalid;\n  const effectiveError = error !== undefined ? error : effectiveInvalid ? (rhfError?.message ?? '') : '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const raw = removePhoneMask(event.target.value, country);\n    field.onChange(raw);\n    onValueChange?.(raw);\n  }\n\n  function handleBlur(_event: FocusEvent<HTMLInputElement>) {\n    field.onBlur();\n    onBlur?.();\n  }\n\n  return (\n    // Decision 3: replaces the empty-contract FieldContractBoundary with a re-provided contract\n    // carrying the RESOLVED name/label/placeholder — the values a composed childless Field.Label /\n    // Field.Error actually need, as opposed to the raw (possibly-undefined) ones the ambient\n    // contract from the enclosing FieldBinding carries. useBoundField above remains the sole binder\n    // for contract.name; this FieldBinding never registers anything itself.\n    <FieldBinding\n      name={contract.name}\n      label={resolvedLabel}\n      placeholder={resolvedPlaceholder}\n      defaultValue={contract.defaultValue}\n      rule={contract.rule}\n      options={contract.options}\n      disabled={resolvedIsDisabled}\n      readOnly={contract.readOnly}\n      autoComplete={contract.autoComplete}\n      inputMode={contract.inputMode}\n    >\n      <PhoneFieldView\n        ref={composedRef}\n        country={country}\n        className={className}\n        label={resolvedLabel}\n        isDisabled={resolvedIsDisabled}\n        placeholder={resolvedPlaceholder}\n        required={field.required}\n        maskedValue={maskedValue}\n        effectiveInvalid={effectiveInvalid}\n        effectiveError={effectiveError}\n        onChange={handleChange}\n        onBlur={handleBlur}\n      >\n        {children}\n      </PhoneFieldView>\n    </FieldBinding>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoCA,SAAS,mBAAmB,OAAe,SAAgC;CACzE,QAAQ,SAAR;EACE,KAAK,MACH,OAAO,MAAM,WAAW,IAAI,KAAK,MAAM,WAAW,GAAG;EACvD,KAAK,MACH,OAAO,MAAM,WAAW,KAAK,KAAK,MAAM,WAAW,IAAI;EACzD,SACE,OAAO;CACX;AACF;;;;;;;;;;;AAYA,SAAgB,gBAAgB,OAAe,SAA+B;CAC5E,MAAM,aAAa,MAAM,QAAQ,OAAO,EAAE;CAK1C,IAAI,MAAM,WAAW,GAAG,KAAK,mBAAmB,OAAO,OAAO,GAC5D,OAAO,IAAI;CAGb,OAAO;AACT;;;;;;;;;;AAWA,SAAgB,eAAe,OAAe,SAA+B;CAC3E,QAAQ,SAAR;EACE,KAAK,MACH,OAAO,iBAAiB,KAAK;EAC/B,KAAK,MACH,OAAO,iBAAiB,KAAK;EAC/B,SACE,OAAO,iBAAiB,KAAK;CACjC;AACF;AAEA,SAAS,iBAAiB,OAAuB;CAC/C,MAAM,aAAa,MAAM,QAAQ,OAAO,EAAE;CAG1C,IAAI,MAAM,WAAW,IAAI,KAAK,WAAW,UAAU,IAEjD,OAAO,MAAM,eADC,MAAM,QAAQ,MAAM,EAAE,CAAC,CAAC,QAAQ,OAAO,EACrB,CAAC;CAInC,IAAI,WAAW,WAAW,GAAG,KAAK,WAAW,WAAW,IACtD,OAAO,MAAM,eAAe,WAAW,UAAU,CAAC,CAAC;CAGrD,OAAO,eAAe,UAAU;AAClC;AAEA,SAAS,eAAe,QAAwB;CAE9C,MAAM,QAAQ,OAAO,MAAM,GAAG,EAAE;CAChC,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,UAAU,GAAG,OAAO,IAAI;CAClC,IAAI,MAAM,UAAU,GAAG,OAAO,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM,MAAM,CAAC;CACrE,OAAO,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,MAAM,CAAC;AACrE;AAEA,SAAS,iBAAiB,OAAuB;CAC/C,MAAM,aAAa,MAAM,QAAQ,OAAO,EAAE;CAI1C,IAAI,MAAM,WAAW,KAAK,KAAK,WAAW,UAAU,IAElD,OAAO,OAAO,eADA,MAAM,QAAQ,OAAO,EAAE,CAAC,CAAC,QAAQ,OAAO,EACrB,CAAC;CAIpC,IAAI,WAAW,WAAW,IAAI,MAAM,WAAW,WAAW,MAAM,WAAW,WAAW,KACpF,OAAO,OAAO,eAAe,WAAW,UAAU,CAAC,CAAC;CAGtD,OAAO,eAAe,UAAU;AAClC;AAEA,SAAS,eAAe,QAAwB;CAE9C,MAAM,QAAQ,OAAO,MAAM,GAAG,EAAE;CAChC,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,UAAU,GAAG,OAAO,IAAI;CAClC,IAAI,MAAM,UAAU,GAAG,OAAO,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM,MAAM,CAAC;CAErE,IAAI,MAAM,UAAU,IAAI,OAAO,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,MAAM,CAAC;CAE3F,OAAO,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,MAAM,MAAM,CAAC;AACrE;;;;;;AAWA,SAAS,eAAe,QAAyB;CAC/C,IAAI,OAAO,WAAW,IAAI,OAAO;CACjC,OAAO,OAAO,WAAW,MAAM,OAAO,OAAO;AAC/C;;;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,oBAAoB,OAAe,SAAgC;CACjF,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,GAAG,OAAO;CAEpC,MAAM,SAAS,MAAM,QAAQ,OAAO,EAAE;CAEtC,IAAI,mBAAmB,OAAO,OAAO,GAAG;EAEtC,IAAI,YAAY,MAEV;OAAA,OAAO,WAAW,IAAI,OAAO;EAAA,OAIjC,IAAI,OAAO,WAAW,MAAM,OAAO,WAAW,IAAI,OAAO,eAAe,OAAO,MAAM,CAAC,CAAC;CAG3F;CAGA,IAAI,YAAY,MACd,OAAO,OAAO,WAAW;CAG3B,OAAO,eAAe,MAAM;AAC9B;;;;;;;;AASA,SAAgB,OAAO,KAAa,SAA+B;CACjE,MAAM,WAAW,gBAAgB,KAAK,OAAO;CAC7C,IAAI,SAAS,WAAW,GAAG,GAAG,OAAO;CACrC,MAAM,OAAO,YAAY,OAAO,OAAO;CACvC,MAAM,WAAW,YAAY,OAAO,KAAK;CAEzC,OAAO,SAAS,WAAW,IAAI,KAAK,SAAS,SAAS,WAAW,IAAI,aAAa,IAAI,OAAO;AAC/F;AAwEA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAS;CACnD,QAAQ;EACN,SAAS;GAAE,MAAM;GAAU,SAAS;GAAM,OAAO;EAAqB;EAEtE,OAAO;GAAE,MAAM;GAAU,OAAO;EAAQ;EAExC,aAAa;GAAE,MAAM,CAAC,aAAa,UAAU;GAAY,OAAO;EAAc;EAC9E,cAAc;GAAE,MAAM;GAAU,OAAO;EAAwB;EAC/D,eAAe;GAAE,MAAM;GAAU,OAAO;EAAyB;CACnE;CACA,WACE;AACJ,CAAC;;;;;;;;;;;;;;;;AAqBD,SAAgB,WAAW,EAAE,aAAa,GAAG,SAAqC;CAChF,MAAM,WAAW,SAAS;CAC1B,MAAM,cAAc,eAAe;CAEnC,IAAI,YAAY,aACd,OAAO,oBAAC,iBAAD;EAAiB,GAAI;EAAoB;EAAuB;CAAW,CAAA;CAGpF,OAAO,oBAAC,mBAAD;EAAmB,GAAI;EAAoB;CAAc,CAAA;AAClE;AAkBA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAS,4BAAyD;CAChE,MAAM,UAAU,WAAW,sBAAsB;CACjD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAIA,MAAa,4BAA4B,gBAAsC;CAC7E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,iBAAiB;CACjB,QAAQ;EAAE,OAAO;EAAqB,UAAU;CAAS;CACzD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;;AAGD,SAAgB,gBAAgB,EAAE,aAA8C;CAC9E,MAAM,EAAE,KAAK,OAAO,aAAa,UAAU,UAAU,WAAW,0BAA0B;CAE1F,OACE,oBAAC,OAAD;EACO;EACL,6BAA0B;EAC1B,MAAK;EACL,WAAU;EAIV,iBAAe,YAAY,KAAA;EACpB;EACG;EACF;EACK;EACF;CACZ,CAAA;AAEL;AAsBA,SAAS,eAAe,EACtB,KACA,SACA,WACA,OACA,YACA,aACA,UACA,aACA,kBACA,gBACA,UACA,QACA,YACsB;CACtB,MAAM,eAAe,eACZ;EAAE;EAAK,OAAO;EAAa;EAAa;EAAU;EAAU;CAAO,IAC1E;EAAC;EAAK;EAAa;EAAa;EAAU;EAAU;CAAM,CAC5D;CAEA,OAQE,oBAACA,MAAU,MAAX;EACE,4BAAyB;EACzB,oCAAkC;EAClC,sBAAmB;EACR;EACX,SAAS;EACT,UAAU;EAEV,UAAA,oBAAC,uBAAuB,UAAxB;GAAiC,OAAO;GACrC,UAAA,YACC,qBAAA,YAAA,EAAA,UAAA;IACE,oBAACA,MAAU,OAAX;KAAiB,6BAA0B;KAAG,uBAAoB;KAC/D,UAAA;IACc,CAAA;IACjB,oBAAC,iBAAD,CAAkB,CAAA;IACjB,iBACC,oBAACA,MAAU,OAAX;KAAiB,OAAA;KAAM,6BAA0B;KAAG,uBAAoB;KACrE,UAAA;IACc,CAAA,IACf;GACJ,EAAA,CAAA;EAE2B,CAAA;CACnB,CAAA;AAEpB;AAQA,SAAS,kBAAkB,EACzB,OACA,eAAe,IACf,eACA,UAAU,MACV,OACA,aAAa,OACb,aACA,SACA,OACA,cACA,eACA,aACA,QACA,WACA,KACA,YACmC;CACnC,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,aAAa,kBAAkB,SAAS,YAAY;CAC3D,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAM/C,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO;CACtD,IAAI,gBAAgB,SAAS;EAC3B,eAAe,OAAO;EACtB,gBAAgB,KAAK;EACrB,cAAc,EAAE;CAClB;CAEA,MAAM,WAAW,eAAgB,QAAmB;CACpD,MAAM,cAAc,eAAe,UAAU,OAAO;CACpD,MAAM,gBAAgB,SAAS;CAM/B,MAAM,mBAAmB,YAAY,KAAA,IAAY,UAAU;CAC3D,MAAM,iBAAiB,UAAU,KAAA,IAAY,QAAQ,mBAAmB,aAAa;CAErF,SAAS,aAAa,OAAsC;EAC1D,IAAI,YAAY;EAChB,MAAM,MAAM,gBAAgB,MAAM,OAAO,OAAO,OAAO;EACvD,IAAI,CAAC,cACH,eAAe,GAAG;EAEpB,gBAAgB,GAAG;CACrB;CAEA,SAAS,WAAW,QAAsC;EACxD,IAAI,YAAY;EAEhB,IAAI,iBAAiB;EACrB,IAAI,aAAa;EAEjB,IAAI,gBAAgB,eAAe,CAAC,SAAS,KAAK,GAAG;GACnD,iBAAiB;GACjB,aAAa,iBAAiB;EAChC,OAAO,IAAI,SAAS,KAAK,GAAG;GAC1B,MAAM,QAAQ,oBAAoB,UAAU,OAAO;GACnD,iBAAiB,CAAC;GAClB,aAAa,QAAQ,KAAM,gBAAgB;EAC7C;EAGA,gBAAgB,cAAc;EAC9B,cAAc,UAAU;EACxB,SAAS;CACX;CAEA,OACE,oBAAC,gBAAD;EACO;EACI;EACE;EACX,OAAO;EACK;EACC;EACb,UAAU,gBAAgB;EACb;EACK;EACF;EAChB,UAAU;EACV,QAAQ;EAEP;CACa,CAAA;AAEpB;AAQA,SAAS,gBAAgB,EACvB,OAAO,QACP,cAAc,eACd,eACA,UAAU,MACV,OACA,YACA,aACA,SACA,OACA,cACA,eACA,aACA,QACA,WACA,KAAK,WACL,UACA,YACuB;CAKvB,MAAM,OAAO,cAET,oBAAoB,SAAS,MAAM,gBAAgB,aAAa;EAC9D,MAAM,MAAM,OAAO,aAAa,WAAW,WAAW,OAAO,YAAY,EAAE;EAE3E,OAAO,CAAC,IAAI,KAAK,KAAK,oBAAoB,KAAK,OAAO,MAAM,gBAAgB;CAC9E,CAAC,GACH;EAAC,SAAS;EAAM;EAAc;CAAO,CACvC;CAEA,MAAM,QAAQ,cAAc,UAAU,kBAAkB,MAAM;EAC5D,UAAU,gBAAgB;EAC1B,SAAS;CACX,CAAC;CACD,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,EAAE,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,MAAM,aAAa,EAAE,MAAM,SAAS,KAAK,CAAC,CAAC;CAEnH,MAAM,cAAc,eAAiC,WAAW,MAAM,GAAG;CAGzE,MAAM,cAAc,eADH,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,OAAO,MAAM,SAAS,EAAE,GAC5C,OAAO;CACpD,MAAM,gBAAgB,SAAS,SAAS,SAAS;CACjD,MAAM,sBAAsB,eAAe,SAAS;CACpD,MAAM,qBAAqB,cAAc,SAAS,YAAY;CAE9D,MAAM,mBAAmB,YAAY,KAAA,IAAY,UAAU;CAC3D,MAAM,iBAAiB,UAAU,KAAA,IAAY,QAAQ,mBAAoB,UAAU,WAAW,KAAM;CAEpG,SAAS,aAAa,OAAsC;EAC1D,MAAM,MAAM,gBAAgB,MAAM,OAAO,OAAO,OAAO;EACvD,MAAM,SAAS,GAAG;EAClB,gBAAgB,GAAG;CACrB;CAEA,SAAS,WAAW,QAAsC;EACxD,MAAM,OAAO;EACb,SAAS;CACX;CAEA,OAME,oBAAC,cAAD;EACE,MAAM,SAAS;EACf,OAAO;EACP,aAAa;EACb,cAAc,SAAS;EACvB,MAAM,SAAS;EACf,SAAS,SAAS;EAClB,UAAU;EACV,UAAU,SAAS;EACnB,cAAc,SAAS;EACvB,WAAW,SAAS;EAEpB,UAAA,oBAAC,gBAAD;GACE,KAAK;GACI;GACE;GACX,OAAO;GACP,YAAY;GACZ,aAAa;GACb,UAAU,MAAM;GACH;GACK;GACF;GAChB,UAAU;GACV,QAAQ;GAEP;EACa,CAAA;CACJ,CAAA;AAElB"}

package/dist/particles/spinner/spinner.d.ts

@@ -1,13 +1,33 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentPropsWithRef } from "react";
 //#region src/particles/spinner/spinner.d.ts
+export declare const SpinnerContent: {
+  readonly id: "spinner";
+  readonly title: "Spinner";
+  readonly description: "Accessible name of the loading indicator.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Accessible label";
+        readonly format: "icu-message";
+        readonly messageSource: "Loading";
+        readonly messageOptional: true;
+      };
+    };
+  };
+};
+export type SpinnerContentValue = ContentValue<typeof SpinnerContent>;
 /** Props for {@link Spinner}. Extends all native `<output>` attributes. */
-export type SpinnerProps = Omit<ComponentPropsWithRef<'output'>, 'children'> & {
-  /** Accessible label. Defaults to `'Loading'`. */
-  label?: string;
+export type SpinnerProps = Omit<ComponentPropsWithRef<'output'>, 'children'> & MessageLocaleProp & {
+  /** Accessible label, from the `label` message field. */
+  $content?: SpinnerContentValue;
 };
 export declare const SpinnerDefinition: ComponentDefinition<SpinnerProps>;
-export declare function Spinner({ label, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ $locale, $content, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=spinner.d.ts.map

package/dist/particles/spinner/spinner.js

@@ -1,31 +1,47 @@
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { createMessageFormatter } from "../../sdk/i18n/message-formatter.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/particles/spinner/spinner.tsx
+const SpinnerContent = defineContentType({
+	id: "spinner",
+	title: "Spinner",
+	description: "Accessible name of the loading indicator.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Accessible label",
+			format: "icu-message",
+			messageSource: "Loading",
+			messageOptional: true
+		} }
+	}
+});
 const SpinnerDefinition = defineComponent({
 	name: "Spinner",
 	importPath: "@vtex/faststore/components",
 	component: Spinner,
+	content: SpinnerContent,
 	editor: {
 		label: "Spinner",
 		category: "feedback"
 	},
-	schema: { label: {
-		type: "string",
-		default: "Loading",
-		label: "Label"
-	} },
-	guideline: "Loading indicator — use standalone or composed inside Button for loading states. Purely structural with no built-in animation CSS."
+	schema: {},
+	guideline: "Loading indicator — use standalone or composed inside Button for loading states. Its accessible name comes from the $content field label: a blank label renders no aria-label, and an explicit aria-label prop applies when the label is blank. Purely structural with no built-in animation CSS."
 });
-function Spinner({ label = "Loading", className, ...props }) {
+function Spinner({ $locale, $content, className, ...props }) {
+	const label = createMessageFormatter($locale, SpinnerContent, $content).format("label");
 	return /* @__PURE__ */ jsx("output", {
 		...props,
-		"aria-label": label,
+		"aria-label": label || props["aria-label"],
 		className,
 		"data-fs-spinner": ""
 	});
 }
 //#endregion
-export { Spinner, SpinnerDefinition };
+export { Spinner, SpinnerContent, SpinnerDefinition };
 
 //# sourceMappingURL=spinner.js.map

package/dist/particles/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/particles/spinner/spinner.tsx"],"sourcesContent":["import { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\n\n/** Props for {@link Spinner}. Extends all native `<output>` attributes. */\nexport type SpinnerProps = Omit<ComponentPropsWithRef<'output'>, 'children'> & {\n  /** Accessible label. Defaults to `'Loading'`. */\n  label?: string;\n};\n\nexport const SpinnerDefinition = defineComponent<SpinnerProps>({\n  name: 'Spinner',\n  importPath: '@vtex/faststore/components',\n  component: Spinner,\n  editor: { label: 'Spinner', category: 'feedback' },\n  schema: {\n    label: { type: 'string', default: 'Loading', label: 'Label' },\n  },\n  guideline:\n    'Loading indicator — use standalone or composed inside Button for loading states. Purely structural with no built-in animation CSS.',\n});\n\nexport function Spinner({ label = 'Loading', className, ...props }: SpinnerProps) {\n  return <output {...props} aria-label={label} className={className} data-fs-spinner=\"\" />;\n}\n"],"mappings":";;;;AASA,MAAa,oBAAoB,gBAA8B;CAC7D,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAW,UAAU;CAAW;CACjD,QAAQ,EACN,OAAO;EAAE,MAAM;EAAU,SAAS;EAAW,OAAO;CAAQ,EAC9D;CACA,WACE;AACJ,CAAC;AAED,SAAgB,QAAQ,EAAE,QAAQ,WAAW,WAAW,GAAG,SAAuB;CAChF,OAAO,oBAAC,UAAD;EAAQ,GAAI;EAAO,cAAY;EAAkB;EAAW,mBAAgB;CAAI,CAAA;AACzF"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/particles/spinner/spinner.tsx"],"sourcesContent":["import { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createMessageFormatter } from '../../sdk/i18n/message-formatter.js';\n\nexport const SpinnerContent = defineContentType({\n  id: 'spinner',\n  title: 'Spinner',\n  description: 'Accessible name of the loading indicator.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: {\n        type: 'string',\n        title: 'Accessible label',\n        format: 'icu-message',\n        messageSource: 'Loading',\n        messageOptional: true,\n      },\n    },\n  },\n});\n\nexport type SpinnerContentValue = ContentValue<typeof SpinnerContent>;\n\n/** Props for {@link Spinner}. Extends all native `<output>` attributes. */\nexport type SpinnerProps = Omit<ComponentPropsWithRef<'output'>, 'children'> &\n  MessageLocaleProp & {\n    /** Accessible label, from the `label` message field. */\n    $content?: SpinnerContentValue;\n  };\n\nexport const SpinnerDefinition = defineComponent<SpinnerProps>({\n  name: 'Spinner',\n  importPath: '@vtex/faststore/components',\n  component: Spinner,\n  content: SpinnerContent,\n  editor: { label: 'Spinner', category: 'feedback' },\n  schema: {},\n  guideline:\n    'Loading indicator — use standalone or composed inside Button for loading states. Its accessible name comes from the $content field label: a blank label renders no aria-label, and an explicit aria-label prop applies when the label is blank. Purely structural with no built-in animation CSS.',\n});\n\nexport function Spinner({ $locale, $content, className, ...props }: SpinnerProps) {\n  const label = createMessageFormatter($locale, SpinnerContent, $content).format('label');\n  return <output {...props} aria-label={label || props['aria-label']} className={className} data-fs-spinner=\"\" />;\n}\n"],"mappings":";;;;;;AAIA,MAAa,iBAAiB,kBAAkB;CAC9C,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY,EACV,OAAO;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,eAAe;GACf,iBAAiB;EACnB,EACF;CACF;AACF,CAAC;AAWD,MAAa,oBAAoB,gBAA8B;CAC7D,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAW,UAAU;CAAW;CACjD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,QAAQ,EAAE,SAAS,UAAU,WAAW,GAAG,SAAuB;CAChF,MAAM,QAAQ,uBAAuB,SAAS,gBAAgB,QAAQ,CAAC,CAAC,OAAO,OAAO;CACtF,OAAO,oBAAC,UAAD;EAAQ,GAAI;EAAO,cAAY,SAAS,MAAM;EAA0B;EAAW,mBAAgB;CAAI,CAAA;AAChH"}

package/dist/particles/switch/switch.d.ts

@@ -11,13 +11,16 @@ export type SwitchRootProps = {
   required?: boolean;
   name?: string;
   id?: string;
+  /** Accessible name when no visible label is bound to the switch. */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
   className?: string;
   children?: ReactNode;
 };
 export type SwitchThumbProps = ComponentPropsWithRef<'span'>;
 export declare const SwitchRootDefinition: ComponentDefinition<SwitchRootProps>;
 export declare const SwitchThumbDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
-export declare function SwitchRoot({ checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, id, className, children }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchRoot({ checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children }: Readonly<SwitchRootProps>): import("react/jsx-runtime").JSX.Element;
 export declare function SwitchThumb({ className, children, ...props }: SwitchThumbProps): import("react/jsx-runtime").JSX.Element;
 export declare const Switch: {
   Root: typeof SwitchRoot;

package/dist/particles/switch/switch.js

@@ -26,7 +26,7 @@ const SwitchThumbDefinition = defineComponent({
 	schema: {},
 	guideline: "Sliding visual indicator inside Switch.Root. Moves position based on the checked state managed by Base UI."
 });
-function SwitchRoot({ checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, id, className, children }) {
+function SwitchRoot({ checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className, children }) {
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		checked,
 		defaultChecked,
@@ -36,6 +36,8 @@ function SwitchRoot({ checked, defaultChecked, onCheckedChange, disabled, readOn
 		required,
 		name,
 		id,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
 		className,
 		"data-fs-switch-root": "",
 		children

package/dist/particles/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["BaseSwitch","Switch"],"sources":["../../../src/particles/switch/switch.tsx"],"sourcesContent":["'use client';\nimport { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type SwitchRootProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type SwitchThumbProps = ComponentPropsWithRef<'span'>;\n\nexport const SwitchRootDefinition = defineComponent<SwitchRootProps>({\n  name: 'SwitchRoot',\n  importPath: '@vtex/faststore/components',\n  component: SwitchRoot,\n  editor: { label: 'Switch Root', category: 'action' },\n  schema: {},\n  guideline:\n    'On/off control for settings and preferences. Always wraps a Switch.Thumb. Unlike Checkbox, implies immediate effect without form submission. Style the checked state via data-checked.',\n});\n\nexport const SwitchThumbDefinition = defineComponent<SwitchThumbProps>({\n  name: 'SwitchThumb',\n  importPath: '@vtex/faststore/components',\n  component: SwitchThumb,\n  editor: { label: 'Switch Thumb', category: 'layout' },\n  schema: {},\n  guideline:\n    'Sliding visual indicator inside Switch.Root. Moves position based on the checked state managed by Base UI.',\n});\n\nexport function SwitchRoot({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled,\n  readOnly,\n  required,\n  name,\n  id,\n  className,\n  children,\n}: SwitchRootProps) {\n  return (\n    <BaseSwitch.Root\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      id={id}\n      className={className}\n      data-fs-switch-root=\"\"\n    >\n      {children}\n    </BaseSwitch.Root>\n  );\n}\n\nexport function SwitchThumb({ className, children, ...props }: SwitchThumbProps) {\n  return (\n    <BaseSwitch.Thumb {...props} className={className} data-fs-switch-thumb=\"\">\n      {children}\n    </BaseSwitch.Thumb>\n  );\n}\n\nexport const Switch = {\n  Root: SwitchRoot,\n  Thumb: SwitchThumb,\n};\n"],"mappings":";;;;;;AAoBA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAS;CACnD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,wBAAwB,gBAAkC;CACrE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAgB,UAAU;CAAS;CACpD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,WAAW,EACzB,SACA,gBACA,iBACA,UACA,UACA,UACA,MACA,IACA,WACA,YACkB;CAClB,OACE,oBAACA,OAAW,MAAZ;EACW;EACO;EACC;EACP;EACA;EACA;EACJ;EACF;EACO;EACX,uBAAoB;EAEnB;CACc,CAAA;AAErB;AAEA,SAAgB,YAAY,EAAE,WAAW,UAAU,GAAG,SAA2B;CAC/E,OACE,oBAACA,OAAW,OAAZ;EAAkB,GAAI;EAAkB;EAAW,wBAAqB;EACrE;CACe,CAAA;AAEtB;AAEA,MAAaC,WAAS;CACpB,MAAM;CACN,OAAO;AACT"}
+{"version":3,"file":"switch.js","names":["BaseSwitch","Switch"],"sources":["../../../src/particles/switch/switch.tsx"],"sourcesContent":["'use client';\nimport { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type SwitchRootProps = {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  /** Accessible name when no visible label is bound to the switch. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport type SwitchThumbProps = ComponentPropsWithRef<'span'>;\n\nexport const SwitchRootDefinition = defineComponent<SwitchRootProps>({\n  name: 'SwitchRoot',\n  importPath: '@vtex/faststore/components',\n  component: SwitchRoot,\n  editor: { label: 'Switch Root', category: 'action' },\n  schema: {},\n  guideline:\n    'On/off control for settings and preferences. Always wraps a Switch.Thumb. Unlike Checkbox, implies immediate effect without form submission. Style the checked state via data-checked.',\n});\n\nexport const SwitchThumbDefinition = defineComponent<SwitchThumbProps>({\n  name: 'SwitchThumb',\n  importPath: '@vtex/faststore/components',\n  component: SwitchThumb,\n  editor: { label: 'Switch Thumb', category: 'layout' },\n  schema: {},\n  guideline:\n    'Sliding visual indicator inside Switch.Root. Moves position based on the checked state managed by Base UI.',\n});\n\nexport function SwitchRoot({\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  disabled,\n  readOnly,\n  required,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  className,\n  children,\n}: Readonly<SwitchRootProps>) {\n  return (\n    <BaseSwitch.Root\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={onCheckedChange}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      name={name}\n      id={id}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={className}\n      data-fs-switch-root=\"\"\n    >\n      {children}\n    </BaseSwitch.Root>\n  );\n}\n\nexport function SwitchThumb({ className, children, ...props }: SwitchThumbProps) {\n  return (\n    <BaseSwitch.Thumb {...props} className={className} data-fs-switch-thumb=\"\">\n      {children}\n    </BaseSwitch.Thumb>\n  );\n}\n\nexport const Switch = {\n  Root: SwitchRoot,\n  Thumb: SwitchThumb,\n};\n"],"mappings":";;;;;;AAuBA,MAAa,uBAAuB,gBAAiC;CACnE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAe,UAAU;CAAS;CACnD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,wBAAwB,gBAAkC;CACrE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAgB,UAAU;CAAS;CACpD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAgB,WAAW,EACzB,SACA,gBACA,iBACA,UACA,UACA,UACA,MACA,IACA,cAAc,WACd,mBAAmB,gBACnB,WACA,YAC4B;CAC5B,OACE,oBAACA,OAAW,MAAZ;EACW;EACO;EACC;EACP;EACA;EACA;EACJ;EACF;EACJ,cAAY;EACZ,mBAAiB;EACN;EACX,uBAAoB;EAEnB;CACc,CAAA;AAErB;AAEA,SAAgB,YAAY,EAAE,WAAW,UAAU,GAAG,SAA2B;CAC/E,OACE,oBAACA,OAAW,OAAZ;EAAkB,GAAI;EAAkB;EAAW,wBAAqB;EACrE;CACe,CAAA;AAEtB;AAEA,MAAaC,WAAS;CACpB,MAAM;CACN,OAAO;AACT"}