@thorprovider/storefront 0.4.0-mvp.0 → 0.4.0-mvp.2

package/assets/templates/views/account/registry.tsx

@@ -22,7 +22,7 @@ import { useStateStore } from '@json-render/react'
 import type { Customer } from '@thorprovider/types'
 import {
   loadAccountAction,
-  loadOrdersAction,
+  loadOrdersPageAction,
   loginAction,
   logoutAction,
   registerAction,
@@ -39,6 +39,9 @@ import {
 type AuthResult = { ok: true; customer: Customer | null } | { ok: false; error: string }
 type SetState = (path: string, value: unknown) => void
 
+/** Bounded page size for the account order-history window. */
+const ORDERS_PAGE_SIZE = 10
+
 // Apply a settled auth result truthfully: a failure sets an error and NEVER a
 // logged-in state; a success stores the customer (or null) and nothing else.
 function applyAuthResult(set: SetState, result: AuthResult): void {
@@ -100,9 +103,11 @@ interface BlockOrder {
   items: BlockOrderItem[]
 }
 
-// Map a backend-sourced account order row to the block's order shape. The order
-// number is the list key; an absent variant/image becomes '' because the block
-// contract is a string — never an invented value.
+// Map a backend-sourced account order row to the block's order shape. The block
+// has a single `id` slot which it also renders ("Pedido {id}"), so it carries the
+// display number; the registry keeps a number→backend-id map so selection is
+// keyed by the REAL backend order id. An absent variant/image becomes '' because
+// the block contract is a string — never an invented value.
 function toBlockOrder(order: AccountOrderView): BlockOrder {
   return {
     id: order.number,
@@ -295,26 +300,30 @@ export const registry: ViewRegistry = {
     )
   },
   /**
-   * Signed-in order history. The load runs once from the cookie-authorized
-   * Server Action; loading/empty/error are distinct and a failure never renders
-   * a fabricated order. `onViewDetails` records the selected order in state and
-   * the detail is assembled below from the already-fetched row — no second
-   * backend request. No token is read, stored, or rendered here.
+   * Signed-in order history. The first page loads once from the cookie-authorized
+   * Server Action; later pages load on demand, each scoped to the authenticated
+   * customer's channel. The backend's real `count` drives pagination, so a page
+   * length is never presented as the total. Selection is keyed by the REAL
+   * backend order id (via a number→id map), so an opened detail stays stable
+   * across paging and reload. No token is read, stored, or rendered here.
    */
   AccountOrders: ({ props }) => {
     const { state, set } = useStateStore()
     const parsed = accountOrdersPropsSchema.parse(props)
-    const loaded = useRef(false)
-    useEffect(() => {
-      if (loaded.current) return
-      loaded.current = true
+    const authenticated = Boolean(state.accountAuthenticated)
+    const loadedForAuth = useRef(false)
+
+    const loadPage = (page: number) => {
       set('/accountOrdersPending', true)
       set('/accountOrdersError', null)
-      void loadOrdersAction()
+      void loadOrdersPageAction({ page, pageSize: ORDERS_PAGE_SIZE })
         .then((result) => {
           set('/accountOrdersPending', false)
           if (result.ok) {
             set('/accountOrders', result.orders)
+            set('/accountOrdersCount', result.count)
+            set('/accountOrdersPage', page)
+            set('/accountOrdersPageSize', result.limit)
             set('/accountOrdersError', null)
             return
           }
@@ -328,19 +337,40 @@ export const registry: ViewRegistry = {
           set('/accountOrdersPending', false)
           set('/accountOrdersError', parsed.errorLabel ?? 'No se pudieron cargar tus pedidos.')
         })
+    }
+
+    useEffect(() => {
+      // Load the first page when the customer becomes authenticated, and reload
+      // after a re-login, so the history appears without a manual reload. A
+      // guest load is never attempted; the flag resets when the session ends.
+      if (!authenticated) {
+        loadedForAuth.current = false
+        return
+      }
+      if (loadedForAuth.current) return
+      loadedForAuth.current = true
+      loadPage(1)
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
+    }, [authenticated])
 
     const pending = Boolean(state.accountOrdersPending)
     const error = typeof state.accountOrdersError === 'string' ? state.accountOrdersError : null
     const orders = Array.isArray(state.accountOrders)
       ? (state.accountOrders as AccountOrderView[])
       : []
+    const count =
+      typeof state.accountOrdersCount === 'number' ? state.accountOrdersCount : orders.length
+    const page = typeof state.accountOrdersPage === 'number' ? state.accountOrdersPage : 1
+    const pageSize =
+      typeof state.accountOrdersPageSize === 'number' && state.accountOrdersPageSize > 0
+        ? state.accountOrdersPageSize
+        : ORDERS_PAGE_SIZE
     const selectedId =
       typeof state.accountSelectedOrderId === 'string' ? state.accountSelectedOrderId : null
-    const selected = selectedId
-      ? orders.find((order) => order.number === selectedId) ?? null
-      : null
+    // Selection is keyed by the REAL backend order id, never the display number.
+    const selected = selectedId ? orders.find((order) => order.id === selectedId) ?? null : null
+    // The block row carries the display number; resolve it back to the backend id.
+    const backendIdByBlockId = new Map(orders.map((order) => [order.number, order.id]))
 
     if (pending) {
       return (
@@ -363,14 +393,45 @@ export const registry: ViewRegistry = {
         </p>
       )
     }
+    const totalPages = Math.max(1, Math.ceil(count / pageSize))
     return (
       <>
         <OrderHistory2
           orders={orders.map(toBlockOrder)}
           titleLabel={parsed.titleLabel}
           descriptionLabel={parsed.descriptionLabel}
-          onViewDetails={(order) => set('/accountSelectedOrderId', order.id)}
+          // The block renders "Total de pedidos: {n}" from the PAGE length; pass a
+          // label without `{n}` so a page length is never shown as the total.
+          totalOrdersLabel={parsed.totalOrdersLabel ?? 'Pedidos'}
+          onViewDetails={(order) =>
+            set('/accountSelectedOrderId', backendIdByBlockId.get(order.id) ?? null)
+          }
         />
+        {count > pageSize ? (
+          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 pb-6 sm:px-6 lg:px-8">
+            <p className="text-muted-foreground text-sm" role="status" aria-live="polite">
+              {`${count} pedidos · página ${page} de ${totalPages}`}
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={pending || page <= 1}
+                onClick={() => loadPage(page - 1)}
+              >
+                Anterior
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={pending || page >= totalPages}
+                onClick={() => loadPage(page + 1)}
+              >
+                Siguiente
+              </Button>
+            </div>
+          </div>
+        ) : null}
         {selected ? <OrderDetail order={selected} /> : null}
       </>
     )

package/assets/templates/views/account/schema.ts

@@ -38,6 +38,7 @@ export const accountRegisterPropsSchema = z.object({
 export const accountOrdersPropsSchema = z.object({
   titleLabel: z.string().optional(),
   descriptionLabel: z.string().optional(),
+  totalOrdersLabel: z.string().optional(),
   emptyLabel: z.string().optional(),
   errorLabel: z.string().optional(),
   loadingLabel: z.string().optional(),

package/assets/templates/views/cart/content.ts

@@ -0,0 +1,11 @@
+// Thor Commerce view content: cart (user-owned)
+// Merchant-editable copy for the standalone cart review page. Seeded once by the
+// scaffolder and never overwritten on sync.
+
+export const cartContent = {
+  titleLabel: 'Tu carrito',
+  checkoutLabel: 'Finalizar compra',
+  continueShoppingLabel: 'Seguir comprando',
+  emptyLabel: 'Tu carrito está vacío',
+  readErrorLabel: 'No se pudo cargar tu carrito.',
+}

package/assets/templates/views/cart/data.ts

@@ -0,0 +1,23 @@
+// Thor Commerce view data: cart (user-owned)
+// Pure mapping from the shared host cart state to the ShoppingCart4 block props.
+// No React and no server imports so it can be imported from either boundary.
+
+import type { ShoppingCart4Item } from '@thorprovider/blocks'
+import type { CartLineState } from '../../state'
+
+/**
+ * Maps backend cart lines to the cart block's item shape. `price` stays 0 (the
+ * legacy numeric field) because the block renders the canonical `lineTotal`
+ * Money; an absent image is left undefined rather than serialized as "".
+ */
+export const toCartViewItems = (cart: CartLineState[]): ShoppingCart4Item[] =>
+  cart.map(line => ({
+    id: line.id,
+    name: line.name,
+    price: 0,
+    quantity: line.quantity,
+    image: line.image,
+    variant: line.variant,
+    lineTotal: line.lineTotal,
+    unitPrice: line.unitPrice,
+  }))

package/assets/templates/views/cart/index.tsx

@@ -0,0 +1,53 @@
+// Thor Commerce view: cart
+// The standalone cart review route. Its data comes from the shared host cart
+// state injected on every route (readCartStateForRender), so the loader only
+// reports the data source — no dedicated cart fetch happens here.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule } from '../types'
+import { cartViewProps } from './props'
+import { registry } from './registry'
+import { cartViewPropsSchema } from './schema'
+
+const elements: Record<string, StorefrontElement> = {
+  'cart.view': {
+    type: 'CartView',
+    props: cartViewProps,
+    on: {
+      refreshCart: { action: 'refreshCart' },
+      updateQuantity: { action: 'updateQuantity' },
+      removeFromCart: { action: 'removeFromCart' },
+      goToCheckout: { action: 'goToCheckout' },
+      goHome: { action: 'goHome' },
+    },
+  },
+}
+
+const catalog = {
+  CartView: {
+    props: cartViewPropsSchema,
+    description: 'Standalone cart review page with backend-authoritative totals.',
+  },
+}
+
+export const cart: ViewModule = {
+  name: 'cart',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/cart',
+    loaderName: 'cart',
+    layout: 'default',
+    metadata: {
+      title: 'Carrito',
+      description: 'Revisa los artículos de tu carrito antes de finalizar la compra.',
+    },
+    entry: pageRoot('cart', ['cart.view'], elements),
+  },
+  loader: {
+    cart: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}

package/assets/templates/views/cart/props.ts

@@ -0,0 +1,12 @@
+// Thor Commerce view props: cart (user-owned)
+// Element props for the cart review view. The cart lines and backend-authoritative
+// totals are read from the shared host state (injected for every route), so this
+// view needs no dedicated data fetch.
+
+import { cartContent } from './content'
+
+export const cartViewProps = {
+  ...cartContent,
+  items: { $state: '/cart' },
+  totals: { $state: '/cartTotals' },
+}

package/assets/templates/views/cart/registry.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+// Thor Commerce view registry: cart
+// Renders the standalone cart review page (page-mode ShoppingCart4) from the
+// shared host cart state. Quantity updates use the ABSOLUTE line quantity keyed
+// by backend line id; removal uses the same line id. Checkout is only offered
+// when the checkout capability is installed and the cart is ready.
+
+import { Button, ShoppingCart4 } from '@thorprovider/blocks'
+import { isAvailableMoney } from '@thorprovider/blocks/contracts'
+import { useStateStore } from '@json-render/react'
+import { checkoutAvailable } from '../../composition'
+import type { ViewRegistry } from '../types'
+import { toCartViewItems } from './data'
+import { cartViewPropsSchema } from './schema'
+
+export const registry: ViewRegistry = {
+  CartView: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = cartViewPropsSchema.parse(props)
+    const cart = parsed.items
+    const cartError = typeof state.cartError === 'string' ? state.cartError : undefined
+    const readError = typeof state.cartReadError === 'string' ? state.cartReadError : undefined
+    const isPending = state.cartPending === true
+    const errorLabel = cartError ?? readError
+    const totalsState = isPending ? 'pending' : errorLabel ? 'error' : 'idle'
+    // Checkout is offered only when the required backend amounts are present and
+    // valid: a missing/malformed subtotal, total, or line amount blocks it, while
+    // an undetermined shipping amount does not (AC-CART-4.4 / UC-CART-7).
+    const amountsValid =
+      cart.every((line) => isAvailableMoney(line.lineTotal)) &&
+      parsed.totals != null &&
+      isAvailableMoney(parsed.totals.subtotal) &&
+      isAvailableMoney(parsed.totals.total)
+
+    // A read failure with no confirmed lines is not an empty cart: surface it as
+    // a recoverable error rather than the empty state.
+    if (readError && cart.length === 0) {
+      return (
+        <section className='mx-auto max-w-3xl px-4 py-8'>
+          <div role='alert' className='flex flex-col items-start gap-3'>
+            <p className='text-destructive text-sm'>{parsed.readErrorLabel ?? readError}</p>
+            <Button variant='outline' size='sm' onClick={() => emit('refreshCart')}>
+              Reintentar
+            </Button>
+          </div>
+        </section>
+      )
+    }
+
+    return (
+      <ShoppingCart4
+        presentation='page'
+        items={toCartViewItems(cart)}
+        promotions={[]}
+        totals={parsed.totals ?? undefined}
+        totalsState={totalsState}
+        totalsErrorLabel={errorLabel}
+        titleLabel={parsed.titleLabel}
+        checkoutLabel={parsed.checkoutLabel}
+        continueShoppingLabel={parsed.continueShoppingLabel}
+        emptyLabel={parsed.emptyLabel}
+        onRetryTotals={() => emit('refreshCart')}
+        onQuantityChange={(id, quantity) => {
+          const line = cart.find(item => item.id === id)
+          if (!line) return
+          set('/qtyUpdate', { id, merchandiseId: line.merchandiseId, quantity })
+          emit('updateQuantity')
+        }}
+        onRemove={id => {
+          set('/lastRemoved', id)
+          emit('removeFromCart')
+        }}
+        onCheckout={() => emit('goToCheckout')}
+        onContinueShopping={() => emit('goHome')}
+        checkoutUnavailable={!checkoutAvailable}
+        checkoutDisabled={isPending || Boolean(errorLabel) || cart.length === 0 || !amountsValid}
+      />
+    )
+  },
+}

package/assets/templates/views/cart/schema.ts

@@ -0,0 +1,52 @@
+// Thor Commerce view schema fragment: cart
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entry and the client-side registry parsing (json-render does not
+// validate props against the catalog itself, so the registry parses here).
+// Kept free of React and server imports so the Server Component module and the
+// 'use client' registry can share one contract. Block zod contracts are
+// mirrored, not imported: @thorprovider/blocks ships zod v3 while the scaffold
+// runs zod v4 and cross-major schema assignment breaks the catalog contract.
+
+import { z } from 'zod'
+
+// Canonical Money: a decimal string in major units ("69.99"), never cents.
+const moneySchema = z.object({
+  amount: z.string(),
+  currencyCode: z.string(),
+})
+
+// Mirrors CartLineState: `id` is the backend line-item id used for absolute
+// updates and removal; `lineTotal`/`unitPrice` are the authoritative backend
+// amounts. An absent image stays absent (never serialized as "").
+export const cartLineSchema = z.object({
+  id: z.string(),
+  merchandiseId: z.string(),
+  name: z.string(),
+  variant: z.string().optional(),
+  quantity: z.number(),
+  lineTotal: moneySchema,
+  unitPrice: moneySchema.optional(),
+  image: z.string().optional(),
+  handle: z.string().optional(),
+})
+
+// Mirrors CartTotalsState: backend-authoritative totals rendered verbatim.
+export const cartTotalsSchema = z.object({
+  subtotal: moneySchema,
+  discount: moneySchema.optional(),
+  tax: moneySchema.optional(),
+  shipping: moneySchema.optional(),
+  total: moneySchema,
+})
+
+export const cartViewPropsSchema = z.object({
+  items: z.array(cartLineSchema),
+  totals: cartTotalsSchema.nullish(),
+  titleLabel: z.string().optional(),
+  checkoutLabel: z.string().optional(),
+  continueShoppingLabel: z.string().optional(),
+  emptyLabel: z.string().optional(),
+  readErrorLabel: z.string().optional(),
+})
+
+export type CartViewProps = z.infer<typeof cartViewPropsSchema>

package/assets/templates/views/category/assembly/assembly.json

@@ -1,6 +1,7 @@
 {
   "view": "category",
   "slots": [
+    { "id": "category.breadcrumb", "slot": "breadcrumb", "default": "Breadcrumb" },
     { "id": "category.filter", "slot": "filter", "default": "CategoryFilter2" },
     {
       "id": "category.productCard",

package/assets/templates/views/category/assembly/index.skeleton.tsx

@@ -24,13 +24,13 @@ import {
   mapCatalogResultsToFilterProps,
 } from '@thorprovider/runtime/commerce'
 import { getDataSource, getStoreContext, isRealMode } from '../../store-context'
-import { mountedFeatures, mountedFeatureConfigs } from '../../composition'
+import { mountedFeatureConfigs, mountedFeatureNames, mountedFeatures } from '../../composition'
 import { pageRoot } from '../../spec/page-root'
 import type { StorefrontElement } from '../../spec/types'
 import type { ViewModule } from '../types'
 import { registry } from './registry'
-import { categoryFilterProps } from './props'
-import { categoryFilterPropsSchema } from './schema'@@SECTION_IMPORTS@@
+import { categoryBreadcrumbProps, categoryFilterProps } from './props'
+import { breadcrumbPropsSchema, categoryFilterPropsSchema } from './schema'@@SECTION_IMPORTS@@
 
 // The single controlled `CategoryFilter2` base listing. The search/filter
 // controls are shown only when the matching feature is installed; the base
@@ -38,6 +38,10 @@ import { categoryFilterPropsSchema } from './schema'@@SECTION_IMPORTS@@
 // and pagination.
 const hasSearch = mountedFeatures.includes('catalog-search')
 const hasFilters = mountedFeatures.includes('category-filters')
+// The navigability feature contributes the entity-derived breadcrumb trail. When
+// it is not installed the trail is empty and the Breadcrumb block renders
+// nothing, so removal leaves no dangling navigation aid.
+const hasNavigability = mountedFeatureNames.includes('navigability')
 const searchConfig = (mountedFeatureConfigs['catalog-search'] ?? {}) as { placeholder?: string }
 const filtersConfig = (mountedFeatureConfigs['category-filters'] ?? {}) as {
   filterSet?: string[]
@@ -75,15 +79,67 @@ const emptyFilterState = () => ({
   categoryFilterCategories: [],
   categoryFilterCollections: [],
   categoryFilterPriceRange: undefined,
+  breadcrumbItems: [] as { label: string; href?: string }[],
 })
 
+/**
+ * The real category entity for the current route scope, resolved from the
+ * backend catalog. Entity SEO reads this; an unknown/absent scope yields no
+ * entity (no metadata or structured data is fabricated).
+ */
+function resolveCategoryEntity(
+  slug: string | undefined,
+  catalog: Awaited<ReturnType<typeof getCatalog>>,
+): { handle: string; name: string; description?: string } | undefined {
+  if (!slug) return undefined
+  const match = catalog.categoriesRaw.find((entry) => entry.handle === slug)
+  if (!match) return undefined
+  const description =
+    typeof match.description === 'string' && match.description.trim() !== ''
+      ? match.description
+      : undefined
+  return {
+    handle: match.handle,
+    name: match.name,
+    ...(description !== undefined ? { description } : {}),
+  }
+}
+
+/**
+ * Entity-derived breadcrumb trail for the current category scope: Home, the
+ * real ancestor chain (root -> leaf), and the current category. Derived from
+ * the backend category hierarchy (`parentCategoryId`); no level is fabricated,
+ * a cycle cannot loop forever, and no trail is produced when the navigability
+ * feature is not installed or the scope is unknown.
+ */
+function resolveBreadcrumbItems(
+  slug: string | undefined,
+  catalog: Awaited<ReturnType<typeof getCatalog>>,
+): { label: string; href?: string }[] {
+  if (!hasNavigability || !slug) return []
+  const byHandle = new Map(catalog.categoriesRaw.map((entry) => [entry.handle, entry]))
+  const byId = new Map(catalog.categoriesRaw.map((entry) => [entry.id, entry]))
+  const chain: { label: string; href: string }[] = []
+  const visited = new Set<string>()
+  let current = byHandle.get(slug)
+  while (current && !visited.has(current.handle)) {
+    visited.add(current.handle)
+    chain.unshift({ label: current.name, href: `/categories/${current.handle}` })
+    current = current.parentCategoryId ? byId.get(current.parentCategoryId) : undefined
+  }
+  if (chain.length === 0) return []
+  const leaf = chain[chain.length - 1]
+  // The current (leaf) item is not a link; only ancestors are navigable.
+  return [{ label: 'Inicio', href: '/' }, ...chain.slice(0, -1), { label: leaf.label }]
+}
+
 export const category: ViewModule = {
   name: 'category',
   elements,
   catalog,
   registry,
   route: {
-    path: '/categorias/[[...slug]]',
+    path: '/categories/[[...slug]]',
     loaderName: 'category',
     layout: 'default',
     metadata: {
@@ -144,13 +200,13 @@ export const category: ViewModule = {
         const presentation = mapCatalogResultsToFilterProps({
           query: listing.query,
           results: listing.results,
-          // A scoped listing (`/categorias/<handle>`) must not offer the
+          // A scoped listing (`/categories/<handle>`) must not offer the
           // category facet: the scope already fixes the category. The root
           // catalog passes no scope and keeps it.
           ...(slug ? { categoryScope: slug } : {}),
           // Product links point at the product-detail route. The runtime stays
           // route-agnostic, so this view supplies the href builder.
-          productHref: (handle: string) => `/productos/${handle}`,
+          productHref: (handle: string) => `/products/${handle}`,
           ...(categories ? { categories } : {}),
           ...(collections ? { collections } : {}),
           sortOptions,
@@ -162,6 +218,8 @@ export const category: ViewModule = {
 
         return {
           storeCategories: catalog.categories,
+          categoryEntity: resolveCategoryEntity(slug, catalog),
+          breadcrumbItems: resolveBreadcrumbItems(slug, catalog),
           dataSource: catalog.source,
           dataError: null,
           categoryFilterProducts: presentation.products,

package/assets/templates/views/category/assembly/registry.skeleton.tsx

@@ -14,7 +14,8 @@ import {
   type CategoryFilter2ActiveFilter,
   type CategoryFilter2Filters,
   type CategoryFilter2Props,
-} from '@thorprovider/blocks'@@BLOCK_IMPORTS@@@@SECTION_REGISTRY_IMPORTS@@
+} from '@thorprovider/blocks'
+@@BLOCK_IMPORTS@@@@SECTION_REGISTRY_IMPORTS@@
 import { buildCategoryQueryHref, catalogHistoryMode, type CategoryQueryChange } from '@thorprovider/runtime/commerce'
 import type { CatalogFeatureName } from '@thorprovider/runtime/contracts'
 import { useStateStore } from '@json-render/react'

package/assets/templates/views/category/assembly/slots/breadcrumb/Breadcrumb/binding.json

@@ -0,0 +1,5 @@
+{
+  "module": "@thorprovider/blocks",
+  "import": "Breadcrumb",
+  "as": "BreadcrumbBlock"
+}

package/assets/templates/views/category/assembly/slots/breadcrumb/Breadcrumb/catalog.part

@@ -0,0 +1,4 @@
+  Breadcrumb: {
+    props: breadcrumbPropsSchema,
+    description: 'Migas de pan derivadas de la jerarquía real de categorías.',
+  },

package/assets/templates/views/category/assembly/slots/breadcrumb/Breadcrumb/element.part

@@ -0,0 +1,7 @@
+  'category.breadcrumb': {
+    type: 'Breadcrumb',
+    props: {
+      ...categoryBreadcrumbProps,
+      items: { $state: '/breadcrumbItems' },
+    },
+  },

package/assets/templates/views/category/assembly/slots/breadcrumb/Breadcrumb/registry.part

@@ -0,0 +1,18 @@
+  Breadcrumb: ({ props }) => {
+    const p = props as {
+      items: { label: string; href?: string }[]
+      maxItems?: number
+      ariaLabel?: string
+      backLabel?: string
+      className?: string
+    }
+    return (
+      <BreadcrumbBlock
+        items={p.items}
+        maxItems={p.maxItems}
+        ariaLabel={p.ariaLabel}
+        backLabel={p.backLabel}
+        className={p.className}
+      />
+    )
+  },