@wix/headless-stores 0.0.54 → 0.0.56

package/cjs/dist/react/Product.d.ts

@@ -188,6 +188,64 @@ export interface CompareAtPriceProps extends AsChildProps<{
  * ```
  */
 export declare const CompareAtPrice: React.ForwardRefExoticComponent<CompareAtPriceProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Slug component
+ * @interface SlugProps
+ */
+export interface SlugProps extends AsChildProps<{
+    slug: string;
+}> {
+}
+/**
+ * Product Slug component that displays the product's slug
+ *
+ * @component
+ * @order 6
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugLink() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product Details
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export declare const Slug: React.ForwardRefExoticComponent<SlugProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for Product Raw component
+ */
+export interface RawProps extends AsChildProps<{
+    product: V3Product;
+}> {
+}
+/**
+ * Provides access to the raw product data for advanced use cases.
+ * Similar to Category.Raw, this should only be used when you need custom access to product data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Product.Raw asChild>
+ *   {React.forwardRef(({product, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="product-debug">
+ *       <span>Product ID: {product._id}</span>
+ *       <span>SKU: {product.sku}</span>
+ *       <span>Inventory: {product.inventory?.quantity}</span>
+ *     </div>
+ *   ))}
+ * </Product.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for Product Variants container
  */
@@ -388,4 +446,47 @@ export interface ModifierOptionRepeaterProps {
  * @component
  */
 export declare const ModifierOptionRepeater: React.ForwardRefExoticComponent<ModifierOptionRepeaterProps & React.RefAttributes<HTMLElement>>;
-export {};
+/**
+ * Props for Product MediaGallery component
+ */
+export interface ProductMediaGalleryProps {
+    children: React.ReactNode;
+    infinite?: boolean;
+    autoPlay?: {
+        direction?: 'forward' | 'backward';
+        intervalMs?: number;
+    };
+}
+/**
+ * Container for product media gallery.
+ * Renders a MediaGallery.Root with the product media items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.MediaGallery
+ *   infinite={true}
+ *   autoPlay={{ direction: "forward", intervalMs: 5000 }}
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Product.MediaGallery>
+ *
+ * // Simple usage
+ * <Product.MediaGallery>
+ *   <MediaGallery.Viewport className="rounded-lg" />
+ * </Product.MediaGallery>
+ * ```
+ */
+export declare const ProductMediaGallery: React.ForwardRefExoticComponent<ProductMediaGalleryProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Alias for ProductMediaGallery to match the documented API
+ */
+export { ProductMediaGallery as MediaGallery };

package/cjs/dist/react/Product.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { renderAsChild } from '../utils/index.js';
+import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
 import * as ProductVariantSelector from './core/ProductVariantSelector.js';
 import * as ProductModifiers from './core/ProductModifiers.js';
@@ -36,12 +37,15 @@ var TestIds;
     TestIds["productDescription"] = "product-description";
     TestIds["productPrice"] = "product-price";
     TestIds["productCompareAtPrice"] = "product-compare-at-price";
+    TestIds["productSlug"] = "product-slug";
+    TestIds["productRaw"] = "product-raw";
     TestIds["productVariants"] = "product-variants";
     TestIds["productVariantOptions"] = "product-variant-options";
     TestIds["productVariantOption"] = "product-variant-option";
     TestIds["productModifiers"] = "product-modifiers";
     TestIds["productModifierOptions"] = "product-modifier-options";
     TestIds["productModifierOption"] = "product-modifier-option";
+    TestIds["productMediaGallery"] = "product-media-gallery";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete product experience.
@@ -64,7 +68,9 @@ var TestIds;
  * ```
  */
 export function Root(props) {
-    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }));
+    return (_jsx(CoreProduct.Root, { productServiceConfig: { product: props.product }, "data-testid": TestIds.productRoot, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: {
+                media: props.product.media?.itemsInfo?.items ?? [],
+            }, children: _jsx(ProductVariantSelector.Root, { children: _jsx(ProductModifiers.Root, { children: _jsx(SelectedVariant.Root, { children: props.children }) }) }) }) }));
 }
 /**
  * Displays the product name with customizable rendering following the documented API.
@@ -281,6 +287,90 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
             return (_jsx("span", { className: className, ...attributes, ref: ref, children: compareAtPrice }));
         } }));
 });
+/**
+ * Product Slug component that displays the product's slug
+ *
+ * @component
+ * @order 6
+ * @example
+ * ```tsx
+ * import { Product } from '@wix/stores/components';
+ *
+ * function ProductSlugLink() {
+ *   return (
+ *     <Product.Slug>
+ *       {({ slug }) => (
+ *         <a href={`/product/${slug}`}>
+ *           View Product Details
+ *         </a>
+ *       )}
+ *     </Product.Slug>
+ *   );
+ * }
+ * ```
+ */
+export const Slug = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    const testId = TestIds.productSlug;
+    return (_jsx(CoreProduct.Slug, { children: ({ slug }) => {
+            const attributes = {
+                'data-testid': testId,
+            };
+            const slugData = { slug };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: slugData,
+                    ref,
+                    content: slug,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            return (_jsx("span", { ...attributes, ref: ref, children: slug }));
+        } }));
+});
+/**
+ * Provides access to the raw product data for advanced use cases.
+ * Similar to Category.Raw, this should only be used when you need custom access to product data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Custom rendering with forwardRef
+ * <Product.Raw asChild>
+ *   {React.forwardRef(({product, ...props}, ref) => (
+ *     <div ref={ref} {...props} className="product-debug">
+ *       <span>Product ID: {product._id}</span>
+ *       <span>SKU: {product.sku}</span>
+ *       <span>Inventory: {product.inventory?.quantity}</span>
+ *     </div>
+ *   ))}
+ * </Product.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, ref) => {
+    const { asChild, children } = props;
+    return (_jsx(CoreProduct.Content, { children: ({ product }) => {
+            const attributes = {
+                'data-testid': TestIds.productRaw,
+            };
+            if (asChild) {
+                const rendered = renderAsChild({
+                    children,
+                    props: { product },
+                    ref,
+                    content: null,
+                    attributes,
+                });
+                if (rendered)
+                    return rendered;
+            }
+            // Raw component should not render anything by default when not using asChild
+            return null;
+        } }));
+});
 /**
  * Container for product variant selection system.
  * Does not render when there are no variants.
@@ -537,3 +627,50 @@ export const ModifierOptionRepeater = React.forwardRef((props, _ref) => {
                     }, allowedTypes: allowedTypes, children: children })) }, modifier._id));
         }) }));
 });
+/**
+ * Container for product media gallery.
+ * Renders a MediaGallery.Root with the product media items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default usage
+ * <Product.MediaGallery
+ *   infinite={true}
+ *   autoPlay={{ direction: "forward", intervalMs: 5000 }}
+ * >
+ *   <MediaGallery.Viewport />
+ *   <MediaGallery.Previous />
+ *   <MediaGallery.Next />
+ *   <MediaGallery.Thumbnails>
+ *     <MediaGallery.ThumbnailRepeater>
+ *       <MediaGallery.ThumbnailItem />
+ *     </MediaGallery.ThumbnailRepeater>
+ *   </MediaGallery.Thumbnails>
+ * </Product.MediaGallery>
+ *
+ * // Simple usage
+ * <Product.MediaGallery>
+ *   <MediaGallery.Viewport className="rounded-lg" />
+ * </Product.MediaGallery>
+ * ```
+ */
+export const ProductMediaGallery = React.forwardRef((props, ref) => {
+    const { children, infinite, autoPlay, ...otherProps } = props;
+    return (_jsx(CoreProduct.Media, { children: ({ mediaItems, mainMedia }) => {
+            const media = mediaItems.length > 0 ? mediaItems : mainMedia ? [mainMedia] : [];
+            const mediaGalleryServiceConfig = {
+                media,
+                infinite,
+                autoPlay,
+            };
+            const attributes = {
+                'data-testid': TestIds.productMediaGallery,
+            };
+            return (_jsx("div", { ...attributes, ref: ref, ...otherProps, children: _jsx(MediaGallery.Root, { mediaGalleryServiceConfig: mediaGalleryServiceConfig, children: children }) }));
+        } }));
+});
+/**
+ * Alias for ProductMediaGallery to match the documented API
+ */
+export { ProductMediaGallery as MediaGallery };

package/cjs/dist/react/ProductList.d.ts

@@ -0,0 +1,163 @@
+import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import React from 'react';
+import type { ProductsListSearchServiceConfig } from '../services/products-list-search-service.js';
+import type { ProductsListServiceConfig } from '../services/products-list-service.js';
+import { type AsChildProps } from '../utils/renderAsChild.js';
+/**
+ * Props for the ProductList root component following the documented API
+ */
+export interface ProductListRootProps {
+    children: React.ReactNode;
+    products?: V3Product[];
+    productsListConfig?: ProductsListServiceConfig;
+    productsListSearchConfig?: ProductsListSearchServiceConfig;
+    className?: string;
+}
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<ProductListRootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Raw component
+ */
+export interface RawProps {
+    children: ((props: {
+        totalProducts: number;
+        displayedProducts: number;
+        isFiltered: boolean;
+    }) => React.ReactNode) | React.ReactNode;
+}
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Products component
+ */
+export interface ProductsProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    infiniteScroll?: boolean;
+    pageSize?: number;
+    className?: string;
+}
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export declare const Products: React.ForwardRefExoticComponent<ProductsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList ProductRepeater component
+ */
+export interface ProductRepeaterProps {
+    children: React.ReactNode;
+}
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern.
+ * Note: Repeater components do NOT support asChild as per architecture rules.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ *   <Product.MediaGallery>
+ *     <MediaGallery.Viewport />
+ *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export declare const ProductRepeater: React.ForwardRefExoticComponent<ProductRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList LoadMoreTrigger component
+ */
+export interface LoadMoreTriggerProps {
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.LoadMoreTrigger asChild>
+ *   <button>Load More</button>
+ * </ProductList.LoadMoreTrigger>
+ * ```
+ */
+export declare const LoadMoreTrigger: React.ForwardRefExoticComponent<LoadMoreTriggerProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for ProductList Totals Displayed component
+ */
+export interface TotalsDisplayedProps extends AsChildProps<{
+    displayedProducts: number;
+}> {
+}
+/**
+ * Displays the number of products currently displayed.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.TotalsDisplayed />
+ * // or with asChild
+ * <ProductList.TotalsDisplayed asChild>
+ *   <strong />
+ * </ProductList.TotalsDisplayed>
+ * // or with render function
+ * <ProductList.TotalsDisplayed asChild>
+ *   {({ displayedProducts }, ref) => <strong ref={ref}>{displayedProducts}</strong>}
+ * </ProductList.TotalsDisplayed>
+ * ```
+ */
+export declare const TotalsDisplayed: React.ForwardRefExoticComponent<TotalsDisplayedProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/ProductList.js

@@ -0,0 +1,235 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { ProductsListServiceDefinition } from '../services/products-list-service.js';
+import * as CoreProductList from './core/ProductList.js';
+import * as CoreProductListPagination from './core/ProductListPagination.js';
+import * as Product from './Product.js';
+import { renderAsChild } from '../utils/renderAsChild.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["productListRoot"] = "product-list-root";
+    TestIds["productListProducts"] = "product-list-products";
+    TestIds["productListItem"] = "product-list-item";
+    TestIds["productListLoadMore"] = "product-list-load-more";
+    TestIds["productListTotalsDisplayed"] = "product-list-totals-displayed";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides the ProductList service context for rendering product lists.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { ProductList } from '@wix/stores/components';
+ *
+ * function ProductListPage({ products }) {
+ *   return (
+ *     <ProductList.Root products={products}>
+ *       <ProductList.Products>
+ *         <ProductList.ProductRepeater>
+ *           <Product.Name />
+ *           <Product.Price />
+ *         </ProductList.ProductRepeater>
+ *       </ProductList.Products>
+ *     </ProductList.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, products, productsListConfig, productsListSearchConfig, className, } = props;
+    const serviceConfig = productsListConfig || {
+        products: products || [],
+        searchOptions: {
+            cursorPaging: { limit: 10 },
+        },
+        pagingMetadata: {
+            count: products?.length || 0,
+        },
+        aggregations: {}, // Empty aggregation data
+    };
+    return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, productsListSearchConfig: productsListSearchConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
+});
+/**
+ * Internal component to handle the Root content with service access
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const contextProducts = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = contextProducts.length;
+    const totalProducts = pagingMetadata.count || contextProducts.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    const attributes = {
+        'data-testid': TestIds.productListRoot,
+        'data-total-products': totalProducts,
+        'data-displayed-products': displayedProducts,
+        'data-filtered': isFiltered,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Raw component that provides direct access to product list data.
+ * Similar to Product.Raw, this should only be used when you need custom access to list data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Raw>
+ *   {({ totalProducts, displayedProducts, isFiltered }) => (
+ *     <div className="text-content-muted">
+ *       Showing {displayedProducts} of {totalProducts} products
+ *       {isFiltered && <span className="ml-2 text-brand-primary">(Filtered)</span>}
+ *     </div>
+ *   )}
+ * </ProductList.Raw>
+ * ```
+ */
+export const Raw = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const pagingMetadata = productsListService.pagingMetadata.get();
+    const displayedProducts = products.length;
+    const totalProducts = pagingMetadata.count || products.length;
+    const isFiltered = false; // TODO: Implement filtering detection
+    return typeof children === 'function'
+        ? children({ totalProducts, displayedProducts, isFiltered })
+        : children;
+});
+/**
+ * Container for the product list with empty state support.
+ * Follows List Container Level pattern.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.Products emptyState={<div>No products found</div>}>
+ *   <ProductList.ProductRepeater>
+ *     <Product.Name />
+ *     <Product.Price />
+ *   </ProductList.ProductRepeater>
+ * </ProductList.Products>
+ * ```
+ */
+export const Products = React.forwardRef((props, ref) => {
+    const { children, emptyState, infiniteScroll = true, pageSize = 0, className, } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts) {
+        return emptyState || null;
+    }
+    const attributes = {
+        'data-testid': TestIds.productListProducts,
+        'data-empty': !hasProducts,
+        'data-infinite-scroll': infiniteScroll,
+        'data-page-size': pageSize,
+        className,
+    };
+    return (_jsx("div", { ...attributes, ref: ref, children: children }));
+});
+/**
+ * Repeater component that renders Product.Root for each product.
+ * Follows Repeater Level pattern.
+ * Note: Repeater components do NOT support asChild as per architecture rules.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.ProductRepeater>
+ *   <Product.Name />
+ *   <Product.Price />
+ *   <Product.MediaGallery>
+ *     <MediaGallery.Viewport />
+ *   </Product.MediaGallery>
+ * </ProductList.ProductRepeater>
+ * ```
+ */
+export const ProductRepeater = React.forwardRef((props, _ref) => {
+    const { children } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const hasProducts = products.length > 0;
+    if (!hasProducts)
+        return null;
+    return (_jsx(_Fragment, { children: products.map((product) => (_jsx(Product.Root, { product: product, "data-testid": TestIds.productListItem, "data-product-id": product._id, "data-product-available": true, children: children }, product._id))) }));
+});
+/**
+ * Displays a button to load more products. Not rendered if infiniteScroll is false or no products are left to load.
+ * Follows the architecture rules - does not support asChild as it's a simple trigger component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.LoadMoreTrigger asChild>
+ *   <button>Load More</button>
+ * </ProductList.LoadMoreTrigger>
+ * ```
+ */
+export const LoadMoreTrigger = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    return (_jsx(CoreProductListPagination.LoadMoreTrigger, { children: ({ loadMore, hasMoreProducts, isLoading }) => {
+            // Don't render if no more products to load
+            if (!hasMoreProducts)
+                return null;
+            const handleClick = () => loadMore(10);
+            const attributes = {
+                'data-testid': TestIds.productListLoadMore,
+                className,
+                onClick: handleClick,
+                disabled: isLoading,
+            };
+            if (asChild && React.isValidElement(children)) {
+                return React.cloneElement(children, {
+                    ...attributes,
+                    onClick: handleClick,
+                    ref,
+                });
+            }
+            return (_jsx("button", { ...attributes, ref: ref, children: children }));
+        } }));
+});
+/**
+ * Displays the number of products currently displayed.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ProductList.TotalsDisplayed />
+ * // or with asChild
+ * <ProductList.TotalsDisplayed asChild>
+ *   <strong />
+ * </ProductList.TotalsDisplayed>
+ * // or with render function
+ * <ProductList.TotalsDisplayed asChild>
+ *   {({ displayedProducts }, ref) => <strong ref={ref}>{displayedProducts}</strong>}
+ * </ProductList.TotalsDisplayed>
+ * ```
+ */
+export const TotalsDisplayed = React.forwardRef((props, ref) => {
+    const { asChild, children, className } = props;
+    const productsListService = useService(ProductsListServiceDefinition);
+    const products = productsListService.products.get();
+    const displayedProducts = products.length;
+    const attributes = {
+        'data-testid': TestIds.productListTotalsDisplayed,
+        'data-displayed': displayedProducts,
+        className,
+    };
+    if (asChild) {
+        const rendered = renderAsChild({
+            children,
+            props: { displayedProducts },
+            ref,
+            content: displayedProducts.toString(),
+            attributes,
+        });
+        if (rendered)
+            return rendered;
+    }
+    return (_jsx("span", { ...attributes, ref: ref, children: displayedProducts }));
+});