@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductGalleryCarousel.js

@@ -1,303 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var Carousel = require('../../../../../carousel/components/Carousel.js');
-var CarouselItem = require('../../../../../carousel/components/CarouselItem.js');
-var core = require('@gem-sdk/core');
-var common = require('../../common/common.js');
-var NextImage = require('../../../../../image/components/NextImage.js');
-var productGallery = require('../../common/productGallery.js');
-var ButtonOpenLightBox = require('./ButtonOpenLightBox.js');
-var MediaIcon = require('./MediaIcon.js');
-var getSrcSet = require('../../../../../image/helpers/getSrcSet.js');
-var productFeaturedImage = require('../../common/productFeaturedImage.js');
-
-const ProductGalleryCarousel = ({ builderPropUID, productImages, onHandleClick, activeIndexFormFeatureImage, onClickFeatureArrow, builderPropsClass, arrow, priorityFeatureImage, ...setting })=>{
-    const currentDevice = core.useCurrentDevice();
-    const featuredImageGlobal = core.useFeaturedImageGlobal();
-    const [hasClickFeatureArrow, setHasClickFeatureArrow] = React.useState(onClickFeatureArrow || '');
-    const mode = core.useEditorMode();
-    const [moveToIdx, setMoveToIdx] = React.useState(0);
-    React.useEffect(()=>{
-        setHasClickFeatureArrow(onClickFeatureArrow || '');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onClickFeatureArrow
-    ]);
-    React.useEffect(()=>{
-        if (hasClickFeatureArrow) {
-            setMoveToIdx(activeIndexFormFeatureImage || 0);
-            setHasClickFeatureArrow('');
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        activeIndexFormFeatureImage
-    ]);
-    React.useEffect(()=>{
-        if (priorityFeatureImage) {
-            const indexPriorityFeatureImage = productImages?.findIndex((item)=>item.id === priorityFeatureImage.id) || 0;
-            setMoveToIdx(indexPriorityFeatureImage);
-            setHasClickFeatureArrow('');
-        }
-    }, [
-        priorityFeatureImage,
-        productImages
-    ]);
-    React.useEffect(()=>{
-        const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        setMoveToIdx(index || 0);
-        setHasClickFeatureArrow('');
-    }, [
-        featuredImageGlobal,
-        productImages
-    ]);
-    const layout = React.useMemo(()=>{
-        return core.getResponsiveValueByScreen(setting?.position, currentDevice);
-    }, [
-        currentDevice,
-        setting?.position
-    ]);
-    const controlOverContent = React.useMemo(()=>{
-        return {
-            desktop: core.getResponsiveValueByScreen(setting.navigationPosition, 'desktop') === 'inside',
-            tablet: core.getResponsiveValueByScreen(setting.navigationPosition, 'tablet') === 'inside',
-            mobile: core.getResponsiveValueByScreen(setting.navigationPosition, 'mobile') === 'inside'
-        };
-    }, [
-        setting.navigationPosition
-    ]);
-    const shapeByLayout = React.useMemo(()=>{
-        return productGallery.getShapeByLayout({
-            shape: setting.shape,
-            shapeForBottom: setting.shapeForBottom,
-            shapeFor1Col: setting.shapeFor1Col,
-            shapeFor2Col: setting.shapeFor2Col,
-            shapeForFtOnly: setting.shapeForFtOnly,
-            shapeForInsideBottom: setting.shapeForInsideBottom,
-            shapeForInside: setting.shapeForInside
-        }, setting.position);
-    }, [
-        setting.shape,
-        setting.shapeForBottom,
-        setting.shapeFor1Col,
-        setting.shapeFor2Col,
-        setting.shapeForFtOnly,
-        setting.position,
-        setting.shapeForInsideBottom,
-        setting.shapeForInside
-    ]);
-    const handleSetSrc = React.useCallback(()=>{
-        getSrcSet.handleSetSrcForProductImageList({
-            builderPropUID,
-            shapeByLayout,
-            qualityType: setting.qualityType,
-            qualityPercent: setting.qualityPercent
-        });
-    }, [
-        shapeByLayout,
-        setting.qualityPercent,
-        setting.qualityType,
-        builderPropUID
-    ]);
-    React.useEffect(()=>{
-        if (mode === 'edit') return;
-        const $galleryImageGrid = document?.querySelector(`.gem-slider-item-${builderPropUID} .product-list-image`);
-        if (!$galleryImageGrid) return;
-        handleSetSrc();
-        const observer = new ResizeObserver(()=>{
-            handleSetSrc();
-        });
-        observer?.observe($galleryImageGrid, {});
-        return ()=>{
-            observer?.disconnect();
-        };
-    }, [
-        handleSetSrc,
-        builderPropUID,
-        mode
-    ]);
-    const slidePerShow = React.useMemo(()=>{
-        return productGallery.getSliderPerShowConfig(shapeByLayout, setting.position);
-    }, [
-        setting.position,
-        shapeByLayout
-    ]);
-    const getWidthByLayoutForCarousel = React.useMemo(()=>{
-        let widthConfigByDevice = {};
-        const DEVICES = [
-            'desktop',
-            'mobile',
-            'tablet'
-        ];
-        DEVICES.forEach((device)=>{
-            const isLayoutBottom = layout === 'bottom-center' || layout === 'inside-bottom';
-            const isInsideLayout = layout === 'inside-left' || layout === 'inside-right';
-            widthConfigByDevice = {
-                ...widthConfigByDevice,
-                [device]: isLayoutBottom || isInsideLayout ? '100%' : core.getResponsiveValueByScreen(shapeByLayout, device)?.width
-            };
-        });
-        return widthConfigByDevice;
-    }, [
-        shapeByLayout,
-        layout
-    ]);
-    const getWidthByLayoutForCarouselItem = React.useMemo(()=>{
-        return productGallery.getSettingWidthForCarouselItem({
-            shapeByLayout,
-            position: setting.position
-        });
-    }, [
-        shapeByLayout,
-        setting.position
-    ]);
-    const getMinWidthByLayoutForCarouselItem = React.useMemo(()=>{
-        return productGallery.getSettingMinWidthForCarouselItem({
-            shapeByLayout,
-            position: setting.position,
-            spacing: setting.itemSpacing
-        });
-    }, [
-        shapeByLayout,
-        setting.position,
-        setting.itemSpacing
-    ]);
-    const getHeightByLayoutForCarouselItem = React.useMemo(()=>{
-        return core.getHeightByShapeGlobalSize(shapeByLayout);
-    }, [
-        shapeByLayout
-    ]);
-    const enableOpenLightBox = React.useMemo(()=>{
-        return core.getResponsiveValueByScreen(setting.clickOpenLightBox, currentDevice);
-    }, [
-        setting.clickOpenLightBox,
-        currentDevice
-    ]);
-    const isDisplay = React.useMemo(()=>{
-        const isDisplayByWidth = productGallery.checkDisplayGalleryByWidth({
-            shapeByLayout
-        });
-        return core.getResponsiveValueByScreen(isDisplayByWidth, currentDevice);
-    }, [
-        shapeByLayout,
-        currentDevice
-    ]);
-    return isDisplay && /*#__PURE__*/ jsxRuntime.jsx(Carousel.default, {
-        parentClass: builderPropsClass,
-        rootClass: builderPropsClass,
-        setting: {
-            loop: setting?.loop,
-            // slidesToShow: slidePerShow,
-            itemNumber: slidePerShow,
-            dot: productGallery.getAllowDotConfig(),
-            dotStyle: productGallery.getDotStyleConfig(),
-            controlOverContent: controlOverContent,
-            enableDrag: {
-                desktop: setting?.dragToScroll,
-                tablet: setting?.dragToScroll,
-                mobile: setting?.dragToScroll
-            },
-            vertical: productGallery.getCarouselVerticalConfigByPosition(setting.position),
-            arrowCustom: setting?.arrowIcon,
-            arrowCustomColor: setting?.arrowIconColor,
-            arrowBackgroundColor: setting?.arrowNavColor,
-            arrowBorder: {
-                desktop: setting?.arrowNavBorder
-            },
-            roundedArrow: {
-                desktop: setting?.arrowNavRadius
-            },
-            sneakPeakType: {
-                desktop: 'center'
-            },
-            arrowGapToEachSide: '16',
-            navigationStyle: setting.navigationPosition,
-            arrowButtonSize: {
-                desktop: {
-                    width: '24px',
-                    height: '24px'
-                }
-            }
-        },
-        styles: {
-            spacing: common.convertSpacing(setting?.itemSpacing),
-            sizeSetting: {
-                desktop: {
-                    width: getWidthByLayoutForCarousel['desktop'] || '100%',
-                    height: 'auto'
-                },
-                tablet: {
-                    width: getWidthByLayoutForCarousel['tablet'] || '100%',
-                    height: 'auto'
-                },
-                mobile: {
-                    width: getWidthByLayoutForCarousel['mobile'] || '100%',
-                    height: 'auto'
-                }
-            }
-        },
-        slidesClass: productGallery.getEditorMinHeightClass(currentDevice, setting.position, setting.navigationPosition),
-        builderProps: {
-            uid: `${builderPropUID}-carousel`
-        },
-        moveToIdx: moveToIdx,
-        isHiddenArrowWhenDisabled: true,
-        disableMarginAuto: true,
-        children: productImages?.map((image, index)=>{
-            const canActive = index === moveToIdx;
-            const imageSrc = productFeaturedImage.isFeatureMedia(image.contentType) ? image.previewImage : image.src;
-            return /*#__PURE__*/ jsxRuntime.jsxs(CarouselItem.default, {
-                contentType: "productImage",
-                className: core.cls(`gem-slider-item gem-slider-item-${builderPropUID} gp-gallery-image-item gp-group gp-flex gp-w-full gp-items-center gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 data-[border=deactive]:after:!gp-border-transparent`, {
-                    'gem-slider-item-active': setting?.borderActive?.border !== 'none' && canActive
-                }),
-                onClickItem: ()=>{
-                    onHandleClick(image?.id || '', enableOpenLightBox);
-                },
-                style: {
-                    maxWidth: '100%',
-                    outlineColor: 'var(--g-c-brand, brand)',
-                    ...core.makeStyleResponsive('minw', core.makeWidth(getMinWidthByLayoutForCarouselItem)),
-                    ...core.makeStyleResponsive('w', core.makeWidth(getWidthByLayoutForCarouselItem)),
-                    ...core.makeStyleResponsive('h', core.makeHeight(getHeightByLayoutForCarouselItem)),
-                    ...core.composeRadius({
-                        normal: setting.corner
-                    })
-                },
-                "data-id": image?.id,
-                "data-border": canActive && !!setting?.borderActive ? 'active' : 'deactive',
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                        draggable: "false",
-                        src: imageSrc,
-                        width: image?.width,
-                        height: image?.height,
-                        alt: image?.alt,
-                        setting: {
-                            aspectRatio: common.getAspectRatio(shapeByLayout),
-                            layout: setting?.layout,
-                            qualityPercent: setting?.qualityPercent,
-                            qualityType: setting?.qualityType
-                        },
-                        style: {
-                            width: '100%',
-                            height: '100%',
-                            cursor: 'pointer'
-                        },
-                        className: "product-list-image"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
-                        contentType: image?.contentType || ''
-                    }),
-                    core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice) && /*#__PURE__*/ jsxRuntime.jsx(ButtonOpenLightBox.default, {})
-                ]
-            }, image?.id);
-        })
-    });
-};
-var ProductGalleryCarousel$1 = /*#__PURE__*/ React.memo(ProductGalleryCarousel);
-
-exports.default = ProductGalleryCarousel$1;

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductGalleryGrid.js

