@wix/headless-stores 0.0.86 → 0.0.88

package/cjs/dist/react/Category.js

@@ -81,7 +81,7 @@ export function Root(props) {
  * ```
  */
 export const Trigger = React.forwardRef((props, ref) => {
-    const { asChild, children, onSelect, className } = props;
+    const { asChild, children, onSelect, className, ...otherProps } = props;
     const { category, isSelected, setSelectedCategory } = useCategoryContext();
     const handleSelect = () => {
         // Use CategoryFilter's setSelectedCategory function
@@ -101,7 +101,7 @@ export const Trigger = React.forwardRef((props, ref) => {
             category,
             isSelected,
             onSelect: handleSelect,
-        }, content: category.name, children: _jsx("button", { children: category.name }) }));
+        }, content: category.name, ...otherProps, children: _jsx("button", { children: category.name }) }));
 });
 /**
  * Displays the category name or label.

package/cjs/dist/react/Choice.js

@@ -78,7 +78,7 @@ export const Root = React.forwardRef((props, ref) => {
  * - `disabled` - Is Choice disabled (not in stock)
  */
 export const Text = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -91,7 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, ...otherProps, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -127,7 +127,7 @@ export const Text = React.forwardRef((props, ref) => {
  * - `disabled` - Is Choice disabled (not in stock)
  */
 export const Color = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -144,7 +144,7 @@ export const Color = React.forwardRef((props, ref) => {
             colorCode: colorCode || '',
             name: value,
             id: choiceId || '',
-        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
+        }, ...otherProps, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -180,7 +180,7 @@ export const Color = React.forwardRef((props, ref) => {
  * - `data-selected` - Is Choice selected
  */
 export const FreeText = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -205,6 +205,6 @@ export const FreeText = React.forwardRef((props, ref) => {
                     defaultAddedPrice: choice?.addedPrice || undefined,
                     title: choice?.name || undefined,
                     onChange: handleChange,
-                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
+                }, ...otherProps, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

package/cjs/dist/react/Option.js

@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className, ...otherProps } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,7 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -141,12 +141,12 @@ export const OptionContext = React.createContext(null);
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const optionData = React.useContext(OptionContext);
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, ...otherProps, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/cjs/dist/react/Product.js

@@ -117,9 +117,9 @@ export function Root(props) {
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProduct.Name, { 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productName, customElement: children, customElementProps: { name }, content: name, ...otherProps, children: _jsx("div", { children: name }) }));
         } }));
 });
 /**
@@ -146,7 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
  * ```
  */
 export const Description = React.forwardRef((props, ref) => {
-    const { asChild, children, className, as = AsContent.Plain } = props;
+    const { asChild, children, className, as = AsContent.Plain, ...otherProps } = props;
     return (_jsx(CoreProduct.Description, { children: ({ description: richDescription, plainDescription }) => {
             // Determine which description to use based on the 'as' prop
             let description;
@@ -171,7 +171,7 @@ export const Description = React.forwardRef((props, ref) => {
                     return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.productDescription, dangerouslySetInnerHTML: { __html: 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productDescription, customElement: children, customElementProps: { description }, content: description, ...otherProps, children: _jsx("div", { children: description }) }));
         } }));
 });
 /**
@@ -199,12 +199,12 @@ export const Description = React.forwardRef((props, ref) => {
  * ```
  */
 export const Price = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
             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 }) }));
+                }, content: price, ...otherProps, children: _jsx("span", { children: price }) }));
         } }));
 });
 /**
@@ -236,7 +236,7 @@ export const Price = React.forwardRef((props, ref) => {
  * ```
  */
 export const CompareAtPrice = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productCompareAtPrice;
     return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
             // Don't render anything if there's no compare-at price
@@ -246,7 +246,7 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
             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 }) }));
