@faststore/core 2.2.54 → 2.2.55

package/.next/server/chunks/74.js

@@ -2366,6 +2366,91 @@ const BannerTextDefaultComponents = {
 
 /***/ }),
 
+/***/ 994:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7691);
+/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9785);
+/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intersection_observer__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var src_sdk_overrides_PageProvider__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5953);
+/* harmony import */ var _ProductShelf_section_module_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6627);
+/* harmony import */ var _ProductShelf_section_module_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_ProductShelf_section_module_scss__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3271);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_6__]);
+src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_6__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+
+
+
+
+
+
+
+
+const CrossSellingShelf = ({
+  numberOfItems,
+  itemsPerPage,
+  title,
+  kind
+}) => {
+  const {
+    ref,
+    inView
+  } = (0,react_intersection_observer__WEBPACK_IMPORTED_MODULE_1__.useInView)();
+  const context = (0,src_sdk_overrides_PageProvider__WEBPACK_IMPORTED_MODULE_3__/* .usePDP */ .al)();
+  const productGroupID = context?.data?.product?.isVariantOf?.productGroupID;
+  const selectedFacets = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => [{
+    key: kind,
+    value: productGroupID
+  }], [kind, productGroupID]);
+  return /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx(_Section__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
+    className: `${(_ProductShelf_section_module_scss__WEBPACK_IMPORTED_MODULE_5___default().section)} section-product-shelf layout__section`,
+    ref: ref,
+    children: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx(src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+      inView: inView,
+      numberOfItems: numberOfItems,
+      itemsPerPage: itemsPerPage,
+      title: title,
+      selectedFacets: selectedFacets
+    })
+  });
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CrossSellingShelf);
+__webpack_async_result__();
+} catch(e) { __webpack_async_result__(e); } });
+
+/***/ }),
+
+/***/ 8435:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "q": () => (/* binding */ CrossSellingShelfDefaultComponents)
+/* harmony export */ });
+/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6737);
+/* harmony import */ var src_components_product_ProductCard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8553);
+/* harmony import */ var src_components_ui_Carousel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8619);
+
+
+
+const CrossSellingShelfDefaultComponents = {
+  ProductShelf: _faststore_ui__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z,
+  __experimentalCarousel: src_components_ui_Carousel__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z,
+  __experimentalProductCard: src_components_product_ProductCard__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z
+};
+
+/***/ }),
+
 /***/ 11:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -2997,449 +3082,50 @@ const {
 
 /***/ }),
 
-/***/ 1991:
+/***/ 2432:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "B": () => (/* binding */ ProductShelfDefaultComponents)
+/* harmony export */ });
+/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6737);
+/* harmony import */ var src_components_product_ProductCard__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8553);
+/* harmony import */ var src_components_ui_Carousel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8619);
 
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "B": () => (/* binding */ ProductShelfDefaultComponents)
-});
-
-// EXTERNAL MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelf.js
-var ProductShelf = __webpack_require__(6737);
-// EXTERNAL MODULE: ./src/components/product/ProductCard/ProductCard.tsx + 3 modules
-var ProductCard = __webpack_require__(8553);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(6689);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: ../components/dist/esm/molecules/IconButton/IconButton.js
-var IconButton = __webpack_require__(7041);
-// EXTERNAL MODULE: ../components/dist/esm/atoms/Icon/Icon.js
-var Icon = __webpack_require__(2614);
-// EXTERNAL MODULE: external "react-swipeable"
-var external_react_swipeable_ = __webpack_require__(3789);
-;// CONCATENATED MODULE: ../components/dist/esm/hooks/useSlider.js
 
 
-const nextPage = (current, total) => (current + 1) % total;
-const previousPage = (current, total) => (total - ((total - current + 1) % total)) % total;
-function reducer(state, action) {
-    switch (action.type) {
-        case 'NEXT_PAGE': {
-            // If `state.infinite` is true, we need to take into account an extra
-            // page in the calculation. This extra page is a clone of the first page.
-            const adjustedTotalPages = state.infinite
-                ? state.totalPages + 1
-                : state.totalPages;
-            const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages);
-            const nextItemIndex = (nextPageIndex % adjustedTotalPages) * state.itemsPerPage;
-            return {
-                ...state,
-                sliding: true,
-                slideDirection: 'next',
-                currentItem: nextItemIndex,
-                currentPage: nextPageIndex,
-            };
-        }
-        case 'PREVIOUS_PAGE': {
-            // If `state.infinite` is true, we need to take into account an extra
-            // page in the calculation. This extra page is a clone of the first page.
-            const adjustedTotalPages = state.infinite
-                ? state.totalPages + 1
-                : state.totalPages;
-            // If `state.infinite` is true and we're currently on page 0, we need to
-            // let the slider go to page -1. This -1 page is a clone of the last page.
-            const shouldGoToClone = state.infinite && state.currentPage === 0;
-            const previousPageIndex = shouldGoToClone
-                ? -1
-                : previousPage(state.currentPage, state.totalPages);
-            return {
-                ...state,
-                sliding: true,
-                slideDirection: 'previous',
-                currentItem: (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
-                currentPage: previousPageIndex,
-            };
-        }
-        case 'GO_TO_PAGE': {
-            if (action.payload.pageIndex === state.currentPage) {
-                return state;
-            }
-            return {
-                ...state,
-                sliding: action.payload.shouldSlide,
-                slideDirection: action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
-                currentItem: (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
-                currentPage: action.payload.pageIndex,
-            };
-        }
-        case 'STOP_SLIDE':
-            return { ...state, sliding: false };
-        default:
-            return state;
-    }
-}
-const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
-    currentItem: 0,
-    currentPage: 0,
-    sliding: false,
-    slideDirection: 'next',
-    totalItems,
-    itemsPerPage,
-    totalPages: Math.ceil(totalItems / itemsPerPage),
-    infinite,
-});
-const slide = (page, dispatch) => {
-    if (page === 'next') {
-        dispatch({ type: 'NEXT_PAGE' });
-    }
-    if (page === 'previous') {
-        dispatch({ type: 'PREVIOUS_PAGE' });
-    }
-    if (typeof page === 'number') {
-        dispatch({
-            type: 'GO_TO_PAGE',
-            payload: {
-                pageIndex: page,
-                shouldSlide: true,
-            },
-        });
-    }
-};
-const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) => {
-    const [sliderState, sliderDispatch] = (0,external_react_.useReducer)(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
-    const handlers = (0,external_react_swipeable_.useSwipeable)({
-        onSwipedRight: () => shouldSlideOnSwipe && slide('previous', sliderDispatch),
-        onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
-        trackMouse: true,
-        ...swipeableConfigOverrides,
-    });
-    return {
-        handlers,
-        slide,
-        sliderState,
-        sliderDispatch,
-    };
+const ProductShelfDefaultComponents = {
+  ProductShelf: _faststore_ui__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z,
+  __experimentalCarousel: src_components_ui_Carousel__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z,
+  __experimentalProductCard: src_components_product_ProductCard__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z
 };
-//# sourceMappingURL=useSlider.js.map
-// EXTERNAL MODULE: ../components/dist/esm/atoms/Button/Button.js
-var Button = __webpack_require__(3339);
-;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/CarouselBullets.js
 
+/***/ }),
 
