@wix/headless-stores 0.0.12 → 0.0.14

package/cjs/dist/astro/actions/custom-checkout.d.ts

@@ -1,4 +1,4 @@
-import { type CustomLineItemCheckoutOptions } from "@wix/headless-stores/server-actions";
+import { type CustomLineItemCheckoutOptions } from "../../server-actions/index.js";
 /**
  * Creates an Astro action factory for custom checkout functionality with line items.
  *
@@ -45,4 +45,6 @@ import { type CustomLineItemCheckoutOptions } from "@wix/headless-stores/server-
  * @see {@link https://docs.astro.build/en/guides/actions/} Astro Actions Documentation
  * @see {@link https://dev.wix.com/docs/sdk/headless/api-reference/stores/checkout} Wix Stores Checkout API
  */
-export declare const customCheckoutActionFactory: (factoryOpts: CustomLineItemCheckoutOptions) => any;
+export declare const customCheckoutActionFactory: (factoryOpts: CustomLineItemCheckoutOptions) => ((input?: any) => Promise<import("astro:actions").SafeResult<never, string>>) & {
+    orThrow: (input?: any) => Promise<string>;
+} & string;

package/cjs/dist/astro/actions/custom-checkout.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.customCheckoutActionFactory = void 0;
 /// <reference types="astro/env" />
 // @ts-ignore
-const astro_actions_1 = require("astro:actions");
-const server_actions_1 = require("@wix/headless-stores/server-actions");
+import { defineAction } from "astro:actions";
+import { getCustomLineItemCheckoutURLFactory, } from "../../server-actions/index.js";
 /**
  * Creates an Astro action factory for custom checkout functionality with line items.
  *
@@ -51,7 +48,6 @@ const server_actions_1 = require("@wix/headless-stores/server-actions");
  * @see {@link https://docs.astro.build/en/guides/actions/} Astro Actions Documentation
  * @see {@link https://dev.wix.com/docs/sdk/headless/api-reference/stores/checkout} Wix Stores Checkout API
  */
-const customCheckoutActionFactory = (factoryOpts) => (0, astro_actions_1.defineAction)({
-    handler: () => (0, server_actions_1.getCustomLineItemCheckoutURLFactory)(factoryOpts)(),
+export const customCheckoutActionFactory = (factoryOpts) => defineAction({
+    handler: () => getCustomLineItemCheckoutURLFactory(factoryOpts)(),
 });
-exports.customCheckoutActionFactory = customCheckoutActionFactory;

package/cjs/dist/astro/actions/index.d.ts

@@ -1 +1 @@
-export * from "./custom-checkout";
+export * from "./custom-checkout.js";

package/cjs/dist/astro/actions/index.js

@@ -1,17 +1 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./custom-checkout"), exports);
+export * from "./custom-checkout.js";

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

@@ -1,2 +1,2 @@
-export * from './sort-enums';
-export * from './social-platform-enums';
+export * from "./sort-enums.js";
+export * from "./social-platform-enums.js";

package/cjs/dist/enums/index.js

@@ -1,18 +1,2 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./sort-enums"), exports);
-__exportStar(require("./social-platform-enums"), exports);
+export * from "./sort-enums.js";
+export * from "./social-platform-enums.js";

package/cjs/dist/enums/social-platform-enums.js

@@ -1,13 +1,10 @@
-"use strict";
 /**
  * Business logic enums for social sharing platforms (headless layer)
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SocialPlatformShareUrl = exports.SocialPlatform = void 0;
 /**
  * Enum for social sharing platforms (business identifiers)
  */
-var SocialPlatform;
+export var SocialPlatform;
 (function (SocialPlatform) {
     SocialPlatform["FACEBOOK"] = "facebook";
     SocialPlatform["TWITTER"] = "twitter";
@@ -16,15 +13,15 @@ var SocialPlatform;
     SocialPlatform["EMAIL"] = "email";
     SocialPlatform["CLIPBOARD"] = "clipboard";
     SocialPlatform["NATIVE"] = "native";
-})(SocialPlatform || (exports.SocialPlatform = SocialPlatform = {}));
+})(SocialPlatform || (SocialPlatform = {}));
 /**
  * Enum for social platform share URLs (business logic)
  */
