@sonic-equipment/ui 0.0.27 → 0.0.28

package/dist/algolia/algolia-provider.d.ts

@@ -8,7 +8,7 @@ interface AlgoliaContextType {
     toggleOnline: VoidFunction;
 }
 interface AlgoliaProviderProps {
-    category: string[];
+    category: string[] | undefined;
     children: ReactNode;
     offlineSearchClient?: SearchClient;
     online?: boolean;

package/dist/breadcrumbs/breadcrumb.stories.d.ts

@@ -1,5 +1,5 @@
 import type { StoryObj } from '@storybook/react';
-import { Link } from 'shared/providers/breadcrumb-provider';
+import { ProductListingPageData } from 'pages/product-listing-page/product-listing-page-data-types';
 import { Breadcrumb } from './breadcrumb';
 declare const meta: {
     component: typeof Breadcrumb;
@@ -15,5 +15,5 @@ export declare const FourLevelsMobile: Story;
 export declare const TwoLevels: Story;
 export declare const TwoLevelsMobile: Story;
 export declare const Connected: StoryObj<{
-    links: Link[];
+    data: ProductListingPageData;
 }>;

package/dist/breadcrumbs/connected-breadcrumb.d.ts

@@ -1 +1 @@
-export declare function ConnectedBreadcrumb(): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectedBreadcrumb(): import("react/jsx-runtime").JSX.Element | null;

package/dist/cards/category-card/category-card.d.ts

@@ -1,8 +1,5 @@
-import { type ImageProps } from 'media/image/image';
-export interface CategoryCardProps {
-    href: string;
-    image: ImageProps;
+import { Category } from 'shared/types/category';
+export interface CategoryCardProps extends Category {
     isSelected?: boolean;
-    title: string;
 }
 export declare function CategoryCard({ href, image, isSelected, title, }: CategoryCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.d.ts

@@ -1,12 +1,12 @@
 import { MouseEvent, ReactElement } from 'react';
 import { PressEvent } from 'react-aria-components';
-import { ImageProps } from 'media/image/image';
+import type { ImageSource } from 'shared/types/image';
 import type { ProductPrice as ProductPriceType } from 'shared/types/price';
 export interface ProductCardProps {
     addToCartButton: ReactElement;
     favoriteButton?: ReactElement;
     href: string;
-    image: ImageProps;
+    image: ImageSource;
     /** @deprecated Use `onPress` instead */
     onClick?: (e: MouseEvent) => void;
     onPress?: (e: PressEvent) => void;

package/dist/carousel/category-carousel/connected-category-carousel.d.ts

@@ -0,0 +1 @@
+export declare function ConnectedCategoryCarousel(): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -13,9 +13,9 @@ declare const breakpoints: {
     readonly xl: 1024;
     readonly xxl: 1440;
 };
-type Breakpoint$2 = keyof typeof breakpoints;
-interface UseBreakpointReturnType extends Record<Breakpoint$2, boolean> {
-    current: Breakpoint$2;
+type Breakpoint$1 = keyof typeof breakpoints;
+interface UseBreakpointReturnType extends Record<Breakpoint$1, boolean> {
+    current: Breakpoint$1;
 }
 declare const useBreakpoint: () => UseBreakpointReturnType;
 
@@ -32,17 +32,6 @@ declare const useDisclosure: (initialState?: boolean) => UseDisclosureReturnType
 
 declare const useScrollLock: (lock: boolean) => void;
 
-interface Link$1 {
-    href: string;
-    label: string;
-}
-interface Props$3 {
-    links: Link$1[];
-    updateLinks: (links: Link$1[]) => void;
-}
-declare function BreadcrumbProvider(props: Props$3): null;
-declare function useBreadcrumb(): Props$3;
-
 interface CartLine$1 {
   id: string
   productId: string | null
@@ -173,7 +162,7 @@ interface BreadcrumbProps {
 }
 declare function Breadcrumb({ links }: BreadcrumbProps): react_jsx_runtime.JSX.Element | null;
 
-declare function ConnectedBreadcrumb(): react_jsx_runtime.JSX.Element;
+declare function ConnectedBreadcrumb(): react_jsx_runtime.JSX.Element | null;
 
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
@@ -232,25 +221,25 @@ interface Props {
 }
 declare const ConnectedAddToCartButton: ({ productId }: Props) => react_jsx_runtime.JSX.Element;
 
-interface Source$1 {
+type Breakpoint = 'lg' | 'md' | 'sm'
+
+type Sizes = Record<Breakpoint, number>
+
+interface Source {
   url: string
   width: number
 }
 
-type Breakpoint$1 = 'lg' | 'md' | 'sm'
-
-type Sizes$1 = Record<Breakpoint$1, number>
-
-interface ImageProps$1 {
+interface ImageSource {
   alt: string
   className?: string
   fallbackSrc?: string
   fit?: 'contain' | 'cover'
   height?: number
   loading?: 'lazy' | 'eager'
-  sizes?: Sizes$1
+  sizes?: Sizes
   src: string
-  srcSet?: Source$1[]
+  srcSet?: Source[]
   title: string
   width?: number
 }
@@ -265,7 +254,7 @@ interface ProductCardProps {
     addToCartButton: ReactElement;
     favoriteButton?: ReactElement;
     href: string;
-    image: ImageProps$1;
+    image: ImageSource;
     /** @deprecated Use `onPress` instead */
     onClick?: (e: MouseEvent) => void;
     onPress?: (e: PressEvent) => void;
@@ -276,13 +265,16 @@ interface ProductCardProps {
 }
 declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, onPress, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
 
-interface CategoryCardProps {
+interface Category {
   href: string
-  image: ImageProps$1
-  isSelected?: boolean
+  image: ImageSource
   title: string
 }
 
+interface CategoryCardProps extends Category {
+  isSelected?: boolean
+}
+
 interface CategoryCarouselProps {
     categories: CategoryCardProps[];
 }
@@ -488,25 +480,7 @@ interface ProductOverviewGridProps {
 }
 declare function ProductOverviewGrid({ children }: ProductOverviewGridProps): react_jsx_runtime.JSX.Element;
 
-interface Source {
-    url: string;
-    width: number;
-}
-type Breakpoint = 'lg' | 'md' | 'sm';
-type Sizes = Record<Breakpoint, number>;
-interface ImageProps {
-    alt: string;
-    className?: string;
-    fallbackSrc?: string;
-    fit?: 'contain' | 'cover';
-    height?: number;
-    loading?: 'lazy' | 'eager';
-    sizes?: Sizes;
-    src: string;
-    srcSet?: Source[];
-    title: string;
-    width?: number;
-}
+type ImageProps = ImageSource;
 declare function Image({ alt, className, fallbackSrc, fit, height, loading, sizes: sizesProp, src, srcSet: srcSetProp, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
 
 declare function PageLayout({ children, className, }: {
@@ -531,10 +505,11 @@ interface Filters {
     };
 }
 type ProductListingPageProps = {
-    category: string[];
-    isLoading?: boolean;
+    bffUrl: string;
+    pageUrl: string;
+    searchClient?: SearchClient;
 };
-declare function ProductListingPage({ category, isLoading, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
+declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarProps {
     children: React.ReactNode;
@@ -588,7 +563,7 @@ interface AlgoliaContextType {
     toggleOnline: VoidFunction;
 }
 interface AlgoliaProviderProps {
-    category: string[];
+    category: string[] | undefined;
     children: ReactNode;
     offlineSearchClient?: SearchClient;
     online?: boolean;
@@ -602,4 +577,4 @@ declare function AlgoliaResultsCount(): string | null;
 
 declare function AlgoliaSortBy(): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, type BreadcrumbProps, BreadcrumbProvider, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, CategoryCarousel, type CategoryCarouselProps, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LeftArrowFilledIcon, type Link$1 as Link, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, Page, PageLayout, type PageProps, type Product, ProductCard, type ProductCardProps, ProductListingPage, type ProductListingPageProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, type RefinementListItem, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, CategoryCarousel, type CategoryCarouselProps, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, Page, PageLayout, type PageProps, type Product, ProductCard, type ProductCardProps, ProductListingPage, type ProductListingPageProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, type RefinementListItem, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };

package/dist/index.js

@@ -2,9 +2,10 @@ import React, { useState, useEffect, useRef, useCallback, createContext, useCont
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Breadcrumbs, Breadcrumb as Breadcrumb$1, Link, Button as Button$1, FieldError as FieldError$1, useContextProps, InputContext, Input as Input$1, Label as Label$1, NumberField as NumberField$1, Checkbox as Checkbox$1, Select as Select$1, SelectValue, Popover, ListBox, Section, Header, ListBoxItem, TextAreaContext, TextArea as TextArea$1, TextField as TextField$1 } from 'react-aria-components';
 import clsx from 'clsx';
-import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, useSortBy, InstantSearch, Configure } from 'react-instantsearch';
+import { useCurrentRefinements, useClearRefinements, useRefinementList, useHits, useDynamicWidgets, usePagination, InstantSearch, Configure, useSortBy } from 'react-instantsearch';
 import { history } from 'instantsearch.js/es/lib/routers/index.js';
 import { simple } from 'instantsearch.js/es/lib/stateMappings/index.js';
+import { useQuery } from '@tanstack/react-query';
 
 /* eslint-disable sort-keys-fix/sort-keys-fix */
 const breakpoints$1 = {
@@ -183,21 +184,6 @@ function useGlobalState(key, initialState) {
     return [rerenderState, (value) => (state.value = value)];
 }
 
-function BreadcrumbProvider(props) {
-    const [, updateState] = useGlobalState('breadcrumb', props);
-    useEffect(() => {
-        updateState(props);
-    }, [props, updateState]);
-    return null;
-}
-function useBreadcrumb() {
-    const [state] = useGlobalState('breadcrumb');
-    if (!state) {
-        throw new Error('useBreadcrumb must be used together with the BreadcrumbProvider');
-    }
-    return state;
-}
-
 function CartProvider(props) {
     const [, updateState] = useGlobalState('cart', props);
     useEffect(() => {
@@ -271,9 +257,27 @@ function BreadcrumbLong({ links }) {
     return (jsxs(Breadcrumbs, { className: styles$x.breadcrumbs, children: [jsx(Breadcrumb$1, { className: styles$x.breadcrumb, children: jsx(Link, { className: styles$x.link, href: homeLink.href, children: jsx(HomeFilledIcon, { className: clsx(styles$x['home-icon'], styles$x.icon) }) }) }), linksWithoutFirst.map((link, index) => (jsx(Breadcrumb$1, { className: styles$x.breadcrumb, children: jsxs(Link, { className: styles$x.link, href: link.href, isDisabled: index === linksWithoutFirst.length - 1, children: [jsx(ChevronLeftFilledIcon, { className: clsx(styles$x['previous-icon'], styles$x.icon) }), link.label] }) }, index)))] }));
 }
 
+const ProductListingPageContext = createContext({
+    data: undefined,
+});
+
+function ProductListingPageProvider({ children, data, error, isError, isLoading, }) {
+    return (jsx(ProductListingPageContext.Provider, { value: { data, error, isError, isLoading }, children: children }));
+}
+function useProductListingPageProvider() {
+    return useContext(ProductListingPageContext);
+}
+
+function useBreadcrumb() {
+    const { data, isLoading } = useProductListingPageProvider();
+    return { breadCrumb: data?.breadCrumb, isLoading };
+}
+
 function ConnectedBreadcrumb() {
-    const { links } = useBreadcrumb();
-    return jsx(Breadcrumb, { links: links });
+    const { breadCrumb } = useBreadcrumb();
+    if (!breadCrumb)
+        return null;
+    return jsx(Breadcrumb, { links: breadCrumb });
 }
 
 function TextAlignedArrowIcon(props) {
@@ -6000,7 +6004,7 @@ function ChevronRightFilledIcon(props) {
 var styles$3 = {"pagination":"pagination-module-k4OgY","page-number-container":"pagination-module-oq89A"};
 
 function Pagination({ currentPage, onChange, totalPages, }) {
-    return (jsxs("div", { className: styles$3.pagination, children: [jsx(IconButton, { isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$3['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(ChevronRightFilledIcon, {}) })] }));
+    return (jsxs("div", { className: styles$3.pagination, children: [jsx(IconButton, { color: "secondary", isDisabled: currentPage === 1, onPress: () => onChange(currentPage - 1), children: jsx(ChevronLeftFilledIcon, {}) }), jsxs("div", { className: styles$3['page-number-container'], children: [jsx(NumberField, { autoGrow: true, label: "current-page", maxValue: totalPages, minValue: 1, onChange: onChange, value: currentPage }), jsx(FormattedMessage, { id: "of" }), jsx("div", { children: totalPages })] }), jsx(IconButton, { color: "secondary", isDisabled: currentPage >= totalPages, onPress: () => onChange(currentPage + 1), children: jsx(ChevronRightFilledIcon, {}) })] }));
 }
 
 function AlgoliaPagination({ onChange }) {
@@ -6012,6 +6016,102 @@ function AlgoliaPagination({ onChange }) {
     return (jsx(Pagination, { currentPage: currentRefinement + 1, onChange: pageNumber => handlePageChange(pageNumber), totalPages: nbPages }));
 }
 
+const queryStringRouting = {
+    router: history({
+        cleanUrlOnDispose: true,
+        createURL({ location, qsModule: qs, routeState }) {
+            const indexNames = Object.keys(routeState);
+            if (indexNames.length === 0)
+                return location.href;
+            if (indexNames.length !== 1)
+                throw new Error('Only one index is supported');
+            const queryString = qs.parse(location.search.slice(1), {
+                allowDots: true,
+                duplicates: 'combine',
+            });
+            const state = routeState[indexNames[0]];
+            queryString.filters = state.refinementList;
+            queryString.sortBy = state.sortBy;
+            const newQueryString = qs.stringify(queryString, {
+                addQueryPrefix: true,
+                allowDots: true,
+                arrayFormat: 'repeat',
+            });
+            return `${location.href.split('?')[0]}${newQueryString}`;
+        },
+        parseURL({ location, qsModule: qs }) {
+            const queryString = qs.parse(location.search.slice(1), {
+                allowDots: true,
+                duplicates: 'combine',
+            });
+            const refinementList = Object.keys(queryString.filters || {}).reduce((refinementList, filter) => {
+                refinementList[filter] = [].concat(queryString.filters?.[filter]);
+                return refinementList;
+            }, {});
+            const uiState = {
+                dev_sonic_products_en: {
+                    refinementList,
+                    sortBy: queryString.sortBy?.toString(),
+                },
+            };
+            return uiState;
+        },
+        windowTitle({ category, query }) {
+            const queryTitle = query ? `Results for "${query}"` : 'Search';
+            if (category) {
+                return `${category} – ${queryTitle}`;
+            }
+            return queryTitle;
+        },
+    }),
+    stateMapping: simple(),
+};
+
+const AlgoliaContext = createContext({
+    online: false,
+    setOnline: () => { },
+    toggleOnline: () => { },
+});
+function AlgoliaProvider({ category, children, offlineSearchClient, online: _online = true, routing = queryStringRouting, searchClient, }) {
+    const [online, setOnline] = useState(_online);
+    if (!category) {
+        // TODO: Implement loading page
+        return jsx("h1", { children: "Loading..." });
+    }
+    return (jsx(AlgoliaContext.Provider, { value: {
+            online,
+            setOnline,
+            toggleOnline: () => setOnline(online => !online),
+        }, children: jsxs(InstantSearch, { future: {
+                persistHierarchicalRootCount: true,
+                preserveSharedStateOnUnmount: true,
+            }, indexName: "dev_sonic_products_en", routing: routing, searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
+                        ? `categoryPages: '${category.join(' > ')}'`
+                        : undefined, hitsPerPage: 9, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
+}
+function useAlgolia() {
+    return useContext(AlgoliaContext);
+}
+
+const offlineSearchClient = {
+    search(_queries, _requestOptions) {
+        return fetch('data/algolia.json').then(response => response.json());
+    },
+    async searchForFacetValues(_queries, _requestOptions) {
+        return [];
+    },
+};
+
+const createSonicSearchClient = (url) => ({
+    async search(requests) {
+        return fetch(url, {
+            body: JSON.stringify({ requests }),
+            headers: { 'Content-Type': 'application/json' },
+            method: 'post',
+        }).then(res => res.json());
+    },
+});
+
 function AlgoliaSortBy() {
     const { currentRefinement, options: algoliaOptions, refine, } = useSortBy({
         items: [
@@ -6032,15 +6132,68 @@ function ConnectedProductCart({ productId, ...props }) {
     return (jsx(ProductCard, { ...props, addToCartButton: jsx(ConnectedAddToCartButton, { productId: productId }) }));
 }
 
-const useScrollTo = (ref, scrollOptions) => () => {
-    if (!ref.current)
-        return;
-    const rect = ref.current.getBoundingClientRect();
-    const scrollPadding = 12;
-    const scrollY = window.scrollY + rect.top - scrollPadding;
+function useSubcatagories() {
+    const { data, isLoading } = useProductListingPageProvider();
+    return { isLoading, subcategories: data?.subcategories };
+}
+
+function ConnectedCategoryCarousel() {
+    const { isLoading, subcategories } = useSubcatagories();
+    if (isLoading || !subcategories)
+        return null;
+    return jsx(CategoryCarousel, { categories: subcategories });
+}
+
+class ResponseError extends Error {
+    constructor(response) {
+        super(response.statusText);
+        Object.defineProperty(this, "response", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "statusText", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "url", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.message = response.statusText;
+        this.name = 'ResponseError';
+        this.response = response;
+        this.status = response.status;
+        this.statusText = response.statusText;
+        this.type = response.type;
+        this.url = response.url;
+    }
+}
+function isResponseError(error) {
+    return error instanceof ResponseError;
+}
+
+const scrollToTop = (scrollOptions) => {
     window.scrollTo({
         behavior: 'smooth',
-        top: scrollY,
+        top: 0,
     });
 };
 
@@ -6077,52 +6230,97 @@ const ToggleSidebarButton = () => {
     return (jsx(Button, { color: "secondary", icon: jsx(FilterOutlinedIcon, {}), onPress: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
+function useFetchProductListingPageData(bffUrl, pageUrl) {
+    return useQuery({
+        queryFn: async () => {
+            const response = await fetch(`${bffUrl}/api/v1/plp/?pageUrl=${pageUrl}`);
+            if (!response.ok)
+                throw new ResponseError(response);
+            return (await response.json());
+        },
+        queryKey: [bffUrl, 'product-listing-page-data', pageUrl],
+        retry: false,
+        select: (data) => {
+            return {
+                banner: data.banner,
+                breadCrumb: data.breadCrumb.map(breadCrumb => ({
+                    href: breadCrumb.url,
+                    label: breadCrumb.text,
+                })),
+                category: {
+                    href: data.categories.path,
+                    image: {
+                        alt: data.categories.imageAltText,
+                        src: data.categories.smallImagePath,
+                        title: data.categories.shortDescription,
+                    },
+                    title: data.categories.shortDescription,
+                },
+                subcategories: data?.categories?.subCategories?.map(subcategory => ({
+                    href: subcategory.path,
+                    image: {
+                        alt: subcategory.imageAltText,
+                        src: subcategory.smallImagePath,
+                        title: subcategory.shortDescription,
+                    },
+                    title: subcategory.shortDescription,
+                })),
+            };
+        },
+    });
+}
+
 var styles$1 = {"product-listing":"product-listing-page-module-dmIHF","header":"product-listing-page-module-Oz76Z","action-bar":"product-listing-page-module-XxGrr","sort":"product-listing-page-module-aQzHr","count":"product-listing-page-module-zx79v","categories":"product-listing-page-module-R4aOl","product-grid-container":"product-listing-page-module-ICkKg","product-grid":"product-listing-page-module-LHE7z","pagination":"product-listing-page-module-xsRaj"};
 
-const categories = Array.from({ length: 20 }, () => ({
-    href: '#',
-    image: {
-        alt: 'Category 1',
-        fit: 'contain',
-        height: 96,
-        src: '/images/pliers-md.png',
-        title: 'Category 1',
-        width: 96,
-    },
-    isSelected: false,
-    title: 'Schroevendraaier',
-}));
-function ProductListingPage({ category, isLoading = false, }) {
+function ProductListingPage({ bffUrl, pageUrl, searchClient, }) {
     const { toggle } = useSidebar();
+    const { data, error, isError, isFetching } = useFetchProductListingPageData(bffUrl, pageUrl);
+    if (isError) {
+        if (!isResponseError(error))
+            throw error;
+        // TODO: Implement error page (404, 500, etc.)
+        return (jsxs("h1", { children: [error.status, " - ", error.statusText] }));
+    }
+    if (!data || isFetching) {
+        // TODO: Implement loading page
+        return jsx("h1", { children: "Loading..." });
+    }
+    const category = data?.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
+    return (jsx(ProductListingPageProvider, { data: data, error: error, isError: isError, isLoading: isFetching, children: jsx(AlgoliaProvider, { category: category, offlineSearchClient: offlineSearchClient, searchClient: searchClient ||
+                createSonicSearchClient(`${bffUrl}${bffUrl.endsWith('/') ? '' : '/'}search`), children: jsxs(Page, { className: styles$1['product-listing'], title: category.slice().pop(), children: [jsx("section", { className: styles$1.categories, children: jsx(ConnectedCategoryCarousel, {}) }), jsxs("section", { className: styles$1['action-bar'], children: [jsx("div", { children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$1.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$1.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: jsxs("div", { className: styles$1['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$1['product-grid'], children: [jsx(ProductOverview, {}), jsx("div", { className: styles$1.pagination, children: jsx(AlgoliaPagination, { onChange: () => scrollToTop() }) })] })] }) })] }) }) }));
+}
+function ProductOverview() {
     const { hits: productHits } = useHits();
     const baseUrl = location.href.split('?')[0];
-    const productGrid = useRef(null);
-    const scrollToTopOfProductGrid = useScrollTo(productGrid);
-    return (jsxs(Page, { className: styles$1['product-listing'], title: category.slice().pop(), children: [categories?.length > 0 && (jsx("section", { className: styles$1.categories, children: jsx(CategoryCarousel, { categories: categories }) })), jsxs("div", { ref: productGrid, children: [jsxs("section", { className: styles$1['action-bar'], children: [jsx("div", { children: jsx(ToggleSidebarButton, {}) }), jsx("span", { className: styles$1.count, children: jsx(AlgoliaResultsCount, {}) }), jsx("div", { className: styles$1.sort, children: jsx(AlgoliaSortBy, {}) })] }), jsx("section", { children: isLoading ? (jsx("p", { children: "Loading..." })) : (jsxs("div", { className: styles$1['product-grid-container'], children: [jsx(Sidebar, { children: jsx(AlgoliaFilterPanel, { onShowProducts: toggle }) }), jsxs("div", { className: styles$1['product-grid'], children: [jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}${productHit.id}-${productHit.name.replace(/ /g, '-')}`, image: {
-                                                    alt: productHit.name,
-                                                    fit: 'contain',
-                                                    sizes: { lg: 288, md: 204, sm: 122 },
-                                                    src: productHit.images?.find(image => image.quality === 'large')?.url || '',
-                                                    srcSet: [
-                                                        {
-                                                            url: productHit.images?.find(image => image.quality === 'small')?.url || '',
-                                                            width: 122,
-                                                        },
-                                                        {
-                                                            url: productHit.images?.find(image => image.quality === 'medium')?.url || '',
-                                                            width: 204,
-                                                        },
-                                                        {
-                                                            url: productHit.images?.find(image => image.quality === 'large')?.url || '',
-                                                            width: 288,
-                                                        },
-                                                    ],
-                                                    title: productHit.name,
-                                                }, price: {
-                                                    current: productHit.discountedPrice,
-                                                    includeVat: false,
-                                                    original: productHit.price,
-                                                }, productId: productHit.id, sku: productHit.ean, tag: "new", title: productHit.name }, productHit.id))) }), jsx("div", { className: styles$1.pagination, children: jsx(AlgoliaPagination, { onChange: scrollToTopOfProductGrid }) })] })] })) })] })] }));
+    return (jsx(ProductOverviewGrid, { children: productHits.map(productHit => (jsx(ConnectedProductCart, { href: `${baseUrl}${baseUrl.endsWith('/') ? '' : '/'}${productHit.id}-${productHit.name.replace(/ /g, '-')}`, image: {
+                alt: productHit.name,
+                fit: 'contain',
+                sizes: { lg: 288, md: 204, sm: 122 },
+                src: productHit.images?.find(image => image.quality === 'large')
+                    ?.url || '',
+                srcSet: [
+                    {
+                        url: productHit.images?.find(image => image.quality === 'small')
+                            ?.url || '',
+                        width: 122,
+                    },
+                    {
+                        url: productHit.images?.find(image => image.quality === 'medium')
+                            ?.url || '',
+                        width: 204,
+                    },
+                    {
+                        url: productHit.images?.find(image => image.quality === 'large')
+                            ?.url || '',
+                        width: 288,
+                    },
+                ],
+                title: productHit.name,
+            }, price: {
+                current: productHit.discountedPrice,
+                includeVat: false,
+                original: productHit.price,
+            }, productId: productHit.id, sku: productHit.ean, tag: "new", title: productHit.name }, productHit.objectID))) }));
 }
 
 var styles = {"sidebar-container":"sidebar-provider-module-rjeCL","transition":"sidebar-provider-module-C0cKR","sidebar-background":"sidebar-provider-module-VRgS9","is-open":"sidebar-provider-module-lxq2-"};
@@ -6164,87 +6362,4 @@ function SidebarProvider({ children }) {
                     }), onClick: closeTransitions }), children] }) }));
 }
 
-const createSonicSearchClient = (url) => ({
-    async search(requests) {
-        return fetch(url, {
-            body: JSON.stringify({ requests }),
-            headers: { 'Content-Type': 'application/json' },
-            method: 'post',
-        }).then(res => res.json());
-    },
-});
-
-const queryStringRouting = {
-    router: history({
-        cleanUrlOnDispose: true,
-        createURL({ location, qsModule: qs, routeState }) {
-            const indexNames = Object.keys(routeState);
-            if (indexNames.length === 0)
-                return location.href;
-            if (indexNames.length !== 1)
-                throw new Error('Only one index is supported');
-            const queryString = qs.parse(location.search.slice(1), {
-                allowDots: true,
-                duplicates: 'combine',
-            });
-            const state = routeState[indexNames[0]];
-            queryString.filters = state.refinementList;
-            queryString.sortBy = state.sortBy;
-            const newQueryString = qs.stringify(queryString, {
-                addQueryPrefix: true,
-                allowDots: true,
-                arrayFormat: 'repeat',
-            });
-            return `${location.href.split('?')[0]}${newQueryString}`;
-        },
-        parseURL({ location, qsModule: qs }) {
-            const queryString = qs.parse(location.search.slice(1), {
-                allowDots: true,
-                duplicates: 'combine',
-            });
-            const refinementList = Object.keys(queryString.filters || {}).reduce((refinementList, filter) => {
-                refinementList[filter] = [].concat(queryString.filters?.[filter]);
-                return refinementList;
-            }, {});
-            const uiState = {
-                dev_sonic_products_en: {
-                    refinementList,
-                    sortBy: queryString.sortBy?.toString(),
-                },
-            };
-            return uiState;
-        },
-        windowTitle({ category, query }) {
-            const queryTitle = query ? `Results for "${query}"` : 'Search';
-            if (category) {
-                return `${category} – ${queryTitle}`;
-            }
-            return queryTitle;
-        },
-    }),
-    stateMapping: simple(),
-};
-
-const AlgoliaContext = createContext({
-    online: false,
-    setOnline: () => { },
-    toggleOnline: () => { },
-});
-function AlgoliaProvider({ category, children, offlineSearchClient, online: _online = true, routing = queryStringRouting, searchClient, }) {
-    const [online, setOnline] = useState(_online);
-    return (jsx(AlgoliaContext.Provider, { value: {
-            online,
-            setOnline,
-            toggleOnline: () => setOnline(online => !online),
-        }, children: jsxs(InstantSearch, { future: {
-                persistHierarchicalRootCount: true,
-                preserveSharedStateOnUnmount: true,
-            }, indexName: "dev_sonic_products_en", routing: routing, searchClient: online ? searchClient : offlineSearchClient || searchClient, children: [jsx(Configure, { analytics: false, filters: category.length
-                        ? `categoryPages: '${category.join(' > ')}'`
-                        : undefined, hitsPerPage: 9, maxValuesPerFacet: 100, ruleContexts: ['storefront'] }), children] }) }));
-}
-function useAlgolia() {
-    return useContext(AlgoliaContext);
-}
-
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, BreadcrumbProvider, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FormattedMessage, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageLayout, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, Button, CartFilledIcon, CartOutlinedIcon, CartProvider, CategoryCarousel, Checkbox, ColorCheckbox, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, FormattedMessage, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, Image, IntlProvider, LeftArrowFilledIcon, LinkButton, MultiSelect, NumberField, Page, PageLayout, ProductCard, ProductListingPage, ProductOverviewGrid, ProductPrice, ProductSku, RightArrowFilledIcon, Select, ShowAll, Sidebar, SidebarProvider, TextAlignedArrowIcon, TextField, createSonicSearchClient, useAlgolia, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };

package/dist/media/image/image.d.ts

@@ -1,21 +1,4 @@
-interface Source {
-    url: string;
-    width: number;
-}
-type Breakpoint = 'lg' | 'md' | 'sm';
-type Sizes = Record<Breakpoint, number>;
-export interface ImageProps {
-    alt: string;
-    className?: string;
-    fallbackSrc?: string;
-    fit?: 'contain' | 'cover';
-    height?: number;
-    loading?: 'lazy' | 'eager';
-    sizes?: Sizes;
-    src: string;
-    srcSet?: Source[];
-    title: string;
-    width?: number;
-}
+import type { ImageSource } from 'shared/types/image';
+type ImageProps = ImageSource;
 export declare function Image({ alt, className, fallbackSrc, fit, height, loading, sizes: sizesProp, src, srcSet: srcSetProp, title, width, }: ImageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/pages/product-listing-page/product-listing-page-data-types.d.ts

@@ -0,0 +1,20 @@
+import { Category } from 'shared/types/category';
+export interface BannerItem {
+    alt: string;
+    srcSet: {
+        src: string;
+        width: number;
+    }[];
+}
+export interface Link {
+    href: string;
+    label: string;
+}
+export interface ProductListingPageData {
+    banner: {
+        top: BannerItem[];
+    };
+    breadCrumb: Link[];
+    category: Category;
+    subcategories: Category[] | undefined;
+}

package/dist/pages/product-listing-page/product-listing-page-provider/product-listing-page-context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ProductListingPageData } from 'pages/product-listing-page/product-listing-page-data-types';
+export interface ProductListingPageContextType {
+    data: ProductListingPageData | undefined;
+    error?: Error | null;
+    isError?: boolean;
+    isLoading?: boolean;
+}
+export declare const ProductListingPageContext: React.Context<ProductListingPageContextType>;

package/dist/pages/product-listing-page/product-listing-page-provider/product-listing-page-provider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ProductListingPageContextType } from './product-listing-page-context';
+interface ProductListingPageProviderProps extends ProductListingPageContextType {
+    children: React.ReactNode;
+}
+export declare function ProductListingPageProvider({ children, data, error, isError, isLoading, }: ProductListingPageProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useProductListingPageProvider(): ProductListingPageContextType;
+export {};

package/dist/pages/product-listing-page/product-listing-page-provider/use-breadcrumb.d.ts

@@ -0,0 +1,4 @@
+export declare function useBreadcrumb(): {
+    breadCrumb: import("../product-listing-page-data-types").Link[] | undefined;
+    isLoading: boolean | undefined;
+};

package/dist/pages/product-listing-page/product-listing-page-provider/use-subcategories.d.ts

@@ -0,0 +1,4 @@
+export declare function useSubcatagories(): {
+    isLoading: boolean | undefined;
+    subcategories: import("../../../shared/types/category").Category[] | undefined;
+};

package/dist/pages/product-listing-page/product-listing-page.d.ts

@@ -1,3 +1,4 @@
+import { SearchClient } from 'algoliasearch/lite';
 export interface Filters {
     color: {
         options: {
@@ -8,7 +9,8 @@ export interface Filters {
     };
 }
 export type ProductListingPageProps = {
-    category: string[];
-    isLoading?: boolean;
+    bffUrl: string;
+    pageUrl: string;
+    searchClient?: SearchClient;
 };
-export declare function ProductListingPage({ category, isLoading, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductListingPage({ bffUrl, pageUrl, searchClient, }: ProductListingPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/product-listing-page/product-listing-page.stories.d.ts

@@ -1,25 +1,22 @@
 import { ComponentProps } from 'react';
 import { StoryObj } from '@storybook/react';
 import { ProductListingPage } from './product-listing-page';
+type StoryProps = Omit<ComponentProps<typeof ProductListingPage>, 'searchClient'> & {
+    bff: boolean;
+    online: boolean;
+};
 declare const meta: {
     args: {
-        BFF: true;
-        category: string[];
-        isLoading: false;
+        bff: true;
+        bffUrl: string;
         online: false;
+        pageUrl: string;
     };
-    component: typeof ProductListingPage;
     parameters: {
         layout: string;
     };
     title: string;
 };
 export default meta;
-type StoryProps = ComponentProps<typeof ProductListingPage> & {
-    BFF: boolean;
-    online: boolean;
-};
 type Story = StoryObj<StoryProps>;
 export declare const Default: Story;
-export declare const Loading: Story;
-export declare const WithActiveFilters: Story;

package/dist/pages/product-listing-page/types.d.ts

@@ -0,0 +1,34 @@
+export interface ProductHit {
+    [key: string]: any;
+    alternativeNumber: string;
+    categories: string[];
+    categoryPageId: string[];
+    consumerPrice: number;
+    discountedPrice: number;
+    drawerQuantity: string;
+    ean: string;
+    height: number;
+    hierarchicalCategories: {
+        lvl0: string;
+        lvl1: string;
+    };
+    id: string;
+    images: {
+        quality: string;
+        url: string;
+    }[];
+    labels: string[];
+    length: number;
+    listPrice: number;
+    moreInformation: string;
+    name: string;
+    price: number;
+    relatedProducts: string;
+    restrictionGroups: string[];
+    salePrice: number;
+    slug: string;
+    storefrontId: string;
+    storefrontSlug: string;
+    weight: number;
+    width: number;
+}

package/dist/pages/product-listing-page/use-fetch-product-listing-page/product-listing-page-data-response.d.ts

@@ -0,0 +1,48 @@
+export interface Category {
+    activateOn: string;
+    deactivateOn: string | null;
+    htmlContent: string;
+    id: string;
+    imageAltText: string;
+    isDynamic: boolean;
+    isFeatured: boolean;
+    largeImagePath: string;
+    metaDescription: string;
+    metaKeywords: string;
+    mobileBannerImageUrl: string;
+    mobilePrimaryText: string;
+    mobileSecondaryText: string;
+    mobileTextColor: string;
+    mobileTextJustification: string;
+    name: string;
+    path: string;
+    properties: {
+        pimId: string | null;
+    };
+    shortDescription: string;
+    smallImagePath: string;
+    sortOrder: number;
+    subCategories: Category[] | null;
+    uri: null;
+    urlSegment: string;
+}
+export interface BannerItem {
+    alt: string;
+    srcSet: {
+        src: string;
+        width: number;
+    }[];
+}
+export interface Banner {
+    top: BannerItem[];
+}
+export interface BreadCrumb {
+    categoryId: string;
+    text: string;
+    url: string;
+}
+export interface ProductListingPageDataResponse {
+    banner: Banner;
+    breadCrumb: BreadCrumb[];
+    categories: Category;
+}

package/dist/pages/product-listing-page/use-fetch-product-listing-page/use-fetch-product-listing-page-data.d.ts

@@ -0,0 +1,2 @@
+import { ProductListingPageData } from 'pages/product-listing-page/product-listing-page-data-types';
+export declare function useFetchProductListingPageData(bffUrl: string, pageUrl: string): import("@tanstack/react-query").UseQueryResult<ProductListingPageData, Error>;

package/dist/pages/product-listing-page/use-fetch-product-listing-page/use-fetch-product-listing-page-data.stories.d.ts

@@ -0,0 +1,20 @@
+import { StoryObj } from '@storybook/react';
+interface StoryProps {
+    bffUrl: string;
+    pageUrl: string;
+}
+declare function UseFetchProductListingPageDataStory(args: StoryProps): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    args: {
+        bffUrl: string;
+        pageUrl: string;
+    };
+    component: typeof UseFetchProductListingPageDataStory;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/shared/fetch/ResponseError.d.ts

@@ -0,0 +1,9 @@
+export declare class ResponseError extends Error {
+    response: Response;
+    status: number;
+    statusText: string;
+    type: ResponseType;
+    url: string;
+    constructor(response: Response);
+}
+export declare function isResponseError(error: unknown): error is ResponseError;

package/dist/shared/hooks/use-scroll-to.d.ts

@@ -3,5 +3,6 @@ interface ScrollOptions {
     behavior?: ScrollBehavior;
     scrollPadding?: number;
 }
+export declare const scrollToTop: (scrollOptions?: ScrollToOptions) => void;
 export declare const useScrollTo: (ref: RefObject<HTMLElement>, scrollOptions?: ScrollOptions) => () => void;
 export {};

package/dist/shared/types/category.d.ts

@@ -0,0 +1,6 @@
+import type { ImageSource } from './image';
+export interface Category {
+    href: string;
+    image: ImageSource;
+    title: string;
+}

package/dist/shared/types/image.d.ts

@@ -0,0 +1,20 @@
+type Breakpoint = 'lg' | 'md' | 'sm';
+type Sizes = Record<Breakpoint, number>;
+interface Source {
+    url: string;
+    width: number;
+}
+export interface ImageSource {
+    alt: string;
+    className?: string;
+    fallbackSrc?: string;
+    fit?: 'contain' | 'cover';
+    height?: number;
+    loading?: 'lazy' | 'eager';
+    sizes?: Sizes;
+    src: string;
+    srcSet?: Source[];
+    title: string;
+    width?: number;
+}
+export {};

package/dist/styles.css

@@ -933,6 +933,7 @@
   display: grid;
   max-width: 136px;
   cursor: pointer;
+  padding-inline: 10px;
   place-items: center;
 }
 
@@ -990,6 +991,11 @@
       }
   }
 
+  @media (width >= 1024px) {.category-card-module-4NUjH {
+    padding-inline: 0
+}
+  }
+
   @media (width >= 1440px) {.category-card-module-4NUjH {
     max-width: 144px
 }
@@ -1362,7 +1368,12 @@
 .carousel-module-ealh- .carousel-module-k7Z4S.carousel-module-5SGYn .carousel-module-Hi-0z {
         top: 50%;
       }
-@media (width < 576px) {
+@media (width < 1024px) {
+.carousel-module-ealh- {
+    width: calc(100% + 20px);
+    margin-left: -10px
+}
+
     .carousel-module-ealh- .carousel-module-Hi-0z {
       display: none;
     }
@@ -2197,6 +2208,7 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: var(--space-24);
+    row-gap: var(--space-8);
   }
   .product-listing-page-module-dmIHF .product-listing-page-module-XxGrr .product-listing-page-module-aQzHr {
       display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -45,27 +45,27 @@
     "react-instantsearch-core": "^7"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@csstools/postcss-global-data": "^2.1.1",
     "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-docs": "^8.1.3",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
-    "@storybook/addon-viewport": "^8.1.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/preview-api": "^8.1.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-vite": "^8.1.3",
-    "@storybook/test": "^8.1.3",
-    "@types/react": "^18.3.2",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.9",
+    "@storybook/addon-interactions": "^8.1.9",
+    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-viewport": "^8.1.9",
+    "@storybook/blocks": "^8.1.9",
+    "@storybook/preview-api": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-vite": "^8.1.9",
+    "@storybook/test": "^8.1.9",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
@@ -75,7 +75,7 @@
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.4",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
@@ -85,7 +85,7 @@
     "eslint-plugin-unused-imports": "^3.2.0",
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
-    "instantsearch.js": "^4.69.0",
+    "instantsearch.js": "^4.71.1",
     "postcss": "^8.4.38",
     "postcss-custom-media": "^10.0.6",
     "postcss-import": "^16.1.0",
@@ -98,13 +98,13 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-ts": "^3.4.5",
-    "storybook": "^8.1.3",
-    "stylelint": "^16.5.0",
+    "storybook": "^8.1.9",
+    "stylelint": "^16.6.1",
     "stylelint-config-css-modules": "^4.4.0",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-standard": "^36.0.0",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.3.1",
     "vite-tsconfig-paths": "^4.3.2"
   },
   "dependencies": {
@@ -113,12 +113,13 @@
     "@algolia/autocomplete-plugin-recent-searches": "^1.17.2",
     "@algolia/autocomplete-preset-algolia": "^1.17.2",
     "@algolia/client-search": "^4.23.3",
+    "@tanstack/react-query": "^5.45.0",
     "algoliasearch": "^4.23.3",
     "clsx": "^2.1.1",
-    "instantsearch.js": "^4.69.0",
+    "instantsearch.js": "^4.71.1",
     "react-aria-components": "^1.2.1",
-    "react-instantsearch": "^7.9.0",
-    "swiper": "^11.1.3"
+    "react-instantsearch": "^7.11.1",
+    "swiper": "^11.1.4"
   },
   "publishConfig": {
     "access": "public"

package/dist/shared/providers/breadcrumb-provider.d.ts

@@ -1,11 +0,0 @@
-export interface Link {
-    href: string;
-    label: string;
-}
-interface Props {
-    links: Link[];
-    updateLinks: (links: Link[]) => void;
-}
-export declare function BreadcrumbProvider(props: Props): null;
-export declare function useBreadcrumb(): Props;
-export {};