@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/buy-button/buy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"buy-button.js","names":[],"sources":["../../../src/matter/buy-button/buy-button.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, Suspense, useContext, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { HotDataProvider } from '../../sdk/data/hot-data-provider.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantBuyButtonDataFragment } from '../../sdk/generated/graphql.js';\nimport { resolveDefaultSeller } from '../../sdk/seller.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\nimport { useProductQuantity } from '../product-quantity/product-quantity.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment BuyButtonData on Query {\n    productBySlug(slug: $slug) {\n      id\n      title\n      slug\n      images(first: 1) {\n        edges {\n          node {\n            url\n            altText\n          }\n        }\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sku\n            availableForSale\n            sellers {\n              id\n              isDefault\n              offer {\n                price { amount currencyCode }\n                listPrice { amount currencyCode }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// Variant slice carrying the selected variant's availability plus its default seller, authored via\n// graphql() so HotDataProvider gets a TypedDocumentNode. Declared so codegen scans the source and\n// emits VariantBuyButtonDataFragment; the fragment is spread into variantQuery at the GraphQL layer,\n// so the variable is unused at runtime. `offer` is selected only as the same purchasability gate the\n// product transform applies — the buy button never displays price.\nconst _variantFragment = graphql(`\n  fragment VariantBuyButtonData on Variant {\n    __typename\n    id\n    availableForSale\n    sellers {\n      id\n      isDefault\n      offer {\n        price { amount currencyCode }\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantBuyButtonQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantBuyButtonData\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = {\n  amount: number;\n  currencyCode: string;\n};\n\ntype RawBuyButtonData = {\n  id: string;\n  title: string;\n  slug: string;\n  images: {\n    edges: Array<{\n      node: {\n        url: string;\n        altText: string | null;\n      };\n    }>;\n  };\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sku: string;\n        availableForSale: boolean;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n          offer: {\n            price: MoneyValue;\n            listPrice: MoneyValue;\n          } | null;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonLabels = defineContentType({\n  id: 'buy-button-labels',\n  title: 'Buy Button Labels',\n  description: 'Editorial labels for the add-to-cart button.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    required: ['availableLabel', 'unavailableLabel'],\n    properties: {\n      availableLabel: { type: 'string', minLength: 1, title: 'Available label', default: 'Comprar' },\n      unavailableLabel: { type: 'string', minLength: 1, title: 'Unavailable label', default: 'Indisponivel' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype BuyButtonContextData = {\n  available: boolean;\n  /** Identifiers passed to useCart().addItem when the button is clicked. */\n  variantId: string;\n  seller: string;\n};\n\ntype BuyButtonContextValue = BuyButtonContextData | null;\n\nconst BUYBUTTON_CONTEXT_UNSET = Symbol('BuyButtonContextUnset');\n\nexport type BuyButtonRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: RawBuyButtonData | null;\n  /** Page-supplied viewed SKU; adds this variant before the shopper interacts. A published swatch\n   *  selection wins over it once set. */\n  selectedVariantId?: string;\n};\n\nexport type BuyButtonButtonProps = ComponentPropsWithRef<'button'> & {\n  availableLabel?: string;\n  unavailableLabel?: string;\n  /** Merchant-authored labels, sliced from the page/layout content entry; win over the label props\n   *  when present. Absent in a non-CMS store — the label props (and their defaults) are the fallback. */\n  $content?: ContentValue<typeof BuyButtonLabels>;\n  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst BuyButtonContext = createContext<BuyButtonContextValue | typeof BUYBUTTON_CONTEXT_UNSET>(BUYBUTTON_CONTEXT_UNSET);\n\nfunction useBuyButton(): BuyButtonContextValue {\n  const ctx = useContext(BuyButtonContext);\n  if (ctx === BUYBUTTON_CONTEXT_UNSET) {\n    throw new Error('BuyButton components must be used inside BuyButtonRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\n// Builds the add-to-cart context from a variant: the SKU (its Node id), its default seller, and its\n// availability. A variant whose resolved seller has no purchasable offer yields null (the button does\n// not render). Shared by the product-level and selected-variant transforms so the default-seller +\n// offer gate lives in one place.\nfunction buyButtonContextFromVariant(variant: {\n  id: string;\n  availableForSale: boolean;\n  sellers: readonly { id: string; isDefault: boolean; offer: unknown }[];\n}): BuyButtonContextData | null {\n  const seller = resolveDefaultSeller(variant.sellers);\n  if (!seller?.offer) return null;\n\n  return {\n    available: variant.availableForSale,\n    variantId: variant.id,\n    seller: seller.id,\n  };\n}\n\nfunction transformBuyButtonData(data: RawBuyButtonData): BuyButtonContextData | null {\n  const edge = data.variants.edges[0];\n  if (!edge) return null;\n\n  return buyButtonContextFromVariant(edge.node);\n}\n\nexport function transformVariantBuyButtonData(variant: VariantBuyButtonDataFragment): BuyButtonContextData | null {\n  return buyButtonContextFromVariant(variant);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonRootDefinition = defineComponent<BuyButtonRootProps>({\n  name: 'BuyButtonRoot',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonRoot,\n  fragment,\n  skeleton: BuyButtonSkeleton,\n  editor: { label: 'Buy Button', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'Data provider for the buy button; place it on PDPs with BuyButtonButton as a child. Adds the variant the shopper picks (it reads the published VariantSelector selection), sending that SKU and its seller to the cart; the selectedVariantId prop is an optional pre-selection fallback, and it falls back to the product first variant on a variant fetch error. Cart writes flow through $actions.cart, so no CartRoot ancestor is required. See buy-button.md.',\n});\n\nexport const BuyButtonButtonDefinition = defineComponent({\n  name: 'BuyButtonButton',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonButton,\n  content: BuyButtonLabels,\n  editor: { label: 'Buy Button Action', category: 'commerce' },\n  schema: {\n    availableLabel: { type: 'string', default: 'Comprar', label: 'Available label' },\n    unavailableLabel: { type: 'string', default: 'Indisponivel', label: 'Unavailable label' },\n  },\n  actions: { cart: ['addItem'] },\n  guideline:\n    'The add-to-cart button; must be a descendant of BuyButtonRoot. Cart writes flow through $actions.cart, so no CartRoot ancestor is required.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonRoot({ $data, selectedVariantId, children, ...props }: BuyButtonRootProps) {\n  const productSlice = $data ?? null;\n\n  // Read the shopper's published variant selection so the button adds the variant the shopper picked\n  // — the selected SKU, its seller, and its availability — without a page navigation, scoped to this\n  // product. The explicit selectedVariantId prop is the pre-selection fallback; the live published\n  // selection wins once set.\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null);\n  const activeVariantId = publishedVariantId ?? selectedVariantId;\n\n  if (activeVariantId) {\n    return (\n      <Suspense fallback={null}>\n        <HotDataProvider\n          query={variantQuery}\n          variables={{ id: activeVariantId }}\n          field=\"node\"\n          fallbackData={productSlice}\n        >\n          <BuyButtonProvider fallbackProductSlice={productSlice} {...props}>\n            {children}\n          </BuyButtonProvider>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const contextValue = productSlice ? transformBuyButtonData(productSlice) : null;\n\n  return (\n    <BuyButtonView contextValue={contextValue} {...props}>\n      {children}\n    </BuyButtonView>\n  );\n}\n\ntype BuyButtonProviderProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  fallbackProductSlice: RawBuyButtonData | null;\n};\n\n// Reads the override written by the nested HotDataProvider: a Variant node when the variant fetch\n// succeeds, or the product slice (fallbackData) on error/null. Dispatch on __typename so the whole\n// add-to-cart context — availability, the SKU (variantId), and the seller — resolves from the\n// selected variant; always source the product path from the explicit fallback prop so a mis-passed\n// Product node id can never crash the variant transform.\nfunction BuyButtonProvider({ fallbackProductSlice, ...viewProps }: BuyButtonProviderProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let contextValue: BuyButtonContextValue = null;\n  if (overrideTypename === 'Variant') {\n    contextValue = transformVariantBuyButtonData(override as VariantBuyButtonDataFragment);\n  } else if (fallbackProductSlice) {\n    contextValue = transformBuyButtonData(fallbackProductSlice);\n  }\n\n  return <BuyButtonView contextValue={contextValue} {...viewProps} />;\n}\n\ntype BuyButtonViewProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  contextValue: BuyButtonContextValue;\n};\n\nfunction BuyButtonView({ contextValue, className, children, ...props }: BuyButtonViewProps) {\n  return (\n    <BuyButtonContext value={contextValue}>\n      <div {...props} className={className} data-fs-buy-button=\"\">\n        {children}\n      </div>\n    </BuyButtonContext>\n  );\n}\n\nexport function BuyButtonButton({\n  availableLabel = 'Comprar',\n  unavailableLabel = 'Indisponivel',\n  className,\n  children,\n  onClick,\n  $content,\n  $actions: $actionsProp,\n  ...props\n}: BuyButtonButtonProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const ctx = useBuyButton();\n  // `addItem` is async with no optimistic response, so the button owns its pending state locally\n  // (the action surface no longer exposes a shared `addItemPending`).\n  const [addItemPending, setAddItemPending] = useState(false);\n  const { quantity } = useProductQuantity();\n\n  if (!ctx) return null;\n\n  const { available, variantId, seller } = ctx;\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const addItem = $actions?.cart?.addItem;\n    if (addItem) {\n      setAddItemPending(true);\n      void addItem({ variantId, seller, quantity }).finally(() => setAddItemPending(false));\n    }\n    onClick?.(e);\n  }\n\n  const isUnavailable = !available;\n  const defaultText = isUnavailable\n    ? ($content?.unavailableLabel ?? unavailableLabel)\n    : ($content?.availableLabel ?? availableLabel);\n\n  return (\n    <Button\n      {...props}\n      className={className}\n      onClick={handleClick}\n      disabled={isUnavailable || addItemPending}\n      aria-busy={addItemPending || undefined}\n      data-fs-buy-button-button=\"\"\n      {...(isUnavailable ? { 'data-fs-buy-button-unavailable': '' } : {})}\n      {...(addItemPending ? { 'data-fs-buy-button-pending': '' } : {})}\n    >\n      {children ?? defaultText}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-buy-button-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-buy-button-skeleton-line=\"\" />\n    </div>\n  );\n}\n\nBuyButtonRoot.Skeleton = BuyButtonSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const BuyButton = {\n  Root: BuyButtonRoot,\n  Button: BuyButtonButton,\n  Skeleton: BuyButtonSkeleton,\n};\n"],"mappings":"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"}
+{"version":3,"file":"buy-button.js","names":[],"sources":["../../../src/matter/buy-button/buy-button.tsx"],"sourcesContent":["'use client';\n\nimport { useReactiveVar } from '@apollo/client/react';\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, Suspense, useContext, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { HotDataProvider } from '../../sdk/data/hot-data-provider.js';\nimport { graphql } from '../../sdk/generated/gql.js';\nimport type { VariantBuyButtonDataFragment } from '../../sdk/generated/graphql.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { resolveDefaultSeller } from '../../sdk/seller.js';\nimport { publishedVariantIdFor, selectedVariantVar } from '../../sdk/state/variant-selector.js';\nimport { useProductQuantity } from '../product-quantity/product-quantity.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment BuyButtonData on Query {\n    productBySlug(slug: $slug) {\n      id\n      title\n      slug\n      images(first: 1) {\n        edges {\n          node {\n            url\n            altText\n          }\n        }\n      }\n      variants(first: 1) {\n        edges {\n          node {\n            id\n            sku\n            availableForSale\n            sellers {\n              id\n              isDefault\n              offer {\n                price { amount currencyCode }\n                listPrice { amount currencyCode }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n\n// Variant slice carrying the selected variant's availability plus its default seller, authored via\n// graphql() so HotDataProvider gets a TypedDocumentNode. Declared so codegen scans the source and\n// emits VariantBuyButtonDataFragment; the fragment is spread into variantQuery at the GraphQL layer,\n// so the variable is unused at runtime. `offer` is selected only as the same purchasability gate the\n// product transform applies — the buy button never displays price.\nconst _variantFragment = graphql(`\n  fragment VariantBuyButtonData on Variant {\n    __typename\n    id\n    availableForSale\n    sellers {\n      id\n      isDefault\n      offer {\n        price { amount currencyCode }\n      }\n    }\n  }\n`);\n\nconst variantQuery = graphql(`\n  query VariantBuyButtonQuery($id: ID!) {\n    node(id: $id) {\n      __typename\n      ... on Variant {\n        ...VariantBuyButtonData\n      }\n    }\n  }\n`);\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype MoneyValue = {\n  amount: number;\n  currencyCode: string;\n};\n\ntype RawBuyButtonData = {\n  id: string;\n  title: string;\n  slug: string;\n  images: {\n    edges: Array<{\n      node: {\n        url: string;\n        altText: string | null;\n      };\n    }>;\n  };\n  variants: {\n    edges: Array<{\n      node: {\n        id: string;\n        sku: string;\n        availableForSale: boolean;\n        sellers: Array<{\n          id: string;\n          isDefault: boolean;\n          offer: {\n            price: MoneyValue;\n            listPrice: MoneyValue;\n          } | null;\n        }>;\n      };\n    }>;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Content model\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonLabels = defineContentType({\n  id: 'buy-button-labels',\n  title: 'Buy Button Labels',\n  description: 'Labels of the add-to-cart button.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      availableLabel: {\n        type: 'string',\n        minLength: 1,\n        title: 'Available label',\n        format: 'icu-message',\n        messageSource: 'Buy',\n      },\n      unavailableLabel: {\n        type: 'string',\n        minLength: 1,\n        title: 'Unavailable label',\n        format: 'icu-message',\n        messageSource: 'Unavailable',\n      },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype BuyButtonContextData = {\n  available: boolean;\n  /** Identifiers passed to useCart().addItem when the button is clicked. */\n  variantId: string;\n  seller: string;\n};\n\ntype BuyButtonContextValue = BuyButtonContextData | null;\n\nconst BUYBUTTON_CONTEXT_UNSET = Symbol('BuyButtonContextUnset');\n\nexport type BuyButtonRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: RawBuyButtonData | null;\n  /** Page-supplied viewed SKU; adds this variant before the shopper interacts. A published swatch\n   *  selection wins over it once set. */\n  selectedVariantId?: string;\n};\n\nexport type BuyButtonButtonProps = ComponentPropsWithRef<'button'> &\n  MessageLocaleProp & {\n    $content?: ContentValue<typeof BuyButtonLabels>;\n    /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */\n    $actions?: ComponentActions;\n  };\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst BuyButtonContext = createContext<BuyButtonContextValue | typeof BUYBUTTON_CONTEXT_UNSET>(BUYBUTTON_CONTEXT_UNSET);\n\nfunction useBuyButton(): BuyButtonContextValue {\n  const ctx = useContext(BuyButtonContext);\n  if (ctx === BUYBUTTON_CONTEXT_UNSET) {\n    throw new Error('BuyButton components must be used inside BuyButtonRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\n// Builds the add-to-cart context from a variant: the SKU (its Node id), its default seller, and its\n// availability. A variant whose resolved seller has no purchasable offer yields null (the button does\n// not render). Shared by the product-level and selected-variant transforms so the default-seller +\n// offer gate lives in one place.\nfunction buyButtonContextFromVariant(variant: {\n  id: string;\n  availableForSale: boolean;\n  sellers: readonly { id: string; isDefault: boolean; offer: unknown }[];\n}): BuyButtonContextData | null {\n  const seller = resolveDefaultSeller(variant.sellers);\n  if (!seller?.offer) return null;\n\n  return {\n    available: variant.availableForSale,\n    variantId: variant.id,\n    seller: seller.id,\n  };\n}\n\nfunction transformBuyButtonData(data: RawBuyButtonData): BuyButtonContextData | null {\n  const edge = data.variants.edges[0];\n  if (!edge) return null;\n\n  return buyButtonContextFromVariant(edge.node);\n}\n\nexport function transformVariantBuyButtonData(variant: VariantBuyButtonDataFragment): BuyButtonContextData | null {\n  return buyButtonContextFromVariant(variant);\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const BuyButtonRootDefinition = defineComponent<BuyButtonRootProps>({\n  name: 'BuyButtonRoot',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonRoot,\n  fragment,\n  skeleton: BuyButtonSkeleton,\n  editor: { label: 'Buy Button', category: 'commerce' },\n  schema: {\n    selectedVariantId: { type: 'string', label: 'Selected Variant ID' },\n  },\n  guideline:\n    'Data provider for the buy button; place it on PDPs with BuyButtonButton as a child. Adds the variant the shopper picks (it reads the published VariantSelector selection), sending that SKU and its seller to the cart; the selectedVariantId prop is an optional pre-selection fallback, and it falls back to the product first variant on a variant fetch error. Cart writes flow through $actions.cart, so no CartRoot ancestor is required. See buy-button.md.',\n});\n\nexport const BuyButtonButtonDefinition = defineComponent({\n  name: 'BuyButtonButton',\n  importPath: '@vtex/faststore/components',\n  component: BuyButtonButton,\n  content: BuyButtonLabels,\n  editor: { label: 'Buy Button Action', category: 'commerce' },\n  schema: {},\n  actions: { cart: ['addItem'] },\n  guideline:\n    'The add-to-cart button; must be a descendant of BuyButtonRoot. Cart writes flow through $actions.cart, so no CartRoot ancestor is required.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonRoot({ $data, selectedVariantId, children, ...props }: BuyButtonRootProps) {\n  const productSlice = $data ?? null;\n\n  // Read the shopper's published variant selection so the button adds the variant the shopper picked\n  // — the selected SKU, its seller, and its availability — without a page navigation, scoped to this\n  // product. The explicit selectedVariantId prop is the pre-selection fallback; the live published\n  // selection wins once set.\n  const publishedSelection = useReactiveVar(selectedVariantVar);\n  const publishedVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null);\n  const activeVariantId = publishedVariantId ?? selectedVariantId;\n\n  if (activeVariantId) {\n    return (\n      <Suspense fallback={null}>\n        <HotDataProvider\n          query={variantQuery}\n          variables={{ id: activeVariantId }}\n          field=\"node\"\n          fallbackData={productSlice}\n        >\n          <BuyButtonProvider fallbackProductSlice={productSlice} {...props}>\n            {children}\n          </BuyButtonProvider>\n        </HotDataProvider>\n      </Suspense>\n    );\n  }\n\n  const contextValue = productSlice ? transformBuyButtonData(productSlice) : null;\n\n  return (\n    <BuyButtonView contextValue={contextValue} {...props}>\n      {children}\n    </BuyButtonView>\n  );\n}\n\ntype BuyButtonProviderProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  fallbackProductSlice: RawBuyButtonData | null;\n};\n\n// Reads the override written by the nested HotDataProvider: a Variant node when the variant fetch\n// succeeds, or the product slice (fallbackData) on error/null. Dispatch on __typename so the whole\n// add-to-cart context — availability, the SKU (variantId), and the seller — resolves from the\n// selected variant; always source the product path from the explicit fallback prop so a mis-passed\n// Product node id can never crash the variant transform.\nfunction BuyButtonProvider({ fallbackProductSlice, ...viewProps }: BuyButtonProviderProps) {\n  const override = useDataOverride<unknown>(null);\n  const overrideTypename = (override as { __typename?: string } | null)?.__typename;\n\n  let contextValue: BuyButtonContextValue = null;\n  if (overrideTypename === 'Variant') {\n    contextValue = transformVariantBuyButtonData(override as VariantBuyButtonDataFragment);\n  } else if (fallbackProductSlice) {\n    contextValue = transformBuyButtonData(fallbackProductSlice);\n  }\n\n  return <BuyButtonView contextValue={contextValue} {...viewProps} />;\n}\n\ntype BuyButtonViewProps = Omit<BuyButtonRootProps, '$data' | 'selectedVariantId'> & {\n  contextValue: BuyButtonContextValue;\n};\n\nfunction BuyButtonView({ contextValue, className, children, ...props }: BuyButtonViewProps) {\n  return (\n    <BuyButtonContext value={contextValue}>\n      <div {...props} className={className} data-fs-buy-button=\"\">\n        {children}\n      </div>\n    </BuyButtonContext>\n  );\n}\n\nexport function BuyButtonButton({\n  className,\n  children,\n  onClick,\n  $content,\n  $locale,\n  $actions: $actionsProp,\n  ...props\n}: BuyButtonButtonProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const { format } = useMessageFormatter(BuyButtonLabels, $content);\n  const ctx = useBuyButton();\n  // `addItem` is async with no optimistic response, so the button owns its pending state locally\n  // (the action surface no longer exposes a shared `addItemPending`).\n  const [addItemPending, setAddItemPending] = useState(false);\n  const { quantity } = useProductQuantity();\n\n  if (!ctx) return null;\n\n  const { available, variantId, seller } = ctx;\n\n  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const addItem = $actions?.cart?.addItem;\n    if (addItem) {\n      setAddItemPending(true);\n      void addItem({ variantId, seller, quantity }).finally(() => setAddItemPending(false));\n    }\n    onClick?.(e);\n  }\n\n  const isUnavailable = !available;\n\n  return (\n    <Button\n      {...props}\n      className={className}\n      onClick={handleClick}\n      disabled={isUnavailable || addItemPending}\n      aria-busy={addItemPending || undefined}\n      data-fs-buy-button-button=\"\"\n      {...(isUnavailable ? { 'data-fs-buy-button-unavailable': '' } : {})}\n      {...(addItemPending ? { 'data-fs-buy-button-pending': '' } : {})}\n    >\n      {children ?? format(isUnavailable ? 'unavailableLabel' : 'availableLabel')}\n    </Button>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function BuyButtonSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-buy-button-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-buy-button-skeleton-line=\"\" />\n    </div>\n  );\n}\n\nBuyButtonRoot.Skeleton = BuyButtonSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const BuyButton = {\n  Root: BuyButtonRoot,\n  Button: BuyButtonButton,\n  Skeleton: BuyButtonSkeleton,\n};\n"],"mappings":"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"}