-var SocialPlatformShareUrl;
+export var SocialPlatformShareUrl;
 (function (SocialPlatformShareUrl) {
     SocialPlatformShareUrl["FACEBOOK"] = "https://www.facebook.com/sharer/sharer.php";
     SocialPlatformShareUrl["TWITTER"] = "https://twitter.com/intent/tweet";
     SocialPlatformShareUrl["LINKEDIN"] = "https://www.linkedin.com/sharing/share-offsite/";
     SocialPlatformShareUrl["WHATSAPP"] = "https://wa.me/";
     SocialPlatformShareUrl["EMAIL"] = "mailto:";
-})(SocialPlatformShareUrl || (exports.SocialPlatformShareUrl = SocialPlatformShareUrl = {}));
+})(SocialPlatformShareUrl || (SocialPlatformShareUrl = {}));

package/cjs/dist/enums/sort-enums.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_SORT_TYPE = exports.SortType = void 0;
 /**
  * Enum for sort types used in the store
  * Note: Cannot use SDK SortType as it's for aggregations (COUNT/VALUE)
  * while this enum represents user-facing sort options
  */
-var SortType;
+export var SortType;
 (function (SortType) {
     SortType["NEWEST"] = "newest";
     SortType["NAME_ASC"] = "name_asc";
@@ -14,8 +11,8 @@ var SortType;
     SortType["PRICE_ASC"] = "price_asc";
     SortType["PRICE_DESC"] = "price_desc";
     SortType["RECOMMENDED"] = "recommended";
-})(SortType || (exports.SortType = SortType = {}));
+})(SortType || (SortType = {}));
 /**
  * Default sort type
  */
-exports.DEFAULT_SORT_TYPE = SortType.NEWEST;
+export const DEFAULT_SORT_TYPE = SortType.NEWEST;

package/cjs/dist/react/BuyNow.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuyNow = BuyNow;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const buy_now_service_1 = require("../services/buy-now-service");
-;
-;
+import { useService } from "@wix/services-manager-react";
+import { BuyNowServiceDefinition } from "../services/buy-now-service.js";
 /**
  * A headless component that provides buy now functionality using the render props pattern.
  *
@@ -32,8 +27,8 @@ const buy_now_service_1 = require("../services/buy-now-service");
  * ```
  * @component
  */
