@faststore/core 2.0.123-alpha.0 → 2.0.128-alpha.0

package/.next/server/chunks/104.js

@@ -0,0 +1,673 @@
+exports.id = 104;
+exports.ids = [104];
+exports.modules = {
+
+/***/ 4285:
+/***/ ((__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__(6689);
+/* 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-testid": testId, ...otherProps }, children));
+});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductShelf);
+//# sourceMappingURL=ProductShelf.js.map
+
+/***/ }),
+
+/***/ 2321:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "z": () => (/* binding */ Components)
+});
+
+// EXTERNAL MODULE: ./src/components/product/ProductCard/index.ts + 4 modules
+var ProductCard = __webpack_require__(6475);
+;// CONCATENATED MODULE: ./src/customizations/components/overrides/ProductShelf.tsx
+const SECTION = "ProductShelf";
+const overrides = {
+  name: SECTION,
+  components: {}
+};
+/* harmony default export */ const 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 Components = _objectSpread({
+  ProductCard: ProductCard/* default */.Z
+}, ProductShelf.components);
+
+
+
+/***/ }),
+
+/***/ 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__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_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 _faststore_ui__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(4285);
+/* harmony import */ var src_components_skeletons_ProductShelfSkeleton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(424);
+/* harmony import */ var src_sdk_analytics_hooks_useViewItemListEvent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5184);
+/* harmony import */ var src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4867);
+/* harmony import */ var _Overrides__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2321);
+/* harmony import */ var _Section__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7067);
+/* harmony import */ var _ui_Carousel__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(399);
+/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(6627);
+/* harmony import */ var _section_module_scss__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_section_module_scss__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(997);
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__);
+var __webpack_async_dependencies__ = __webpack_handle_async_dependencies__([src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_4__]);
+src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_4__ = (__webpack_async_dependencies__.then ? (await __webpack_async_dependencies__)() : __webpack_async_dependencies__)[0];
+const _excluded = ["title", "withDivisor"];
+
+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 {
+  ProductCard
+} = _Overrides__WEBPACK_IMPORTED_MODULE_5__/* .Components */ .z;
+
+
+
+
+
+
+function ProductShelf(_ref) {
+  let {
+    title,
+    withDivisor = false
+  } = _ref,
+      variables = _objectWithoutProperties(_ref, _excluded);
+
+  const viewedOnce = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  const {
+    ref,
+    inView
+  } = (0,react_intersection_observer__WEBPACK_IMPORTED_MODULE_1__.useInView)();
+  const products = (0,src_sdk_product_useProductsQuery__WEBPACK_IMPORTED_MODULE_4__/* .useProductsQuery */ .kN)(variables);
+  const productEdges = products?.edges ?? [];
+  const aspectRatio = 1;
+  const {
+    sendViewItemListEvent
+  } = (0,src_sdk_analytics_hooks_useViewItemListEvent__WEBPACK_IMPORTED_MODULE_3__/* .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_8__.jsxs)(_Section__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
+    className: `${(_section_module_scss__WEBPACK_IMPORTED_MODULE_9___default().section)} section-product-shelf layout__section ${withDivisor ? 'section__divisor' : ''}`,
+    ref: ref,
+    children: [/*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx("h2", {
+      className: "text__title-section layout__content",
+      children: title
+    }), /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx(src_components_skeletons_ProductShelfSkeleton__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
+      aspectRatio: aspectRatio,
+      loading: products === undefined,
+      children: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx(_faststore_ui__WEBPACK_IMPORTED_MODULE_10__/* ["default"] */ .Z, {
+        children: /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx(_ui_Carousel__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
+          children: productEdges.map((product, idx) => /*#__PURE__*/react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx(ProductCard, {
+            bordered: true,
+            product: product.node,
+            index: idx + 1,
+            aspectRatio: aspectRatio
+          }, `${product.node.id}`))
+        })
+      })
+    })]
+  });
+}
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ProductShelf);
+__webpack_async_result__();
+} catch(e) { __webpack_async_result__(e); } });
+
+/***/ }),
+
+/***/ 7104:
+/***/ ((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__(8569);
+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); } });
+
+/***/ }),
+
+/***/ 424:
+/***/ ((__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__(4285);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+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", { ref: ref, "data-fs-product-shelf-items": true, "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", { 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__(8459);
+// EXTERNAL MODULE: ./src/components/skeletons/ProductCardSkeleton/index.ts + 1 modules
+var ProductCardSkeleton = __webpack_require__(3288);
+// EXTERNAL MODULE: external "react/jsx-runtime"
+var jsx_runtime_ = __webpack_require__(997);
+;// 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, {
+      className: "layout__content",
+      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
+
+
+/***/ }),
+
+/***/ 399:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Z": () => (/* reexport */ ui_Carousel_Carousel)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(6689);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// 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({ 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, "data-fs-carousel-item": true, "aria-roledescription": "slide", id: `carousel-item-${index}`, "data-fs-carousel-item-visible": isItemVisible(index - Number(infiniteMode)) || undefined }, shouldDisplayItem ? children : null));
+}
+/* harmony default export */ const Carousel_CarouselItem = (CarouselItem);
+//# sourceMappingURL=CarouselItem.js.map
+// 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__(7578);
+;// CONCATENATED MODULE: ../components/dist/molecules/Carousel/CarouselBullets.js
+
+
+const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
+const CarouselBullets = (0,external_react_.forwardRef)(function Bullets({ 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: idx, role: "tab", tabIndex: -1, "data-fs-carousel-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
+    })));
+});
+/* harmony default export */ const Carousel_CarouselBullets = (CarouselBullets);
+//# sourceMappingURL=CarouselBullets.js.map
+// EXTERNAL MODULE: ../components/dist/molecules/IconButton/IconButton.js
+var IconButton = __webpack_require__(2765);
+// EXTERNAL MODULE: ../components/dist/atoms/Icon/Icon.js
+var Icon = __webpack_require__(5045);
+;// 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({ infiniteMode = true, controls = 'complete', testId = 'fs-carousel', transition = {
+    duration: 400,
+    property: 'transform',
+}, children, className, 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": "carousel", "aria-roledescription": "carousel" },
+        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, { 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, { 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) => `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 = 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
+
+
+/***/ }),
+
+/***/ 6627:
+/***/ ((module) => {
+
+// Exports
+module.exports = {
+	"section": "section_section__C1DoH",
+	"loading": "section_loading__k5bCF"
+};
+
+
+/***/ })
+
+};
+;