-const defaultAriaLabel = (id, idx, isActive) => isActive ? `Current page from ${id}` : `Go to page ${idx + 1} from ${id}`;
-const CarouselBullets = (0,external_react_.forwardRef)(function Bullets({ id, totalQuantity, activeBullet, onClick, testId = 'fs-carousel-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
-    const bulletIndexes = (0,external_react_.useMemo)(() => Array(totalQuantity).fill(0), [totalQuantity]);
-    return (external_react_default().createElement("div", { ref: ref, "data-fs-carousel-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
-        const isActive = activeBullet === idx;
-        return (external_react_default().createElement(Button/* default */.Z, { key: `${id}-${idx}`, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(id, idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive, variant: "tertiary" }));
-    })));
-});
-/* harmony default export */ const Carousel_CarouselBullets = (CarouselBullets);
-//# sourceMappingURL=CarouselBullets.js.map
-;// CONCATENATED MODULE: ../components/dist/esm/hooks/useSlideVisibility.js
+/***/ 8569:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
 
-function isSlideVisible({ itemsPerPage, currentSlide, slideIdx, totalItems, }) {
-    const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems;
-    const isVisible = slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage;
-    return isClonedSlide || isVisible;
-}
-const useSlideVisibility = ({ currentSlide, itemsPerPage, totalItems, }) => {
-    /** Keeps track of slides that have been visualized before.
-     * We want to keep rendering them because the issue is mostly rendering
-     * slides that might never be viewed; On the other hand, hiding slides
-     * that were visible causes visual glitches */
-    const visitedSlides = (0,external_react_.useRef)(new Set());
-    (0,external_react_.useEffect)(() => {
-        for (let i = 0; i < itemsPerPage; i++) {
-            visitedSlides.current.add(currentSlide + i);
-        }
-    }, [currentSlide, itemsPerPage]);
-    const isItemVisible = (index) => isSlideVisible({
-        slideIdx: index,
-        currentSlide,
-        itemsPerPage,
-        totalItems,
-    });
-    const shouldRenderItem = (index) => {
-        return visitedSlides.current.has(index) || isItemVisible(index);
-    };
-    return { shouldRenderItem, isItemVisible };
-};
-//# sourceMappingURL=useSlideVisibility.js.map
-;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/CarouselItem.js
+"use strict";
+__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9785);
+/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intersection_observer__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3271);
+/* harmony import */ var src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7691);
+/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6627);
+/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_section_module_scss__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__]);
+src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-function CarouselItem({ id, index, state, children, totalItems, infiniteMode, isScrollCarousel, marginRightValue, }) {
-    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
-        totalItems,
-        currentSlide: state.currentItem,
-        itemsPerPage: state.itemsPerPage,
-    });
-    const defaultStyle = { width: '100%' };
-    const scrollCarouselStyle = {
-        width: `calc((100% - ${marginRightValue} * ${state.itemsPerPage - 1}) / ${state.itemsPerPage})`,
-    };
-    const style = isScrollCarousel && state.itemsPerPage > 1
-        ? { ...scrollCarouselStyle }
-        : { ...defaultStyle };
-    const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
-    return (external_react_default().createElement("li", { style: style, id: `${id}-carousel-item-${index}`, "data-fs-carousel-item": true, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
-}
-/* harmony default export */ const Carousel_CarouselItem = (CarouselItem);
-//# sourceMappingURL=CarouselItem.js.map
-;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/Carousel.js
-
-
-
-
-
-const createTransformValues = (infinite, totalItems) => {
-    const transformMap = {};
-    const slideWidth = 100 / totalItems;
-    for (let idx = 0; idx < totalItems; ++idx) {
-        const currIdx = infinite ? idx - 1 : idx;
-        const transformValue = -(slideWidth * idx);
-        transformMap[currIdx] = transformValue;
-    }
-    return transformMap;
-};
-function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode = false, controls = 'complete', testId = 'fs-carousel', transition = {
-    duration: 400,
-    property: 'transform',
-}, id = 'fs-carousel', variant = 'scroll', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
-    if (itemsPerPage < 1) {
-        throw new Error('itemsPerPage must be greater than or equal to 1');
-    }
-    const carouselTrackRef = (0,external_react_.useRef)(null);
-    const isSlideCarousel = variant === 'slide';
-    const isScrollCarousel = variant === 'scroll';
-    const childrenArray = external_react_default().Children.toArray(children);
-    const childrenCount = childrenArray.length;
-    const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
-    const slidingTransition = `${transition.property} ${transition.duration}ms ${transition.timing ?? ''} ${transition.delay ?? ''}`;
-    const { handlers, slide, sliderState, sliderDispatch } = useSlider({
-        itemsPerPage,
-        infiniteMode,
-        totalItems: childrenCount,
-        shouldSlideOnSwipe: isSlideCarousel,
-        ...swipeableConfigOverrides,
-    });
-    const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
-    const [marginRight, setMarginRight] = (0,external_react_.useState)('16px');
-    const [carouselItemsWidth, setCarouselItemsWidth] = (0,external_react_.useState)(0);
-    (0,external_react_.useEffect)(() => {
-        const item = carouselTrackRef.current?.firstElementChild;
-        if (item) {
-            setMarginRight(getComputedStyle(item).getPropertyValue('margin-right'));
-            setCarouselItemsWidth(Number(item.clientWidth) + parseInt(marginRight, 10) + 1);
-        }
-    }, [carouselItemsWidth]);
-    const showNavigationArrows = pagesCount !== 1 &&
-        (controls === 'complete' || controls === 'navigationArrows');
-    const showPaginationBullets = pagesCount !== 1 &&
-        (controls === 'complete' || controls === 'paginationBullets');
-    const transformValues = (0,external_react_.useMemo)(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
-    const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
-    const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
-    const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
-    const slideCarouselTrackStyle = (0,external_react_.useMemo)(() => ({
-        width: `${numberOfSlides * 100}%`,
-        transition: sliderState.sliding ? slidingTransition : undefined,
-        transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
-    }), [
-        numberOfSlides,
-        transformValues,
-        slidingTransition,
-        sliderState.sliding,
-        sliderState.currentPage,
-    ]);
-    const scrollCarouselTrackStyle = (0,external_react_.useMemo)(() => ({
-        width: '100%',
-        overflowX: 'scroll',
-        whiteSpace: 'nowrap',
-    }), []);
-    const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
-        (isScrollCarousel && scrollCarouselTrackStyle);
-    const slidePrevious = () => {
-        if (sliderState.sliding ||
-            (!infiniteMode && sliderState.currentPage === 0)) {
-            return;
-        }
-        slide('previous', sliderDispatch);
-    };
-    const slideNext = () => {
-        if (sliderState.sliding ||
-            (!infiniteMode && sliderState.currentPage === childrenCount - 1)) {
-            return;
-        }
-        slide('next', sliderDispatch);
-    };
-    const onScrollTrack = (event) => {
-        if (isSlideCarousel || itemsPerPage > 1) {
-            return;
-        }
-        const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
-        const scrollOffset = event.currentTarget?.scrollLeft;
-        const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
-        const page = formatter(scrollOffset / itemWidth);
-        slide(page, sliderDispatch);
-    };
-    const onTransitionTrackEnd = () => {
-        sliderDispatch({
-            type: 'STOP_SLIDE',
-        });
-        if (infiniteMode && sliderState.currentItem >= childrenCount) {
-            sliderDispatch({
-                type: 'GO_TO_PAGE',
-                payload: {
-                    pageIndex: 0,
-                    shouldSlide: false,
-                },
-            });
-        }
-        if (infiniteMode && sliderState.currentItem < 0) {
-            sliderDispatch({
-                type: 'GO_TO_PAGE',
-                payload: {
-                    pageIndex: sliderState.totalPages - 1,
-                    shouldSlide: false,
-                },
-            });
-        }
-    };
-    const onScrollPagination = async (index, slideDirection) => {
-        if (slideDirection === 'previous' && sliderState.currentPage === 0) {
-            return;
-        }
-        if (slideDirection === 'next' &&
-            sliderState.currentPage === sliderState.totalPages - 1) {
-            return;
-        }
-        let scrollOffset = index * carouselItemsWidth * itemsPerPage;
-        carouselTrackRef.current?.scrollTo({
-            left: scrollOffset,
-            behavior: 'smooth',
-        });
-        slide(index, sliderDispatch);
-    };
-    // accessible behavior for tablist
-    const handleBulletsKeyDown = (event) => {
-        switch (event.key) {
-            case 'ArrowLeft': {
-                isSlideCarousel && slidePrevious();
-                isScrollCarousel &&
-                    onScrollPagination(sliderState.currentPage - 1, 'previous');
-                break;
-            }
-            case 'ArrowRight': {
-                isSlideCarousel && slideNext();
-                isScrollCarousel &&
-                    onScrollPagination(sliderState.currentPage + 1, 'next');
-                break;
-            }
-            case 'Home': {
-                slide(0, sliderDispatch);
-                break;
-            }
-            case 'End': {
-                slide(childrenCount - 1, sliderDispatch);
-                break;
-            }
-            default:
-        }
-    };
-    return (external_react_default().createElement("section", { id: id, "data-fs-carousel": true, "data-fs-carousel-variant": variant, className: className, "data-testid": testId, "aria-label": ariaLabel },
-        external_react_default().createElement("div", { "data-fs-carousel-track-container": true, style: {
-                width: '100%',
-                overflow: 'hidden',
-                display: isScrollCarousel ? 'block' : undefined,
-            }, ...handlers },
-            external_react_default().createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (external_react_default().createElement(Carousel_CarouselItem, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
-        showNavigationArrows && (external_react_default().createElement("div", { "data-fs-carousel-controls": true },
-            external_react_default().createElement(IconButton/* default */.Z, { "data-fs-carousel-control": "left", "aria-controls": id, disabled: !infiniteMode && sliderState.currentPage === 0, "aria-label": "previous", icon: navigationIcons?.left ?? (external_react_default().createElement(Icon/* default */.Z, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })), onClick: () => {
-                    isSlideCarousel && slidePrevious();
-                    isScrollCarousel &&
-                        onScrollPagination(sliderState.currentPage - 1, 'previous');
-                } }),
-            external_react_default().createElement(IconButton/* default */.Z, { "data-fs-carousel-control": "right", "aria-controls": id, disabled: !infiniteMode &&
-                    sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon: navigationIcons?.right ?? (external_react_default().createElement(Icon/* default */.Z, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })), onClick: () => {
-                    isSlideCarousel && slideNext();
-                    isScrollCarousel &&
-                        onScrollPagination(sliderState.currentPage + 1, 'next');
-                } }))),
-        showPaginationBullets && (external_react_default().createElement(Carousel_CarouselBullets, { id: id, tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: pagesCount, onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
-                isSlideCarousel &&
-                    !sliderState.sliding &&
-                    slide(idx, sliderDispatch);
-                isScrollCarousel && onScrollPagination(idx);
-            }, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `${id}-carousel-item-${idx}` }))));
-}
-/* harmony default export */ const Carousel_Carousel = (Carousel);
-//# sourceMappingURL=Carousel.js.map
-// EXTERNAL MODULE: external "react/jsx-runtime"
-var jsx_runtime_ = __webpack_require__(997);
-;// CONCATENATED MODULE: ./src/components/ui/Carousel/Carousel.tsx
-
-
-
-function Carousel_Carousel_Carousel({
-  id,
-  testId,
-  children,
-  itemsPerPage,
-  variant = 'scroll',
-  infiniteMode = false
-}) {
-  const isMobile = window.innerWidth <= 768;
-  return /*#__PURE__*/jsx_runtime_.jsx(Carousel_Carousel, {
-    id: id,
-    testId: testId,
-    variant: variant,
-    infiniteMode: infiniteMode,
-    itemsPerPage: isMobile ? 1.6 : itemsPerPage,
-    children: children
-  });
-}
-
-/* harmony default export */ const ui_Carousel_Carousel = (Carousel_Carousel_Carousel);
-;// CONCATENATED MODULE: ./src/components/sections/ProductShelf/DefaultComponents.ts
-
-
-
-const ProductShelfDefaultComponents = {
-  ProductShelf: ProductShelf/* default */.Z,
-  __experimentalCarousel: ui_Carousel_Carousel,
-  __experimentalProductCard: ProductCard/* default */.Z
-};
-
-/***/ }),
-
-/***/ 8569:
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __webpack_async_result__) => { try {
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9785);
-/* harmony import */ var react_intersection_observer__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_intersection_observer__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3271);
-/* harmony import */ var src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7691);
-/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6627);
-/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_section_module_scss__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(997);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
-var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__]);
-src_components_ui_ProductShelf__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 
 