package/dist/matter/card-entry/card-capture.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext, useEffect } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect } from "react";
 //#region src/matter/card-entry/card-capture.tsx
 const CARD_CAPTURE_CONTEXT_UNSET = Symbol("CardCaptureContextUnset");
 const CardCaptureContextInternal = createContext(CARD_CAPTURE_CONTEXT_UNSET);
@@ -10,15 +10,23 @@ function useCardCapture() {
 	if (ctx === CARD_CAPTURE_CONTEXT_UNSET) throw new Error("useCardCapture() must be used inside a card-capture provider (PaymentSectionRoot, PaymentSectionController).");
 	return ctx;
 }
-/** Registers on mount and on any argument change, so the provider always holds the latest closure. */
+/**
+* Registers on mount and on any argument change, so the provider always holds the latest closure.
+* Registration runs in the layout phase: before paint and before any passive effect of the commit, so
+* a click on a render that no discrete event caused cannot resolve the previous commit's closure.
+* The provider is told about the mount from a passive effect, once every layout effect has refreshed it.
+*/
 function useRegisterCardCapture(capture, preflight, explainMissingMethod) {
-	const { registerCapture } = useCardCapture();
-	useEffect(() => registerCapture(capture, preflight, explainMissingMethod), [
+	const { registerCapture, onCaptureMounted } = useCardCapture();
+	useLayoutEffect(() => registerCapture(capture, preflight, explainMissingMethod), [
 		registerCapture,
 		capture,
 		preflight,
 		explainMissingMethod
 	]);
+	useEffect(() => {
+		onCaptureMounted?.();
+	}, [onCaptureMounted]);
 }
 //#endregion
 export { CardCaptureContext, useCardCapture, useRegisterCardCapture };

package/dist/matter/card-entry/card-capture.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-capture.js","names":[],"sources":["../../../src/matter/card-entry/card-capture.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useEffect } from 'react';\nimport type { PaymentSubmissionPath } from '../../sdk/payment/submission-registry.js';\n\n/**\n * The `card-capture` context (specs/sfs-3457-card-entry-card-capture-context.md): everything\n * `CardEntry` needs from whichever surface composes it. The fields own the card values; the provider\n * owns the accepted networks, when a capture runs, and where the card goes. This is the PCI context:\n * `CardEntry` is its only consumer.\n */\n\nexport type CardCaptureValidator = Readonly<{\n  numberMask: string | null;\n  numberRegex: string | null;\n  cvvMask: string | null;\n  cvvRegex: string | null;\n  cvvRequired: boolean;\n  expirationRequired: boolean;\n  holderNameRequired: boolean;\n}>;\n\n/** One accepted network and its validation rules. `PaymentSectionMethod` is assignable to it. */\nexport type CardCaptureNetwork = Readonly<{\n  id: string;\n  name: string;\n  validator: CardCaptureValidator;\n}>;\n\n/** The card as the fields hold it. Exists only as the argument of one `send` call. */\nexport type CapturedCard = Readonly<{\n  number: string;\n  securityCode: string;\n  expirationDate: string;\n  holderName: string;\n}>;\n\nexport type CardCaptureError = Readonly<{ code: string; message: string }>;\n\n/**\n * What a capture and its target resolve (T112). `reachedGateway` is `false` only when no request was\n * issued — `CardEntry`'s own refusals set it, and a target passes through whatever its transport reports.\n * Kept local rather than imported from the SDK: `CardEntry` is surface-agnostic, and the account will\n * tokenize through the same context.\n */\nexport type CardCaptureResult = Readonly<{ reachedGateway: boolean; userErrors: readonly CardCaptureError[] }>;\n\nexport type CardCaptureTarget = (card: CapturedCard) => Promise<CardCaptureResult>;\n\n/** Registered by `CardEntry`; the provider calls it with the target for this one submission. */\nexport type CardCapture = (send: CardCaptureTarget) => Promise<CardCaptureResult>;\n\n/** Synchronous, I/O-free verdict on the draft, with the same contract as `PaymentPreflightCheck`. */\nexport type CardCapturePreflight = () => readonly CardCaptureError[];\n\n/**\n * Synchronous, side-effect-free explanation of why no payment method is selected (T47), with the same\n * contract as `PaymentMissingMethodExplainer`: returns the refusal that names the card as the reason, or\n * `null`. Fixed copy and a fixed code only; it never echoes anything the shopper typed.\n */\nexport type CardCaptureMissingMethodExplainer = () => CardCaptureError | null;\n\n/** The checkout facts `CardEntry` reacts to. Absent outside the checkout. */\nexport type CardCaptureSelection = Readonly<{\n  selectMethod: (input: { methodId: string; bin: string }) => void;\n  selectNewCard: () => void;\n  setDraftBin: (bin: string | null) => void;\n  path: PaymentSubmissionPath | null;\n  bin: string | null;\n  collapsed: boolean;\n  cardModeActive: boolean;\n  selectedMethodId: string | null;\n  selectionOutOfScope: boolean;\n  selectionNonCard: boolean;\n}>;\n\nexport type CardCaptureContextValue = Readonly<{\n  networks: readonly CardCaptureNetwork[];\n  busy: boolean;\n  /** When `CardEntry` clears its fields after the target settles. A pre-flight refusal never clears. */\n  clearOn: 'success' | 'any-outcome';\n  /** Registers the capture, its pre-flight check and, optionally, its missing-method explainer. Returns the unregister function. */\n  registerCapture: (\n    capture: CardCapture,\n    preflight: CardCapturePreflight,\n    explainMissingMethod?: CardCaptureMissingMethodExplainer,\n  ) => () => void;\n  /** Called with the resolved network's id, or `null`, whenever that resolution changes. */\n  onNetworkChange?: (networkId: string | null) => void;\n  selection?: CardCaptureSelection;\n}>;\n\nconst CARD_CAPTURE_CONTEXT_UNSET = Symbol('CardCaptureContextUnset');\n\nconst CardCaptureContextInternal = createContext<CardCaptureContextValue | typeof CARD_CAPTURE_CONTEXT_UNSET>(\n  CARD_CAPTURE_CONTEXT_UNSET,\n);\n\nexport const CardCaptureContext = CardCaptureContextInternal as React.Context<CardCaptureContextValue>;\n\n/** Throws outside a provider, mirroring `usePayment()`: a misplaced `CardEntry` is a composition bug. */\nexport function useCardCapture(): CardCaptureContextValue {\n  const ctx = useContext(CardCaptureContextInternal);\n  if (ctx === CARD_CAPTURE_CONTEXT_UNSET) {\n    throw new Error(\n      'useCardCapture() must be used inside a card-capture provider (PaymentSectionRoot, PaymentSectionController).',\n    );\n  }\n  return ctx;\n}\n\n/** Registers on mount and on any argument change, so the provider always holds the latest closure. */\nexport function useRegisterCardCapture(\n  capture: CardCapture,\n  preflight: CardCapturePreflight,\n  explainMissingMethod?: CardCaptureMissingMethodExplainer,\n): void {\n  const { registerCapture } = useCardCapture();\n\n  useEffect(\n    () => registerCapture(capture, preflight, explainMissingMethod),\n    [registerCapture, capture, preflight, explainMissingMethod],\n  );\n}\n"],"mappings":";;;AA4FA,MAAM,6BAA6B,OAAO,yBAAyB;AAEnE,MAAM,6BAA6B,cACjC,0BACF;AAEA,MAAa,qBAAqB;;AAGlC,SAAgB,iBAA0C;CACxD,MAAM,MAAM,WAAW,0BAA0B;CACjD,IAAI,QAAQ,4BACV,MAAM,IAAI,MACR,8GACF;CAEF,OAAO;AACT;;AAGA,SAAgB,uBACd,SACA,WACA,sBACM;CACN,MAAM,EAAE,oBAAoB,eAAe;CAE3C,gBACQ,gBAAgB,SAAS,WAAW,oBAAoB,GAC9D;EAAC;EAAiB;EAAS;EAAW;CAAoB,CAC5D;AACF"}
+{"version":3,"file":"card-capture.js","names":[],"sources":["../../../src/matter/card-entry/card-capture.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useEffect, useLayoutEffect } from 'react';\nimport type { PaymentSubmissionPath } from '../../sdk/payment/submission-registry.js';\n\n/**\n * The `card-capture` context (specs/sfs-3457-card-entry-card-capture-context.md): everything\n * `CardEntry` needs from whichever surface composes it. The fields own the card values; the provider\n * owns the accepted networks, when a capture runs, and where the card goes. This is the PCI context:\n * `CardEntry` is its only consumer.\n */\n\nexport type CardCaptureValidator = Readonly<{\n  numberMask: string | null;\n  numberRegex: string | null;\n  cvvMask: string | null;\n  cvvRegex: string | null;\n  cvvRequired: boolean;\n  expirationRequired: boolean;\n  holderNameRequired: boolean;\n}>;\n\n/** One accepted network and its validation rules. `PaymentSectionMethod` is assignable to it. */\nexport type CardCaptureNetwork = Readonly<{\n  id: string;\n  name: string;\n  validator: CardCaptureValidator;\n}>;\n\n/** The card as the fields hold it. Exists only as the argument of one `send` call. */\nexport type CapturedCard = Readonly<{\n  number: string;\n  securityCode: string;\n  expirationDate: string;\n  holderName: string;\n}>;\n\nexport type CardCaptureError = Readonly<{ code: string; message: string }>;\n\n/**\n * What a capture and its target resolve (T112). `reachedGateway` is `false` only when no request was\n * issued — `CardEntry`'s own refusals set it, and a target passes through whatever its transport reports.\n * Kept local rather than imported from the SDK: `CardEntry` is surface-agnostic, and the account will\n * tokenize through the same context.\n */\nexport type CardCaptureResult = Readonly<{ reachedGateway: boolean; userErrors: readonly CardCaptureError[] }>;\n\nexport type CardCaptureTarget = (card: CapturedCard) => Promise<CardCaptureResult>;\n\n/** Registered by `CardEntry`; the provider calls it with the target for this one submission. */\nexport type CardCapture = (send: CardCaptureTarget) => Promise<CardCaptureResult>;\n\n/** Synchronous, I/O-free verdict on the draft, with the same contract as `PaymentPreflightCheck`. */\nexport type CardCapturePreflight = () => readonly CardCaptureError[];\n\n/**\n * Synchronous, side-effect-free explanation of why no payment method is selected (T47), with the same\n * contract as `PaymentMissingMethodExplainer`: returns the refusal that names the card as the reason, or\n * `null`. Fixed copy and a fixed code only; it never echoes anything the shopper typed.\n */\nexport type CardCaptureMissingMethodExplainer = () => CardCaptureError | null;\n\n/** The checkout facts `CardEntry` reacts to. Absent outside the checkout. */\nexport type CardCaptureSelection = Readonly<{\n  selectMethod: (input: { methodId: string; bin: string }) => void;\n  selectNewCard: () => void;\n  setDraftBin: (bin: string | null) => void;\n  /**\n   * Publishes whether the entry passes length, Luhn, expiration and security code. A boolean and nothing\n   * else: the card values stay inside `CardEntry`, and a sibling reads only the verdict.\n   */\n  setDraftEntryValid: (valid: boolean) => void;\n  path: PaymentSubmissionPath | null;\n  bin: string | null;\n  collapsed: boolean;\n  cardModeActive: boolean;\n  selectedMethodId: string | null;\n  selectionOutOfScope: boolean;\n  selectionNonCard: boolean;\n}>;\n\nexport type CardCaptureContextValue = Readonly<{\n  networks: readonly CardCaptureNetwork[];\n  busy: boolean;\n  /** When `CardEntry` clears its fields after the target settles. A pre-flight refusal never clears. */\n  clearOn: 'success' | 'any-outcome';\n  /** Registers the capture, its pre-flight check and, optionally, its missing-method explainer. Returns the unregister function. */\n  registerCapture: (\n    capture: CardCapture,\n    preflight: CardCapturePreflight,\n    explainMissingMethod?: CardCaptureMissingMethodExplainer,\n  ) => () => void;\n  /**\n   * Told once a registered capture is mounted. Takes and returns nothing: the provider reads its own facts.\n   * It runs in a passive effect, after every layout effect of the commit, so those facts are fresh.\n   */\n  onCaptureMounted?: () => void;\n  /** Called with the resolved network's id, or `null`, whenever that resolution changes. */\n  onNetworkChange?: (networkId: string | null) => void;\n  selection?: CardCaptureSelection;\n}>;\n\nconst CARD_CAPTURE_CONTEXT_UNSET = Symbol('CardCaptureContextUnset');\n\nconst CardCaptureContextInternal = createContext<CardCaptureContextValue | typeof CARD_CAPTURE_CONTEXT_UNSET>(\n  CARD_CAPTURE_CONTEXT_UNSET,\n);\n\nexport const CardCaptureContext = CardCaptureContextInternal as React.Context<CardCaptureContextValue>;\n\n/** Throws outside a provider, mirroring `usePayment()`: a misplaced `CardEntry` is a composition bug. */\nexport function useCardCapture(): CardCaptureContextValue {\n  const ctx = useContext(CardCaptureContextInternal);\n  if (ctx === CARD_CAPTURE_CONTEXT_UNSET) {\n    throw new Error(\n      'useCardCapture() must be used inside a card-capture provider (PaymentSectionRoot, PaymentSectionController).',\n    );\n  }\n  return ctx;\n}\n\n/**\n * Registers on mount and on any argument change, so the provider always holds the latest closure.\n * Registration runs in the layout phase: before paint and before any passive effect of the commit, so\n * a click on a render that no discrete event caused cannot resolve the previous commit's closure.\n * The provider is told about the mount from a passive effect, once every layout effect has refreshed it.\n */\nexport function useRegisterCardCapture(\n  capture: CardCapture,\n  preflight: CardCapturePreflight,\n  explainMissingMethod?: CardCaptureMissingMethodExplainer,\n): void {\n  const { registerCapture, onCaptureMounted } = useCardCapture();\n\n  useLayoutEffect(\n    () => registerCapture(capture, preflight, explainMissingMethod),\n    [registerCapture, capture, preflight, explainMissingMethod],\n  );\n\n  useEffect(() => {\n    onCaptureMounted?.();\n  }, [onCaptureMounted]);\n}\n"],"mappings":";;;AAsGA,MAAM,6BAA6B,OAAO,yBAAyB;AAEnE,MAAM,6BAA6B,cACjC,0BACF;AAEA,MAAa,qBAAqB;;AAGlC,SAAgB,iBAA0C;CACxD,MAAM,MAAM,WAAW,0BAA0B;CACjD,IAAI,QAAQ,4BACV,MAAM,IAAI,MACR,8GACF;CAEF,OAAO;AACT;;;;;;;AAQA,SAAgB,uBACd,SACA,WACA,sBACM;CACN,MAAM,EAAE,iBAAiB,qBAAqB,eAAe;CAE7D,sBACQ,gBAAgB,SAAS,WAAW,oBAAoB,GAC9D;EAAC;EAAiB;EAAS;EAAW;CAAoB,CAC5D;CAEA,gBAAgB;EACd,mBAAmB;CACrB,GAAG,CAAC,gBAAgB,CAAC;AACvB"}

package/dist/matter/card-entry/card-entry.d.ts

@@ -1,3 +1,4 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import "../../sdk/payment/submission-registry.js";
@@ -27,43 +28,133 @@ import { CardCaptureNetwork } from "./card-capture.js";
  * first keystroke off the new-card path records that path locally with `selectNewCard()`
  * (specs/collapse-the-card-form-when-a.md, FR-10).
  */
-export type CardEntryProps = {
-  /** `Fieldset.Legend` text. */
-  legend?: string;
-  numberLabel?: string;
+export declare const CardEntryContent: {
+  readonly id: "card-entry";
+  readonly title: "Card Entry";
+  readonly description: "Copy for the new-card fields and their validation messages.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly legend: {
+        readonly type: "string";
+        readonly title: "Legend";
+        readonly format: "icu-message";
+        readonly messageSource: "Card details";
+      };
+      readonly numberLabel: {
+        readonly type: "string";
+        readonly title: "Number label";
+        readonly format: "icu-message";
+        readonly messageSource: "Card number";
+      };
+      readonly holderNameLabel: {
+        readonly type: "string";
+        readonly title: "Holder name label";
+        readonly format: "icu-message";
+        readonly messageSource: "Cardholder name";
+      };
+      readonly expirationLabel: {
+        readonly type: "string";
+        readonly title: "Expiration label";
+        readonly format: "icu-message";
+        readonly messageSource: "Expiration date";
+      };
+      readonly expirationPlaceholder: {
+        readonly type: "string";
+        readonly title: "Expiration placeholder";
+        readonly format: "icu-message";
+        readonly messageSource: "MM/YY";
+      };
+      readonly cvvLabel: {
+        readonly type: "string";
+        readonly title: "CVV label";
+        readonly format: "icu-message";
+        readonly messageSource: "Security code";
+      };
+      readonly cvvDescription: {
+        readonly type: "string";
+        readonly title: "CVV description";
+        readonly description: "Helper text under the CVV field, linked to the input; blank renders nothing.";
+        readonly format: "icu-message";
+        readonly messageSource: "The 3-4 digit number on your card";
+        readonly messageOptional: true;
+      };
+      readonly numberRequiredMessage: {
+        readonly type: "string";
+        readonly title: "Number required message";
+        readonly description: "Shown on the number field when it is left blank.";
+        readonly format: "icu-message";
+        readonly messageSource: "Card number is required";
+      };
+      readonly numberInvalidMessage: {
+        readonly type: "string";
+        readonly title: "Number invalid message";
+        readonly description: "Shown for a Luhn-invalid number, or one a configured network claims only as a prefix (the wrong length, or two networks at once).";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a valid card number";
+      };
+      readonly networkNotAcceptedMessage: {
+        readonly type: "string";
+        readonly title: "Network not accepted message";
+        readonly description: "Shown for a Luhn-valid number that no configured network claims at all.";
+        readonly format: "icu-message";
+        readonly messageSource: "This card is not from a network the store accepts";
+      };
+      readonly holderNameRequiredMessage: {
+        readonly type: "string";
+        readonly title: "Holder name required message";
+        readonly description: "Shown when the holder name is blank and the detected method requires it.";
+        readonly format: "icu-message";
+        readonly messageSource: "Cardholder name is required";
+      };
+      readonly expirationRequiredMessage: {
+        readonly type: "string";
+        readonly title: "Expiration required message";
+        readonly description: "Shown when the expiration is blank and the detected method requires it.";
+        readonly format: "icu-message";
+        readonly messageSource: "Expiration date is required";
+      };
+      readonly expirationInvalidMessage: {
+        readonly type: "string";
+        readonly title: "Expiration invalid message";
+        readonly description: "Shown for a malformed MM/YY.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a valid expiration date";
+      };
+      readonly expirationExpiredMessage: {
+        readonly type: "string";
+        readonly title: "Expiration expired message";
+        readonly description: "Shown for a well-formed MM/YY that has already passed.";
+        readonly format: "icu-message";
+        readonly messageSource: "This card has expired";
+      };
+      readonly cvvRequiredMessage: {
+        readonly type: "string";
+        readonly title: "CVV required message";
+        readonly description: "Shown when the security code is blank and the detected method requires it.";
+        readonly format: "icu-message";
+        readonly messageSource: "Security code is required";
+      };
+      readonly cvvInvalidMessage: {
+        readonly type: "string";
+        readonly title: "CVV invalid message";
+        readonly description: "Shown for a security code that fails the detected method's format.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a valid security code";
+      };
+    };
+  };
+};
+export type CardEntryProps = MessageLocaleProp & {
   numberPlaceholder?: string;
-  holderNameLabel?: string;
   holderNamePlaceholder?: string;
-  expirationLabel?: string;
-  expirationPlaceholder?: string;
-  cvvLabel?: string;
   cvvPlaceholder?: string;
-  /** Helper copy under the CVV field, rendered through `Field.Description` and linked to the
-   *  input via `aria-describedby`. An empty string renders nothing. Copy configuration only —
-   *  never the security code itself. */
-  cvvDescription?: string;
-  /** Shown on the number field when it is left blank. */
-  numberRequiredMessage?: string;
-  /** Shown on the number field for a Luhn-invalid PAN, or a Luhn-valid one that a configured
-   *  network claims only as a prefix (the wrong length, or two networks at once). */
-  numberInvalidMessage?: string;
-  /** Shown on the number field for a Luhn-valid PAN that no configured network claims at all. */
-  networkNotAcceptedMessage?: string;
-  /** Shown on the holder-name field when it is left blank and the detected method requires it. */
-  holderNameRequiredMessage?: string;
-  /** Shown on the expiration field when it is left blank and the detected method requires it. */
-  expirationRequiredMessage?: string;
-  /** Shown on the expiration field for a structurally malformed `MM/YY`. */
-  expirationInvalidMessage?: string;
-  /** Shown on the expiration field for a structurally valid `MM/YY` that has already passed. */
-  expirationExpiredMessage?: string;
-  /** Shown on the CVV field when it is left blank and the detected method requires it. */
-  cvvRequiredMessage?: string;
-  /** Shown on the CVV field for a value that fails the detected method's format. */
-  cvvInvalidMessage?: string;
   /** Disables every field. */
   disabled?: boolean;
   className?: string;
+  /** Merchant-authored copy: the legend, the field labels, the CVV description and the validation messages. */
+  $content?: ContentValue<typeof CardEntryContent>;
 };
 /**
  * First method whose `validator.numberRegex` admits `digits` as a BIN-level prefix, or `null`.
@@ -117,6 +208,6 @@ export declare const CARD_ENTRY_INVALID_DATA_CODE = "INVALID_CARD_DATA";
  */
 export declare const CARD_ENTRY_COLLAPSED_CODE = "CARD_ENTRY_COLLAPSED";
 export declare const CardEntryDefinition: ComponentDefinition<CardEntryProps>;
-export declare function CardEntry({ legend, numberLabel, numberPlaceholder, holderNameLabel, holderNamePlaceholder, expirationLabel, expirationPlaceholder, cvvLabel, cvvPlaceholder, cvvDescription, numberRequiredMessage, numberInvalidMessage, networkNotAcceptedMessage, holderNameRequiredMessage, expirationRequiredMessage, expirationInvalidMessage, expirationExpiredMessage, cvvRequiredMessage, cvvInvalidMessage, disabled, className }: Readonly<CardEntryProps>): import("react/jsx-runtime").JSX.Element;
+export declare function CardEntry({ numberPlaceholder, holderNamePlaceholder, cvvPlaceholder, disabled, className, $content }: Readonly<CardEntryProps>): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=card-entry.d.ts.map