@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/product-shelf/product-shelf.js

@@ -277,11 +277,6 @@ const ProductShelfRootDefinition = defineComponent({
 			default: false,
 			label: "Use Price With Taxes"
 		},
-		taxesLabel: {
-			type: "string",
-			default: "Tax included",
-			label: "Taxes Label"
-		},
 		first: {
 			type: "number",
 			default: 5,
@@ -384,11 +379,6 @@ const ProductShelfOnMountRootDefinition = defineComponent({
 			default: false,
 			label: "Use Price With Taxes"
 		},
-		taxesLabel: {
-			type: "string",
-			default: "Tax included",
-			label: "Taxes Label"
-		},
 		first: {
 			type: "number",
 			default: 5,
@@ -461,7 +451,7 @@ function contentOrProp(content, prop) {
 	if (content === void 0 || isEmptyContentValue(content)) return prop;
 	return content;
 }
-function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", searchTerm, categoryId, brandId, collectionId, availableOnly = false, usePriceWithTaxes = false, taxesLabel = "Tax included", products, $content, $data: $dataProp, className, children, ...props }) {
+function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", searchTerm, categoryId, brandId, collectionId, availableOnly = false, usePriceWithTaxes = false, products, $content, $data: $dataProp, className, children, ...props }) {
 	const $data = useDataOverride($dataProp);
 	const shelfConfig = useMemo(() => ({
 		first: contentOrProp($content?.first, first),
@@ -491,10 +481,7 @@ function ProductShelfRoot({ first = 5, itemsPerPage = 5, sort = "relevance", sea
 		headingId,
 		registerHeading
 	}), [headingId, registerHeading]);
-	const config = useMemo(() => ({
-		usePriceWithTaxes,
-		taxesLabel
-	}), [usePriceWithTaxes, taxesLabel]);
+	const config = useMemo(() => ({ usePriceWithTaxes }), [usePriceWithTaxes]);
 	const items = useMemo(() => {
 		if (products !== void 0) return products;
 		return $data ? transformProducts($data) : [];

package/dist/matter/product-shelf/product-shelf.js.map

@@ -1 +1 @@
-{"version":3,"file":"product-shelf.js","names":[],"sources":["../../../src/matter/product-shelf/product-shelf.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { CarouselTrack } from '../../particles/carousel/carousel.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { isEmptyContentValue } from '../../sdk/data/empty-content-value.js';\nimport {\n  ProductListConfigContext,\n  type ProductListItem,\n  ProductListItemContext,\n} from '../product-list/product-list.js';\n\n// ---------------------------------------------------------------------------\n// Content model — the merchant-facing fields that drive the query. Each one is\n// also a schema prop of the same name on the root: the CMS value wins per\n// field, and the prop is the developer default (the only source in a store\n// with no CMS binding). No field is required, so an empty value relaxes the\n// filter or takes the prop instead of omitting the shelf.\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfContent = defineContentType({\n  id: 'product-shelf',\n  title: 'Product Shelf',\n  description: 'Which products a shelf shows: how many, in which order, and from which facet.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      first: { type: 'integer', title: 'Number of products', minimum: 1, maximum: 100 },\n      sort: {\n        type: 'string',\n        enum: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'],\n        title: 'Sort',\n      },\n      categoryId: { type: 'string', title: 'Category ID' },\n      brandId: { type: 'string', title: 'Brand ID' },\n      collectionId: { type: 'string', title: 'Collection ID' },\n      searchTerm: { type: 'string', title: 'Search term' },\n      availableOnly: { type: 'boolean', title: 'Available only' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — product connection from the catalog module. Every\n// argument is a variable the compiler binds from the element's configuration\n// (its content slice at request time, else its prop at compile time), one\n// fragment instance per element. A variable left unbound inside `filter`\n// omits that key, so an unset facet relaxes the filter rather than sending\n// null; `$orderBy` reads `sort` through the `values` table in the definition.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ProductShelfData on Query {\n    products(\n      first: $first\n      orderBy: $orderBy\n      filter: {\n        categoryIds: $categoryId\n        brandIds: $brandId\n        collectionId: $collectionId\n        searchTerm: $searchTerm\n        availableOnly: $availableOnly\n      }\n    ) {\n      edges {\n        node {\n          id\n          title\n          slug\n          routeSlug\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          variants(first: 1) {\n            edges {\n              node {\n                availableForSale\n                quantityAvailable\n                price {\n                  amount\n                  currencyCode\n                }\n                compareAtPrice {\n                  amount\n                  currencyCode\n                }\n                sellers {\n                  isDefault\n                  offer {\n                    price {\n                      amount\n                      currencyCode\n                    }\n                    listPrice {\n                      amount\n                      currencyCode\n                    }\n                    spotPrice {\n                      amount\n                      currencyCode\n                    }\n                    tax {\n                      amount\n                      currencyCode\n                    }\n                    taxPercentage\n                    availableQuantity\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawMoney = { amount: number; currencyCode: string };\n\ntype RawOffer = {\n  price: RawMoney;\n  listPrice: RawMoney;\n  spotPrice: RawMoney;\n  tax: RawMoney;\n  taxPercentage: number | null;\n  availableQuantity: number;\n};\n\ntype RawVariantNode = {\n  availableForSale: boolean;\n  quantityAvailable: number | null;\n  price: RawMoney;\n  compareAtPrice: RawMoney | null;\n  sellers: Array<{ isDefault: boolean; offer: RawOffer | null }>;\n};\n\ntype RawProductNode = {\n  id: string;\n  title: string;\n  slug: string;\n  routeSlug: string;\n  images: { edges: Array<{ node: { url: string; altText: string | null } }> };\n  variants: { edges: Array<{ node: RawVariantNode }> };\n};\n\n// The `$data` the shelf receives is the unwrapped top-level fragment field:\n// HotDataProvider forwards `data['products']` (the connection value), not the\n// `{ products: ... }` wrapper — same contract as PricingRoot's productBySlug.\nexport type ProductShelfData = {\n  edges: Array<{ node: RawProductNode }>;\n  totalCount: number;\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n// The per-item value object the card parts (T3–T7) read. It is the widened\n// ProductListItem, so the existing ProductList.Card* leaves render unchanged.\nexport type ProductShelfItem = ProductListItem;\n\nexport type ProductShelfSort =\n  | 'relevance'\n  | 'price_asc'\n  | 'price_desc'\n  | 'name_asc'\n  | 'name_desc'\n  | 'release'\n  | 'orders'\n  | 'discount';\n\nexport type ProductSortField = 'TITLE' | 'PRICE' | 'RELEASE_DATE' | 'RELEVANCE' | 'BEST_SELLING';\n\nexport type SortDirection = 'ASC' | 'DESC';\n\n/**\n * The query configuration the shelf resolved for this element: the content slice when the\n * merchant filled a field, else the prop. The query has already applied these values; the\n * context republishes them for parts that describe the shelf (a \"sorted by\" label, a facet link).\n */\nexport type ProductShelfConfig = {\n  first: number;\n  sort: ProductShelfSort;\n  searchTerm?: string;\n  categoryId?: string;\n  brandId?: string;\n  collectionId?: string;\n  availableOnly: boolean;\n};\n\nexport type ProductShelfContextValue = {\n  itemsPerPage: number;\n  config: ProductShelfConfig;\n  count: number;\n};\n\nexport type ProductShelfRootProps = ComponentPropsWithRef<'section'> &\n  Partial<ProductShelfConfig> & {\n    itemsPerPage?: number;\n    /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */\n    usePriceWithTaxes?: boolean;\n    /** Text for the tax label part when tax display is on. Default `'Tax included'`. */\n    taxesLabel?: string;\n    products?: ProductShelfItem[];\n    /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n    $content?: ContentValue<typeof ProductShelfContent>;\n    $data?: ProductShelfData | null;\n  };\n\nexport type ProductShelfOnMountRootProps = Omit<ProductShelfRootProps, '$content'>;\n\nexport type ProductShelfItemsProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductShelfHeadingProps = ComponentPropsWithRef<'h2'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductShelfProductsContext = createContext<ProductShelfItem[]>([]);\n\nconst ProductShelfContext = createContext<ProductShelfContextValue | null>(null);\n\n// Wires the section ⇄ heading `aria-labelledby` link without the root having to\n// know its descendants: `headingId` is the shared id, and a composed\n// ProductShelfHeading registers its presence so the section points at it only\n// when it exists (never a dangling idref). `registerHeading` is ref-counted and\n// returns its unregister, so the heading can be placed anywhere.\ntype ProductShelfHeadingContextValue = { headingId: string; registerHeading: () => () => void };\n\nconst ProductShelfHeadingContext = createContext<ProductShelfHeadingContextValue | null>(null);\n\nexport function useProductShelf(): ProductShelfContextValue {\n  const ctx = useContext(ProductShelfContext);\n  if (!ctx) {\n    throw new Error('useProductShelf must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nfunction useProductShelfHeading(): ProductShelfHeadingContextValue {\n  const ctx = useContext(ProductShelfHeadingContext);\n  if (!ctx) {\n    throw new Error('ProductShelfHeading must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nexport function useProductShelfItem(): ProductShelfItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('Product card components must be used inside ProductShelfItems.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// `sort` → `$orderBy` (ProductSortingInput). The same table is the `values`\n// block of the definition, so the compiler and the SDK helper apply it; the\n// contract test pins the two to each other.\n// ---------------------------------------------------------------------------\n\nexport const PRODUCT_SHELF_SORT_MAP: Record<ProductShelfSort, { field: ProductSortField; direction: SortDirection }> = {\n  relevance: { field: 'RELEVANCE', direction: 'DESC' },\n  price_asc: { field: 'PRICE', direction: 'ASC' },\n  price_desc: { field: 'PRICE', direction: 'DESC' },\n  name_asc: { field: 'TITLE', direction: 'ASC' },\n  name_desc: { field: 'TITLE', direction: 'DESC' },\n  release: { field: 'RELEASE_DATE', direction: 'DESC' },\n  orders: { field: 'BEST_SELLING', direction: 'DESC' },\n  // No direct ProductSortField for legacy \"discount\"; fall back to relevance.\n  discount: { field: 'RELEVANCE', direction: 'DESC' },\n};\n\n// ---------------------------------------------------------------------------\n// Transform — raw fragment slice → per-item value objects\n// ---------------------------------------------------------------------------\n\nexport function transformProducts(data: ProductShelfData): ProductShelfItem[] {\n  return data.edges.map(({ node }): ProductShelfItem => {\n    const image = node.images.edges[0]?.node;\n    const variant = node.variants.edges[0]?.node;\n    const seller = variant?.sellers.find((s) => s.isDefault) ?? variant?.sellers[0];\n    const offer = seller?.offer ?? null;\n\n    const price = offer?.price.amount ?? variant?.price.amount ?? 0;\n    const listPrice = offer?.listPrice.amount ?? variant?.compareAtPrice?.amount;\n    const spotPrice = offer?.spotPrice.amount;\n    const currency = offer?.price.currencyCode ?? variant?.price.currencyCode;\n\n    return {\n      id: node.id,\n      name: node.title,\n      slug: node.slug,\n      routeSlug: node.routeSlug,\n      image: { src: image?.url ?? '', alt: image?.altText ?? node.title },\n      price,\n      ...(listPrice !== undefined ? { listPrice } : {}),\n      ...(spotPrice !== undefined ? { spotPrice } : {}),\n      ...(offer ? { tax: offer.tax.amount, taxPercentage: offer.taxPercentage } : {}),\n      ...(variant ? { availableForSale: variant.availableForSale } : {}),\n      ...(variant?.quantityAvailable != null ? { availableQuantity: variant.quantityAvailable } : {}),\n      ...(currency ? { currency } : {}),\n    };\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfRootDefinition = defineComponent<ProductShelfRootProps>({\n  name: 'ProductShelfRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfRoot,\n  fragment,\n  fetchStrategy: 'lazy',\n  skeleton: ProductShelfSkeleton,\n  content: ProductShelfContent,\n  // The `values` table is authored as a literal: the Catalog Build serializes the block as JSON and\n  // rejects identifiers. `PRODUCT_SHELF_SORT_MAP` is pinned equal to it by the contract test.\n  variables: {\n    orderBy: {\n      from: 'sort',\n      values: {\n        relevance: { field: 'RELEVANCE', direction: 'DESC' },\n        price_asc: { field: 'PRICE', direction: 'ASC' },\n        price_desc: { field: 'PRICE', direction: 'DESC' },\n        name_asc: { field: 'TITLE', direction: 'ASC' },\n        name_desc: { field: 'TITLE', direction: 'DESC' },\n        release: { field: 'RELEASE_DATE', direction: 'DESC' },\n        orders: { field: 'BEST_SELLING', direction: 'DESC' },\n        discount: { field: 'RELEVANCE', direction: 'DESC' },\n      },\n    },\n  },\n  editor: { label: 'Product Shelf Root', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n    // The content fields again, as props: the developer's defaults, and the only source in a\n    // store with no CMS binding (example stores, Storybook, tests).\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n  },\n  guideline:\n    'Data-owning root of a facet-sourced product shelf. Owns a products(first:, orderBy:, filter:) fragment whose variables bind to this element: the merchant fills them in the CMS (content model product-shelf) and the props of the same name are the defaults. Receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md.',\n});\n\nexport const ProductShelfOnMountRootDefinition = defineComponent<ProductShelfOnMountRootProps>({\n  name: 'ProductShelfOnMountRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfOnMountRoot,\n  fragment,\n  fetchStrategy: 'lazy-on-mount',\n  // Repeats the ProductShelfRoot table as a literal (the Catalog Build rejects identifiers inside\n  // `variables`); the contract test pins it equal to ProductShelfRootDefinition's.\n  variables: {\n    orderBy: {\n      from: 'sort',\n      values: {\n        relevance: { field: 'RELEVANCE', direction: 'DESC' },\n        price_asc: { field: 'PRICE', direction: 'ASC' },\n        price_desc: { field: 'PRICE', direction: 'DESC' },\n        name_asc: { field: 'TITLE', direction: 'ASC' },\n        name_desc: { field: 'TITLE', direction: 'DESC' },\n        release: { field: 'RELEASE_DATE', direction: 'DESC' },\n        orders: { field: 'BEST_SELLING', direction: 'DESC' },\n        discount: { field: 'RELEVANCE', direction: 'DESC' },\n      },\n    },\n  },\n  editor: { label: 'Product Shelf Root (on mount)', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    taxesLabel: { type: 'string', default: 'Tax included', label: 'Taxes Label' },\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n  },\n  guideline:\n    'ProductShelfRoot variant that fetches its products on the client when it mounts, in its own request: the products never enter the page query and are absent from the server HTML. Renders nothing while loading, when the request fails and when the result is empty (no skeleton). Meant for a conditional branch such as CartEmpty, never above the fold. Configured by props only (first, sort, availableOnly, categoryId, brandId, collectionId, searchTerm, itemsPerPage). Compose as: ProductShelfOnMountRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext)). See product-shelf.md.',\n});\n\nexport const ProductShelfItemsDefinition = defineComponent<ProductShelfItemsProps>({\n  name: 'ProductShelfItems',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfItems,\n  editor: { label: 'Product Shelf Items', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    'Repeats the shelf products into the carousel track, publishing one product per slide through the per-item context the ProductCard* parts read. Place directly inside CarouselRoot (it renders the CarouselTrack). Put the card template (ProductCardImage, ProductCardName, ProductCardPrice, …) as its children.',\n});\n\nexport const ProductShelfHeadingDefinition = defineComponent<ProductShelfHeadingProps>({\n  name: 'ProductShelfHeading',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfHeading,\n  editor: { label: 'Product Shelf Heading', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    \"Renders its children as the shelf title (an <h2>) and provides the section's accessible label. Author the title text as its children (props.children). Place it inside ProductShelfRoot where the title should sit — usually above CarouselRoot. Renders nothing when it has no children.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** The content value when the merchant filled the field, else the prop (the shared emptiness rule). */\nfunction contentOrProp<T>(content: T | undefined, prop: T): T {\n  if (content === undefined || isEmptyContentValue(content)) return prop;\n  return content;\n}\n\nexport function ProductShelfRoot({\n  first = 5,\n  itemsPerPage = 5,\n  sort = 'relevance',\n  searchTerm,\n  categoryId,\n  brandId,\n  collectionId,\n  availableOnly = false,\n  usePriceWithTaxes = false,\n  taxesLabel = 'Tax included',\n  products,\n  $content,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductShelfRootProps) {\n  const $data = useDataOverride<ProductShelfData | null | undefined>($dataProp);\n  // The query already applied these values (the compiler binds the same slice and props to the\n  // fragment variables); the context only republishes what this element resolved to.\n  const shelfConfig = useMemo<ProductShelfConfig>(\n    () => ({\n      first: contentOrProp($content?.first, first),\n      sort: contentOrProp($content?.sort, sort),\n      searchTerm: contentOrProp($content?.searchTerm, searchTerm),\n      categoryId: contentOrProp($content?.categoryId, categoryId),\n      brandId: contentOrProp($content?.brandId, brandId),\n      collectionId: contentOrProp($content?.collectionId, collectionId),\n      availableOnly: contentOrProp($content?.availableOnly, availableOnly),\n    }),\n    [$content, first, sort, searchTerm, categoryId, brandId, collectionId, availableOnly],\n  );\n  const headingId = useId();\n  // Ref-counted so a composed ProductShelfHeading flips `hasHeading` wherever it is placed; the\n  // section then labels itself only while a heading is mounted, never via a dangling idref.\n  const [headingCount, setHeadingCount] = useState(0);\n  const registerHeading = useCallback(() => {\n    setHeadingCount((count) => count + 1);\n    return () => setHeadingCount((count) => count - 1);\n  }, []);\n  const headingContext = useMemo(() => ({ headingId, registerHeading }), [headingId, registerHeading]);\n  const config = useMemo(() => ({ usePriceWithTaxes, taxesLabel }), [usePriceWithTaxes, taxesLabel]);\n  const items = useMemo<ProductShelfItem[]>(() => {\n    if (products !== undefined) return products;\n    return $data ? transformProducts($data) : [];\n  }, [products, $data]);\n  const shelf = useMemo<ProductShelfContextValue>(\n    () => ({ itemsPerPage, config: shelfConfig, count: items.length }),\n    [itemsPerPage, shelfConfig, items.length],\n  );\n  const hasHeading = headingCount > 0;\n\n  if (products === undefined && $data === undefined) {\n    // Lazy source not resolved yet — show the skeleton (the runtime also renders it).\n    return <ProductShelfSkeleton className={className} />;\n  }\n\n  // Empty result renders nothing (legacy parity) rather than an empty carousel.\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductShelfProductsContext value={items}>\n        <ProductShelfContext value={shelf}>\n          <ProductShelfHeadingContext value={headingContext}>\n            <section\n              {...props}\n              className={className}\n              data-fs-product-shelf=\"\"\n              aria-labelledby={hasHeading ? headingId : undefined}\n            >\n              {children}\n            </section>\n          </ProductShelfHeadingContext>\n        </ProductShelfContext>\n      </ProductShelfProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\n/**\n * `ProductShelfRoot` for a `'lazy-on-mount'` page element: the generator wraps it in a\n * `HotDataProvider` whose `null` fallback reaches the inner root through the data override.\n */\nexport function ProductShelfOnMountRoot(props: Readonly<ProductShelfOnMountRootProps>) {\n  return <ProductShelfRoot {...props} />;\n}\n\nexport function ProductShelfHeading({ className, children, ...props }: ProductShelfHeadingProps) {\n  const { headingId, registerHeading } = useProductShelfHeading();\n  const hasContent = children != null && children !== '';\n\n  // Announce presence to the root so its section wires `aria-labelledby` to this heading; the\n  // registration (and its unregister) is scoped to when the heading actually renders content.\n  useEffect(() => {\n    if (!hasContent) {\n      return;\n    }\n    return registerHeading();\n  }, [hasContent, registerHeading]);\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"h2\" id={headingId} className={className} data-fs-product-shelf-heading=\"\">\n      {children}\n    </Text>\n  );\n}\n\nexport function ProductShelfItems({ children, ...props }: ProductShelfItemsProps) {\n  const items = useContext(ProductShelfProductsContext);\n\n  return (\n    <CarouselTrack {...props} data-fs-product-shelf-items=\"\">\n      {items.map((item) => (\n        <ProductListItemContext key={item.id} value={item}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </CarouselTrack>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function ProductShelfSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-product-shelf-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n    </div>\n  );\n}\n\nProductShelfRoot.Skeleton = ProductShelfSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductShelf = {\n  Root: ProductShelfRoot,\n  Heading: ProductShelfHeading,\n  Items: ProductShelfItems,\n  Skeleton: ProductShelfSkeleton,\n};\n"],"mappings":";;;;;;;;;;;;AA+BA,MAAa,sBAAsB,kBAAkB;CACnD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAW,OAAO;IAAsB,SAAS;IAAG,SAAS;GAAI;GAChF,MAAM;IACJ,MAAM;IACN,MAAM;KAAC;KAAa;KAAa;KAAc;KAAY;KAAa;KAAW;KAAU;IAAU;IACvG,OAAO;GACT;GACA,YAAY;IAAE,MAAM;IAAU,OAAO;GAAc;GACnD,SAAS;IAAE,MAAM;IAAU,OAAO;GAAW;GAC7C,cAAc;IAAE,MAAM;IAAU,OAAO;GAAgB;GACvD,YAAY;IAAE,MAAM;IAAU,OAAO;GAAc;GACnD,eAAe;IAAE,MAAM;IAAW,OAAO;GAAiB;EAC5D;CACF;AACF,CAAC;AAWD,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmL/B,MAAM,8BAA8B,cAAkC,CAAC,CAAC;AAExE,MAAM,sBAAsB,cAA+C,IAAI;AAS/E,MAAM,6BAA6B,cAAsD,IAAI;AAE7F,SAAgB,kBAA4C;CAC1D,MAAM,MAAM,WAAW,mBAAmB;CAC1C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,uDAAuD;CAEzE,OAAO;AACT;AAEA,SAAS,yBAA0D;CACjE,MAAM,MAAM,WAAW,0BAA0B;CACjD,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,2DAA2D;CAE7E,OAAO;AACT;AAEA,SAAgB,sBAAwC;CACtD,MAAM,OAAO,WAAW,sBAAsB;CAC9C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,gEAAgE;CAElF,OAAO;AACT;AAQA,MAAa,yBAA0G;CACrH,WAAW;EAAE,OAAO;EAAa,WAAW;CAAO;CACnD,WAAW;EAAE,OAAO;EAAS,WAAW;CAAM;CAC9C,YAAY;EAAE,OAAO;EAAS,WAAW;CAAO;CAChD,UAAU;EAAE,OAAO;EAAS,WAAW;CAAM;CAC7C,WAAW;EAAE,OAAO;EAAS,WAAW;CAAO;CAC/C,SAAS;EAAE,OAAO;EAAgB,WAAW;CAAO;CACpD,QAAQ;EAAE,OAAO;EAAgB,WAAW;CAAO;CAEnD,UAAU;EAAE,OAAO;EAAa,WAAW;CAAO;AACpD;AAMA,SAAgB,kBAAkB,MAA4C;CAC5E,OAAO,KAAK,MAAM,KAAK,EAAE,WAA6B;EACpD,MAAM,QAAQ,KAAK,OAAO,MAAM,EAAE,EAAE;EACpC,MAAM,UAAU,KAAK,SAAS,MAAM,EAAE,EAAE;EAExC,MAAM,SADS,SAAS,QAAQ,MAAM,MAAM,EAAE,SAAS,KAAK,SAAS,QAAQ,GAAA,EACvD,SAAS;EAE/B,MAAM,QAAQ,OAAO,MAAM,UAAU,SAAS,MAAM,UAAU;EAC9D,MAAM,YAAY,OAAO,UAAU,UAAU,SAAS,gBAAgB;EACtE,MAAM,YAAY,OAAO,UAAU;EACnC,MAAM,WAAW,OAAO,MAAM,gBAAgB,SAAS,MAAM;EAE7D,OAAO;GACL,IAAI,KAAK;GACT,MAAM,KAAK;GACX,MAAM,KAAK;GACX,WAAW,KAAK;GAChB,OAAO;IAAE,KAAK,OAAO,OAAO;IAAI,KAAK,OAAO,WAAW,KAAK;GAAM;GAClE;GACA,GAAI,cAAc,KAAA,IAAY,EAAE,UAAU,IAAI,CAAC;GAC/C,GAAI,cAAc,KAAA,IAAY,EAAE,UAAU,IAAI,CAAC;GAC/C,GAAI,QAAQ;IAAE,KAAK,MAAM,IAAI;IAAQ,eAAe,MAAM;GAAc,IAAI,CAAC;GAC7E,GAAI,UAAU,EAAE,kBAAkB,QAAQ,iBAAiB,IAAI,CAAC;GAChE,GAAI,SAAS,qBAAqB,OAAO,EAAE,mBAAmB,QAAQ,kBAAkB,IAAI,CAAC;GAC7F,GAAI,WAAW,EAAE,SAAS,IAAI,CAAC;EACjC;CACF,CAAC;AACH;AAMA,MAAa,6BAA6B,gBAAuC;CAC/E,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CACf,UAAU;CACV,SAAS;CAGT,WAAW,EACT,SAAS;EACP,MAAM;EACN,QAAQ;GACN,WAAW;IAAE,OAAO;IAAa,WAAW;GAAO;GACnD,WAAW;IAAE,OAAO;IAAS,WAAW;GAAM;GAC9C,YAAY;IAAE,OAAO;IAAS,WAAW;GAAO;GAChD,UAAU;IAAE,OAAO;IAAS,WAAW;GAAM;GAC7C,WAAW;IAAE,OAAO;IAAS,WAAW;GAAO;GAC/C,SAAS;IAAE,OAAO;IAAgB,WAAW;GAAO;GACpD,QAAQ;IAAE,OAAO;IAAgB,WAAW;GAAO;GACnD,UAAU;IAAE,OAAO;IAAa,WAAW;GAAO;EACpD;CACF,EACF;CACA,QAAQ;EAAE,OAAO;EAAsB,UAAU;CAAW;CAC5D,iBAAiB;CACjB,QAAQ;EACN,cAAc;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAiB;EACpE,mBAAmB;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAuB;EACpF,YAAY;GAAE,MAAM;GAAU,SAAS;GAAgB,OAAO;EAAc;EAG5E,OAAO;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAqB;EACjE,MAAM;GACJ,MAAM;IAAC;IAAa;IAAa;IAAc;IAAY;IAAa;IAAW;IAAU;GAAU;GACvG,SAAS;GACT,OAAO;EACT;EACA,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,SAAS;GAAE,MAAM;GAAU,OAAO;EAAW;EAC7C,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,eAAe;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAiB;CAC5E;CACA,WACE;AACJ,CAAC;AAED,MAAa,oCAAoC,gBAA8C;CAC7F,MAAM;CACN,YAAY;CACZ,WAAW;CACX;CACA,eAAe;CAGf,WAAW,EACT,SAAS;EACP,MAAM;EACN,QAAQ;GACN,WAAW;IAAE,OAAO;IAAa,WAAW;GAAO;GACnD,WAAW;IAAE,OAAO;IAAS,WAAW;GAAM;GAC9C,YAAY;IAAE,OAAO;IAAS,WAAW;GAAO;GAChD,UAAU;IAAE,OAAO;IAAS,WAAW;GAAM;GAC7C,WAAW;IAAE,OAAO;IAAS,WAAW;GAAO;GAC/C,SAAS;IAAE,OAAO;IAAgB,WAAW;GAAO;GACpD,QAAQ;IAAE,OAAO;IAAgB,WAAW;GAAO;GACnD,UAAU;IAAE,OAAO;IAAa,WAAW;GAAO;EACpD;CACF,EACF;CACA,QAAQ;EAAE,OAAO;EAAiC,UAAU;CAAW;CACvE,iBAAiB;CACjB,QAAQ;EACN,cAAc;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAiB;EACpE,mBAAmB;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAuB;EACpF,YAAY;GAAE,MAAM;GAAU,SAAS;GAAgB,OAAO;EAAc;EAC5E,OAAO;GAAE,MAAM;GAAU,SAAS;GAAG,OAAO;EAAqB;EACjE,MAAM;GACJ,MAAM;IAAC;IAAa;IAAa;IAAc;IAAY;IAAa;IAAW;IAAU;GAAU;GACvG,SAAS;GACT,OAAO;EACT;EACA,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,YAAY;GAAE,MAAM;GAAU,OAAO;EAAc;EACnD,SAAS;GAAE,MAAM;GAAU,OAAO;EAAW;EAC7C,cAAc;GAAE,MAAM;GAAU,OAAO;EAAgB;EACvD,eAAe;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAiB;CAC5E;CACA,WACE;AACJ,CAAC;AAED,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAW;CAC7D,iBAAiB;CACjB,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,MAAa,gCAAgC,gBAA0C;CACrF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAyB,UAAU;CAAW;CAC/D,iBAAiB;CACjB,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;;AAOD,SAAS,cAAiB,SAAwB,MAAY;CAC5D,IAAI,YAAY,KAAA,KAAa,oBAAoB,OAAO,GAAG,OAAO;CAClE,OAAO;AACT;AAEA,SAAgB,iBAAiB,EAC/B,QAAQ,GACR,eAAe,GACf,OAAO,aACP,YACA,YACA,SACA,cACA,gBAAgB,OAChB,oBAAoB,OACpB,aAAa,gBACb,UACA,UACA,OAAO,WACP,WACA,UACA,GAAG,SACqB;CACxB,MAAM,QAAQ,gBAAqD,SAAS;CAG5E,MAAM,cAAc,eACX;EACL,OAAO,cAAc,UAAU,OAAO,KAAK;EAC3C,MAAM,cAAc,UAAU,MAAM,IAAI;EACxC,YAAY,cAAc,UAAU,YAAY,UAAU;EAC1D,YAAY,cAAc,UAAU,YAAY,UAAU;EAC1D,SAAS,cAAc,UAAU,SAAS,OAAO;EACjD,cAAc,cAAc,UAAU,cAAc,YAAY;EAChE,eAAe,cAAc,UAAU,eAAe,aAAa;CACrE,IACA;EAAC;EAAU;EAAO;EAAM;EAAY;EAAY;EAAS;EAAc;CAAa,CACtF;CACA,MAAM,YAAY,MAAM;CAGxB,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAClD,MAAM,kBAAkB,kBAAkB;EACxC,iBAAiB,UAAU,QAAQ,CAAC;EACpC,aAAa,iBAAiB,UAAU,QAAQ,CAAC;CACnD,GAAG,CAAC,CAAC;CACL,MAAM,iBAAiB,eAAe;EAAE;EAAW;CAAgB,IAAI,CAAC,WAAW,eAAe,CAAC;CACnG,MAAM,SAAS,eAAe;EAAE;EAAmB;CAAW,IAAI,CAAC,mBAAmB,UAAU,CAAC;CACjG,MAAM,QAAQ,cAAkC;EAC9C,IAAI,aAAa,KAAA,GAAW,OAAO;EACnC,OAAO,QAAQ,kBAAkB,KAAK,IAAI,CAAC;CAC7C,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,QAAQ,eACL;EAAE;EAAc,QAAQ;EAAa,OAAO,MAAM;CAAO,IAChE;EAAC;EAAc;EAAa,MAAM;CAAM,CAC1C;CACA,MAAM,aAAa,eAAe;CAElC,IAAI,aAAa,KAAA,KAAa,UAAU,KAAA,GAEtC,OAAO,oBAAC,sBAAD,EAAiC,UAAY,CAAA;CAItD,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,OACE,oBAAC,0BAAD;EAA0B,OAAO;EAC/B,UAAA,oBAAC,6BAAD;GAA6B,OAAO;GAClC,UAAA,oBAAC,qBAAD;IAAqB,OAAO;IAC1B,UAAA,oBAAC,4BAAD;KAA4B,OAAO;KACjC,UAAA,oBAAC,WAAD;MACE,GAAI;MACO;MACX,yBAAsB;MACtB,mBAAiB,aAAa,YAAY,KAAA;MAEzC;KACM,CAAA;IACiB,CAAA;GACT,CAAA;EACM,CAAA;CACL,CAAA;AAE9B;;;;;AAMA,SAAgB,wBAAwB,OAA+C;CACrF,OAAO,oBAAC,kBAAD,EAAkB,GAAI,MAAQ,CAAA;AACvC;AAEA,SAAgB,oBAAoB,EAAE,WAAW,UAAU,GAAG,SAAmC;CAC/F,MAAM,EAAE,WAAW,oBAAoB,uBAAuB;CAC9D,MAAM,aAAa,YAAY,QAAQ,aAAa;CAIpD,gBAAgB;EACd,IAAI,CAAC,YACH;EAEF,OAAO,gBAAgB;CACzB,GAAG,CAAC,YAAY,eAAe,CAAC;CAEhC,IAAI,CAAC,YACH,OAAO;CAGT,OACE,oBAAC,MAAD;EAAM,GAAI;EAAO,IAAG;EAAK,IAAI;EAAsB;EAAW,iCAA8B;EACzF;CACG,CAAA;AAEV;AAEA,SAAgB,kBAAkB,EAAE,UAAU,GAAG,SAAiC;CAChF,MAAM,QAAQ,WAAW,2BAA2B;CAEpD,OACE,oBAAC,eAAD;EAAe,GAAI;EAAO,+BAA4B;EACnD,UAAA,MAAM,KAAK,SACV,oBAAC,wBAAD;GAAsC,OAAO;GAC1C;EACqB,GAFK,KAAK,EAEV,CACzB;CACY,CAAA;AAEnB;AAMA,SAAgB,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CAC1F,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,kCAA+B;EAAG,eAAY;EAApF,UAAA;GACE,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;GAC9C,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;GAC9C,oBAAC,QAAD,EAAM,uCAAoC,GAAI,CAAA;EAC3C;;AAET;AAEA,iBAAiB,WAAW;AAM5B,MAAa,eAAe;CAC1B,MAAM;CACN,SAAS;CACT,OAAO;CACP,UAAU;AACZ"}
+{"version":3,"file":"product-shelf.js","names":[],"sources":["../../../src/matter/product-shelf/product-shelf.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport {\n  type ComponentPropsWithRef,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { CarouselTrack } from '../../particles/carousel/carousel.js';\nimport { Text } from '../../particles/text/text.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport { isEmptyContentValue } from '../../sdk/data/empty-content-value.js';\nimport {\n  ProductListConfigContext,\n  type ProductListItem,\n  ProductListItemContext,\n} from '../product-list/product-list.js';\n\n// ---------------------------------------------------------------------------\n// Content model — the merchant-facing fields that drive the query. Each one is\n// also a schema prop of the same name on the root: the CMS value wins per\n// field, and the prop is the developer default (the only source in a store\n// with no CMS binding). No field is required, so an empty value relaxes the\n// filter or takes the prop instead of omitting the shelf.\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfContent = defineContentType({\n  id: 'product-shelf',\n  title: 'Product Shelf',\n  description: 'Which products a shelf shows: how many, in which order, and from which facet.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      first: { type: 'integer', title: 'Number of products', minimum: 1, maximum: 100 },\n      sort: {\n        type: 'string',\n        enum: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'],\n        title: 'Sort',\n      },\n      categoryId: { type: 'string', title: 'Category ID' },\n      brandId: { type: 'string', title: 'Brand ID' },\n      collectionId: { type: 'string', title: 'Collection ID' },\n      searchTerm: { type: 'string', title: 'Search term' },\n      availableOnly: { type: 'boolean', title: 'Available only' },\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment — product connection from the catalog module. Every\n// argument is a variable the compiler binds from the element's configuration\n// (its content slice at request time, else its prop at compile time), one\n// fragment instance per element. A variable left unbound inside `filter`\n// omits that key, so an unset facet relaxes the filter rather than sending\n// null; `$orderBy` reads `sort` through the `values` table in the definition.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment ProductShelfData on Query {\n    products(\n      first: $first\n      orderBy: $orderBy\n      filter: {\n        categoryIds: $categoryId\n        brandIds: $brandId\n        collectionId: $collectionId\n        searchTerm: $searchTerm\n        availableOnly: $availableOnly\n      }\n    ) {\n      edges {\n        node {\n          id\n          title\n          slug\n          routeSlug\n          images(first: 1) {\n            edges {\n              node {\n                url\n                altText\n              }\n            }\n          }\n          variants(first: 1) {\n            edges {\n              node {\n                availableForSale\n                quantityAvailable\n                price {\n                  amount\n                  currencyCode\n                }\n                compareAtPrice {\n                  amount\n                  currencyCode\n                }\n                sellers {\n                  isDefault\n                  offer {\n                    price {\n                      amount\n                      currencyCode\n                    }\n                    listPrice {\n                      amount\n                      currencyCode\n                    }\n                    spotPrice {\n                      amount\n                      currencyCode\n                    }\n                    tax {\n                      amount\n                      currencyCode\n                    }\n                    taxPercentage\n                    availableQuantity\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n      totalCount\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawMoney = { amount: number; currencyCode: string };\n\ntype RawOffer = {\n  price: RawMoney;\n  listPrice: RawMoney;\n  spotPrice: RawMoney;\n  tax: RawMoney;\n  taxPercentage: number | null;\n  availableQuantity: number;\n};\n\ntype RawVariantNode = {\n  availableForSale: boolean;\n  quantityAvailable: number | null;\n  price: RawMoney;\n  compareAtPrice: RawMoney | null;\n  sellers: Array<{ isDefault: boolean; offer: RawOffer | null }>;\n};\n\ntype RawProductNode = {\n  id: string;\n  title: string;\n  slug: string;\n  routeSlug: string;\n  images: { edges: Array<{ node: { url: string; altText: string | null } }> };\n  variants: { edges: Array<{ node: RawVariantNode }> };\n};\n\n// The `$data` the shelf receives is the unwrapped top-level fragment field:\n// HotDataProvider forwards `data['products']` (the connection value), not the\n// `{ products: ... }` wrapper — same contract as PricingRoot's productBySlug.\nexport type ProductShelfData = {\n  edges: Array<{ node: RawProductNode }>;\n  totalCount: number;\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n// The per-item value object the card parts (T3–T7) read. It is the widened\n// ProductListItem, so the existing ProductList.Card* leaves render unchanged.\nexport type ProductShelfItem = ProductListItem;\n\nexport type ProductShelfSort =\n  | 'relevance'\n  | 'price_asc'\n  | 'price_desc'\n  | 'name_asc'\n  | 'name_desc'\n  | 'release'\n  | 'orders'\n  | 'discount';\n\nexport type ProductSortField = 'TITLE' | 'PRICE' | 'RELEASE_DATE' | 'RELEVANCE' | 'BEST_SELLING';\n\nexport type SortDirection = 'ASC' | 'DESC';\n\n/**\n * The query configuration the shelf resolved for this element: the content slice when the\n * merchant filled a field, else the prop. The query has already applied these values; the\n * context republishes them for parts that describe the shelf (a \"sorted by\" label, a facet link).\n */\nexport type ProductShelfConfig = {\n  first: number;\n  sort: ProductShelfSort;\n  searchTerm?: string;\n  categoryId?: string;\n  brandId?: string;\n  collectionId?: string;\n  availableOnly: boolean;\n};\n\nexport type ProductShelfContextValue = {\n  itemsPerPage: number;\n  config: ProductShelfConfig;\n  count: number;\n};\n\nexport type ProductShelfRootProps = ComponentPropsWithRef<'section'> &\n  Partial<ProductShelfConfig> & {\n    itemsPerPage?: number;\n    /** When true, card prices render tax-inclusive (from each item's tax data). Default false. */\n    usePriceWithTaxes?: boolean;\n    products?: ProductShelfItem[];\n    /** Injected by the compiler, sliced from the page's or layout's composite content entry. */\n    $content?: ContentValue<typeof ProductShelfContent>;\n    $data?: ProductShelfData | null;\n  };\n\nexport type ProductShelfOnMountRootProps = Omit<ProductShelfRootProps, '$content'>;\n\nexport type ProductShelfItemsProps = ComponentPropsWithRef<'div'>;\n\nexport type ProductShelfHeadingProps = ComponentPropsWithRef<'h2'>;\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ProductShelfProductsContext = createContext<ProductShelfItem[]>([]);\n\nconst ProductShelfContext = createContext<ProductShelfContextValue | null>(null);\n\n// Wires the section ⇄ heading `aria-labelledby` link without the root having to\n// know its descendants: `headingId` is the shared id, and a composed\n// ProductShelfHeading registers its presence so the section points at it only\n// when it exists (never a dangling idref). `registerHeading` is ref-counted and\n// returns its unregister, so the heading can be placed anywhere.\ntype ProductShelfHeadingContextValue = { headingId: string; registerHeading: () => () => void };\n\nconst ProductShelfHeadingContext = createContext<ProductShelfHeadingContextValue | null>(null);\n\nexport function useProductShelf(): ProductShelfContextValue {\n  const ctx = useContext(ProductShelfContext);\n  if (!ctx) {\n    throw new Error('useProductShelf must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nfunction useProductShelfHeading(): ProductShelfHeadingContextValue {\n  const ctx = useContext(ProductShelfHeadingContext);\n  if (!ctx) {\n    throw new Error('ProductShelfHeading must be used inside ProductShelfRoot.');\n  }\n  return ctx;\n}\n\nexport function useProductShelfItem(): ProductShelfItem {\n  const item = useContext(ProductListItemContext);\n  if (!item) {\n    throw new Error('Product card components must be used inside ProductShelfItems.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// `sort` → `$orderBy` (ProductSortingInput). The same table is the `values`\n// block of the definition, so the compiler and the SDK helper apply it; the\n// contract test pins the two to each other.\n// ---------------------------------------------------------------------------\n\nexport const PRODUCT_SHELF_SORT_MAP: Record<ProductShelfSort, { field: ProductSortField; direction: SortDirection }> = {\n  relevance: { field: 'RELEVANCE', direction: 'DESC' },\n  price_asc: { field: 'PRICE', direction: 'ASC' },\n  price_desc: { field: 'PRICE', direction: 'DESC' },\n  name_asc: { field: 'TITLE', direction: 'ASC' },\n  name_desc: { field: 'TITLE', direction: 'DESC' },\n  release: { field: 'RELEASE_DATE', direction: 'DESC' },\n  orders: { field: 'BEST_SELLING', direction: 'DESC' },\n  // No direct ProductSortField for legacy \"discount\"; fall back to relevance.\n  discount: { field: 'RELEVANCE', direction: 'DESC' },\n};\n\n// ---------------------------------------------------------------------------\n// Transform — raw fragment slice → per-item value objects\n// ---------------------------------------------------------------------------\n\nexport function transformProducts(data: ProductShelfData): ProductShelfItem[] {\n  return data.edges.map(({ node }): ProductShelfItem => {\n    const image = node.images.edges[0]?.node;\n    const variant = node.variants.edges[0]?.node;\n    const seller = variant?.sellers.find((s) => s.isDefault) ?? variant?.sellers[0];\n    const offer = seller?.offer ?? null;\n\n    const price = offer?.price.amount ?? variant?.price.amount ?? 0;\n    const listPrice = offer?.listPrice.amount ?? variant?.compareAtPrice?.amount;\n    const spotPrice = offer?.spotPrice.amount;\n    const currency = offer?.price.currencyCode ?? variant?.price.currencyCode;\n\n    return {\n      id: node.id,\n      name: node.title,\n      slug: node.slug,\n      routeSlug: node.routeSlug,\n      image: { src: image?.url ?? '', alt: image?.altText ?? node.title },\n      price,\n      ...(listPrice !== undefined ? { listPrice } : {}),\n      ...(spotPrice !== undefined ? { spotPrice } : {}),\n      ...(offer ? { tax: offer.tax.amount, taxPercentage: offer.taxPercentage } : {}),\n      ...(variant ? { availableForSale: variant.availableForSale } : {}),\n      ...(variant?.quantityAvailable != null ? { availableQuantity: variant.quantityAvailable } : {}),\n      ...(currency ? { currency } : {}),\n    };\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const ProductShelfRootDefinition = defineComponent<ProductShelfRootProps>({\n  name: 'ProductShelfRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfRoot,\n  fragment,\n  fetchStrategy: 'lazy',\n  skeleton: ProductShelfSkeleton,\n  content: ProductShelfContent,\n  // The `values` table is authored as a literal: the Catalog Build serializes the block as JSON and\n  // rejects identifiers. `PRODUCT_SHELF_SORT_MAP` is pinned equal to it by the contract test.\n  variables: {\n    orderBy: {\n      from: 'sort',\n      values: {\n        relevance: { field: 'RELEVANCE', direction: 'DESC' },\n        price_asc: { field: 'PRICE', direction: 'ASC' },\n        price_desc: { field: 'PRICE', direction: 'DESC' },\n        name_asc: { field: 'TITLE', direction: 'ASC' },\n        name_desc: { field: 'TITLE', direction: 'DESC' },\n        release: { field: 'RELEASE_DATE', direction: 'DESC' },\n        orders: { field: 'BEST_SELLING', direction: 'DESC' },\n        discount: { field: 'RELEVANCE', direction: 'DESC' },\n      },\n    },\n  },\n  editor: { label: 'Product Shelf Root', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    // The content fields again, as props: the developer's defaults, and the only source in a\n    // store with no CMS binding (example stores, Storybook, tests).\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n  },\n  guideline:\n    'Data-owning root of a facet-sourced product shelf. Owns a products(first:, orderBy:, filter:) fragment whose variables bind to this element: the merchant fills them in the CMS (content model product-shelf) and the props of the same name are the defaults. Receives $data lazily. Compose as: ProductShelfRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext + CarouselBullets)). Compose ProductShelfHeading with the title as its children to render a heading; set the source with categoryId / brandId / collectionId / searchTerm and tune first, sort, availableOnly. Renders a skeleton while loading and nothing when the result is empty. Bind itemsPerPage to the CarouselRoot so paging matches the shelf config. See product-shelf.md.',\n});\n\nexport const ProductShelfOnMountRootDefinition = defineComponent<ProductShelfOnMountRootProps>({\n  name: 'ProductShelfOnMountRoot',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfOnMountRoot,\n  fragment,\n  fetchStrategy: 'lazy-on-mount',\n  // Repeats the ProductShelfRoot table as a literal (the Catalog Build rejects identifiers inside\n  // `variables`); the contract test pins it equal to ProductShelfRootDefinition's.\n  variables: {\n    orderBy: {\n      from: 'sort',\n      values: {\n        relevance: { field: 'RELEVANCE', direction: 'DESC' },\n        price_asc: { field: 'PRICE', direction: 'ASC' },\n        price_desc: { field: 'PRICE', direction: 'DESC' },\n        name_asc: { field: 'TITLE', direction: 'ASC' },\n        name_desc: { field: 'TITLE', direction: 'DESC' },\n        release: { field: 'RELEASE_DATE', direction: 'DESC' },\n        orders: { field: 'BEST_SELLING', direction: 'DESC' },\n        discount: { field: 'RELEVANCE', direction: 'DESC' },\n      },\n    },\n  },\n  editor: { label: 'Product Shelf Root (on mount)', category: 'commerce' },\n  providesContext: 'product-shelf',\n  schema: {\n    itemsPerPage: { type: 'number', default: 5, label: 'Items Per Page' },\n    usePriceWithTaxes: { type: 'boolean', default: false, label: 'Use Price With Taxes' },\n    first: { type: 'number', default: 5, label: 'Number of Products' },\n    sort: {\n      type: ['relevance', 'price_asc', 'price_desc', 'name_asc', 'name_desc', 'release', 'orders', 'discount'] as const,\n      default: 'relevance',\n      label: 'Sort',\n    },\n    searchTerm: { type: 'string', label: 'Search Term' },\n    categoryId: { type: 'string', label: 'Category ID' },\n    brandId: { type: 'string', label: 'Brand ID' },\n    collectionId: { type: 'string', label: 'Collection ID' },\n    availableOnly: { type: 'boolean', default: false, label: 'Available Only' },\n  },\n  guideline:\n    'ProductShelfRoot variant that fetches its products on the client when it mounts, in its own request: the products never enter the page query and are absent from the server HTML. Renders nothing while loading, when the request fails and when the result is empty (no skeleton). Meant for a conditional branch such as CartEmpty, never above the fold. Configured by props only (first, sort, availableOnly, categoryId, brandId, collectionId, searchTerm, itemsPerPage). Compose as: ProductShelfOnMountRoot > (ProductShelfHeading + CarouselRoot > (ProductShelfItems + CarouselPrevious + CarouselNext)). See product-shelf.md.',\n});\n\nexport const ProductShelfItemsDefinition = defineComponent<ProductShelfItemsProps>({\n  name: 'ProductShelfItems',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfItems,\n  editor: { label: 'Product Shelf Items', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    'Repeats the shelf products into the carousel track, publishing one product per slide through the per-item context the ProductCard* parts read. Place directly inside CarouselRoot (it renders the CarouselTrack). Put the card template (ProductCardImage, ProductCardName, ProductCardPrice, …) as its children.',\n});\n\nexport const ProductShelfHeadingDefinition = defineComponent<ProductShelfHeadingProps>({\n  name: 'ProductShelfHeading',\n  importPath: '@vtex/faststore/components',\n  component: ProductShelfHeading,\n  editor: { label: 'Product Shelf Heading', category: 'commerce' },\n  requiresContext: 'product-shelf',\n  schema: {},\n  guideline:\n    \"Renders its children as the shelf title (an <h2>) and provides the section's accessible label. Author the title text as its children (props.children). Place it inside ProductShelfRoot where the title should sit — usually above CarouselRoot. Renders nothing when it has no children.\",\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/** The content value when the merchant filled the field, else the prop (the shared emptiness rule). */\nfunction contentOrProp<T>(content: T | undefined, prop: T): T {\n  if (content === undefined || isEmptyContentValue(content)) return prop;\n  return content;\n}\n\nexport function ProductShelfRoot({\n  first = 5,\n  itemsPerPage = 5,\n  sort = 'relevance',\n  searchTerm,\n  categoryId,\n  brandId,\n  collectionId,\n  availableOnly = false,\n  usePriceWithTaxes = false,\n  products,\n  $content,\n  $data: $dataProp,\n  className,\n  children,\n  ...props\n}: ProductShelfRootProps) {\n  const $data = useDataOverride<ProductShelfData | null | undefined>($dataProp);\n  // The query already applied these values (the compiler binds the same slice and props to the\n  // fragment variables); the context only republishes what this element resolved to.\n  const shelfConfig = useMemo<ProductShelfConfig>(\n    () => ({\n      first: contentOrProp($content?.first, first),\n      sort: contentOrProp($content?.sort, sort),\n      searchTerm: contentOrProp($content?.searchTerm, searchTerm),\n      categoryId: contentOrProp($content?.categoryId, categoryId),\n      brandId: contentOrProp($content?.brandId, brandId),\n      collectionId: contentOrProp($content?.collectionId, collectionId),\n      availableOnly: contentOrProp($content?.availableOnly, availableOnly),\n    }),\n    [$content, first, sort, searchTerm, categoryId, brandId, collectionId, availableOnly],\n  );\n  const headingId = useId();\n  // Ref-counted so a composed ProductShelfHeading flips `hasHeading` wherever it is placed; the\n  // section then labels itself only while a heading is mounted, never via a dangling idref.\n  const [headingCount, setHeadingCount] = useState(0);\n  const registerHeading = useCallback(() => {\n    setHeadingCount((count) => count + 1);\n    return () => setHeadingCount((count) => count - 1);\n  }, []);\n  const headingContext = useMemo(() => ({ headingId, registerHeading }), [headingId, registerHeading]);\n  const config = useMemo(() => ({ usePriceWithTaxes }), [usePriceWithTaxes]);\n  const items = useMemo<ProductShelfItem[]>(() => {\n    if (products !== undefined) return products;\n    return $data ? transformProducts($data) : [];\n  }, [products, $data]);\n  const shelf = useMemo<ProductShelfContextValue>(\n    () => ({ itemsPerPage, config: shelfConfig, count: items.length }),\n    [itemsPerPage, shelfConfig, items.length],\n  );\n  const hasHeading = headingCount > 0;\n\n  if (products === undefined && $data === undefined) {\n    // Lazy source not resolved yet — show the skeleton (the runtime also renders it).\n    return <ProductShelfSkeleton className={className} />;\n  }\n\n  // Empty result renders nothing (legacy parity) rather than an empty carousel.\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <ProductListConfigContext value={config}>\n      <ProductShelfProductsContext value={items}>\n        <ProductShelfContext value={shelf}>\n          <ProductShelfHeadingContext value={headingContext}>\n            <section\n              {...props}\n              className={className}\n              data-fs-product-shelf=\"\"\n              aria-labelledby={hasHeading ? headingId : undefined}\n            >\n              {children}\n            </section>\n          </ProductShelfHeadingContext>\n        </ProductShelfContext>\n      </ProductShelfProductsContext>\n    </ProductListConfigContext>\n  );\n}\n\n/**\n * `ProductShelfRoot` for a `'lazy-on-mount'` page element: the generator wraps it in a\n * `HotDataProvider` whose `null` fallback reaches the inner root through the data override.\n */\nexport function ProductShelfOnMountRoot(props: Readonly<ProductShelfOnMountRootProps>) {\n  return <ProductShelfRoot {...props} />;\n}\n\nexport function ProductShelfHeading({ className, children, ...props }: ProductShelfHeadingProps) {\n  const { headingId, registerHeading } = useProductShelfHeading();\n  const hasContent = children != null && children !== '';\n\n  // Announce presence to the root so its section wires `aria-labelledby` to this heading; the\n  // registration (and its unregister) is scoped to when the heading actually renders content.\n  useEffect(() => {\n    if (!hasContent) {\n      return;\n    }\n    return registerHeading();\n  }, [hasContent, registerHeading]);\n\n  if (!hasContent) {\n    return null;\n  }\n\n  return (\n    <Text {...props} as=\"h2\" id={headingId} className={className} data-fs-product-shelf-heading=\"\">\n      {children}\n    </Text>\n  );\n}\n\nexport function ProductShelfItems({ children, ...props }: ProductShelfItemsProps) {\n  const items = useContext(ProductShelfProductsContext);\n\n  return (\n    <CarouselTrack {...props} data-fs-product-shelf-items=\"\">\n      {items.map((item) => (\n        <ProductListItemContext key={item.id} value={item}>\n          {children}\n        </ProductListItemContext>\n      ))}\n    </CarouselTrack>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Skeleton\n// ---------------------------------------------------------------------------\n\nexport function ProductShelfSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-product-shelf-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n      <span data-fs-product-shelf-skeleton-item=\"\" />\n    </div>\n  );\n}\n\nProductShelfRoot.Skeleton = ProductShelfSkeleton;\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const ProductShelf = {\n  Root: ProductShelfRoot,\n  Heading: ProductShelfHeading,\n  Items: ProductShelfItems,\n  Skeleton: ProductShelfSkeleton,\n};\n"],"mappings":"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"}

package/dist/matter/region/region.d.ts

@@ -1,4 +1,4 @@
-import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { RegionEntity } from "../../sdk/region/operations.js";
@@ -17,6 +17,8 @@ export declare const RegionTriggerContent: {
       readonly unsetLabel: {
         readonly type: "string";
         readonly title: "Label when no region is set";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter your postal code";
       };
       readonly ariaLabel: {
         readonly type: "string";
@@ -36,10 +38,14 @@ export declare const RegionSubmitContent: {
       readonly label: {
         readonly type: "string";
         readonly title: "Button label";
+        readonly format: "icu-message";
+        readonly messageSource: "Apply";
       };
       readonly pendingLabel: {
         readonly type: "string";
         readonly title: "Pending label";
+        readonly format: "icu-message";
+        readonly messageSource: "Applying...";
       };
     };
   };
@@ -69,7 +75,7 @@ export declare const RegionUnknownLinkContent: {
 export declare const RegionErrorContent: {
   readonly id: "region-error";
   readonly title: "Region Error";
-  readonly description: "Fallback message shown when a write fails without a server message.";
+  readonly description: "Messages shown when a write fails: a network failure, an invalid postal code, an unserved one.";
   readonly schema: {
     readonly type: "object";
     readonly additionalProperties: false;
@@ -77,6 +83,22 @@ export declare const RegionErrorContent: {
       readonly genericMessage: {
         readonly type: "string";
         readonly title: "Generic failure message";
+        readonly format: "icu-message";
+        readonly messageSource: "Unable to set your region. Please try again.";
+      };
+      readonly invalidPostalCode: {
+        readonly type: "string";
+        readonly title: "Invalid postal code";
+        readonly description: "Shown when the server rejects the postal code as invalid.";
+        readonly format: "icu-message";
+        readonly messageSource: "Enter a valid postal code.";
+      };
+      readonly unservedPostalCode: {
+        readonly type: "string";
+        readonly title: "Unserved postal code";
+        readonly description: "Shown when the server serves no region for the postal code.";
+        readonly format: "icu-message";
+        readonly messageSource: "We do not deliver to this postal code yet.";
       };
     };
   };
@@ -119,10 +141,8 @@ export type RegionRootProps = ComponentPropsWithRef<'div'> & {
   $actions?: ComponentActions;
   children?: ReactNode;
 };
-export type RegionTriggerProps = ComponentPropsWithRef<'button'> & {
-  /** Shown when no region is set. */
-  unsetLabel?: string;
-  /** Merchant-authored copy; wins over the props when present. */
+export type RegionTriggerProps = ComponentPropsWithRef<'button'> & MessageLocaleProp & {
+  /** Merchant-authored copy: the unset label and the accessible label. */
   $content?: ContentValue<typeof RegionTriggerContent>;
 };
 /** Children are omitted: what this renders is the resolved region, never authored content. */
@@ -141,15 +161,12 @@ export type RegionPostalCodeControlProps = {
   /** The field's own incomplete-value message. Server rejections surface through `RegionError`. */
   errorMessage?: string;
 };
-export type RegionSubmitProps = ComponentPropsWithRef<'button'> & {
-  label?: string;
-  pendingLabel?: string;
-  /** Merchant-authored copy; wins over the props when present. */
+export type RegionSubmitProps = ComponentPropsWithRef<'button'> & MessageLocaleProp & {
+  /** The idle and pending labels; authored `children` replace both. */
   $content?: ContentValue<typeof RegionSubmitContent>;
 };
-/** Children are omitted: what this renders is the write's own error, never authored content. */
-export type RegionErrorProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
-  /** Merchant-authored fallback copy; wins over the prop when present. */
+/** Children are omitted: what this renders is the write's own error, worded by `$content`. */
+export type RegionErrorProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & MessageLocaleProp & {
   $content?: ContentValue<typeof RegionErrorContent>;
 };
 export type RegionUnknownLinkProps = ComponentPropsWithRef<'a'> & {
@@ -176,7 +193,7 @@ export declare const RegionUnknownLinkDefinition: ComponentDefinition<RegionUnkn
  * leave the header showing a postal code the server refused.
  */
 export declare function RegionRoot({ $data: $dataProp, $actions: $actionsProp, className, children, ...props }: RegionRootProps): import("react/jsx-runtime").JSX.Element;
-export declare function RegionTrigger({ unsetLabel, $content, className, children, ...props }: RegionTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RegionTrigger({ $content, $locale, className, children, ...props }: RegionTriggerProps): import("react/jsx-runtime").JSX.Element;
 export declare function RegionValue({ className, ...props }: RegionValueProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function RegionLoading({ className, children, ...props }: RegionLoadingProps): import("react/jsx-runtime").JSX.Element | null;
 /**
@@ -192,8 +209,8 @@ export declare function RegionModalController({ children }: RegionModalControlle
  */
 export declare function RegionForm({ className, children, ...props }: RegionFormProps): import("react/jsx-runtime").JSX.Element;
 export declare function RegionPostalCodeControl({ className, mask, label, placeholder, errorMessage }: RegionPostalCodeControlProps): import("react/jsx-runtime").JSX.Element;
-export declare function RegionSubmit({ label, pendingLabel, $content, className, children, ...props }: RegionSubmitProps): import("react/jsx-runtime").JSX.Element;
-export declare function RegionError({ $content, className, ...props }: RegionErrorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function RegionSubmit({ $content, $locale, className, children, ...props }: RegionSubmitProps): import("react/jsx-runtime").JSX.Element;
+export declare function RegionError({ $content, $locale, className, ...props }: RegionErrorProps): import("react/jsx-runtime").JSX.Element | null;
 export declare function RegionUnknownLink({ $content, className, children, href, rel, ...props }: RegionUnknownLinkProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const Region: {
   Root: typeof RegionRoot;

package/dist/matter/region/region.js

@@ -3,9 +3,10 @@ import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { resolveSafeHref } from "../../utils/safe-href.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { graphql } from "../../sdk/generated/gql.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { formatErrorCode } from "../../sdk/i18n/format-error-code.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
 import { PostalCodeField } from "../../particles/postal-code-field/postal-code-field.js";
@@ -29,7 +30,9 @@ const RegionTriggerContent = defineContentType({
 		properties: {
 			unsetLabel: {
 				type: "string",
-				title: "Label when no region is set"
+				title: "Label when no region is set",
+				format: "icu-message",
+				messageSource: "Enter your postal code"
 			},
 			ariaLabel: {
 				type: "string",
@@ -48,11 +51,15 @@ const RegionSubmitContent = defineContentType({
 		properties: {
 			label: {
 				type: "string",
-				title: "Button label"
+				title: "Button label",
+				format: "icu-message",
+				messageSource: "Apply"
 			},
 			pendingLabel: {
 				type: "string",
-				title: "Pending label"
+				title: "Pending label",
+				format: "icu-message",
+				messageSource: "Applying..."
 			}
 		}
 	}
@@ -82,14 +89,32 @@ const RegionUnknownLinkContent = defineContentType({
 const RegionErrorContent = defineContentType({
 	id: "region-error",
 	title: "Region Error",
-	description: "Fallback message shown when a write fails without a server message.",
+	description: "Messages shown when a write fails: a network failure, an invalid postal code, an unserved one.",
 	schema: {
 		type: "object",
 		additionalProperties: false,
-		properties: { genericMessage: {
-			type: "string",
-			title: "Generic failure message"
-		} }
+		properties: {
+			genericMessage: {
+				type: "string",
+				title: "Generic failure message",
+				format: "icu-message",
+				messageSource: "Unable to set your region. Please try again."
+			},
+			invalidPostalCode: {
+				type: "string",
+				title: "Invalid postal code",
+				description: "Shown when the server rejects the postal code as invalid.",
+				format: "icu-message",
+				messageSource: "Enter a valid postal code."
+			},
+			unservedPostalCode: {
+				type: "string",
+				title: "Unserved postal code",
+				description: "Shown when the server serves no region for the postal code.",
+				format: "icu-message",
+				messageSource: "We do not deliver to this postal code yet."
+			}
+		}
 	}
 });
 const REGION_CONTEXT_UNSET = Symbol("RegionContextUnset");
@@ -138,12 +163,8 @@ const RegionTriggerDefinition = defineComponent({
 		label: "Region Trigger",
 		category: "action"
 	},
-	schema: { unsetLabel: {
-		type: "string",
-		default: "Informe seu CEP",
-		label: "Label when no region is set"
-	} },
-	guideline: "Opens the region modal. Shows its unset label while no region is set; compose RegionValue as its child so the active region reads inside the control once one is. Its accessible name carries the active region, so a screen reader announces where the shopper is shopping. Must be inside RegionRoot."
+	schema: {},
+	guideline: "Opens the region modal. Shows its unset label ($content field unsetLabel) while no region is set; compose RegionValue as its child so the active region reads inside the control once one is. Its accessible name carries the active region, so a screen reader announces where the shopper is shopping. Must be inside RegionRoot."
 });
 const RegionValueDefinition = defineComponent({
 	name: "RegionValue",
@@ -233,19 +254,8 @@ const RegionSubmitDefinition = defineComponent({
 		label: "Region Submit",
 		category: "action"
 	},
-	schema: {
-		label: {
-			type: "string",
-			default: "Aplicar",
-			label: "Button label"
-		},
-		pendingLabel: {
-			type: "string",
-			default: "Aplicando...",
-			label: "Pending label"
-		}
-	},
-	guideline: "Submits the region draft. Inside a RegionForm it is the form's submit button, which is what makes Enter in the field work; on its own it dispatches directly. Inert while empty and while a write is in flight, so a double activation dispatches one mutation; the pending state is exposed as aria-busy with no built-in spinner. On success the modal closes; on a rejection it stays open and RegionError explains why. Must be inside a RegionModalController dialog."
+	schema: {},
+	guideline: "Submits the region draft. Its label comes from the $content fields label and pendingLabel; authored children replace both. Inside a RegionForm it is the form's submit button, which is what makes Enter in the field work; on its own it dispatches directly. Inert while empty and while a write is in flight, so a double activation dispatches one mutation; the pending state is exposed as aria-busy with no built-in spinner. On success the modal closes; on a rejection it stays open and RegionError explains why. Must be inside a RegionModalController dialog."
 });
 const RegionErrorDefinition = defineComponent({
 	name: "RegionError",
@@ -258,7 +268,7 @@ const RegionErrorDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "Shows why the latest region write was refused, announced as an alert when it appears. Renders nothing when there is no error, so it needs no visibility prop. The server's own message is shown verbatim; the authored generic message covers a transport failure, where there is no server message to show. Must be inside a RegionModalController dialog."
+	guideline: "Shows why the latest region write was refused, announced as an alert when it appears. Renders nothing when there is no error, so it needs no visibility prop. Words each known code from its message (genericMessage for a transport failure and an unknown code). Must be inside a RegionModalController dialog."
 });
 const RegionUnknownLinkDefinition = defineComponent({
 	name: "RegionUnknownLink",
@@ -376,10 +386,10 @@ function RegionRoot({ $data: $dataProp, $actions: $actionsProp, className, child
 		})
 	});
 }
-function RegionTrigger({ unsetLabel = "Informe seu CEP", $content, className, children, ...props }) {
+function RegionTrigger({ $content, $locale, className, children, ...props }) {
 	const { postalCode, city, loading, setOpen } = useRegion();
+	const { format } = useMessageFormatter(RegionTriggerContent, $content);
 	const isUnset = postalCode == null;
-	const resolvedUnsetLabel = $content?.unsetLabel?.trim() ? $content.unsetLabel : unsetLabel;
 	const authoredAriaLabel = $content?.ariaLabel?.trim() ? $content.ariaLabel : props["aria-label"];
 	/**
 	* WCAG 2.5.3 wants the accessible name to contain the visible label, so an authored label prefixes
@@ -390,8 +400,9 @@ function RegionTrigger({ unsetLabel = "Informe seu CEP", $content, className, ch
 	* the text itself, which already satisfies the rule.
 	*/
 	let visibleLabel = "";
-	if (!loading) visibleLabel = isUnset ? resolvedUnsetLabel : [city, postalCode].filter(Boolean).join(" ");
-	const ariaLabel = authoredAriaLabel && visibleLabel ? `${authoredAriaLabel}: ${visibleLabel}` : authoredAriaLabel;
+	if (!loading) visibleLabel = isUnset ? format("unsetLabel") : [city, postalCode].filter(Boolean).join(" ");
+	let ariaLabel = authoredAriaLabel && visibleLabel ? `${authoredAriaLabel}: ${visibleLabel}` : authoredAriaLabel;
+	if (loading && !ariaLabel) ariaLabel = format("unsetLabel");
 	return /* @__PURE__ */ jsxs("button", {
 		...props,
 		type: "button",
@@ -401,7 +412,7 @@ function RegionTrigger({ unsetLabel = "Informe seu CEP", $content, className, ch
 		className,
 		"data-fs-region-trigger": "",
 		...isUnset ? { "data-fs-region-trigger-unset": "" } : {},
-		children: [isUnset && !loading ? resolvedUnsetLabel : null, children]
+		children: [isUnset && !loading ? visibleLabel : null, children]
 	});
 }
 function RegionValue({ className, ...props }) {
@@ -496,11 +507,10 @@ function RegionPostalCodeControl({ className, mask, label, placeholder, errorMes
 		disabled: pending
 	});
 }
-function RegionSubmit({ label = "Aplicar", pendingLabel = "Aplicando...", $content, className, children, ...props }) {
+function RegionSubmit({ $content, $locale, className, children, ...props }) {
 	const { draft, pending, submit } = useRegion();
 	const inForm = useContext(RegionFormContext);
-	const resolvedLabel = $content?.label?.trim() ? $content.label : label;
-	const resolvedPendingLabel = $content?.pendingLabel?.trim() ? $content.pendingLabel : pendingLabel;
+	const { format } = useMessageFormatter(RegionSubmitContent, $content);
 	return /* @__PURE__ */ jsx("button", {
 		...props,
 		type: inForm ? "submit" : "button",
@@ -510,28 +520,25 @@ function RegionSubmit({ label = "Aplicar", pendingLabel = "Aplicando...", $conte
 		className,
 		"data-fs-region-submit": "",
 		...pending ? { "data-fs-region-submit-pending": "" } : {},
-		children: children ?? (pending ? resolvedPendingLabel : resolvedLabel)
+		children: children ?? format(pending ? "pendingLabel" : "label")
 	});
 }
 /**
-* The catalog copy for each rejection the client can name: the server's `RegionErrorCode` values plus
-* the client-minted transport failure. The server's own `message` is English, so it is shown only for
-* a code this map does not know — a newer server than this package.
+* The message for each rejection the client can name: the server's `RegionErrorCode` values plus the
+* client-minted transport failure. A code this map does not know (a newer server than this package)
+* shows genericMessage.
 */
-const REGION_ERROR_MESSAGE_IDS = {
-	INVALID_POSTAL_CODE: "fs/region.error.invalid-postal-code",
-	UNSERVED_POSTAL_CODE: "fs/region.error.unserved-postal-code",
-	NETWORK_ERROR: "fs/region.error.network"
+const REGION_ERROR_FIELDS = {
+	INVALID_POSTAL_CODE: "invalidPostalCode",
+	UNSERVED_POSTAL_CODE: "unservedPostalCode",
+	NETWORK_ERROR: "genericMessage"
 };
-function RegionError({ $content, className, ...props }) {
+function RegionError({ $content, $locale, className, ...props }) {
 	const { errors } = useRegion();
-	const intl = useIntl();
+	const { format } = useMessageFormatter(RegionErrorContent, $content);
 	if (errors.length === 0) return null;
-	const genericMessage = $content?.genericMessage?.trim() ? $content.genericMessage : null;
 	function copyFor(error) {
-		if (error.code === "NETWORK_ERROR" && genericMessage) return genericMessage;
-		const id = error.code ? REGION_ERROR_MESSAGE_IDS[error.code] : void 0;
-		return id ? intl.formatMessage({ id }) : error.message;
+		return formatErrorCode(RegionErrorContent, REGION_ERROR_FIELDS, error, format, "genericMessage");
 	}
 	return /* @__PURE__ */ jsx("div", {
 		...props,
@@ -577,6 +584,6 @@ const Region = {
 	UnknownLink: RegionUnknownLink
 };
 //#endregion
-export { Region, RegionContext, RegionError, RegionErrorContent, RegionErrorDefinition, RegionForm, RegionFormDefinition, RegionLoading, RegionLoadingDefinition, RegionModalController, RegionModalControllerDefinition, RegionPostalCodeControl, RegionPostalCodeControlDefinition, RegionRoot, RegionRootDefinition, RegionSubmit, RegionSubmitContent, RegionSubmitDefinition, RegionTrigger, RegionTriggerContent, RegionTriggerDefinition, RegionUnknownLink, RegionUnknownLinkContent, RegionUnknownLinkDefinition, RegionValue, RegionValueDefinition, useRegion };
+export { REGION_ERROR_FIELDS, Region, RegionContext, RegionError, RegionErrorContent, RegionErrorDefinition, RegionForm, RegionFormDefinition, RegionLoading, RegionLoadingDefinition, RegionModalController, RegionModalControllerDefinition, RegionPostalCodeControl, RegionPostalCodeControlDefinition, RegionRoot, RegionRootDefinition, RegionSubmit, RegionSubmitContent, RegionSubmitDefinition, RegionTrigger, RegionTriggerContent, RegionTriggerDefinition, RegionUnknownLink, RegionUnknownLinkContent, RegionUnknownLinkDefinition, RegionValue, RegionValueDefinition, useRegion };
 
 //# sourceMappingURL=region.js.map