+                }, content: compareAtPrice, ...otherProps, children: _jsx("span", { children: compareAtPrice }) }));
         } }));
 });
 /**
@@ -272,10 +272,10 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
  * ```
  */
 export const Slug = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productSlug;
     return (_jsx(CoreProduct.Slug, { 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, customElement: children, customElementProps: { slug }, content: slug, ...otherProps, children: _jsx("span", { children: slug }) }));
         } }));
 });
 /**
@@ -298,13 +298,13 @@ export const Slug = React.forwardRef((props, ref) => {
  * ```
  */
 export const Raw = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProduct.Content, { children: ({ product }) => {
             // Raw component should not render anything by default when not using asChild
             if (!asChild || !children) {
                 return null;
             }
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product }, ...otherProps }));
         } }));
 });
 /**

package/cjs/dist/react/ProductList.js

@@ -212,11 +212,11 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
  * ```
  */
 export const TotalsDisplayed = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const productsListService = useService(ProductsListServiceDefinition);
     const products = productsListService.products.get();
     const displayedProducts = products.length;
-    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 }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, ...otherProps, children: _jsx("span", { children: displayedProducts }) }));
 });
 /**
  * Sort component for product lists that provides sorting functionality.
@@ -302,8 +302,8 @@ export const Sort = React.forwardRef(({ children, className, as, asChild }, ref)
  * ```
  */
 const FilterRoot = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, children: _jsx("div", { children: children }) }) }));
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, ...otherProps, children: _jsx("div", { children: children }) }) }));
 });
 FilterRoot.displayName = 'ProductList.Filter';
 export const Filter = {
@@ -340,7 +340,7 @@ export const Filter = {
  * ```
  */
 export const FilterResetTrigger = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const label = props.label || 'Reset All Filters';
     return (_jsx(CoreProductListFilters.ResetTrigger, { children: ({ resetFilters, isFiltered }) => {
             if (!isFiltered) {
@@ -349,7 +349,7 @@ export const FilterResetTrigger = React.forwardRef((props, ref) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: resetFilters, disabled: !isFiltered, "data-testid": TestIds.productListFilterResetTrigger, "data-filtered": isFiltered ? 'true' : 'false', customElement: children, customElementProps: {
                     resetFilters,
                     isFiltered,
-                }, content: label, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
+                }, content: label, ...otherProps, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
         } }));
 });
 FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
@@ -379,14 +379,14 @@ FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
  * ```
  */
 export const Error = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProductList.Error, { children: ({ error }) => {
             if (!error) {
                 return null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListError, "data-error": error, customElement: children, customElementProps: {
                     error,
-                }, content: error, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+                }, content: error, ...otherProps, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
         } }));
 });
 Error.displayName = 'ProductList.Error';

package/cjs/dist/utils/index.d.ts

@@ -1,2 +1 @@
 export declare function getCheckoutUrlForProduct(productId: string, variantId?: string): Promise<string>;
-export * from './renderAsChild.js';

package/cjs/dist/utils/index.js

@@ -28,4 +28,3 @@ export async function getCheckoutUrlForProduct(productId, variantId) {
     });
     return redirectSession?.fullUrl;
 }
-export * from './renderAsChild.js';

package/dist/react/Category.js

