@wix/headless-stores 0.0.38 → 0.0.40

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

@@ -1,5 +1,8 @@
-import type { PropsWithChildren, ReactNode } from "react";
 import { type CategoryServiceConfig } from "../services/category-service.js";
+export interface RootProps {
+    children: React.ReactNode;
+    categoryServiceConfig: CategoryServiceConfig;
+}
 /**
  * Root component that provides the Category service context to its children.
  * This component sets up the necessary services for managing category state.
@@ -24,15 +27,13 @@ import { type CategoryServiceConfig } from "../services/category-service.js";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    categoryServiceConfig: CategoryServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Name headless component
  */
 export interface NameProps {
     /** Content to display (can be a render function receiving name data or ReactNode) */
-    children: ((props: NameRenderProps) => ReactNode) | ReactNode;
+    children: ((props: NameRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Name component
@@ -60,13 +61,13 @@ export interface NameRenderProps {
  * }
  * ```
  */
-export declare function Name(props: NameProps): ReactNode;
+export declare function Name(props: NameProps): import("react").ReactNode;
 /**
  * Props for Slug headless component
  */
 export interface SlugProps {
     /** Content to display (can be a render function receiving slug data or ReactNode) */
-    children: ((props: SlugRenderProps) => ReactNode) | ReactNode;
+    children: ((props: SlugRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Slug component
@@ -94,4 +95,4 @@ export interface SlugRenderProps {
  * }
  * ```
  */
-export declare function Slug(props: SlugProps): ReactNode;
+export declare function Slug(props: SlugProps): import("react").ReactNode;

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

@@ -1,6 +1,9 @@
 import { type CategoriesListServiceConfig } from "../services/categories-list-service.js";
-import type { PropsWithChildren, ReactNode } from "react";
 import { categories } from "@wix/categories";
+export interface RootProps {
+    children: React.ReactNode;
+    categoriesListConfig: CategoriesListServiceConfig;
+}
 /**
  * Root component that provides the CategoryList service context to its children.
  * This component sets up the necessary services for managing categories list state.
@@ -26,15 +29,13 @@ import { categories } from "@wix/categories";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    categoriesListConfig: CategoriesListServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for EmptyState headless component
  */
 export interface EmptyStateProps {
     /** Content to display when categories list is empty (can be a render function or ReactNode) */
-    children: ((props: EmptyStateRenderProps) => ReactNode) | ReactNode;
+    children: ((props: EmptyStateRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for EmptyState component
@@ -64,13 +65,13 @@ export interface EmptyStateRenderProps {
  * }
  * ```
  */
-export declare function EmptyState(props: EmptyStateProps): ReactNode;
+export declare function EmptyState(props: EmptyStateProps): import("react").ReactNode;
 /**
  * Props for Loading headless component
  */
 export interface LoadingProps {
     /** Content to display during loading (can be a render function or ReactNode) */
-    children: ((props: LoadingRenderProps) => ReactNode) | ReactNode;
+    children: ((props: LoadingRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Loading component
@@ -100,13 +101,13 @@ export interface LoadingRenderProps {
  * }
  * ```
  */
-export declare function Loading(props: LoadingProps): ReactNode;
+export declare function Loading(props: LoadingProps): import("react").ReactNode;
 /**
  * Props for Error headless component
  */
 export interface ErrorProps {
     /** Content to display during error state (can be a render function or ReactNode) */
-    children: ((props: ErrorRenderProps) => ReactNode) | ReactNode;
+    children: ((props: ErrorRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Error component
@@ -141,13 +142,13 @@ export interface ErrorRenderProps {
  * }
  * ```
  */
-export declare function Error(props: ErrorProps): ReactNode;
+export declare function Error(props: ErrorProps): import("react").ReactNode;
 /**
  * Props for ItemContent headless component
  */
 export interface ItemContentProps {
     /** Content to display for each category (can be a render function receiving category data or ReactNode) */
-    children: ((props: ItemContentRenderProps) => ReactNode) | ReactNode;
+    children: ((props: ItemContentRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for ItemContent component

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

@@ -1,6 +1,9 @@
 import { ProductServiceConfig } from "../services/product-service.js";
 import type { V3Product, ProductMedia } from "@wix/auto_sdk_stores_products-v-3";
-import type { PropsWithChildren } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+    productServiceConfig: ProductServiceConfig;
+}
 /**
  * Root component that provides the Product service context to its children.
  * This component sets up the necessary services for rendering and managing a single product's data.
@@ -31,9 +34,7 @@ import type { PropsWithChildren } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{
-    productServiceConfig: ProductServiceConfig;
-}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for ProductName headless component
  */

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

@@ -25,11 +25,11 @@ export interface RootProps {
  *       }}
  *     >
  *       <ProductListFilters.MinPrice>
- *         {({ minPrice, setMinPrice }) => (
+ *         {({ minPrice, setSelectedMinPrice }) => (
  *           <input
  *             type="number"
  *             value={minPrice}
- *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *             placeholder="Min price"
  *           />
  *         )}
@@ -39,7 +39,7 @@ export interface RootProps {
  * }
  * ```
  */
-export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for InventoryStatus headless component
  */
@@ -144,13 +144,17 @@ export interface PriceRangeProps {
  */
 export interface PriceRangeRenderProps {
     /** Current minimum price filter value */
-    minPrice: number;
+    selectedMinPrice: number;
     /** Current maximum price filter value */
-    maxPrice: number;
+    selectedMaxPrice: number;
+    /** Catalog minimum price */
+    availableMinPrice: number;
+    /** Catalog maximum price */
+    availableMaxPrice: number;
     /** Function to update the minimum price filter */
-    setMinPrice: (minPrice: number) => void;
+    setSelectedMinPrice: (minPrice: number) => void;
     /** Function to update the maximum price filter */
-    setMaxPrice: (maxPrice: number) => void;
+    setSelectedMaxPrice: (maxPrice: number) => void;
 }
 /**
  * Headless component for managing price range filters (combined min/max)
@@ -163,21 +167,21 @@ export interface PriceRangeRenderProps {
  * function PriceRangeFilter() {
  *   return (
  *     <ProductListFilters.PriceRange>
- *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *       {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
  *         <div className="price-range">
  *           <h4>Price Range:</h4>
  *           <div className="price-inputs">
  *             <input
  *               type="number"
  *               value={minPrice}
- *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *               placeholder="Min"
  *             />
  *             <span>to</span>
  *             <input
  *               type="number"
  *               value={maxPrice}
- *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
  *               placeholder="Max"
  *             />
  *           </div>

package/cjs/dist/react/ProductListFilters.js

@@ -21,11 +21,11 @@ import { ProductsListFiltersService, ProductsListFiltersServiceDefinition, } fro
  *       }}
  *     >
  *       <ProductListFilters.MinPrice>
- *         {({ minPrice, setMinPrice }) => (
+ *         {({ minPrice, setSelectedMinPrice }) => (
  *           <input
  *             type="number"
  *             value={minPrice}
- *             onChange={(e) => setMinPrice(Number(e.target.value))}
+ *             onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *             placeholder="Min price"
  *           />
  *         )}
@@ -126,21 +126,21 @@ export function ResetTrigger(props) {
  * function PriceRangeFilter() {
  *   return (
  *     <ProductListFilters.PriceRange>
- *       {({ minPrice, maxPrice, setMinPrice, setMaxPrice }) => (
+ *       {({ minPrice, maxPrice, setSelectedMinPrice, setSelectedMaxPrice }) => (
  *         <div className="price-range">
  *           <h4>Price Range:</h4>
  *           <div className="price-inputs">
  *             <input
  *               type="number"
  *               value={minPrice}
- *               onChange={(e) => setMinPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMinPrice(Number(e.target.value))}
  *               placeholder="Min"
  *             />
  *             <span>to</span>
  *             <input
  *               type="number"
  *               value={maxPrice}
- *               onChange={(e) => setMaxPrice(Number(e.target.value))}
+ *               onChange={(e) => setSelectedMaxPrice(Number(e.target.value))}
  *               placeholder="Max"
  *             />
  *           </div>
@@ -153,12 +153,21 @@ export function ResetTrigger(props) {
  */
 export function PriceRange(props) {
     const service = useService(ProductsListFiltersServiceDefinition);
-    const minPrice = service.minPrice.get();
-    const maxPrice = service.maxPrice.get();
-    const setMinPrice = service.setMinPrice;
-    const setMaxPrice = service.setMaxPrice;
+    const selectedMinPrice = service.selectedMinPrice.get();
+    const availableMinPrice = service.availableMinPrice.get();
+    const selectedMaxPrice = service.selectedMaxPrice.get();
+    const availableMaxPrice = service.availableMaxPrice.get();
+    const setSelectedMinPrice = service.setSelectedMinPrice;
+    const setSelectedMaxPrice = service.setSelectedMaxPrice;
     return typeof props.children === "function"
-        ? props.children({ minPrice, maxPrice, setMinPrice, setMaxPrice })
+        ? props.children({
+            availableMinPrice,
+            selectedMinPrice,
+            selectedMaxPrice,
+            availableMaxPrice,
+            setSelectedMinPrice,
+            setSelectedMaxPrice,
+        })
         : props.children;
 }
 /**

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

@@ -1,4 +1,6 @@
-import type { PropsWithChildren, ReactNode } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductListPagination service context to its children.
  * This component sets up the necessary services for managing products list pagination.
@@ -27,13 +29,13 @@ import type { PropsWithChildren, ReactNode } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for PageSize headless component
  */
 export interface PageSizeProps {
     /** Content to display (can be a render function receiving page size controls or ReactNode) */
-    children: ((props: PageSizeRenderProps) => ReactNode) | ReactNode;
+    children: ((props: PageSizeRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for PageSize component
@@ -73,13 +75,13 @@ export interface PageSizeRenderProps {
  * }
  * ```
  */
-export declare function PageSize(props: PageSizeProps): ReactNode;
+export declare function PageSize(props: PageSizeProps): import("react").ReactNode;
 /**
  * Props for NextPageTrigger headless component
  */
 export interface NextPageTriggerProps {
     /** Content to display (can be a render function receiving next page controls or ReactNode) */
-    children: ((props: NextPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: NextPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for NextPageTrigger component
@@ -115,13 +117,13 @@ export interface NextPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function NextPageTrigger(props: NextPageTriggerProps): ReactNode;
+export declare function NextPageTrigger(props: NextPageTriggerProps): import("react").ReactNode;
 /**
  * Props for PreviousPageTrigger headless component
  */
 export interface PreviousPageTriggerProps {
     /** Content to display (can be a render function receiving previous page controls or ReactNode) */
-    children: ((props: PreviousPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: PreviousPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for PreviousPageTrigger component
@@ -157,20 +159,20 @@ export interface PreviousPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): ReactNode;
+export declare function PreviousPageTrigger(props: PreviousPageTriggerProps): import("react").ReactNode;
 /**
  * Props for FirstPageTrigger headless component
  */
 export interface FirstPageTriggerProps {
     /** Content to display (can be a render function receiving first page controls or ReactNode) */
-    children: ((props: FirstPageTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: FirstPageTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for FirstPageTrigger component
  */
 export interface FirstPageTriggerRenderProps {
     /** Function to navigate to the first page */
-    goToFirstPage: () => void;
+    navigateToFirstPage: () => void;
     /** Whether there is a previous page (indicating not on first page) */
     hasPrevPage: boolean;
 }
@@ -185,9 +187,9 @@ export interface FirstPageTriggerRenderProps {
  * function FirstPageButton() {
  *   return (
  *     <ProductListPagination.FirstPageTrigger>
- *       {({ goToFirstPage, hasPrevPage }) => (
+ *       {({ navigateToFirstPage, hasPrevPage }) => (
  *         <button
- *           onClick={goToFirstPage}
+ *           onClick={navigateToFirstPage}
  *           disabled={!hasPrevPage}
  *           title="Go to first page"
  *         >
@@ -199,13 +201,13 @@ export interface FirstPageTriggerRenderProps {
  * }
  * ```
  */
-export declare function FirstPageTrigger(props: FirstPageTriggerProps): ReactNode;
+export declare function FirstPageTrigger(props: FirstPageTriggerProps): import("react").ReactNode;
 /**
  * Props for LoadMoreTrigger headless component
  */
 export interface LoadMoreTriggerProps {
     /** Content to display (can be a render function receiving load more controls or ReactNode) */
-    children: ((props: LoadMoreTriggerRenderProps) => ReactNode) | ReactNode;
+    children: ((props: LoadMoreTriggerRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for LoadMoreTrigger component
@@ -243,4 +245,4 @@ export interface LoadMoreTriggerRenderProps {
  * }
  * ```
  */
-export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): ReactNode;
+export declare function LoadMoreTrigger(props: LoadMoreTriggerProps): import("react").ReactNode;

package/cjs/dist/react/ProductListPagination.js

@@ -148,9 +148,9 @@ export function PreviousPageTrigger(props) {
  * function FirstPageButton() {
  *   return (
  *     <ProductListPagination.FirstPageTrigger>
- *       {({ goToFirstPage, hasPrevPage }) => (
+ *       {({ navigateToFirstPage, hasPrevPage }) => (
  *         <button
- *           onClick={goToFirstPage}
+ *           onClick={navigateToFirstPage}
  *           disabled={!hasPrevPage}
  *           title="Go to first page"
  *         >
@@ -164,10 +164,10 @@ export function PreviousPageTrigger(props) {
  */
 export function FirstPageTrigger(props) {
     const service = useService(ProductsListPaginationServiceDefinition);
-    const goToFirstPage = service.goToFirstPage;
+    const navigateToFirstPage = service.navigateToFirstPage;
     const hasPrevPage = service.hasPrevPage.get();
     return typeof props.children === "function"
-        ? props.children({ goToFirstPage, hasPrevPage })
+        ? props.children({ navigateToFirstPage, hasPrevPage })
         : props.children;
 }
 /**

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

@@ -1,5 +1,7 @@
-import type { PropsWithChildren, ReactNode } from "react";
 import { SortType } from "../services/products-list-sort-service.js";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductListSort service context to its children.
  * This component sets up the necessary services for managing products list sorting.
@@ -14,10 +16,10 @@ import { SortType } from "../services/products-list-sort-service.js";
  *   return (
  *     <ProductListSort.Root>
  *       <ProductListSort.Options>
- *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *           <select
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *           >
  *             {sortOptions.map(option => (
  *               <option key={option.value} value={option.value}>
@@ -32,13 +34,13 @@ import { SortType } from "../services/products-list-sort-service.js";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Options headless component
  */
 export interface OptionsProps {
     /** Content to display (can be a render function receiving sort controls or ReactNode) */
-    children: ((props: OptionsRenderProps) => ReactNode) | ReactNode;
+    children: ((props: OptionsRenderProps) => React.ReactNode) | React.ReactNode;
 }
 /**
  * Render props for Options component
@@ -47,7 +49,7 @@ export interface OptionsRenderProps {
     /** Currently selected sort option value */
     selectedSortOption: string;
     /** Function to update the selected sort option */
-    setSelectedSortOption: (sort: string) => void;
+    updateSortOption: (sort: string) => void;
     /** Available sort options */
     sortOptions: SortType[];
 }
@@ -62,13 +64,13 @@ export interface OptionsRenderProps {
  * function ProductSortDropdown() {
  *   return (
  *     <ProductListSort.Options>
- *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *       {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *         <div className="sort-container">
  *           <label htmlFor="sort-select">Sort by:</label>
  *           <select
  *             id="sort-select"
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *             className="sort-dropdown"
  *           >
  *             {sortOptions.map(option => (
@@ -84,4 +86,4 @@ export interface OptionsRenderProps {
  * }
  * ```
  */
-export declare function Options(props: OptionsProps): ReactNode;
+export declare function Options(props: OptionsProps): import("react").ReactNode;

package/cjs/dist/react/ProductListSort.js

@@ -16,10 +16,10 @@ import { ProductsListSortService, ProductsListSortServiceDefinition, } from "../
  *   return (
  *     <ProductListSort.Root>
  *       <ProductListSort.Options>
- *         {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *         {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *           <select
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *           >
  *             {sortOptions.map(option => (
  *               <option key={option.value} value={option.value}>
@@ -48,13 +48,13 @@ export function Root(props) {
  * function ProductSortDropdown() {
  *   return (
  *     <ProductListSort.Options>
- *       {({ selectedSortOption, setSelectedSortOption, sortOptions }) => (
+ *       {({ selectedSortOption, updateSortOption, sortOptions }) => (
  *         <div className="sort-container">
  *           <label htmlFor="sort-select">Sort by:</label>
  *           <select
  *             id="sort-select"
  *             value={selectedSortOption}
- *             onChange={(e) => setSelectedSortOption(e.target.value)}
+ *             onChange={(e) => updateSortOption(e.target.value)}
  *             className="sort-dropdown"
  *           >
  *             {sortOptions.map(option => (
@@ -74,11 +74,11 @@ export function Options(props) {
     const service = useService(ProductsListSortServiceDefinition);
     const selectedSortOption = service.selectedSortOption.get();
     const sortOptions = service.sortOptions;
-    const setSelectedSortOption = service.setSelectedSortOption;
+    const updateSortOption = service.setSelectedSortOption;
     return typeof props.children === "function"
         ? props.children({
             selectedSortOption,
-            setSelectedSortOption,
+            updateSortOption,
             sortOptions,
         })
         : props.children;

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

@@ -1,5 +1,7 @@
 import { type ConnectedModifier, type ConnectedModifierChoice } from "@wix/auto_sdk_stores_products-v-3";
-import type { PropsWithChildren } from "react";
+export interface RootProps {
+    children: React.ReactNode;
+}
 /**
  * Root component that provides the ProductModifiers service context to its children.
  * This component sets up the necessary services for managing product modifier functionality.
@@ -31,9 +33,9 @@ import type { PropsWithChildren } from "react";
  *                             <div className="choices">
  *                               {choices.map(choice => (
  *                                 <ProductModifiers.Choice key={choice.id} modifier={modifier} choice={choice}>
- *                                   {({ value, isSelected, onSelect }) => (
+ *                                   {({ value, isSelected, select }) => (
  *                                     <button
- *                                       onClick={onSelect}
+ *                                       onClick={select}
  *                                       className={isSelected ? 'selected' : ''}
  *                                     >
  *                                       {value}
@@ -74,7 +76,7 @@ import type { PropsWithChildren } from "react";
  * }
  * ```
  */
-export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Props for Modifiers headless component
  */
@@ -242,7 +244,7 @@ export interface ChoiceRenderProps {
     /** Whether this choice is currently selected */
     isSelected: boolean;
     /** Function to select this choice */
-    onSelect: () => void;
+    select: () => void;
     /** Modifier name */
     modifierName: string;
     /** Choice value */
@@ -261,9 +263,9 @@ export interface ChoiceRenderProps {
  * function ModifierChoiceButton({ modifier, choice }) {
  *   return (
  *     <ProductModifiers.Choice modifier={modifier} choice={choice}>
- *       {({ value, description, isSelected, onSelect, colorCode }) => (
+ *       {({ value, description, isSelected, select, colorCode }) => (
  *         <button
- *           onClick={onSelect}
+ *           onClick={select}
  *           className={`choice-button ${isSelected ? 'selected' : ''}`}
  *           style={colorCode ? { backgroundColor: colorCode } : {}}
  *         >
@@ -297,7 +299,7 @@ export interface FreeTextRenderProps {
     /** Current text value */
     value: string;
     /** Function to update text value */
-    onChange: (value: string) => void;
+    setText: (value: string) => void;
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Maximum characters allowed */
@@ -322,14 +324,14 @@ export interface FreeTextRenderProps {
  * function FreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.FreeText modifier={modifier}>
- *       {({ value, onChange, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
+ *       {({ value, setText, mandatory, maxChars, placeholder, charCount, isOverLimit, modifierName }) => (
  *         <div className="free-text-modifier">
  *           <label>
  *             {modifierName} {mandatory && <span className="required">*</span>}
  *           </label>
  *           <textarea
  *             value={value}
- *             onChange={(e) => onChange(e.target.value)}
+ *             setText={(e) => setText(e.target.value)}
  *             placeholder={placeholder}
  *             maxLength={maxChars}
  *             className={isOverLimit ? 'over-limit' : ''}
@@ -363,7 +365,7 @@ export interface ToggleFreeTextRenderProps {
     /** Whether the text input is shown */
     isTextInputShown: boolean;
     /** Function to toggle text input visibility */
-    onToggle: () => void;
+    toggle: () => void;
     /** Whether this modifier is mandatory */
     mandatory: boolean;
     /** Modifier name */
@@ -381,14 +383,14 @@ export interface ToggleFreeTextRenderProps {
  * function ToggleFreeTextModifier({ modifier }) {
  *   return (
  *     <ProductModifiers.ToggleFreeText modifier={modifier}>
- *       {({ isTextInputShown, onToggle, mandatory, modifierName }) => (
+ *       {({ isTextInputShown, toggle, mandatory, modifierName }) => (
  *         <div className="toggle-free-text">
  *           {!mandatory && (
  *             <label>
  *               <input
  *                 type="checkbox"
  *                 checked={isTextInputShown}
- *                 onChange={onToggle}
+ *                 onChange={toggle}
  *               />
  *               Add {modifierName}
  *             </label>