@@ -3706,158 +3392,565 @@ function ProductCardSkeleton({
           width: '100%',
           height: '100%'
         }
-      })
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-      "data-fs-product-card-skeleton-content": true,
-      children: [/*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
-        "data-fs-product-card-skeleton-text": true,
-        size: {
-          width: '90%',
-          height: '1.5rem'
+      })
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+      "data-fs-product-card-skeleton-content": true,
+      children: [/*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
+        "data-fs-product-card-skeleton-text": true,
+        size: {
+          width: '90%',
+          height: '1.5rem'
+        }
+      }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
+        "data-fs-product-card-skeleton-text": true,
+        size: {
+          width: '70%',
+          height: '1.5rem'
+        }
+      }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
+        "data-fs-product-card-skeleton-badge": true,
+        size: {
+          width: '6rem',
+          height: '2rem'
+        },
+        border: "pill"
+      }), displayButton && /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
+        "data-fs-product-card-skeleton-button": true,
+        size: {
+          width: '6rem',
+          height: '2rem'
+        },
+        style: {
+          columnGap: '.75rem'
+        }
+      })]
+    })]
+  });
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductCardSkeleton);
+
+/***/ }),
+
+/***/ 6523:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ ProductShelfSkeleton_ProductShelfSkeleton)
+});
+
+// EXTERNAL MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelf.js
+var ProductShelf = __webpack_require__(6737);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelfItems.js
+
+const ProductShelfItems = (0,external_react_.forwardRef)(function ProductShelfItems({ testId = 'fs-product-shelf-items', children, ...otherProps }, ref) {
+    return (external_react_default().createElement("ul", { role: "list", ref: ref, "data-fs-product-shelf-items": true, "data-fs-content": "product-shelf", "data-testid": testId, ...otherProps }, children));
+});
+/* harmony default export */ const ProductShelf_ProductShelfItems = (ProductShelfItems);
+//# sourceMappingURL=ProductShelfItems.js.map
+;// CONCATENATED MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelfItem.js
+
+const ProductShelfItem = (0,external_react_.forwardRef)(function ProductShelfItem({ testId = 'fs-product-shelf-item', children, ...otherProps }, ref) {
+    return (external_react_default().createElement("li", { role: "listitem", ref: ref, "data-fs-product-shelf-item": true, "data-testid": testId, ...otherProps }, children));
+});
+/* harmony default export */ const ProductShelf_ProductShelfItem = (ProductShelfItem);
+//# sourceMappingURL=ProductShelfItem.js.map
+// EXTERNAL MODULE: ./src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
+var ProductCardSkeleton = __webpack_require__(6531);
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__(997);
+;// CONCATENATED MODULE: ./src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
+
+
+
+
+
+function ProductShelfSkeleton({
+  children,
+  aspectRatio,
+  itemsPerPage,
+  loading = true
+}) {
+  return loading ? /*#__PURE__*/jsx_runtime_.jsx(ProductShelf/* default */.Z, {
+    "data-fs-product-shelf-skeleton": true,
+    children: /*#__PURE__*/jsx_runtime_.jsx(ProductShelf_ProductShelfItems, {
+      children: Array.from({
+        length: itemsPerPage
+      }, (_, index) => /*#__PURE__*/jsx_runtime_.jsx(ProductShelf_ProductShelfItem, {
+        children: /*#__PURE__*/jsx_runtime_.jsx(ProductCardSkeleton/* default */.Z, {
+          aspectRatio: aspectRatio,
+          sectioned: true,
+          bordered: true
+        })
+      }, String(index)))
+    })
+  }) : /*#__PURE__*/jsx_runtime_.jsx(jsx_runtime_.Fragment, {
+    children: children
+  });
+}
+
+/* harmony default export */ const ProductShelfSkeleton_ProductShelfSkeleton = (ProductShelfSkeleton);
+
+/***/ }),
+
+/***/ 2016:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3922);
+/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2614);
+/* harmony import */ var src_sdk_session__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7295);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
+
+
+
+
+const ButtonSignIn = ({
+  label,
+  myAccountLabel,
+  icon: {
+    alt,
+    icon
+  }
+}) => {
+  const {
+    person
+  } = (0,src_sdk_session__WEBPACK_IMPORTED_MODULE_1__/* .useSession */ .kP)();
+  return /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
+    "data-fs-button-signin-link": true,
+    href: person?.id ? `/account` : `/login`,
+    className: "text__title-mini",
+    "aria-label": alt,
+    variant: "tertiary",
+    icon: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
+      name: icon,
+      width: 18,
+      height: 18,
+      weight: "bold"
+    }),
+    iconPosition: "left",
+    children: person?.id ? myAccountLabel : label
+  });
+};
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ButtonSignIn);
+
+/***/ }),
+
+/***/ 8619:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* binding */ ui_Carousel_Carousel)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ../components/dist/esm/molecules/IconButton/IconButton.js
+var IconButton = __webpack_require__(7041);
+// EXTERNAL MODULE: ../components/dist/esm/atoms/Icon/Icon.js
+var Icon = __webpack_require__(2614);
+// EXTERNAL MODULE: external "react-swipeable"
+var external_react_swipeable_ = __webpack_require__(3789);
+;// CONCATENATED MODULE: ../components/dist/esm/hooks/useSlider.js
+
+
+const nextPage = (current, total) => (current + 1) % total;
+const previousPage = (current, total) => (total - ((total - current + 1) % total)) % total;
+function reducer(state, action) {
+    switch (action.type) {
+        case 'NEXT_PAGE': {
+            // If `state.infinite` is true, we need to take into account an extra
+            // page in the calculation. This extra page is a clone of the first page.
+            const adjustedTotalPages = state.infinite
+                ? state.totalPages + 1
+                : state.totalPages;
+            const nextPageIndex = nextPage(state.currentPage, adjustedTotalPages);
+            const nextItemIndex = (nextPageIndex % adjustedTotalPages) * state.itemsPerPage;
+            return {
+                ...state,
+                sliding: true,
+                slideDirection: 'next',
+                currentItem: nextItemIndex,
+                currentPage: nextPageIndex,
+            };
+        }
+        case 'PREVIOUS_PAGE': {
+            // If `state.infinite` is true, we need to take into account an extra
+            // page in the calculation. This extra page is a clone of the first page.
+            const adjustedTotalPages = state.infinite
+                ? state.totalPages + 1
+                : state.totalPages;
+            // If `state.infinite` is true and we're currently on page 0, we need to
+            // let the slider go to page -1. This -1 page is a clone of the last page.
+            const shouldGoToClone = state.infinite && state.currentPage === 0;
+            const previousPageIndex = shouldGoToClone
+                ? -1
+                : previousPage(state.currentPage, state.totalPages);
+            return {
+                ...state,
+                sliding: true,
+                slideDirection: 'previous',
+                currentItem: (previousPageIndex % adjustedTotalPages) * state.itemsPerPage,
+                currentPage: previousPageIndex,
+            };
+        }
+        case 'GO_TO_PAGE': {
+            if (action.payload.pageIndex === state.currentPage) {
+                return state;
+            }
+            return {
+                ...state,
+                sliding: action.payload.shouldSlide,
+                slideDirection: action.payload.pageIndex > state.currentPage ? 'next' : 'previous',
+                currentItem: (action.payload.pageIndex % state.totalPages) * state.itemsPerPage,
+                currentPage: action.payload.pageIndex,
+            };
+        }
+        case 'STOP_SLIDE':
+            return { ...state, sliding: false };
+        default:
+            return state;
+    }
+}
+const defaultSliderState = (totalItems, itemsPerPage, infinite) => ({
+    currentItem: 0,
+    currentPage: 0,
+    sliding: false,
+    slideDirection: 'next',
+    totalItems,
+    itemsPerPage,
+    totalPages: Math.ceil(totalItems / itemsPerPage),
+    infinite,
+});
+const slide = (page, dispatch) => {
+    if (page === 'next') {
+        dispatch({ type: 'NEXT_PAGE' });
+    }
+    if (page === 'previous') {
+        dispatch({ type: 'PREVIOUS_PAGE' });
+    }
+    if (typeof page === 'number') {
+        dispatch({
+            type: 'GO_TO_PAGE',
+            payload: {
+                pageIndex: page,
+                shouldSlide: true,
+            },
+        });
+    }
+};
+const useSlider = ({ totalItems, itemsPerPage = 1, infiniteMode = false, shouldSlideOnSwipe = true, ...swipeableConfigOverrides }) => {
+    const [sliderState, sliderDispatch] = (0,external_react_.useReducer)(reducer, undefined, () => defaultSliderState(totalItems, itemsPerPage, infiniteMode));
+    const handlers = (0,external_react_swipeable_.useSwipeable)({
+        onSwipedRight: () => shouldSlideOnSwipe && slide('previous', sliderDispatch),
+        onSwipedLeft: () => shouldSlideOnSwipe && slide('next', sliderDispatch),
+        trackMouse: true,
+        ...swipeableConfigOverrides,
+    });
+    return {
+        handlers,
+        slide,
+        sliderState,
+        sliderDispatch,
+    };
+};
+//# sourceMappingURL=useSlider.js.map
+// EXTERNAL MODULE: ../components/dist/esm/atoms/Button/Button.js
+var Button = __webpack_require__(3339);
+;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/CarouselBullets.js
+
+
+const defaultAriaLabel = (id, idx, isActive) => isActive ? `Current page from ${id}` : `Go to page ${idx + 1} from ${id}`;
+const CarouselBullets = (0,external_react_.forwardRef)(function Bullets({ id, totalQuantity, activeBullet, onClick, testId = 'fs-carousel-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
+    const bulletIndexes = (0,external_react_.useMemo)(() => Array(totalQuantity).fill(0), [totalQuantity]);
+    return (external_react_default().createElement("div", { ref: ref, "data-fs-carousel-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
+        const isActive = activeBullet === idx;
+        return (external_react_default().createElement(Button/* default */.Z, { key: `${id}-${idx}`, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(id, idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive, variant: "tertiary" }));
+    })));
+});
+/* harmony default export */ const Carousel_CarouselBullets = (CarouselBullets);
+//# sourceMappingURL=CarouselBullets.js.map
+;// CONCATENATED MODULE: ../components/dist/esm/hooks/useSlideVisibility.js
+
+function isSlideVisible({ itemsPerPage, currentSlide, slideIdx, totalItems, }) {
+    const isClonedSlide = currentSlide < 0 || currentSlide >= totalItems;
+    const isVisible = slideIdx >= currentSlide && slideIdx < currentSlide + itemsPerPage;
+    return isClonedSlide || isVisible;
+}
+const useSlideVisibility = ({ currentSlide, itemsPerPage, totalItems, }) => {
+    /** Keeps track of slides that have been visualized before.
+     * We want to keep rendering them because the issue is mostly rendering
+     * slides that might never be viewed; On the other hand, hiding slides
+     * that were visible causes visual glitches */
+    const visitedSlides = (0,external_react_.useRef)(new Set());
+    (0,external_react_.useEffect)(() => {
+        for (let i = 0; i < itemsPerPage; i++) {
+            visitedSlides.current.add(currentSlide + i);
+        }
+    }, [currentSlide, itemsPerPage]);
+    const isItemVisible = (index) => isSlideVisible({
+        slideIdx: index,
+        currentSlide,
+        itemsPerPage,
+        totalItems,
+    });
+    const shouldRenderItem = (index) => {
+        return visitedSlides.current.has(index) || isItemVisible(index);
+    };
+    return { shouldRenderItem, isItemVisible };
+};
+//# sourceMappingURL=useSlideVisibility.js.map
+;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/CarouselItem.js
+
+
+function CarouselItem({ id, index, state, children, totalItems, infiniteMode, isScrollCarousel, marginRightValue, }) {
+    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+        totalItems,
+        currentSlide: state.currentItem,
+        itemsPerPage: state.itemsPerPage,
+    });
+    const defaultStyle = { width: '100%' };
+    const scrollCarouselStyle = {
+        width: `calc((100% - ${marginRightValue} * ${state.itemsPerPage - 1}) / ${state.itemsPerPage})`,
+    };
+    const style = isScrollCarousel && state.itemsPerPage > 1
+        ? { ...scrollCarouselStyle }
+        : { ...defaultStyle };
+    const shouldDisplayItem = isScrollCarousel || shouldRenderItem(index - Number(infiniteMode));
+    return (external_react_default().createElement("li", { style: style, id: `${id}-carousel-item-${index}`, "data-fs-carousel-item": true, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
+}
+/* harmony default export */ const Carousel_CarouselItem = (CarouselItem);
+//# sourceMappingURL=CarouselItem.js.map
+;// CONCATENATED MODULE: ../components/dist/esm/molecules/Carousel/Carousel.js
+
+
+
+
+
+const createTransformValues = (infinite, totalItems) => {
+    const transformMap = {};
+    const slideWidth = 100 / totalItems;
+    for (let idx = 0; idx < totalItems; ++idx) {
+        const currIdx = infinite ? idx - 1 : idx;
+        const transformValue = -(slideWidth * idx);
+        transformMap[currIdx] = transformValue;
+    }
+    return transformMap;
+};
+function Carousel({ children, className, 'aria-label': ariaLabel, infiniteMode = false, controls = 'complete', testId = 'fs-carousel', transition = {
+    duration: 400,
+    property: 'transform',
+}, id = 'fs-carousel', variant = 'scroll', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
+    if (itemsPerPage < 1) {
+        throw new Error('itemsPerPage must be greater than or equal to 1');
+    }
+    const carouselTrackRef = (0,external_react_.useRef)(null);
+    const isSlideCarousel = variant === 'slide';
+    const isScrollCarousel = variant === 'scroll';
+    const childrenArray = external_react_default().Children.toArray(children);
+    const childrenCount = childrenArray.length;
+    const numberOfSlides = infiniteMode ? childrenCount + 2 : childrenCount;
+    const slidingTransition = `${transition.property} ${transition.duration}ms ${transition.timing ?? ''} ${transition.delay ?? ''}`;
+    const { handlers, slide, sliderState, sliderDispatch } = useSlider({
+        itemsPerPage,
+        infiniteMode,
+        totalItems: childrenCount,
+        shouldSlideOnSwipe: isSlideCarousel,
+        ...swipeableConfigOverrides,
+    });
+    const pagesCount = Math.ceil(childrenCount / sliderState.itemsPerPage);
+    const [marginRight, setMarginRight] = (0,external_react_.useState)('16px');
+    const [carouselItemsWidth, setCarouselItemsWidth] = (0,external_react_.useState)(0);
+    (0,external_react_.useEffect)(() => {
+        const item = carouselTrackRef.current?.firstElementChild;
+        if (item) {
+            setMarginRight(getComputedStyle(item).getPropertyValue('margin-right'));
+            setCarouselItemsWidth(Number(item.clientWidth) + parseInt(marginRight, 10) + 1);
+        }
+    }, [carouselItemsWidth]);
+    const showNavigationArrows = pagesCount !== 1 &&
+        (controls === 'complete' || controls === 'navigationArrows');
+    const showPaginationBullets = pagesCount !== 1 &&
+        (controls === 'complete' || controls === 'paginationBullets');
+    const transformValues = (0,external_react_.useMemo)(() => createTransformValues(infiniteMode, numberOfSlides), [numberOfSlides, infiniteMode]);
+    const postRenderedSlides = infiniteMode && children ? childrenArray.slice(0, 1) : [];
+    const preRenderedSlides = infiniteMode && children ? childrenArray.slice(childrenCount - 1) : [];
+    const slides = preRenderedSlides.concat(children ?? [], postRenderedSlides);
+    const slideCarouselTrackStyle = (0,external_react_.useMemo)(() => ({
+        width: `${numberOfSlides * 100}%`,
+        transition: sliderState.sliding ? slidingTransition : undefined,
+        transform: `translate3d(${transformValues[sliderState.currentPage]}%, 0, 0)`,
+    }), [
+        numberOfSlides,
+        transformValues,
+        slidingTransition,
+        sliderState.sliding,
+        sliderState.currentPage,
+    ]);
+    const scrollCarouselTrackStyle = (0,external_react_.useMemo)(() => ({
+        width: '100%',
+        overflowX: 'scroll',
+        whiteSpace: 'nowrap',
+    }), []);
+    const carouselTrackStyle = (isSlideCarousel && slideCarouselTrackStyle) ||
+        (isScrollCarousel && scrollCarouselTrackStyle);
+    const slidePrevious = () => {
+        if (sliderState.sliding ||
+            (!infiniteMode && sliderState.currentPage === 0)) {
+            return;
+        }
+        slide('previous', sliderDispatch);
+    };
+    const slideNext = () => {
+        if (sliderState.sliding ||
+            (!infiniteMode && sliderState.currentPage === childrenCount - 1)) {
+            return;
+        }
+        slide('next', sliderDispatch);
+    };
+    const onScrollTrack = (event) => {
+        if (isSlideCarousel || itemsPerPage > 1) {
+            return;
+        }
+        const itemWidth = Number(event.currentTarget.firstElementChild?.scrollWidth);
+        const scrollOffset = event.currentTarget?.scrollLeft;
+        const formatter = scrollOffset > itemWidth / 2 ? Math.round : Math.floor;
+        const page = formatter(scrollOffset / itemWidth);
+        slide(page, sliderDispatch);
+    };
+    const onTransitionTrackEnd = () => {
+        sliderDispatch({
+            type: 'STOP_SLIDE',
+        });
+        if (infiniteMode && sliderState.currentItem >= childrenCount) {
+            sliderDispatch({
+                type: 'GO_TO_PAGE',
+                payload: {
+                    pageIndex: 0,
+                    shouldSlide: false,
+                },
+            });
+        }
+        if (infiniteMode && sliderState.currentItem < 0) {
+            sliderDispatch({
+                type: 'GO_TO_PAGE',
+                payload: {
+                    pageIndex: sliderState.totalPages - 1,
+                    shouldSlide: false,
+                },
+            });
         }
-      }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
-        "data-fs-product-card-skeleton-text": true,
-        size: {
-          width: '70%',
-          height: '1.5rem'
+    };
+    const onScrollPagination = async (index, slideDirection) => {
+        if (slideDirection === 'previous' && sliderState.currentPage === 0) {
+            return;
         }
-      }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
-        "data-fs-product-card-skeleton-badge": true,
-        size: {
-          width: '6rem',
-          height: '2rem'
-        },
-        border: "pill"
-      }), displayButton && /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
-        "data-fs-product-card-skeleton-button": true,
-        size: {
-          width: '6rem',
-          height: '2rem'
-        },
-        style: {
-          columnGap: '.75rem'
+        if (slideDirection === 'next' &&
+            sliderState.currentPage === sliderState.totalPages - 1) {
+            return;
         }
-      })]
-    })]
-  });
+        let scrollOffset = index * carouselItemsWidth * itemsPerPage;
+        carouselTrackRef.current?.scrollTo({
+            left: scrollOffset,
+            behavior: 'smooth',
+        });
+        slide(index, sliderDispatch);
+    };
+    // accessible behavior for tablist
+    const handleBulletsKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowLeft': {
+                isSlideCarousel && slidePrevious();
+                isScrollCarousel &&
+                    onScrollPagination(sliderState.currentPage - 1, 'previous');
+                break;
+            }
+            case 'ArrowRight': {
+                isSlideCarousel && slideNext();
+                isScrollCarousel &&
+                    onScrollPagination(sliderState.currentPage + 1, 'next');
+                break;
+            }
+            case 'Home': {
+                slide(0, sliderDispatch);
+                break;
+            }
+            case 'End': {
+                slide(childrenCount - 1, sliderDispatch);
+                break;
+            }
+            default:
+        }
+    };
+    return (external_react_default().createElement("section", { id: id, "data-fs-carousel": true, "data-fs-carousel-variant": variant, className: className, "data-testid": testId, "aria-label": ariaLabel },
+        external_react_default().createElement("div", { "data-fs-carousel-track-container": true, style: {
+                width: '100%',
+                overflow: 'hidden',
+                display: isScrollCarousel ? 'block' : undefined,
+            }, ...handlers },
+            external_react_default().createElement("ul", { "aria-live": "polite", ref: carouselTrackRef, style: carouselTrackStyle, "data-fs-carousel-track": true, onScroll: onScrollTrack, onTransitionEnd: onTransitionTrackEnd }, slides.map((currentSlide, idx) => (external_react_default().createElement(Carousel_CarouselItem, { id: id, index: idx, key: String(idx), state: sliderState, totalItems: childrenCount, infiniteMode: infiniteMode, isScrollCarousel: isScrollCarousel, marginRightValue: marginRight }, currentSlide))))),
+        showNavigationArrows && (external_react_default().createElement("div", { "data-fs-carousel-controls": true },
+            external_react_default().createElement(IconButton/* default */.Z, { "data-fs-carousel-control": "left", "aria-controls": id, disabled: !infiniteMode && sliderState.currentPage === 0, "aria-label": "previous", icon: navigationIcons?.left ?? (external_react_default().createElement(Icon/* default */.Z, { name: "ArrowLeft", width: 20, height: 20, weight: "bold" })), onClick: () => {
+                    isSlideCarousel && slidePrevious();
+                    isScrollCarousel &&
+                        onScrollPagination(sliderState.currentPage - 1, 'previous');
+                } }),
+            external_react_default().createElement(IconButton/* default */.Z, { "data-fs-carousel-control": "right", "aria-controls": id, disabled: !infiniteMode &&
+                    sliderState.currentPage === sliderState.totalPages - 1, "aria-label": "next", icon: navigationIcons?.right ?? (external_react_default().createElement(Icon/* default */.Z, { name: "ArrowRight", width: 20, height: 20, weight: "bold" })), onClick: () => {
+                    isSlideCarousel && slideNext();
+                    isScrollCarousel &&
+                        onScrollPagination(sliderState.currentPage + 1, 'next');
+                } }))),
+        showPaginationBullets && (external_react_default().createElement(Carousel_CarouselBullets, { id: id, tabIndex: 0, activeBullet: sliderState.currentPage, totalQuantity: pagesCount, onKeyDown: handleBulletsKeyDown, onClick: async (_, idx) => {
+                isSlideCarousel &&
+                    !sliderState.sliding &&
+                    slide(idx, sliderDispatch);
+                isScrollCarousel && onScrollPagination(idx);
+            }, onFocus: (event) => event.currentTarget.focus(), ariaControlsGenerator: (idx) => `${id}-carousel-item-${idx}` }))));
 }
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductCardSkeleton);
-
-/***/ }),
-
-/***/ 6523:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  "Z": () => (/* binding */ ProductShelfSkeleton_ProductShelfSkeleton)
-});
-
-// EXTERNAL MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelf.js
-var ProductShelf = __webpack_require__(6737);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(6689);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-;// CONCATENATED MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelfItems.js
-
-const ProductShelfItems = (0,external_react_.forwardRef)(function ProductShelfItems({ testId = 'fs-product-shelf-items', children, ...otherProps }, ref) {
-    return (external_react_default().createElement("ul", { role: "list", ref: ref, "data-fs-product-shelf-items": true, "data-fs-content": "product-shelf", "data-testid": testId, ...otherProps }, children));
-});
-/* harmony default export */ const ProductShelf_ProductShelfItems = (ProductShelfItems);
-//# sourceMappingURL=ProductShelfItems.js.map
-;// CONCATENATED MODULE: ../components/dist/esm/organisms/ProductShelf/ProductShelfItem.js
-
-const ProductShelfItem = (0,external_react_.forwardRef)(function ProductShelfItem({ testId = 'fs-product-shelf-item', children, ...otherProps }, ref) {
-    return (external_react_default().createElement("li", { role: "listitem", ref: ref, "data-fs-product-shelf-item": true, "data-testid": testId, ...otherProps }, children));
-});
-/* harmony default export */ const ProductShelf_ProductShelfItem = (ProductShelfItem);
-//# sourceMappingURL=ProductShelfItem.js.map
-// EXTERNAL MODULE: ./src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx
-var ProductCardSkeleton = __webpack_require__(6531);
+/* harmony default export */ const Carousel_Carousel = (Carousel);
+//# sourceMappingURL=Carousel.js.map
 // EXTERNAL MODULE: external "react/jsx-runtime"
 var jsx_runtime_ = __webpack_require__(997);