@@ -81,7 +81,7 @@ export function Root(props) {
  * ```
  */
 export const Trigger = React.forwardRef((props, ref) => {
-    const { asChild, children, onSelect, className } = props;
+    const { asChild, children, onSelect, className, ...otherProps } = props;
     const { category, isSelected, setSelectedCategory } = useCategoryContext();
     const handleSelect = () => {
         // Use CategoryFilter's setSelectedCategory function
@@ -101,7 +101,7 @@ export const Trigger = React.forwardRef((props, ref) => {
             category,
             isSelected,
             onSelect: handleSelect,
-        }, content: category.name, children: _jsx("button", { children: category.name }) }));
+        }, content: category.name, ...otherProps, children: _jsx("button", { children: category.name }) }));
 });
 /**
  * Displays the category name or label.

package/dist/react/Choice.js

@@ -78,7 +78,7 @@ export const Root = React.forwardRef((props, ref) => {
  * - `disabled` - Is Choice disabled (not in stock)
  */
 export const Text = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -91,7 +91,7 @@ export const Text = React.forwardRef((props, ref) => {
     if (!isVisible)
         return null;
     const choiceId = choice?.choiceId || '';
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, children: _jsx("button", { children: value }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.choiceText, "data-selected": isSelected ? 'true' : 'false', disabled: !isInStock && !isPreOrderEnabled, onClick: select, customElement: children, customElementProps: { id: choiceId, value }, content: value, ...otherProps, children: _jsx("button", { children: value }) }));
 });
 /**
  * Color swatch choice.
@@ -127,7 +127,7 @@ export const Text = React.forwardRef((props, ref) => {
  * - `disabled` - Is Choice disabled (not in stock)
  */
 export const Color = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -144,7 +144,7 @@ export const Color = React.forwardRef((props, ref) => {
             colorCode: colorCode || '',
             name: value,
             id: choiceId || '',
-        }, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
+        }, ...otherProps, children: _jsx("button", { style: { backgroundColor: colorCode }, title: value }) }));
 });
 /**
  * Provides a free text input for variant selection.
@@ -180,7 +180,7 @@ export const Color = React.forwardRef((props, ref) => {
  * - `data-selected` - Is Choice selected
  */
 export const FreeText = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const choiceContext = React.useContext(ChoiceContext);
     if (!choiceContext) {
         return null; // Should be used within Option.ChoiceRepeater
@@ -205,6 +205,6 @@ export const FreeText = React.forwardRef((props, ref) => {
                     defaultAddedPrice: choice?.addedPrice || undefined,
                     title: choice?.name || undefined,
                     onChange: handleChange,
-                }, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
+                }, ...otherProps, children: _jsx("textarea", { placeholder: placeholder, rows: 3, value: value, maxLength: maxChars, onChange: handleChange }) }));
         } }));
 });

package/dist/react/Option.js

@@ -93,7 +93,7 @@ var TestIds;
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
-    const { asChild, children, option, onValueChange, allowedTypes, className } = props;
+    const { asChild, children, option, onValueChange, allowedTypes, className, ...otherProps } = props;
     // Determine the option type based on the option name and available choices
     const getOptionType = () => {
         if (option.type === 'FREE_TEXT') {
@@ -113,7 +113,7 @@ export const Root = React.forwardRef((props, ref) => {
         allowedTypes,
         mandatory: option?.mandatory || false,
     };
-    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+    return (_jsx(OptionContext.Provider, { value: contextValue, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionRoot, "data-type": optionType, customElement: children, customElementProps: { option, onValueChange, allowedTypes }, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
 });
 // Create a context to pass option data down
 export const OptionContext = React.createContext(null);
@@ -141,12 +141,12 @@ export const OptionContext = React.createContext(null);
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const optionData = React.useContext(OptionContext);
     if (!optionData)
         return null;
     const name = optionData.name || '';
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, children: _jsx("div", { children: name }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.optionName, customElement: children, customElementProps: { name }, content: name, ...otherProps, children: _jsx("div", { children: name }) }));
 });
 /**
  * Displays the mandatory indicator (asterisk) when the option is required.

package/dist/react/Product.js

@@ -117,9 +117,9 @@ export function Root(props) {
  * ```
  */
 export const Name = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProduct.Name, { 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productName, customElement: children, customElementProps: { name }, content: name, ...otherProps, children: _jsx("div", { children: name }) }));
         } }));
 });
 /**
@@ -146,7 +146,7 @@ export const Name = React.forwardRef((props, ref) => {
  * ```
  */
 export const Description = React.forwardRef((props, ref) => {
-    const { asChild, children, className, as = AsContent.Plain } = props;
+    const { asChild, children, className, as = AsContent.Plain, ...otherProps } = props;
     return (_jsx(CoreProduct.Description, { children: ({ description: richDescription, plainDescription }) => {
             // Determine which description to use based on the 'as' prop
             let description;
@@ -171,7 +171,7 @@ export const Description = React.forwardRef((props, ref) => {
                     return (_jsx("div", { ref: ref, className: className, "data-testid": TestIds.productDescription, dangerouslySetInnerHTML: { __html: 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productDescription, customElement: children, customElementProps: { description }, content: description, ...otherProps, children: _jsx("div", { children: description }) }));
         } }));
 });
 /**
@@ -199,12 +199,12 @@ export const Description = React.forwardRef((props, ref) => {
  * ```
  */
 export const Price = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(SelectedVariant.Price, { children: ({ price, compareAtPrice }) => {
             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 }) }));
+                }, content: price, ...otherProps, children: _jsx("span", { children: price }) }));
         } }));
 });
 /**
@@ -236,7 +236,7 @@ export const Price = React.forwardRef((props, ref) => {
  * ```
  */
 export const CompareAtPrice = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productCompareAtPrice;
     return (_jsx(SelectedVariant.Price, { children: ({ compareAtPrice }) => {
             // Don't render anything if there's no compare-at price
@@ -246,7 +246,7 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
             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 }) }));
