@faststore/core 2.1.16 → 2.1.18

package/.next/server/chunks/205.js

@@ -0,0 +1,721 @@
+exports.id = 205;
+exports.ids = [205];
+exports.modules = {
+
+/***/ 94285:
+/***/ ((__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 react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+
+const ProductShelf = (0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(function ProductShelf({ testId = 'fs-product-shelf', children, ...otherProps }, ref) {
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { ref: ref, "data-fs-product-shelf": true, "data-fs-content": "product-shelf", "data-testid": testId, ...otherProps }, children));
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductShelf);
+//# sourceMappingURL=ProductShelf.js.map
+
+/***/ }),
+
+/***/ 86237:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "z": () => (/* binding */ Components),
+  "x": () => (/* binding */ productShelfPropsCustomization)
+});
+
+// EXTERNAL MODULE: ../components/dist/organisms/ProductShelf/ProductShelf.js
+var ProductShelf = __webpack_require__(94285);
+// EXTERNAL MODULE: ./src/components/product/ProductCard/index.ts + 4 modules
+var ProductCard = __webpack_require__(56475);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(16689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ../components/dist/molecules/IconButton/IconButton.js
+var IconButton = __webpack_require__(82765);
+// EXTERNAL MODULE: ../components/dist/atoms/Icon/Icon.js
+var Icon = __webpack_require__(25045);
+// EXTERNAL MODULE: external "react-swipeable"
+var external_react_swipeable_ = __webpack_require__(3789);
+;// CONCATENATED MODULE: ../components/dist/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/atoms/Button/Button.js
+var Button = __webpack_require__(57578);
+;// CONCATENATED MODULE: ../components/dist/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/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/molecules/Carousel/CarouselItem.js
+
+
+function CarouselItem({ id, index, state, children, totalItems, infiniteMode, isScrollCarousel, }) {
+    const { isItemVisible, shouldRenderItem } = useSlideVisibility({
+        totalItems,
+        currentSlide: state.currentItem,
+        itemsPerPage: state.itemsPerPage,
+    });
+    const style = (!isScrollCarousel && { width: '100%' }) ||
+        (isScrollCarousel && {
+            maxWidth: '60%',
+            display: 'inline-block',
+        });
+    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/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 = true, controls = 'complete', testId = 'fs-carousel', transition = {
+    duration: 400,
+    property: 'transform',
+}, id = 'fs-carousel', variant = 'slide', itemsPerPage = 1, navigationIcons = undefined, ...swipeableConfigOverrides }) {
+    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 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)(() => ({
+        display: 'flex',
+        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%',
+        display: 'block',
+        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;
+        const carouselItemsWidth = Number(carouselTrackRef.current?.firstElementChild?.clientWidth);
+        if (itemsPerPage > 1) {
+            scrollOffset = index * carouselItemsWidth * itemsPerPage;
+        }
+        else {
+            scrollOffset = index * carouselItemsWidth - carouselItemsWidth * 0.125;
+        }
+        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, 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 }, 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, "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, "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__(20997);
+;// CONCATENATED MODULE: ./src/components/ui/Carousel/Carousel.tsx
+
+
+
+function Carousel_Carousel_Carousel({
+  id,
+  testId,
+  children,
+  itemsPerPage = 5
+}) {
+  const isMobile = window.innerWidth <= 768;
+  return /*#__PURE__*/jsx_runtime_.jsx(Carousel_Carousel, {
+    id: id,
+    testId: testId,
+    variant: "scroll",
+    infiniteMode: false,
+    itemsPerPage: isMobile ? 1 : itemsPerPage,
+    children: children
+  });
+}
+
+/* harmony default export */ const ui_Carousel_Carousel = (Carousel_Carousel_Carousel);
+;// CONCATENATED MODULE: ./src/components/ui/Carousel/index.ts
+
+;// CONCATENATED MODULE: ./src/customizations/components/overrides/ProductShelf.tsx
+// This is an example of how it can be used on the starter.
+const SECTION = 'ProductShelf';
+const overrides = {
+  name: SECTION,
+  components: {
+    ProductShelf: {
+      props: {}
+    },
+    __experimentalCarousel: {
+      props: {}
+    },
+    __experimentalProductCard: {
+      props: {}
+    }
+  }
+};
+/* harmony default export */ const overrides_ProductShelf = (overrides);
+;// CONCATENATED MODULE: ./src/components/sections/ProductShelf/Overrides.tsx
+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; }
+
+
+
+
+
+const productShelfComponentsCustomization = {};
+const productShelfPropsCustomization = {};
+Object.entries(overrides_ProductShelf.components).forEach(([key, value]) => {
+  if (value.Component) {
+    productShelfComponentsCustomization[key] = value.Component;
+  }
+});
+Object.entries(overrides_ProductShelf.components).forEach(([key, value]) => {
+  if (value.props) {
+    productShelfPropsCustomization[key] = value.props;
+  }
+});
+
+const Components = _objectSpread({
+  ProductShelf: ProductShelf/* default */.Z,
+  __experimentalCarousel: ui_Carousel_Carousel,
+  __experimentalProductCard: ProductCard/* default */.Z
+}, productShelfComponentsCustomization);
+
+
+
+/***/ }),
+
+/***/ 70424:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* reexport */ ProductShelfSkeleton_ProductShelfSkeleton)
+});
+
+// EXTERNAL MODULE: ../components/dist/organisms/ProductShelf/ProductShelf.js
+var ProductShelf = __webpack_require__(94285);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(16689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: ../components/dist/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/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/constants.ts
+var constants = __webpack_require__(18459);
+// EXTERNAL MODULE: ./src/components/skeletons/ProductCardSkeleton/index.ts + 1 modules
+var ProductCardSkeleton = __webpack_require__(73288);
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__(20997);
+;// CONCATENATED MODULE: ./src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx
+
+
+
+
+
+
+function ProductShelfSkeleton({
+  children,
+  aspectRatio,
+  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: constants/* ITEMS_PER_SECTION */.K
+      }, (_, 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);
+;// CONCATENATED MODULE: ./src/components/skeletons/ProductShelfSkeleton/index.ts
+
+
+/***/ }),
+
+/***/ 77691:
+/***/ ((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__(16689);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var src_components_skeletons_ProductShelfSkeleton__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(70424);
+/* harmony import */ var src_sdk_analytics_hooks_useViewItemListEvent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(55184);
+/* harmony import */ var src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24867);
+/* harmony import */ var src_utils_utilities__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(43952);
+/* harmony import */ var src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(86237);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(20997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_3__]);
+src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_3__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+const _excluded = ["title", "inView", "productCardConfiguration"];
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+
+
+
+
+
+const {
+  ProductShelf: ProductShelfWrapper,
+  __experimentalCarousel: Carousel,
+  __experimentalProductCard: ProductCard
+} = src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Components */ .z;
+
+function ProductShelf(_ref) {
+  let {
+    title,
+    inView,
+    productCardConfiguration: {
+      bordered = src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Props.__experimentalProductCard.bordered */ .x.__experimentalProductCard.bordered,
+      showDiscountBadge = src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Props.__experimentalProductCard.showDiscountBadge */ .x.__experimentalProductCard.showDiscountBadge
+    } = {}
+  } = _ref,
+      variables = _objectWithoutProperties(_ref, _excluded);
+
+  const titleId = (0,src_utils_utilities__WEBPACK_IMPORTED_MODULE_6__/* .textToKebabCase */ .B)(title);
+  const id = (0,react__WEBPACK_IMPORTED_MODULE_0__.useId)();
+  const viewedOnce = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  const products = (0,src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_3__/* .useProductsQuery */ .kN)(variables);
+  const productEdges = products?.edges ?? [];
+  const aspectRatio = 1;
+  const {
+    sendViewItemListEvent
+  } = (0,src_sdk_analytics_hooks_useViewItemListEvent__WEBPACK_IMPORTED_MODULE_2__/* .useViewItemListEvent */ .m)({
+    products: productEdges,
+    title,
+    page: 0,
+    pageSize: 0
+  });
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (inView && !viewedOnce.current && productEdges.length) {
+      sendViewItemListEvent();
+      viewedOnce.current = true;
+    }
+  }, [inView, productEdges.length, sendViewItemListEvent]);
+
+  if (products?.edges.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
+    children: [/*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx("h2", {
+      className: "text__title-section layout__content",
+      children: title
+    }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx(src_components_skeletons_ProductShelfSkeleton__WEBPACK_IMPORTED_MODULE_1__/* ["default"] */ .Z, {
+      aspectRatio: aspectRatio,
+      loading: products === undefined,
+      children: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx(ProductShelfWrapper, _objectSpread(_objectSpread({}, src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Props.ProductShelfWrapper */ .x.ProductShelfWrapper), {}, {
+        children: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx(Carousel, _objectSpread(_objectSpread({
+          id: titleId || id
+        }, src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Props.__experimentalCarousel */ .x.__experimentalCarousel), {}, {
+          children: productEdges.map((product, idx) => /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(ProductCard, _objectSpread(_objectSpread({
+            aspectRatio: aspectRatio,
+            imgProps: {
+              width: 216,
+              height: 216,
+              sizes: '(max-width: 768px) 42vw, 30vw'
+            }
+          }, src_components_sections_ProductShelf_Overrides__WEBPACK_IMPORTED_MODULE_4__/* .Props.__experimentalProductCard */ .x.__experimentalProductCard), {}, {
+            bordered: bordered,
+            showDiscountBadge: showDiscountBadge // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            ,
+            key: `${product.node.id}`,
+            product: product.node,
+            index: idx + 1
+          })))
+        }))
+      }))
+    })]
+  });
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductShelf);
+__webpack_async_result__();
+} catch(e) { __webpack_async_result__(e); } });
+
+/***/ }),
+
+/***/ 34805:
+/***/ ((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": () => (/* reexport safe */ _ProductShelf__WEBPACK_IMPORTED_MODULE_0__.Z)
+/* harmony export */ });
+/* harmony import */ var _ProductShelf__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(77691);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([_ProductShelf__WEBPACK_IMPORTED_MODULE_0__]);
+_ProductShelf__WEBPACK_IMPORTED_MODULE_0__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+
+__webpack_async_result__();
+} catch(e) { __webpack_async_result__(e); } });
+
+/***/ }),
+
+/***/ 43952:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "B": () => (/* binding */ textToKebabCase)
+/* harmony export */ });
+//Input "Example Text!". Output: example-text
+function textToKebabCase(text) {
+  // Replace spaces and special characters with hyphens
+  let kebabCase = text.replace(/[^\w\s]/gi, '-'); // Remove whitespace
+
+  kebabCase = kebabCase.replace(/\s+/g, '-'); // Convert to lowercase
+
+  kebabCase = kebabCase.toLowerCase();
+  return kebabCase ?? '';
+}
+
+/***/ }),
+
+/***/ 56627:
+/***/ ((module) => {
+
+// Exports
+module.exports = {
+	"section": "section_section__C1DoH",
+	"loading": "section_loading__k5bCF"
+};
+
+
+/***/ })
+
+};
+;