-;// CONCATENATED MODULE: ./src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
-
-
+;// CONCATENATED MODULE: ./src/components/ui/Carousel/Carousel.tsx
 
 
 
-function ProductShelfSkeleton({
+function Carousel_Carousel_Carousel({
+  id,
+  testId,
   children,
-  aspectRatio,
   itemsPerPage,
-  loading = true
+  variant = 'scroll',
+  infiniteMode = false
 }) {
-  return loading ? /*#__PURE__*/jsx_runtime_.jsx(ProductShelf/* default */.Z, {
-    "data-fs-product-shelf-skeleton": true,
-    children: /*#__PURE__*/jsx_runtime_.jsx(ProductShelf_ProductShelfItems, {
-      children: Array.from({
-        length: itemsPerPage
-      }, (_, index) => /*#__PURE__*/jsx_runtime_.jsx(ProductShelf_ProductShelfItem, {
-        children: /*#__PURE__*/jsx_runtime_.jsx(ProductCardSkeleton/* default */.Z, {
-          aspectRatio: aspectRatio,
-          sectioned: true,
-          bordered: true
-        })
-      }, String(index)))
-    })
-  }) : /*#__PURE__*/jsx_runtime_.jsx(jsx_runtime_.Fragment, {
+  const isMobile = window.innerWidth <= 768;
+  return /*#__PURE__*/jsx_runtime_.jsx(Carousel_Carousel, {
+    id: id,
+    testId: testId,
+    variant: variant,
+    infiniteMode: infiniteMode,
+    itemsPerPage: isMobile ? 1.6 : itemsPerPage,
     children: children
   });
 }
 
-/* harmony default export */ const ProductShelfSkeleton_ProductShelfSkeleton = (ProductShelfSkeleton);
-
-/***/ }),
-
-/***/ 2016:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "Z": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3922);
-/* harmony import */ var _faststore_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2614);
-/* harmony import */ var src_sdk_session__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(7295);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
-
-
-
-
-const ButtonSignIn = ({
-  label,
-  myAccountLabel,
-  icon: {
-    alt,
-    icon
-  }
-}) => {
-  const {
-    person
-  } = (0,src_sdk_session__WEBPACK_IMPORTED_MODULE_1__/* .useSession */ .kP)();
-  return /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
-    "data-fs-button-signin-link": true,
-    href: person?.id ? `/account` : `/login`,
-    className: "text__title-mini",
-    "aria-label": alt,
-    variant: "tertiary",
-    icon: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
-      name: icon,
-      width: 18,
-      height: 18,
-      weight: "bold"
-    }),
-    iconPosition: "left",
-    children: person?.id ? myAccountLabel : label
-  });
-};
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ButtonSignIn);
+/* harmony default export */ const ui_Carousel_Carousel = (Carousel_Carousel_Carousel);
 
 /***/ }),
 