+                }, content: compareAtPrice, ...otherProps, children: _jsx("span", { children: compareAtPrice }) }));
         } }));
 });
 /**
@@ -272,10 +272,10 @@ export const CompareAtPrice = React.forwardRef((props, ref) => {
  * ```
  */
 export const Slug = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const testId = TestIds.productSlug;
     return (_jsx(CoreProduct.Slug, { 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 }) }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": testId, customElement: children, customElementProps: { slug }, content: slug, ...otherProps, children: _jsx("span", { children: slug }) }));
         } }));
 });
 /**
@@ -298,13 +298,13 @@ export const Slug = React.forwardRef((props, ref) => {
  * ```
  */
 export const Raw = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProduct.Content, { children: ({ product }) => {
             // Raw component should not render anything by default when not using asChild
             if (!asChild || !children) {
                 return null;
             }
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product } }));
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productRaw, customElement: children, customElementProps: { product }, ...otherProps }));
         } }));
 });
 /**

package/dist/react/ProductList.js

@@ -212,11 +212,11 @@ export const LoadMoreTrigger = React.forwardRef((props, ref) => {
  * ```
  */
 export const TotalsDisplayed = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const productsListService = useService(ProductsListServiceDefinition);
     const products = productsListService.products.get();
     const displayedProducts = products.length;
-    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 }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListTotalsDisplayed, "data-displayed": displayedProducts, customElement: children, customElementProps: { displayedProducts }, content: displayedProducts, ...otherProps, children: _jsx("span", { children: displayedProducts }) }));
 });
 /**
  * Sort component for product lists that provides sorting functionality.
@@ -302,8 +302,8 @@ export const Sort = React.forwardRef(({ children, className, as, asChild }, ref)
  * ```
  */
 const FilterRoot = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
-    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, children: _jsx("div", { children: children }) }) }));
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreProductListFilters.FilterRoot, { asChild: asChild, className: className, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListFilter, customElement: children, ...otherProps, children: _jsx("div", { children: children }) }) }));
 });
 FilterRoot.displayName = 'ProductList.Filter';
 export const Filter = {
@@ -340,7 +340,7 @@ export const Filter = {
  * ```
  */
 export const FilterResetTrigger = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     const label = props.label || 'Reset All Filters';
     return (_jsx(CoreProductListFilters.ResetTrigger, { children: ({ resetFilters, isFiltered }) => {
             if (!isFiltered) {
@@ -349,7 +349,7 @@ export const FilterResetTrigger = React.forwardRef((props, ref) => {
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, onClick: resetFilters, disabled: !isFiltered, "data-testid": TestIds.productListFilterResetTrigger, "data-filtered": isFiltered ? 'true' : 'false', customElement: children, customElementProps: {
                     resetFilters,
                     isFiltered,
-                }, content: label, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
+                }, content: label, ...otherProps, children: _jsx("button", { disabled: !isFiltered, children: label }) }));
         } }));
 });
 FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
@@ -379,14 +379,14 @@ FilterResetTrigger.displayName = 'ProductList.FilterResetTrigger';
  * ```
  */
 export const Error = React.forwardRef((props, ref) => {
-    const { asChild, children, className } = props;
+    const { asChild, children, className, ...otherProps } = props;
     return (_jsx(CoreProductList.Error, { children: ({ error }) => {
             if (!error) {
                 return null;
             }
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productListError, "data-error": error, customElement: children, customElementProps: {
                     error,
-                }, content: error, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
+                }, content: error, ...otherProps, children: _jsx("div", { className: "text-status-error text-sm sm:text-base", children: error }) }));
         } }));
 });
 Error.displayName = 'ProductList.Error';

package/dist/utils/index.d.ts

@@ -1,2 +1 @@
 export declare function getCheckoutUrlForProduct(productId: string, variantId?: string): Promise<string>;