@@ -1,202 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-var common = require('../../common/common.js');
-var NextImage = require('../../../../../image/components/NextImage.js');
-var productGallery = require('../../common/productGallery.js');
-var ButtonOpenLightBox = require('./ButtonOpenLightBox.js');
-var MediaIcon = require('./MediaIcon.js');
-var productFeaturedImage = require('../../common/productFeaturedImage.js');
-var hoverAction = require('../../common/hoverAction.js');
-var getSrcSet = require('../../../../../image/helpers/getSrcSet.js');
-
-const ProductGalleryGrid = ({ builderPropUID, productImages, onHandleClick, activeIndexFormFeatureImage, children, isHiddenInteraction, ...setting })=>{
-    const currentDevice = core.useCurrentDevice();
-    const featuredImageGlobal = core.useFeaturedImageGlobal();
-    const [imageActiveIndex, setImageActiveIndex] = React.useState(0);
-    const mode = core.useEditorMode();
-    React.useEffect(()=>{
-        setImageActiveIndex(activeIndexFormFeatureImage || 0);
-    }, [
-        activeIndexFormFeatureImage
-    ]);
-    React.useEffect(()=>{
-        const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        setImageActiveIndex(index && index > 0 ? index : 0);
-    }, [
-        featuredImageGlobal,
-        productImages
-    ]);
-    const shapeByLayout = React.useMemo(()=>{
-        return productGallery.getShapeByLayout({
-            shape: setting.shape,
-            shapeForBottom: setting.shapeForBottom,
-            shapeFor1Col: setting.shapeFor1Col,
-            shapeFor2Col: setting.shapeFor2Col,
-            shapeForFtOnly: setting.shapeForFtOnly,
-            shapeForInsideBottom: setting.shapeForInsideBottom,
-            shapeForInside: setting.shapeForInside
-        }, setting.position);
-    }, [
-        setting.shape,
-        setting.shapeForBottom,
-        setting.shapeFor1Col,
-        setting.shapeFor2Col,
-        setting.shapeForFtOnly,
-        setting.position,
-        setting.shapeForInsideBottom,
-        setting.shapeForInside
-    ]);
-    const handleSetSrc = React.useCallback(()=>{
-        getSrcSet.handleSetSrcForProductImageList({
-            builderPropUID,
-            shapeByLayout,
-            qualityType: setting.qualityType,
-            qualityPercent: setting.qualityPercent
-        });
-    }, [
-        shapeByLayout,
-        setting.qualityPercent,
-        setting.qualityType,
-        builderPropUID
-    ]);
-    React.useEffect(()=>{
-        if (mode === 'edit') return;
-        const $galleryImageGrid = document?.querySelector('.grid-gallery');
-        if (!$galleryImageGrid) return;
-        handleSetSrc();
-        const observer = new ResizeObserver(()=>{
-            handleSetSrc();
-        });
-        observer?.observe($galleryImageGrid, {});
-        return ()=>{
-            observer?.disconnect();
-        };
-    }, [
-        handleSetSrc,
-        builderPropUID,
-        mode
-    ]);
-    const getHeightByLayoutForItem = React.useMemo(()=>{
-        return core.getHeightByShapeGlobalSize(shapeByLayout);
-    }, [
-        shapeByLayout
-    ]);
-    const getWidthByLayoutForItem = React.useMemo(()=>{
-        return productGallery.getSettingWidthForGridItem({
-            shapeByLayout,
-            itemSpacing: setting.itemSpacing
-        });
-    }, [
-        shapeByLayout,
-        setting.itemSpacing
-    ]);
-    const enableOpenLightBox = React.useMemo(()=>{
-        return core.getResponsiveValueByScreen(setting.clickOpenLightBox, currentDevice);
-    }, [
-        setting.clickOpenLightBox,
-        currentDevice
-    ]);
-    const isDisplay = React.useMemo(()=>{
-        const isDisplayByWidth = productGallery.checkDisplayGalleryByWidth({
-            shapeByLayout
-        });
-        return core.getResponsiveValueByScreen(isDisplayByWidth, currentDevice);
-    }, [
-        shapeByLayout,
-        currentDevice
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: isDisplay && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            "data-slot": "children",
-            "data-id": builderPropUID,
-            className: core.cls('grid-gallery gp-flex gp-h-fit gp-w-full gp-flex-wrap product-feature-image gp-overflow-hidden gp-relative'),
-            style: {
-                ...core.makeStyleResponsive('cg', setting?.itemSpacing),
-                ...core.makeStyleResponsive('rg', setting?.itemSpacing),
-                ...core.makeStyleResponsive('jc', setting?.align)
-            },
-            "gp-data-hidden": `${isHiddenInteraction}`,
-            children: [
-                productImages?.map((image, index)=>{
-                    const canActive = index === imageActiveIndex;
-                    const imageSrc = productFeaturedImage.isFeatureMedia(image.contentType) ? image.previewImage : image.src;
-                    return(// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        "aria-hidden": true,
-                        className: core.cls(`gem-slider-item gp-cursor-pointer gem-slider-item-${builderPropUID} gp-relative gp-gallery-image-item gp-overflow-hidden group relative cursor-pointer overflow-hidden outline-1  -outline-offset-1 data-[border=deactive]:after:!border-transparent`, {
-                            'gem-slider-item-active': setting?.borderActive?.border !== 'none' && canActive
-                        }),
-                        onClick: ()=>onHandleClick(image?.id || '', enableOpenLightBox),
-                        style: {
-                            maxWidth: '100%',
-                            outlineColor: 'var(--g-c-brand, brand)',
-                            ...core.makeStyleResponsive('h', core.makeHeight(getHeightByLayoutForItem)),
-                            ...core.makeStyleResponsive('w', core.makeWidth(getWidthByLayoutForItem)),
-                            ...core.composeRadius({
-                                normal: setting.corner
-                            })
-                        },
-                        onMouseMove: (e)=>hoverAction.handleMouseMove(e, {
-                                hoverEffect: setting.galleryHoverEffect,
-                                zoom: setting.galleryZoom,
-                                zoomType: setting.galleryZoomType
-                            }),
-                        onMouseOut: (e)=>hoverAction.handleMouseOut(e),
-                        "data-border": canActive && !!setting?.borderActive ? 'active' : 'deactive',
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                                src: imageSrc,
-                                width: image?.width,
-                                height: image?.height,
-                                alt: image?.alt,
-                                setting: {
-                                    aspectRatio: common.getAspectRatio(shapeByLayout),
-                                    layout: setting?.layout
-                                },
-                                style: {
-                                    width: '100%',
-                                    height: '100%'
-                                }
-                            }, image?.id),
-                            /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
-                                contentType: image?.contentType || ''
-                            }),
-                            setting?.galleryHoverEffect !== 'none' && !productFeaturedImage.isFeatureMedia(image?.contentType) && /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                                src: imageSrc,
-                                width: image?.width,
-                                height: image?.height,
-                                alt: image?.alt,
-                                setting: {
-                                    layout: setting.layout,
-                                    aspectRatio: common.getAspectRatio(shapeByLayout)
-                                },
-                                className: core.cls('hover-image !gp-max-w-none', productFeaturedImage.getZoomImageClass())
-                            }),
-                            setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' && [
-                                'one-col',
-                                'two-col'
-                            ].includes(core.getResponsiveValueByScreen(setting.position, currentDevice) || '') && !productFeaturedImage.isFeatureMedia(image?.contentType) && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: core.cls(productFeaturedImage.getZoomLenClass(), 'room-len'),
-                                style: {
-                                    ...core.makeStyle({
-                                        bgi: `url("${image?.src}")`
-                                    })
-                                }
-                            }),
-                            core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice) && /*#__PURE__*/ jsxRuntime.jsx(ButtonOpenLightBox.default, {})
-                        ]
-                    }, image?.id));
-                }),
-                children
-            ]
-        })
-    });
-};
-var ProductGalleryGrid$1 = /*#__PURE__*/ React.memo(ProductGalleryGrid);
-
-exports.default = ProductGalleryGrid$1;