@@ -4644,6 +4737,61 @@ const useOverrideClassName = () => (0,react__WEBPACK_IMPORTED_MODULE_0__.useCont
 
 /***/ }),
 
+/***/ 5953:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "En": () => (/* binding */ isSearchPage),
+/* harmony export */   "OJ": () => (/* binding */ isPLP),
+/* harmony export */   "ZP": () => (__WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   "al": () => (/* binding */ usePDP),
+/* harmony export */   "qt": () => (/* binding */ usePage),
+/* harmony export */   "tS": () => (/* binding */ isPDP)
+/* harmony export */ });
+/* unused harmony exports usePLP, useSearchPage */
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__);
+
+
+const isPDP = x => x?.data?.product?.sku != undefined && x?.data?.product?.sku != null;
+const isPLP = x => x?.data?.collection?.seo != undefined && x?.data?.collection?.seo != null && x?.data?.collection?.sku == undefined;
+const isSearchPage = x => x === undefined || x?.data?.title != undefined || x?.data?.searchTerm != undefined;
+const PageContext = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);
+
+function PageProvider({
+  context,
+  children
+}) {
+  const value = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => ({
+    context
+  }), [context]);
+  return /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx(PageContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+function usePage() {
+  const {
+    context
+  } = (0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(PageContext);
+
+  if (context == null) {
+    throw new Error('Missing Overrides context on React tree');
+  }
+
+  return context;
+}
+const usePDP = () => usePage();
+const usePLP = () => usePage();
+const useSearchPage = () => usePage();
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageProvider);
+
+/***/ }),
+
 /***/ 8788:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
