@wix/headless-stores 0.0.56 → 0.0.58

package/dist/react/Product.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { renderAsChild } from '../utils/index.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
 import * as CoreProduct from './core/Product.js';
 import * as ProductVariantSelector from './core/ProductVariantSelector.js';
@@ -99,21 +99,7 @@ export function Root(props) {
 export const Name = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     return (_jsx(CoreProduct.Name, { children: ({ name }) => {
-            const attributes = {
-                'data-testid': TestIds.productName,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { name },
-                    ref,
-                    content: name,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { className: className, ...attributes, children: name }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
         } }));
 });
 /**
@@ -142,9 +128,6 @@ export const Name = React.forwardRef((props, ref) => {
 export const Description = React.forwardRef((props, ref) => {
     const { asChild, children, className, as = AsContent.Plain } = props;
     return (_jsx(CoreProduct.Description, { children: ({ description: richDescription, plainDescription }) => {
-            const attributes = {
-                'data-testid': TestIds.productDescription,
-            };
             // Determine which description to use based on the 'as' prop
             let description;
             switch (as) {
@@ -162,22 +145,13 @@ export const Description = React.forwardRef((props, ref) => {
                         : '';
                     break;
             }
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { description },
-                    ref,
-                    content: description,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            // Default rendering based on format
-            if (as === AsContent.Html) {
-                return (_jsx("div", { className: className, ...attributes, dangerouslySetInnerHTML: { __html: description } }));
+            // Handle default rendering based on format
+            if (!asChild || !children) {
+                if (as === AsContent.Html) {
+                    return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.productDescription, dangerouslySetInnerHTML: { __html: description } }));
+                }
             }
-            return (_jsx("div", { className: className, ...attributes, children: description }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productDescription, customElement: children, customElementProps: { description }, content: description, children: _jsx("div", { children: description }) }));
         } }));
 });
 /**
@@ -207,26 +181,10 @@ export const Description = React.forwardRef((props, ref) => {
 export const Price = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
-            const attributes = {
-                'data-testid': TestIds.productPrice,
-                'data-discounted': compareAtPrice !== null,
-            };
-            const priceData = {
-                price,
-                formattedPrice: price,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: priceData,
-                    ref,
-                    content: price,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("span", { className: className, ...attributes, ref: ref, children: price }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productPrice, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
+                    price,
+                    formattedPrice: price,
+                }, content: price, children: _jsx("span", { children: price }) }));
         } }));
 });
 /**
@@ -261,30 +219,14 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
     const { asChild, children, className } = props;
     const testId = TestIds.productCompareAtPrice;
     return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
-            const attributes = {
-                'data-testid': testId,
-                'data-discounted': compareAtPrice !== null,
-            };
             // Don't render anything if there's no compare-at price
             if (!compareAtPrice) {
                 return null;
             }
-            const priceData = {
-                price: compareAtPrice,
-                formattedPrice: compareAtPrice,
-            };
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: priceData,
-                    ref,
-                    content: compareAtPrice,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("span", { className: className, ...attributes, ref: ref, children: compareAtPrice }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, "data-discounted": compareAtPrice !== null, customElement: children, customElementProps: {
+                    price: compareAtPrice,
+                    formattedPrice: compareAtPrice,
+                }, content: compareAtPrice, children: _jsx("span", { children: compareAtPrice }) }));
         } }));
 });
 /**
@@ -310,25 +252,10 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
  * ```
  */
 export const Slug = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = 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 }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, customElement: children, customElementProps: { slug }, content: slug, children: _jsx("span", { children: slug }) }));
         } }));
 });
 /**
@@ -351,24 +278,13 @@ export const Slug = React.forwardRef((props, ref) => {
  * ```
  */
 export const Raw = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = 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;