package/dist/cjs/product/components/ProductImagesV2/jsx/components/ProductImagesLightBox.js

@@ -1,143 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var Carousel = require('../../../../../carousel/components/Carousel.js');
-var CarouselItem = require('../../../../../carousel/components/CarouselItem.js');
-var NextImage = require('../../../../../image/components/NextImage.js');
-require('../../../../../modal/components/confirm.js');
-var Modal = require('../../../../../modal/components/Modal.js');
-var React = require('react');
-var productFeaturedImage = require('../../common/productFeaturedImage.js');
-var ProductFeatureVideo = require('./ProductFeatureVideo.js');
-var MediaIcon = require('./MediaIcon.js');
-
-const ProductImagesLightBox = ({ builderPropUID, productImages, open, imageRatio, onHandleClose })=>{
-    const featuredImageGlobal = core.useFeaturedImageGlobal();
-    const imageActiveIndex = React.useMemo(()=>{
-        const index = productImages?.findIndex((item)=>item.id === featuredImageGlobal?.id);
-        return index && index > 0 ? index : 0;
-    }, [
-        productImages,
-        featuredImageGlobal
-    ]);
-    const showControl = {
-        desktop: productImages && productImages.length > 1,
-        mobile: productImages && productImages?.length > 1,
-        tablet: productImages && productImages?.length > 1
-    };
-    const loopControl = {
-        desktop: false,
-        mobile: false,
-        tablet: false
-    };
-    const mode = core.useEditorMode();
-    const isRenderVideo = (image)=>mode !== 'edit' && [
-            'VIDEO',
-            'EXTERNAL_VIDEO'
-        ].includes(image?.contentType || '');
-    return /*#__PURE__*/ jsxRuntime.jsx(Modal.default, {
-        setting: {
-            open: open
-        },
-        styles: {
-            width: '80%'
-        },
-        closeOnClickOutside: true,
-        onClose: ()=>onHandleClose(),
-        disableIframeClickEvent: true,
-        contentClass: "mobile:!gp-w-[100%] gp-px-2 gp-pb-10",
-        children: /*#__PURE__*/ jsxRuntime.jsx(Carousel.default, {
-            setting: {
-                loop: loopControl,
-                slidesToShow: {
-                    desktop: 1,
-                    tablet: 1,
-                    mobile: 1
-                },
-                defaultCurrentSlider: imageActiveIndex,
-                dot: {
-                    desktop: true,
-                    mobile: true,
-                    tablet: true
-                },
-                dotStyle: {
-                    desktop: 'outside',
-                    mobile: 'outside',
-                    tablet: 'outside'
-                },
-                dotColor: {
-                    desktop: '#E2E2E2',
-                    mobile: '#E2E2E2',
-                    tablet: '#E2E2E2'
-                },
-                dotActiveColor: {
-                    desktop: '#121212',
-                    mobile: '#121212',
-                    tablet: '#121212'
-                },
-                controlOverContent: {
-                    desktop: true,
-                    mobile: true,
-                    tablet: true
-                },
-                arrow: showControl,
-                dotSize: {
-                    desktop: 12
-                },
-                dotGapToCarousel: {
-                    desktop: 12
-                }
-            },
-            styles: {
-                sizeSetting: {
-                    desktop: {
-                        height: '80vh'
-                    },
-                    tablet: {
-                        height: '80vh'
-                    },
-                    mobile: {
-                        height: '60vh'
-                    }
-                }
-            },
-            moveToIdx: imageActiveIndex,
-            hiddenDotWhenOnlyOne: true,
-            isHiddenArrowWhenDisabled: true,
-            builderProps: {
-                uid: builderPropUID
-            },
-            fullHeight: true,
-            children: productImages?.map((image)=>/*#__PURE__*/ jsxRuntime.jsx(CarouselItem.default, {
-                    className: `gem-slider-item gem-slider-item-${builderPropUID} gp-flex gp-items-center gp-justify-center gp-px-4`,
-                    children: !isRenderVideo(image) ? /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(NextImage.default, {
-                                src: productFeaturedImage.isFeatureMedia(image?.contentType) ? image?.previewImage : image?.src,
-                                width: image?.width,
-                                height: image?.height,
-                                alt: image?.alt,
-                                "content-type": image?.contentType,
-                                setting: {
-                                    aspectRatio: imageRatio
-                                },
-                                className: core.cls('gp-h-full gp-w-full gp-object-contain')
-                            }, image?.id),
-                            /*#__PURE__*/ jsxRuntime.jsx(MediaIcon.default, {
-                                contentType: image?.contentType ?? ''
-                            })
-                        ]
-                    }) : /*#__PURE__*/ jsxRuntime.jsx(ProductFeatureVideo.default, {
-                        type: image?.contentType,
-                        url: image.src ?? '',
-                        aspectRatio: imageRatio
-                    })
-                }, image?.id))
-        })
-    });
-};
-
-exports.default = ProductImagesLightBox;