@@ -4773,14 +4921,18 @@ __webpack_require__.a(module, async (__webpack_handle_async_dependencies__, __we
 /* harmony export */ });
 /* harmony import */ var _components_sections_Alert__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6893);
 /* harmony import */ var _components_sections_BannerText__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9315);
-/* harmony import */ var _components_sections_Hero__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2849);
-/* harmony import */ var _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(8569);
-/* harmony import */ var _components_sections_Alert_DefaultComponents__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6948);
-/* harmony import */ var _components_sections_BannerText_DefaultComponents__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(719);
-/* harmony import */ var _components_sections_Hero_DefaultComponents__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(9569);
-/* harmony import */ var _components_sections_ProductShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1991);
-var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_3__]);
-_components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+/* harmony import */ var _components_sections_Hero__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2849);
+/* harmony import */ var _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8569);
+/* harmony import */ var _components_sections_CrossSellingShelf__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(994);
+/* harmony import */ var _components_sections_Alert_DefaultComponents__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6948);
+/* harmony import */ var _components_sections_BannerText_DefaultComponents__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(719);
+/* harmony import */ var src_components_sections_CrossSellingShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(8435);
+/* harmony import */ var _components_sections_Hero_DefaultComponents__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(9569);
+/* harmony import */ var _components_sections_ProductShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2432);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_components_sections_CrossSellingShelf__WEBPACK_IMPORTED_MODULE_2__, _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_4__]);
+([_components_sections_CrossSellingShelf__WEBPACK_IMPORTED_MODULE_2__, _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_4__] = __webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__);
+
+
 
 
 