+            if (!asChild || !children) {
+                return null;
+            }
+            return (_jsx(AsChildSlot, { ref: ref, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
         } }));
 });
 /**
@@ -414,7 +330,7 @@ export const Raw = React.forwardRef((props, ref) => {
  * ```
  */
 export const Variants = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     return (_jsx(ProductVariantSelector.Options, { children: ({ hasOptions, options }) => {
             if (!hasOptions)
                 return null;
@@ -422,24 +338,7 @@ export const Variants = React.forwardRef((props, ref) => {
                 hasOptions,
                 options,
             };
-            const attributes = {
-                'data-testid': TestIds.productVariants,
-            };
-            const content = (_jsx(VariantsContext.Provider, { value: contextValue, children: typeof children === 'function'
-                    ? null
-                    : children }));
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { hasOptions },
-                    ref,
-                    content,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+            return (_jsx(VariantsContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productVariants, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**
@@ -542,7 +441,7 @@ export const VariantOptionRepeater = React.forwardRef((props, _ref) => {
  * ```
  */
 export const Modifiers = React.forwardRef((props, ref) => {
-    const { asChild, children } = props;
+    const { asChild, children, className } = props;
     return (_jsx(ProductModifiers.Modifiers, { children: ({ hasModifiers, modifiers }) => {
             if (!hasModifiers)
                 return null;
@@ -550,24 +449,7 @@ export const Modifiers = React.forwardRef((props, ref) => {
                 hasModifiers,
                 modifiers,
             };
-            const attributes = {
-                'data-testid': TestIds.productModifiers,
-            };
-            const content = (_jsx(ModifiersContext.Provider, { value: contextValue, children: typeof children === 'function'
-                    ? null
-                    : children }));
-            if (asChild) {
-                const rendered = renderAsChild({
-                    children,
-                    props: { hasModifiers },
-                    ref,
-                    content,
-                    attributes,
-                });
-                if (rendered)
-                    return rendered;
-            }
-            return (_jsx("div", { ...attributes, ref: ref, children: content }));
+            return (_jsx(ModifiersContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productModifiers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
         } }));
 });
 /**

package/dist/react/ProductList.d.ts

@@ -2,7 +2,6 @@ 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
  */
@@ -139,9 +138,15 @@ export declare const LoadMoreTrigger: React.ForwardRefExoticComponent<LoadMoreTr
 /**
  * Props for ProductList Totals Displayed component
  */
-export interface TotalsDisplayedProps extends AsChildProps<{
-    displayedProducts: number;
-}> {
+export interface TotalsDisplayedProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLElement, {
+        displayedProducts: number;
+    }> | React.ForwardRefExoticComponent<any>;
+    /** CSS classes to apply to the default element */
+    className?: string;
 }
 /**
  * Displays the number of products currently displayed.

package/dist/react/ProductList.js

@@ -5,7 +5,7 @@ import { ProductsListServiceDefinition } from '../services/products-list-service
 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';
+import { AsChildSlot } from '@wix/headless-utils/react';
 var TestIds;
 (function (TestIds) {
     TestIds["productListRoot"] = "product-list-root";
@@ -48,6 +48,7 @@ export const Root = React.forwardRef((props, ref) => {
             count: products?.length || 0,
         },
         aggregations: {}, // Empty aggregation data
+        customizations: [],
     };
     return (_jsx(CoreProductList.Root, { productsListConfig: serviceConfig, productsListSearchConfig: productsListSearchConfig, children: _jsx(RootContent, { children: children, className: className, ref: ref }) }));
 });
@@ -177,20 +178,7 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
             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 }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: handleClick, disabled: isLoading, "data-testid": TestIds.productListLoadMore, customElement: children, children: _jsx("button", { children: children }) }));
         } }));
 });
 /**
@@ -215,21 +203,5 @@ export const TotalsDisplayed = React.forwardRef((props, ref) => {
     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 }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, children: _jsx("span", { children: displayedProducts }) }));
 });

package/dist/react/ProductListSort.d.ts

@@ -0,0 +1,14 @@
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { productsV3 } from '@wix/stores';
+import React from 'react';
+export interface ProductListSortProps {
+    children?: (props: {
+        currentSort: productsV3.V3ProductSearch['sort'];
+        sortOptions: SortPrimitive.SortOption[];
+        setSort: (sort: productsV3.V3ProductSearch['sort']) => void;
+    }) => React.ReactNode;
+    className?: string;
+    as?: 'select' | 'list';
+    asChild?: boolean;
+}
+export declare const ProductListSort: React.ForwardRefExoticComponent<ProductListSortProps & React.RefAttributes<HTMLElement>>;

package/dist/react/ProductListSort.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sort as SortPrimitive } from '@wix/headless-components/react';
+import { ProductListSort as ProductListSortPrimitive } from './core/ProductListSort.js';
+import React from 'react';
+export const ProductListSort = React.forwardRef(({ children, className, as, asChild }, ref) => {
+    return (_jsx(ProductListSortPrimitive, { children: ({ currentSort, sortOptions, setSort }) => {
+            if (asChild && children) {
+                return children({ currentSort, sortOptions, setSort });
+            }
+            return (_jsx(SortPrimitive.Root, { ref: ref, value: currentSort, onChange: (value) => {
+                    setSort(value);
+                }, sortOptions: sortOptions, as: as, className: className }));
+        } }));
+});

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

@@ -1,6 +1,7 @@
 import { type ProductsListServiceConfig } from '../../services/products-list-service.js';
 import { productsV3 } from '@wix/stores';
 import { ProductsListSearchServiceConfig } from '../../services/products-list-search-service.js';
+import { CategoriesListServiceConfig } from '../../services/categories-list-service.js';
 /**
  * Props for Root headless component
  */
@@ -11,6 +12,8 @@ export interface RootProps {
     productsListConfig: ProductsListServiceConfig;
     /** Configuration for the ProductListSearch service */
     productsListSearchConfig?: ProductsListSearchServiceConfig;
+    /** Configuration for the CategoriesList service */
+    categoriesListConfig?: CategoriesListServiceConfig;
 }
 /**
  * Root component that provides both ProductList and ProductListSearch service contexts to its children.

package/dist/react/core/ProductList.js

@@ -4,6 +4,7 @@ import { createServicesMap } from '@wix/services-manager';
 import { ProductListService, ProductsListServiceDefinition, } from '../../services/products-list-service.js';
 import { ProductService, ProductServiceDefinition, } from '../../services/product-service.js';
 import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from '../../services/products-list-search-service.js';
+import { CategoriesListService, CategoriesListServiceDefinition, } from '../../services/categories-list-service.js';
 /**
  * Root component that provides both ProductList and ProductListSearch service contexts to its children.
  * This component sets up the necessary services for managing products list state, including search,
@@ -64,6 +65,7 @@ import { ProductsListSearchService, ProductsListSearchServiceDefinition, } from
  */
 export function Root(props) {
     return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CategoriesListServiceDefinition, CategoriesListService, props.categoriesListConfig)
             .addService(ProductsListServiceDefinition, ProductListService, props.productsListConfig)
             .addService(ProductsListSearchServiceDefinition, ProductsListSearchService, props.productsListSearchConfig), children: props.children }));
 }

package/dist/react/core/ProductListFilters.d.ts

@@ -1,61 +1,6 @@
 import type { ReactNode } from 'react';
-import { type ProductOption, InventoryStatusType } from '../../services/products-list-search-service.js';
 import { Category } from '@wix/auto_sdk_categories_categories';
-/**
- * Props for InventoryStatus headless component
- */
-export interface InventoryStatusProps {
-    /** Content to display (can be a render function receiving inventory status controls or ReactNode) */
-    children: ((props: InventoryStatusRenderProps) => ReactNode) | ReactNode;
-}
-/**
- * Render props for InventoryStatus component
- */
-export interface InventoryStatusRenderProps {
-    /** Available inventory status options */
-    availableInventoryStatuses: InventoryStatusType[];
-    /** Currently selected inventory statuses */
-    selectedInventoryStatuses: InventoryStatusType[];
-    /** Function to toggle an inventory status filter */
-    toggleInventoryStatus: (status: InventoryStatusType) => void;
-}
-/**
- * Headless component for managing inventory status filters
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function InventoryStatusFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.InventoryStatus>
- *         {({ availableInventoryStatuses, selectedInventoryStatuses, toggleInventoryStatus }) => (
- *           <div>
- *             <h4>Inventory Status:</h4>
- *             {availableInventoryStatuses.map(status => (
- *               <label key={status}>
- *                 <input
- *                   type="checkbox"
- *                   checked={selectedInventoryStatuses.includes(status)}
- *                   onChange={() => toggleInventoryStatus(status)}
- *                 />
- *                 {status}
- *               </label>
- *             ))}
- *           </div>
- *         )}
- *       </ProductListFilters.InventoryStatus>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function InventoryStatus(props: InventoryStatusProps): ReactNode;
+import React from 'react';
 /**
  * Props for ResetTrigger headless component
  */
@@ -103,136 +48,19 @@ export interface ResetTriggerRenderProps {
  * ```
  */
 export declare function ResetTrigger(props: ResetTriggerProps): ReactNode;
-/**
- * Props for PriceRange headless component
- */
-export interface PriceRangeProps {
-    /** Content to display (can be a render function receiving price range controls or ReactNode) */
-    children: ((props: PriceRangeRenderProps) => ReactNode) | ReactNode;
-}
-/**
- * Render props for PriceRange component
- */
-export interface PriceRangeRenderProps {
-    /** Current minimum price filter value */
-    selectedMinPrice: number;
-    /** Current maximum price filter value */
-    selectedMaxPrice: number;
-    /** Catalog minimum price */
-    availableMinPrice: number;
-    /** Catalog maximum price */
-    availableMaxPrice: number;
-    /** Function to update the minimum price filter */
-    setSelectedMinPrice: (minPrice: number) => void;
-    /** Function to update the maximum price filter */
-    setSelectedMaxPrice: (maxPrice: number) => void;
-}
-/**
- * Headless component for managing price range filters (combined min/max)
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function PriceRangeFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.PriceRange>
- *         {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
- *           <div className="price-range">
- *             <h4>Price Range:</h4>
- *             <div className="price-inputs">
- *               <input
- *                 type="number"
- *                 value={minPrice}
- *                 onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
- *                 placeholder="Min"
- *               />
- *               <span>to</span>
- *               <input
- *                 type="number"
- *                 value={maxPrice}
- *                 onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
- *                 placeholder="Max"
- *               />
- *             </div>
- *           </div>
- *         )}
- *       </ProductListFilters.PriceRange>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function PriceRange(props: PriceRangeProps): ReactNode;
 export interface CategoryFilterRenderProps {
     selectedCategory: Category | null;
-    setSelectedCategory: (category: Category | null) => void;
+    setSelectedCategory: (category: Category) => void;
 }
 export interface CategoryFilterProps {
     /** Content to display (can be a render function receiving category data or ReactNode) */
     children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
 }
 export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
-/**
- * Props for ProductOptions headless component
- */
-export interface ProductOptionsProps {
-    /** Content to display (can be a render function receiving product option data or ReactNode) */
-    children: ((props: ProductOptionRenderProps) => ReactNode) | ReactNode;
+interface FilterProps {
+    children: ReactNode;
+    asChild?: boolean;
+    className?: string;
 }
-/**
- * Render props for ProductOption component
- */
-export interface ProductOptionRenderProps {
-    /** Product option data */
-    option: ProductOption;
-    /** Currently selected choice IDs for this option */
-    selectedChoices: string[];
-    /** Function to toggle a choice selection */
-    toggleChoice: (choiceId: string) => void;
-}
-/**
- * Headless component that renders content for each product option in the list.
- * Maps over all available product options and provides each option through a render prop.
- * Only renders when options are available (not loading, no error, and has options).
- * This follows the same collection pattern as ProductList.ItemContent and CategoryList.ItemContent.
- *
- * @component
- * @example
- * ```tsx
- * import { ProductList, ProductListFilters } from '@wix/stores/components';
- *
- * function ProductOptionsFilter() {
- *   return (
- *     <ProductList.Root
- *       productsListConfig={{ products: [], searchOptions: {}, pagingMetadata: {}, aggregations: {} }}
- *       productsListSearchConfig={{ customizations: [] }}
- *     >
- *       <ProductListFilters.ProductOptions>
- *         {({ option, selectedChoices, toggleChoice }) => (
- *           <div key={option.id}>
- *             <h4>{option.name}</h4>
- *             {option.choices.map(choice => (
- *               <label key={choice.id}>
- *                 <input
- *                   type="checkbox"
- *                   checked={selectedChoices.includes(choice.id)}
- *                   onChange={() => toggleChoice(choice.id)}
- *                 />
- *                 {choice.name}
- *               </label>
- *             ))}
- *           </div>
- *         )}
- *       </ProductListFilters.ProductOptions>
- *     </ProductList.Root>
- *   );
- * }
- * ```
- */
-export declare function ProductOptions(props: ProductOptionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLDivElement>>;
+export {};