-function BuyNow(props) {
-    const { redirectToCheckout, loadingSignal, productName, errorSignal, price, currency, inStock, preOrderAvailable, } = (0, services_manager_react_1.useService)(buy_now_service_1.BuyNowServiceDefinition);
+export function BuyNow(props) {
+    const { redirectToCheckout, loadingSignal, productName, errorSignal, price, currency, inStockSignal, preOrderAvailableSignal, } = useService(BuyNowServiceDefinition);
     return props.children({
         isLoading: loadingSignal.get(),
         error: errorSignal.get(),
@@ -41,7 +36,7 @@ function BuyNow(props) {
         redirectToCheckout,
         price,
         currency,
-        inStock,
-        preOrderAvailable,
+        inStock: inStockSignal.get(),
+        preOrderAvailable: preOrderAvailableSignal.get(),
     });
 }

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

@@ -1,5 +1,5 @@
-import { type Category } from '@wix/auto_sdk_categories_categories';
-import React, { type ReactNode } from 'react';
+import { type Category } from "@wix/auto_sdk_categories_categories";
+import React, { type ReactNode } from "react";
 export interface CategoryListProps {
     children: (data: {
         categories: Category[];

package/cjs/dist/react/Category.js

@@ -1,22 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const services_manager_react_1 = require("@wix/services-manager-react");
-const category_service_1 = require("../services/category-service");
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useService } from "@wix/services-manager-react";
+import { CategoryServiceDefinition } from "../services/category-service.js";
 /**
  * Headless component for displaying a list of categories
  *
  * @component
  */
-const List = ({ children }) => {
-    const service = (0, services_manager_react_1.useService)(category_service_1.CategoryServiceDefinition);
+export const List = ({ children }) => {
+    const service = useService(CategoryServiceDefinition);
     const categories = service.categories.get();
     const selectedCategory = service.selectedCategory.get();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+    return (_jsx(_Fragment, { children: children({
             selectedCategory,
             categories,
             setSelectedCategory: service.setSelectedCategory,
         }) }));
 };
-exports.List = List;

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

@@ -1,4 +1,4 @@
-import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
+import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Props for Grid headless component
  */

package/cjs/dist/react/Collection.js

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Actions = exports.Header = exports.LoadMore = exports.Item = exports.Grid = void 0;
-const services_manager_react_1 = require("@wix/services-manager-react");
-const collection_service_1 = require("../services/collection-service");
-const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
+import { useService } from "@wix/services-manager-react";
+import { CollectionServiceDefinition } from "../services/collection-service.js";
+import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Headless component for product grid
  *
  * @component
  */
-const Grid = (props) => {
-    const service = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
+export const Grid = (props) => {
+    const service = useService(CollectionServiceDefinition);
     // Debug logging to help identify service issues
     if (!service) {
-        console.error('CollectionService is undefined');
+        console.error("CollectionService is undefined");
         return props.children({
             products: [],
             isLoading: false,
-            error: 'Service not available',
+            error: "Service not available",
             isEmpty: true,
             totalProducts: 0,
             hasProducts: false,
@@ -40,42 +37,41 @@ const Grid = (props) => {
         });
     }
     catch (err) {
-        console.error('Error accessing service properties:', err);
+        console.error("Error accessing service properties:", err);
         return props.children({
             products: [],
             isLoading: false,
-            error: 'Failed to load products',
+            error: "Failed to load products",
             isEmpty: true,
             totalProducts: 0,
             hasProducts: false,
         });
     }
 };
-exports.Grid = Grid;
 /**
  * Headless component for individual product item
  *
  * @component
  */
-const Item = (props) => {
+export const Item = (props) => {
     const { product } = props;
     // Use actual v3 API structure based on real data
     // Images are in media.main.image, not media.itemsInfo.items
     const image = product?.media?.main?.image || null;
     // Create formatted price since formattedAmount is not available
     const rawAmount = product.actualPriceRange?.minValue?.amount;
-    const price = rawAmount ? `$${rawAmount}` : '$0.00';
+    const price = rawAmount ? `$${rawAmount}` : "$0.00";
     // Create formatted compare-at price
     const rawCompareAmount = product.compareAtPriceRange?.minValue?.amount;
     const compareAtPrice = rawCompareAmount ? `$${rawCompareAmount}` : null;
     const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK ||
-        availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
-    const description = typeof product.description === 'string' ? product.description : '';
+    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
+    const description = typeof product.description === "string" ? product.description : "";
     return props.children({
-        id: product._id || '',
-        title: product.name || '',
-        slug: product.slug || '',
+        id: product._id || "",
+        title: product.name || "",
+        slug: product.slug || "",
         image,
         price,
         compareAtPrice,
@@ -84,18 +80,17 @@ const Item = (props) => {
         href: `/store/products/${product.slug}`,
     });
 };
-exports.Item = Item;
 /**
  * Headless component for load more products functionality
  * Note: V3 API uses simplified loading without traditional pagination
  *
  * @component
  */
-const LoadMore = (props) => {
-    const service = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
+export const LoadMore = (props) => {
+    const service = useService(CollectionServiceDefinition);
     // Error handling for undefined service
     if (!service) {
-        console.error('CollectionService is undefined in LoadMore');
+        console.error("CollectionService is undefined in LoadMore");
         return props.children({
             loadMore: async () => { },
             refresh: async () => { },
@@ -120,7 +115,7 @@ const LoadMore = (props) => {
         });
     }
     catch (err) {
-        console.error('Error in LoadMore:', err);
+        console.error("Error in LoadMore:", err);
         return props.children({
             loadMore: async () => { },
             refresh: async () => { },
@@ -131,17 +126,16 @@ const LoadMore = (props) => {
         });
     }
 };
-exports.LoadMore = LoadMore;
 /**
  * Headless component for collection header with product count
  *
  * @component
  */
-const Header = (props) => {
-    const service = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
+export const Header = (props) => {
+    const service = useService(CollectionServiceDefinition);
     // Error handling for undefined service
     if (!service) {
-        console.error('CollectionService is undefined in Header');
+        console.error("CollectionService is undefined in Header");
         return props.children({
             totalProducts: 0,
             isLoading: false,
@@ -159,7 +153,7 @@ const Header = (props) => {
         });
     }
     catch (err) {
-        console.error('Error in Header:', err);
+        console.error("Error in Header:", err);
         return props.children({
             totalProducts: 0,
             isLoading: false,
@@ -167,23 +161,22 @@ const Header = (props) => {
         });
     }
 };
-exports.Header = Header;
 /**
  * Headless component for collection actions (refresh, load more)
  * Replaces traditional pagination for V3 API
  *
  * @component
  */
-const Actions = (props) => {
-    const service = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
+export const Actions = (props) => {
+    const service = useService(CollectionServiceDefinition);
     // Error handling for undefined service
     if (!service) {
-        console.error('CollectionService is undefined in Actions');
+        console.error("CollectionService is undefined in Actions");
         return props.children({
             refresh: async () => { },
             loadMore: async () => { },
             isLoading: false,
-            error: 'Service not available',
+            error: "Service not available",
         });
     }
     try {
@@ -197,13 +190,12 @@ const Actions = (props) => {
         });
     }
     catch (err) {
-        console.error('Error in Actions:', err);
+        console.error("Error in Actions:", err);
         return props.children({
             refresh: async () => { },
             loadMore: async () => { },
             isLoading: false,
-            error: 'Failed to load actions',
+            error: "Failed to load actions",
         });
     }
 };
-exports.Actions = Actions;

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

@@ -1,21 +1,7 @@
-import React, { type ReactNode } from 'react';
-import { type AvailableOptions, type FilterServiceAPI, type Filter } from '../services/filter-service';
-import { type V3Product } from '@wix/auto_sdk_stores_products-v-3';
-import { type CollectionServiceAPI } from '../services/collection-service';
+import React, { type ReactNode } from "react";
+import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service.js";
+import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
 export type { AvailableOptions, Filter, FilterServiceAPI };
-export interface FilteredCollectionProviderProps {
-    children: ReactNode;
-}
-/**
- * Headless component for providing a filtered collection
- *
- * @component
- */
-export declare const Provider: React.FC<FilteredCollectionProviderProps>;
-export declare const useFilteredCollection: () => {
-    filter: FilterServiceAPI | null;
-    collection: CollectionServiceAPI | null;
-};
 export interface FiltersLoadingProps {
     children: (data: {
         isFullyLoaded: boolean;
@@ -57,7 +43,7 @@ export interface FilteredItemProps {
     }) => ReactNode;
 }
 /**
- * Headless component for displaying an individual product item
+ * Headless component for displaying a filtered product item
  *
  * @component
  */
@@ -73,7 +59,7 @@ export interface FilteredLoadMoreProps {
     }) => ReactNode;
 }
 /**
- * Headless component for displaying a load more button
+ * Headless component for load more filtered products functionality
  *
  * @component
  */
@@ -89,7 +75,7 @@ export interface FilteredFiltersProps {
     }) => ReactNode;
 }
 /**
- * Headless component for displaying a filters component
+ * Headless component for product filters with available options
  *
  * @component
  */

package/cjs/dist/react/FilteredCollection.js

@@ -1,57 +1,32 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Filters = exports.LoadMore = exports.Item = exports.Grid = exports.FiltersLoading = exports.useFilteredCollection = exports.Provider = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const filter_service_1 = require("../services/filter-service");
-const services_manager_react_1 = require("@wix/services-manager-react");
-const auto_sdk_stores_products_v_3_1 = require("@wix/auto_sdk_stores_products-v-3");
-const collection_service_1 = require("../services/collection-service");
-const FilteredCollectionContext = (0, react_1.createContext)({ filter: null, collection: null });
-/**
- * Headless component for providing a filtered collection
- *
- * @component
- */
-const Provider = ({ children, }) => {
-    const filter = (0, services_manager_react_1.useService)(filter_service_1.FilterServiceDefinition);
-    const collection = (0, services_manager_react_1.useService)(collection_service_1.CollectionServiceDefinition);
-    return ((0, jsx_runtime_1.jsx)(FilteredCollectionContext.Provider, { value: { filter, collection }, children: children }));
-};
-exports.Provider = Provider;
-const useFilteredCollection = () => {
-    const context = (0, react_1.useContext)(FilteredCollectionContext);
-    if (!context) {
-        throw new Error('useFilteredCollection must be used within a FilteredCollectionProvider');
-    }
-    return context;
-};
-exports.useFilteredCollection = useFilteredCollection;
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useService } from "@wix/services-manager-react";
+import { CollectionServiceDefinition } from "../services/collection-service.js";
+import { FilterServiceDefinition, } from "../services/filter-service.js";
+import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
 /**
  * Headless component for displaying a loading state for filters
  *
  * @component
  */
-const FiltersLoading = ({ children }) => {
-    const { filter } = (0, exports.useFilteredCollection)();
+export const FiltersLoading = ({ children }) => {
+    const filter = useService(FilterServiceDefinition);
     const isFullyLoaded = filter.isFullyLoaded.get();
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isFullyLoaded }) });
+    return _jsx(_Fragment, { children: children({ isFullyLoaded }) });
 };
-exports.FiltersLoading = FiltersLoading;
 /**
  * Headless component for displaying a grid of filtered products
  *
  * @component
  */
-const Grid = ({ children }) => {
-    const { collection } = (0, exports.useFilteredCollection)();
+export const Grid = ({ children }) => {
+    const collection = useService(CollectionServiceDefinition);
     const products = collection.products.get() || [];
     const totalProducts = collection.totalProducts.get();
     const isLoading = collection.isLoading.get();
     const error = collection.error.get();
     const hasProducts = collection.hasProducts.get();
     const hasMoreProducts = collection.hasMoreProducts.get();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+    return (_jsx(_Fragment, { children: children({
             products,
             isLoading,
             error,
@@ -60,35 +35,34 @@ const Grid = ({ children }) => {
             hasMoreProducts,
         }) }));
 };
-exports.Grid = Grid;
 /**
- * Headless component for displaying an individual product item
+ * Headless component for displaying a filtered product item
  *
  * @component
  */
-const Item = ({ product, children }) => {
+export const Item = ({ product, children }) => {
     // Safe conversion of product data with type safety guards
-    const title = String(product.name || '');
+    const title = String(product.name || "");
     const image = product.media?.main?.image || null;
-    const imageAltText = product.media?.main?.altText || '';
+    const imageAltText = product.media?.main?.altText || "";
     const price = product.actualPriceRange?.minValue?.formattedAmount ||
         product.actualPriceRange?.maxValue?.formattedAmount ||
         (product.actualPriceRange?.minValue?.amount
             ? `$${product.actualPriceRange.minValue.amount}`
-            : '$0.00');
+            : "$0.00");
     // Add compare at price
     const compareAtPrice = product.compareAtPriceRange?.minValue?.formattedAmount ||
         (product.compareAtPriceRange?.minValue?.amount
             ? `$${product.compareAtPriceRange.minValue.amount}`
             : null);
     const availabilityStatus = product.inventory?.availabilityStatus;
-    const available = availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.IN_STOCK ||
-        availabilityStatus === auto_sdk_stores_products_v_3_1.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
-    const slug = String(product.slug || product._id || '');
+    const available = availabilityStatus === InventoryAvailabilityStatus.IN_STOCK ||
+        availabilityStatus === InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK;
+    const slug = String(product.slug || product._id || "");
     const description = product.plainDescription
         ? String(product.plainDescription)
         : undefined;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+    return (_jsx(_Fragment, { children: children({
             title,
             image,
             imageAltText,
@@ -99,21 +73,20 @@ const Item = ({ product, children }) => {
             description,
         }) }));
 };
-exports.Item = Item;
 /**
- * Headless component for displaying a load more button
+ * Headless component for load more filtered products functionality
  *
  * @component
  */
-const LoadMore = ({ children }) => {
-    const { collection } = (0, exports.useFilteredCollection)();
+export const LoadMore = ({ children }) => {
+    const collection = useService(CollectionServiceDefinition);
     const loadMore = collection.loadMore;
     const refresh = collection.refresh;
     const isLoading = collection.isLoading.get();
     const hasProducts = collection.hasProducts.get();
     const totalProducts = collection.totalProducts.get();
     const hasMoreProducts = collection.hasMoreProducts.get();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+    return (_jsx(_Fragment, { children: children({
             loadMore,
             refresh,
             isLoading,
@@ -122,14 +95,14 @@ const LoadMore = ({ children }) => {
             hasMoreProducts,
         }) }));
 };
-exports.LoadMore = LoadMore;
 /**
- * Headless component for displaying a filters component
+ * Headless component for product filters with available options
  *
  * @component
  */
-const Filters = ({ children }) => {
-    const { collection, filter } = (0, exports.useFilteredCollection)();
+export const Filters = ({ children }) => {
+    const collection = useService(CollectionServiceDefinition);
+    const filter = useService(FilterServiceDefinition);
     const applyFilters = filter.applyFilters;
     const clearFilters = filter.clearFilters;
     const currentFilters = filter.currentFilters.get();
@@ -138,7 +111,7 @@ const Filters = ({ children }) => {
     const isFiltered = currentFilters.priceRange.min !== availableOptions.priceRange.min ||
         currentFilters.priceRange.max !== availableOptions.priceRange.max ||
         Object.keys(currentFilters.selectedOptions).length > 0;
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+    return (_jsx(_Fragment, { children: children({
             applyFilters,
             clearFilters,
             currentFilters,
@@ -147,4 +120,3 @@ const Filters = ({ children }) => {
             isFiltered,
         }) }));
 };
-exports.Filters = Filters;