@@ -4792,14 +4944,16 @@ _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_asyn
 const Sections = {
   Alert: _components_sections_Alert__WEBPACK_IMPORTED_MODULE_0__/* ["default"] */ .Z,
   BannerText: _components_sections_BannerText__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z,
-  Hero: _components_sections_Hero__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z,
-  ProductShelf: _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z
+  CrossSellingShelf: _components_sections_CrossSellingShelf__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z,
+  Hero: _components_sections_Hero__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z,
+  ProductShelf: _components_sections_ProductShelf__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z
 };
 const DefaultComponents = {
-  Alert: _components_sections_Alert_DefaultComponents__WEBPACK_IMPORTED_MODULE_4__/* .AlertDefaultComponents */ .p,
-  BannerText: _components_sections_BannerText_DefaultComponents__WEBPACK_IMPORTED_MODULE_5__/* .BannerTextDefaultComponents */ .b,
-  Hero: _components_sections_Hero_DefaultComponents__WEBPACK_IMPORTED_MODULE_6__/* .HeroDefaultComponents */ .O,
-  ProductShelf: _components_sections_ProductShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_7__/* .ProductShelfDefaultComponents */ .B
+  Alert: _components_sections_Alert_DefaultComponents__WEBPACK_IMPORTED_MODULE_5__/* .AlertDefaultComponents */ .p,
+  BannerText: _components_sections_BannerText_DefaultComponents__WEBPACK_IMPORTED_MODULE_6__/* .BannerTextDefaultComponents */ .b,
+  Hero: _components_sections_Hero_DefaultComponents__WEBPACK_IMPORTED_MODULE_7__/* .HeroDefaultComponents */ .O,
+  ProductShelf: _components_sections_ProductShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_8__/* .ProductShelfDefaultComponents */ .B,
+  CrossSellingShelf: src_components_sections_CrossSellingShelf_DefaultComponents__WEBPACK_IMPORTED_MODULE_9__/* .CrossSellingShelfDefaultComponents */ .q
 };
 __webpack_async_result__();
 } catch(e) { __webpack_async_result__(e); } });