-export * from './renderAsChild.js';

package/dist/utils/index.js

@@ -28,4 +28,3 @@ export async function getCheckoutUrlForProduct(productId, variantId) {
     });
     return redirectSession?.fullUrl;
 }
-export * from './renderAsChild.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",
@@ -62,12 +62,14 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1278",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-components": "0.0.12",
-    "@wix/headless-ecom": "0.0.27",
-    "@wix/headless-media": "0.0.11",
+    "@wix/headless-ecom": "0.0.29",
+    "@wix/headless-media": "0.0.12",
     "@wix/headless-utils": "0.0.3",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"
+  },
+  "peerDependencies": {
+    "@wix/headless-components": "0.0.12"
   }
 }

package/cjs/dist/utils/renderAsChild.d.ts

@@ -1,96 +0,0 @@
-import React from 'react';
-/**
- * Function signature for render function pattern
- */
-export type AsChildRenderFunction<TProps = any> = (props: TProps, ref: React.Ref<HTMLElement>) => React.ReactNode;
-/**
- * Object with render method pattern
- */
-export type AsChildRenderObject<TProps = any> = {
-    render: AsChildRenderFunction<TProps>;
-};
-/**
- * Union type for all supported asChild patterns
- */
-export type AsChildChildren<TProps = any> = React.ReactElement | AsChildRenderFunction<TProps> | AsChildRenderObject<TProps>;
-/**
- * Generic interface for components that support asChild pattern.
- * This interface can be extended by specific components to add their own props.
- *
- * @template TData - The shape of the data object passed to asChild render functions
- * @template TProps - Additional props specific to the component
- *
- * @example
- * ```tsx
- * // For a component that provides name data
- * interface NameProps extends AsChildProps<{ name: string }> {
- *   // className is already included from AsChildProps
- * }
- *
- * // For a component that provides description data
- * interface DescriptionProps extends AsChildProps<{ description: string }> {
- *   as?: "plain" | "html";
- *   // className is already included from AsChildProps
- * }
- * ```
- */
-export interface AsChildProps<TData extends Record<string, any> = Record<string, any>, TProps = {}> {
-    /** When true, renders as a child component instead of default element */
-    asChild?: boolean;
-    /** Custom render function or React element when using asChild */
-    children?: AsChildChildren<TData & TProps>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-/**
- * Parameters for the renderAsChild utility function
- */
-export interface RenderAsChildParams<TProps = any> {
-    /** The children to render (React element, function, or render object) */
-    children: AsChildChildren<TProps> | undefined;
-    /** Props to pass to render functions */
-    props: TProps;
-    /** Ref to forward to the rendered element */
-    ref: React.Ref<HTMLElement>;
-    /** Content to pass as children to React elements */
-    content?: React.ReactNode;
-    /** Additional attributes to merge into cloned React elements */
-    attributes?: Record<string, any>;
-}
-/**
- * Utility function to handle asChild prop with different rendering patterns.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Clones the element and forwards the ref and attributes
- *    ```tsx
- *    <Component asChild><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * 3. **Render Objects**: Calls the render method with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, ref, content, and attributes
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderAsChild({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- *   attributes: { "data-testid": "my-component" },
- * });
- * ```
- */
-export declare function renderAsChild<TProps = any>({ children, props, ref, content, attributes, }: RenderAsChildParams<TProps>): React.ReactNode | null;

package/cjs/dist/utils/renderAsChild.js

@@ -1,66 +0,0 @@
-import React from 'react';
-/**
- * Utility function to handle asChild prop with different rendering patterns.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Clones the element and forwards the ref and attributes
- *    ```tsx
- *    <Component asChild><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * 3. **Render Objects**: Calls the render method with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, ref, content, and attributes
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderAsChild({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- *   attributes: { "data-testid": "my-component" },
- * });
- * ```
- */
-export function renderAsChild({ children, props, ref, content, attributes, }) {
-    // Early return if no children provided
-    if (!children)
-        return null;
-    // Handle React element pattern
-    if (React.isValidElement(children)) {
-        return React.cloneElement(children, {
-            ref,
-            children: content,
-            ...attributes,
-        });
-    }
-    // Handle render function pattern
-    if (typeof children === 'function') {
-        return children({
-            ...props,
-            ...attributes,
-        }, ref);
-    }
-    // Handle render object pattern
-    if (children && typeof children === 'object' && 'render' in children) {
-        return children.render({
-            ...props,
-            ...attributes,
-        }, ref);
-    }
-    // Fallback for unknown patterns
-    return null;
-}

package/cjs/dist/utils/renderChildren.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-/**
- * Parameters for the renderAsChild utility function
- */
-export interface RenderChildrenParams<THTMLElement = HTMLElement, TProps = any> {
-    /** The children to render (React element, function, or render object) */
-    children: React.ReactNode | React.ForwardRefRenderFunction<THTMLElement, TProps> | undefined;
-    /** Props to pass to render functions */
-    props: TProps;
-    /** Ref to forward to the rendered element */
-    ref: React.Ref<THTMLElement>;
-    content?: string | null;
-}
-/**
- * Utility function to handle children rendering.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Returns the element
- *    ```tsx
- *    <Component><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, and ref
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderChildren({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- * });
- * ```
- */
-export declare function renderChildren<THTMLElement = HTMLElement, TProps = any>({ children, props, ref, content, }: RenderChildrenParams<THTMLElement, TProps>): React.ReactNode | null;

package/cjs/dist/utils/renderChildren.js

@@ -1,47 +0,0 @@
-import React from 'react';
-/**
- * Utility function to handle children rendering.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Returns the element
- *    ```tsx
- *    <Component><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, and ref
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderChildren({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- * });
- * ```
- */
-export function renderChildren({ children, props, ref, content, }) {
-    // Early return if no children provided
-    if (!children)
-        return null;
-    // Handle React element pattern
-    if (React.isValidElement(children)) {
-        return React.cloneElement(children, {
-            ref,
-            ...(content ? { children: content } : {}),
-        });
-    }
-    // Handle render function pattern
-    if (typeof children === 'function') {
-        return children(props, ref);
-    }
-    // Fallback for unknown patterns
-    return null;
-}

package/dist/utils/renderAsChild.d.ts

@@ -1,96 +0,0 @@
-import React from 'react';
-/**
- * Function signature for render function pattern
- */
-export type AsChildRenderFunction<TProps = any> = (props: TProps, ref: React.Ref<HTMLElement>) => React.ReactNode;
-/**
- * Object with render method pattern
- */
-export type AsChildRenderObject<TProps = any> = {
-    render: AsChildRenderFunction<TProps>;
-};
-/**
- * Union type for all supported asChild patterns
- */
-export type AsChildChildren<TProps = any> = React.ReactElement | AsChildRenderFunction<TProps> | AsChildRenderObject<TProps>;
-/**
- * Generic interface for components that support asChild pattern.
- * This interface can be extended by specific components to add their own props.
- *
- * @template TData - The shape of the data object passed to asChild render functions
- * @template TProps - Additional props specific to the component
- *
- * @example
- * ```tsx
- * // For a component that provides name data
- * interface NameProps extends AsChildProps<{ name: string }> {
- *   // className is already included from AsChildProps
- * }
- *
- * // For a component that provides description data
- * interface DescriptionProps extends AsChildProps<{ description: string }> {
- *   as?: "plain" | "html";
- *   // className is already included from AsChildProps
- * }
- * ```
- */
-export interface AsChildProps<TData extends Record<string, any> = Record<string, any>, TProps = {}> {
-    /** When true, renders as a child component instead of default element */
-    asChild?: boolean;
-    /** Custom render function or React element when using asChild */
-    children?: AsChildChildren<TData & TProps>;
-    /** CSS classes to apply to the default element */
-    className?: string;
-}
-/**
- * Parameters for the renderAsChild utility function
- */
-export interface RenderAsChildParams<TProps = any> {
-    /** The children to render (React element, function, or render object) */
-    children: AsChildChildren<TProps> | undefined;
-    /** Props to pass to render functions */
-    props: TProps;
-    /** Ref to forward to the rendered element */
-    ref: React.Ref<HTMLElement>;
-    /** Content to pass as children to React elements */
-    content?: React.ReactNode;
-    /** Additional attributes to merge into cloned React elements */
-    attributes?: Record<string, any>;
-}
-/**
- * Utility function to handle asChild prop with different rendering patterns.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Clones the element and forwards the ref and attributes
- *    ```tsx
- *    <Component asChild><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * 3. **Render Objects**: Calls the render method with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, ref, content, and attributes
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderAsChild({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- *   attributes: { "data-testid": "my-component" },
- * });
- * ```
- */
-export declare function renderAsChild<TProps = any>({ children, props, ref, content, attributes, }: RenderAsChildParams<TProps>): React.ReactNode | null;

package/dist/utils/renderAsChild.js

@@ -1,66 +0,0 @@
-import React from 'react';
-/**
- * Utility function to handle asChild prop with different rendering patterns.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Clones the element and forwards the ref and attributes
- *    ```tsx
- *    <Component asChild><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * 3. **Render Objects**: Calls the render method with props and ref
- *    ```tsx
- *    <Component asChild>
- *      {{ render: (props, ref) => <div ref={ref}>{props.content}</div> }}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, ref, content, and attributes
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderAsChild({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- *   attributes: { "data-testid": "my-component" },
- * });
- * ```
- */
-export function renderAsChild({ children, props, ref, content, attributes, }) {
-    // Early return if no children provided
-    if (!children)
-        return null;
-    // Handle React element pattern
-    if (React.isValidElement(children)) {
-        return React.cloneElement(children, {
-            ref,
-            children: content,
-            ...attributes,
-        });
-    }
-    // Handle render function pattern
-    if (typeof children === 'function') {
-        return children({
-            ...props,
-            ...attributes,
-        }, ref);
-    }
-    // Handle render object pattern
-    if (children && typeof children === 'object' && 'render' in children) {
-        return children.render({
-            ...props,
-            ...attributes,
-        }, ref);
-    }
-    // Fallback for unknown patterns
-    return null;
-}

package/dist/utils/renderChildren.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-/**
- * Parameters for the renderAsChild utility function
- */
-export interface RenderChildrenParams<THTMLElement = HTMLElement, TProps = any> {
-    /** The children to render (React element, function, or render object) */
-    children: React.ReactNode | React.ForwardRefRenderFunction<THTMLElement, TProps> | undefined;
-    /** Props to pass to render functions */
-    props: TProps;
-    /** Ref to forward to the rendered element */
-    ref: React.Ref<THTMLElement>;
-    content?: string | null;
-}
-/**
- * Utility function to handle children rendering.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Returns the element
- *    ```tsx
- *    <Component><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, and ref
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderChildren({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- * });
- * ```
- */
-export declare function renderChildren<THTMLElement = HTMLElement, TProps = any>({ children, props, ref, content, }: RenderChildrenParams<THTMLElement, TProps>): React.ReactNode | null;

package/dist/utils/renderChildren.js

@@ -1,47 +0,0 @@
-import React from 'react';
-/**
- * Utility function to handle children rendering.
- *
- * Supports three rendering patterns:
- * 1. **React Elements**: Returns the element
- *    ```tsx
- *    <Component><div>Content</div></Component>
- *    ```
- *
- * 2. **Render Functions**: Calls the function with props and ref
- *    ```tsx
- *    <Component>
- *      {(props, ref) => <div ref={ref}>{props.content}</div>}
- *    </Component>
- *    ```
- *
- * @param params - Configuration object with children, props, and ref
- * @returns Rendered React node or null if no valid children provided
- *
- * @example
- * ```tsx
- * const result = renderChildren({
- *   children: (props, ref) => <h1 ref={ref}>{props.title}</h1>,
- *   props: { title: "Hello World" },
- *   ref: myRef,
- * });
- * ```
- */
-export function renderChildren({ children, props, ref, content, }) {
-    // Early return if no children provided
-    if (!children)
-        return null;
-    // Handle React element pattern
-    if (React.isValidElement(children)) {
-        return React.cloneElement(children, {
-            ref,
-            ...(content ? { children: content } : {}),
-        });
-    }
-    // Handle render function pattern
-    if (typeof children === 'function') {
-        return children(props, ref);
-    }
-    // Fallback for unknown patterns
-    return null;
-}