@gem-sdk/components 12.0.0-dev.132 → 12.0.0-dev.138

package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageCarousel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),hoverAction=require("../../common/hoverAction.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),styles=require("../../common/styles.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),ProductFeaturedImageOnly=require("./ProductFeaturedImageOnly.js"),useProductFeaturedImageCarousel=require("../../hooks/useProductFeaturedImageCarousel.js");const ProductFeaturedImageCarousel=React.forwardRef((e,t)=>{let{productImages:r,imgRef:s,onHandleClick:a,onClickArrow:o,onHandleLoaded:u,onHandleUpdateActiveIndex:l,swiperUpdateTrigger:i,builderPropUID:d,builderPropsClass:n,parentUid:c,isFilterByVariantEnabled:m,...g}=e,I=React.useRef(null),{ref:p,imageActive:h,imageActiveIndex:j,imageShowWhenHover:v,enableOpenLightBox:y,filteredProductImages:C,isRenderFeatureCarousel:P,genRandomKey:x,getAspectRatioFinal:f,emitUpdateActiveIndex:R}=useProductFeaturedImageCarousel.useProductFeaturedImageCarousel(e);React.useImperativeHandle(t,()=>({getSwiper:()=>I.current?.getSwiper()||null}));let A=core.useCurrentDevice(),{galleryItemClasses:M,featureImageOnlyOneImageClasses:S}=getProductImagesClassName.getProductImagesClassName(g),{featuredImageCarouselStyle:q,featureImageCarouselItemStyle:F}=getProductImagesStyles.getProductImagesStyles(g),O=system.createStyle({...styles.getFeaturedImageOnlyOneImageStyle({setting:g,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:w}=getProductImagesAttr.getProductImagesAttr(g);return jsxRuntime.jsx("div",{ref:p,"data-slot":"children",className:"product-feature-image",children:P?jsxRuntime.jsx(Carousel.default,{ref:I,parentClass:n,elmRef:s,setting:w,styles:q,builderProps:{uid:d},isHiddenArrowWhenDisabled:!0,onLoaded:e=>u&&u(e),onChangeActive:e=>R(e),onClickArrow:()=>o&&o(x()),moveToIdx:j,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${d}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=C?.length??0,r=e>=t?0:e;a(C?.[r]?.id??"",y)},children:C?.map(e=>jsxRuntime.jsx(CarouselItem.default,{contentType:"productImage",className:M("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let t=core.getResponsiveValueByScreen(g?.ftClickOpenLightBox,A);"none"!==t&&a(e?.id??"",y)},style:F,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:e,imageShowWhenHover:v,setting:g,aspectRatio:f()})},e?.id))}):jsxRuntime.jsx("div",{ref:s,className:"gp-flex gp-w-full",style:{...core.makeStyleResponsive("jc",g?.align)},"data-id":d,children:jsxRuntime.jsx("div",{"aria-hidden":"true",className:S,style:O,onMouseMove:e=>hoverAction.handleMouseMove(e,g),onMouseOut:e=>hoverAction.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{a(h?.id??"",y)},children:jsxRuntime.jsx(ProductFeaturedImageOnly.default,{image:m?r?.[0]:h,imageShowWhenHover:v,setting:g,aspectRatio:f(m?r?.[0]:h)})})})})});var ProductFeaturedImageCarousel$1=React.memo(ProductFeaturedImageCarousel);exports.default=ProductFeaturedImageCarousel$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@gem-sdk/core"),s=require("../../common/hoverAction.js"),o=require("../../composables/getProductImagesStyles.js"),a=require("../../composables/getProductImagesClassName.js"),l=require("../../composables/getProductImagesAttr.js"),u=require("@gem-sdk/system"),i=require("../../common/styles.js"),n=require("../../../../../carousel-v3/components/root/Carousel.js"),d=require("../../../../../carousel-v3/components/item/CarouselItem.js"),c=require("./ProductFeaturedImageOnly.js"),m=require("../../hooks/useProductFeaturedImageCarousel.js");const g=t.forwardRef((g,p)=>{let{productImages:h,imgRef:v,onHandleClick:f,onClickArrow:j,onHandleLoaded:y,onHandleUpdateActiveIndex:I,swiperUpdateTrigger:x,builderPropUID:C,builderPropsClass:M,parentUid:q,isFilterByVariantEnabled:S,...w}=g,P=t.useRef(null),{ref:b,imageActive:O,imageActiveIndex:k,imageShowWhenHover:R,enableOpenLightBox:A,filteredProductImages:H,isRenderFeatureCarousel:N,genRandomKey:B,getAspectRatioFinal:F,emitUpdateActiveIndex:W}=m.useProductFeaturedImageCarousel(g);t.useImperativeHandle(p,()=>({getSwiper:()=>P.current?.getSwiper()||null}));let D=r.useCurrentDevice(),{galleryItemClasses:L,featureImageOnlyOneImageClasses:T}=a.getProductImagesClassName(w),{featuredImageCarouselStyle:_,featureImageCarouselItemStyle:V}=o.getProductImagesStyles(w),$=u.createStyle({...i.getFeaturedImageOnlyOneImageStyle({setting:w,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:z}=l.getProductImagesAttr(w);return e.jsx("div",{ref:b,"data-slot":"children",className:"product-feature-image",children:N?e.jsx(n.default,{ref:P,parentClass:M,elmRef:v,setting:z,styles:_,builderProps:{uid:C},isHiddenArrowWhenDisabled:!0,onLoaded:e=>y&&y(e),onChangeActive:e=>W(e),onClickArrow:()=>j&&j(B()),moveToIdx:k,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${C}-carousel`,onHandleChangeSlideByInteraction:e=>{let t=H?.length??0;f(H?.[e>=t?0:e]?.id??"",A)},children:H?.map(t=>e.jsx(d.default,{contentType:"productImage",className:L("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=r.getResponsiveValueByScreen(w?.ftClickOpenLightBox,D);"none"!==e&&f(t?.id??"",A)},style:V,onMouseMove:e=>s.handleMouseMove(e,w),onMouseOut:e=>s.handleMouseOut(e),children:e.jsx(c.default,{image:t,imageShowWhenHover:R,setting:w,aspectRatio:F()})},t?.id))}):e.jsx("div",{ref:v,className:"gp-flex gp-w-full",style:{...r.makeStyleResponsive("jc",w?.align)},"data-id":C,children:e.jsx("div",{"aria-hidden":"true",className:T,style:$,onMouseMove:e=>s.handleMouseMove(e,w),onMouseOut:e=>s.handleMouseOut(e),onBlur:()=>void 0,onClick:()=>{f(O?.id??"",A)},children:e.jsx(c.default,{image:S?h?.[0]:O,imageShowWhenHover:R,setting:w,aspectRatio:F(S?h?.[0]:O)})})})})});var p=t.memo(g);exports.default=p;

package/dist/cjs/product/components/product-images-v3/components/child/ProductFeaturedImageOnly.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),NextImage=require("../../../../../image/components/NextImage.js"),MediaIcon=require("./MediaIcon.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),ProductFeatureVideo=require("./ProductFeatureVideo.js");const defaultImage={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"},ProductFeaturedImageOnly=({image:e,imageShowWhenHover:t,setting:r,aspectRatio:a})=>{let o=core.useProduct(),c=core.useCurrentDevice(),s=core.useShopStore(e=>e.storefrontUrl),{isEditMode:u,isPreviewSharePageMode:i}=core.useRenderMode(),n=React.useMemo(()=>"none"!==core.getResponsiveValueByScreen(r.ftClickOpenLightBox,c),[c,r.ftClickOpenLightBox]),d=React.useMemo(()=>!u&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||"")&&!n,[u,e?.contentType,n]),m=React.useMemo(()=>e?{...e,src:d?e.src:productFeaturedImage.isFeatureMedia(e?.contentType)?e?.previewImage:e.src}:defaultImage,[e,d]),l=React.useMemo(()=>{if(i)return"javascript:void(0)";if(!s)return"#";let e=new URL(s);return o?`${e.protocol}//${e.host}/products/${o.handle}`:"#"},[s,o,i]),g=e=>"product-link"===core.getResponsiveValueByScreen(r.ftClickOpenLightBox,c)?jsxRuntime.jsx("a",{title:o?.title,href:l,className:"gp-w-full",children:e}):e,h=React.useMemo(()=>r?.hoverEffect!=="none"&&!productFeaturedImage.isFeatureMedia(m?.contentType),[m?.contentType,r?.hoverEffect]),p=React.useMemo(()=>r?.hoverEffect=="zoom"&&r?.zoomType=="glasses"&&!productFeaturedImage.isFeatureMedia(m?.contentType),[m?.contentType,r?.hoverEffect,r?.zoomType]),f=React.useCallback(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),y=React.useMemo(()=>t?"other"!==r.hoverEffect?f(m):f(t):defaultImage.src,[t,m,r.hoverEffect,f]);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:g(jsxRuntime.jsx(jsxRuntime.Fragment,{children:d?jsxRuntime.jsx(ProductFeatureVideo.default,{type:m?.contentType,url:m.src??"",aspectRatio:a}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NextImage.default,{draggable:"false",src:m.src,width:m?.width,height:m?.height,alt:m?.alt,setting:{aspectRatio:a,layout:r?.ftLayout},priority:r?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),jsxRuntime.jsx(MediaIcon.default,{contentType:m?.contentType??""}),h&&jsxRuntime.jsx(NextImage.default,{draggable:"false",src:y,width:r?.hoverEffect==="other"?t?.width:m.width,height:r?.hoverEffect==="other"?t?.height:m.height,alt:r?.hoverEffect==="other"?t?.alt:m.alt,setting:{layout:r.ftLayout,aspectRatio:a},style:{width:"100%",height:"100%"},className:core.cls("hover-image featured-image-only !gp-max-w-none",productFeaturedImage.getZoomImageClass()),priority:r?.preload}),p&&jsxRuntime.jsx("div",{className:core.cls(productFeaturedImage.getZoomLenClass(),"room-len"),style:{...core.makeStyle({bgi:`url("${m?.src}")`})}})]})}))})};var ProductFeaturedImageOnly$1=React.memo(ProductFeaturedImageOnly);exports.default=ProductFeaturedImageOnly$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),r=require("react"),o=require("../../../../../image/components/NextImage.js"),s=require("./MediaIcon.js"),a=require("../../common/productFeaturedImage.js"),i=require("./ProductFeatureVideo.js");const c={src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:480,height:480,alt:"no image",contentType:"IMAGE"};var n=r.memo(({image:n,imageShowWhenHover:l,setting:u,aspectRatio:h})=>{var d;let f=t.useProduct(),p=t.useCurrentDevice(),g=t.useShopStore(e=>e.storefrontUrl),{isEditMode:m,isPreviewSharePageMode:y}=t.useRenderMode(),v=r.useMemo(()=>"none"!==t.getResponsiveValueByScreen(u.ftClickOpenLightBox,p),[p,u.ftClickOpenLightBox]),x=r.useMemo(()=>!m&&["VIDEO","EXTERNAL_VIDEO"].includes(n?.contentType||"")&&!v,[m,n?.contentType,v]),j=r.useMemo(()=>n?{...n,src:x?n.src:a.isFeatureMedia(n?.contentType)?n?.previewImage:n.src}:c,[n,x]),E=r.useMemo(()=>{if(y)return"javascript:void(0)";if(!g)return"#";let e=new URL(g);return f?`${e.protocol}//${e.host}/products/${f.handle}`:"#"},[g,f,y]),M=r.useMemo(()=>u?.hoverEffect!=="none"&&!a.isFeatureMedia(j?.contentType),[j?.contentType,u?.hoverEffect]),T=r.useMemo(()=>u?.hoverEffect=="zoom"&&u?.zoomType=="glasses"&&!a.isFeatureMedia(j?.contentType),[j?.contentType,u?.hoverEffect,u?.zoomType]),b=r.useCallback(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),w=r.useMemo(()=>l?"other"!==u.hoverEffect?b(j):b(l):c.src,[l,j,u.hoverEffect,b]);return e.jsx(e.Fragment,{children:(d=e.jsx(e.Fragment,{children:x?e.jsx(i.default,{type:j?.contentType,url:j.src??"",aspectRatio:h}):e.jsxs(e.Fragment,{children:[e.jsx(o.default,{draggable:"false",src:j.src,width:j?.width,height:j?.height,alt:j?.alt,setting:{aspectRatio:h,layout:u?.ftLayout},priority:u?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),e.jsx(s.default,{contentType:j?.contentType??""}),M&&e.jsx(o.default,{draggable:"false",src:w,width:u?.hoverEffect==="other"?l?.width:j.width,height:u?.hoverEffect==="other"?l?.height:j.height,alt:u?.hoverEffect==="other"?l?.alt:j.alt,setting:{layout:u.ftLayout,aspectRatio:h},style:{width:"100%",height:"100%"},className:t.cls("hover-image featured-image-only !gp-max-w-none",a.getZoomImageClass()),priority:u?.preload}),T&&e.jsx("div",{className:t.cls(a.getZoomLenClass(),"room-len"),style:{...t.makeStyle({bgi:`url("${j?.src}")`})}})]})}),"product-link"===t.getResponsiveValueByScreen(u.ftClickOpenLightBox,p)?e.jsx("a",{title:f?.title,href:E,className:"gp-w-full",children:d}):d)})});exports.default=n;

package/dist/cjs/product/components/product-images-v3/components/child/ProductGalleryGrid.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),common=require("../../common/common.js"),NextImage=require("../../../../../image/components/NextImage.js"),ButtonOpenLightBox=require("../lightbox/ButtonOpenLightBox.js"),MediaIcon=require("./MediaIcon.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),hoverAction=require("../../common/hoverAction.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),useProductGalleryGrid=require("../../hooks/useProductGalleryGrid.js");const ProductGalleryGrid=e=>{let{builderPropUID:t,productImages:o,onHandleClick:r,activeIndexFromFeatureImage:a,children:s,isHiddenInteraction:i,...c}=e,{isDisplay:l,shapeByLayout:u,imageActiveIndex:d,enableOpenLightBox:m,isEnableBorderActive:n,filteredProductImages:g}=useProductGalleryGrid.useProductGalleryGrid(e),y=core.useCurrentDevice(),{galleryGridWrapperClasses:p,galleryItemClasses:h}=getProductImagesClassName.getProductImagesClassName(c),{galleryGridStyles:x,galleryGridItemStyles:j}=getProductImagesStyles.getProductImagesStyles(c);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:l&&jsxRuntime.jsxs("div",{"data-slot":"children","data-id":t,className:p,style:x,"gp-data-hidden":`${i}`,children:[g?.map((e,o)=>{let a=o===d,s=productFeaturedImage.isFeatureMedia(e.contentType)?e.previewImage:e.src;return jsxRuntime.jsxs("div",{"aria-hidden":!0,className:h(`gp-gallery-image-item gem-slider-item-${t}
-                  ${a&&n?"gem-slider-item-active":""}`),onClick:()=>r(e?.id||"",m),style:j,onMouseMove:e=>hoverAction.handleMouseMove(e,{hoverEffect:c.galleryHoverEffect,zoom:c.galleryZoom,zoomType:c.galleryZoomType}),onMouseOut:e=>hoverAction.handleMouseOut(e),"data-border":a&&c?.borderActive?"active":"deactive",children:[jsxRuntime.jsx(NextImage.default,{src:s,width:e?.width,height:e?.height,alt:e?.alt,setting:{aspectRatio:common.getAspectRatio(u),layout:c?.layout},style:{width:"100%",height:"100%"}},e?.id),jsxRuntime.jsx(MediaIcon.default,{contentType:e?.contentType||""}),c?.galleryHoverEffect!=="none"&&!productFeaturedImage.isFeatureMedia(e?.contentType)&&jsxRuntime.jsx(NextImage.default,{src:s,width:e?.width,height:e?.height,alt:e?.alt,setting:{layout:c.layout,aspectRatio:common.getAspectRatio(u)},className:core.cls("hover-image !gp-max-w-none",productFeaturedImage.getZoomImageClass())}),c?.galleryHoverEffect=="zoom"&&c?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(core.getResponsiveValueByScreen(c.position,y)||"")&&!productFeaturedImage.isFeatureMedia(e?.contentType)&&jsxRuntime.jsx("div",{className:core.cls(productFeaturedImage.getZoomLenClass(),"room-len"),style:{...core.makeStyle({bgi:`url("${e?.src}")`})}}),core.getResponsiveValueByScreen(c?.clickOpenLightBox,y)&&jsxRuntime.jsx(ButtonOpenLightBox.default,{})]},e?.id)}),s]})})};var ProductGalleryGrid$1=React.memo(ProductGalleryGrid);exports.default=ProductGalleryGrid$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),o=require("react"),s=require("../../common/common.js"),a=require("../../../../../image/components/NextImage.js"),r=require("../lightbox/ButtonOpenLightBox.js"),i=require("./MediaIcon.js"),l=require("../../common/productFeaturedImage.js"),c=require("../../common/hoverAction.js"),d=require("../../composables/getProductImagesClassName.js"),n=require("../../composables/getProductImagesStyles.js"),u=require("../../hooks/useProductGalleryGrid.js"),m=o.memo(o=>{let{builderPropUID:m,productImages:g,onHandleClick:y,activeIndexFromFeatureImage:h,children:p,isHiddenInteraction:v,...j}=o,{isDisplay:x,shapeByLayout:f,imageActiveIndex:q,enableOpenLightBox:M,isEnableBorderActive:I,filteredProductImages:w}=u.useProductGalleryGrid(o),T=t.useCurrentDevice(),{galleryGridWrapperClasses:b,galleryItemClasses:N}=d.getProductImagesClassName(j),{galleryGridStyles:P,galleryGridItemStyles:C}=n.getProductImagesStyles(j);return e.jsx(e.Fragment,{children:x&&e.jsxs("div",{"data-slot":"children","data-id":m,className:b,style:P,"gp-data-hidden":`${v}`,children:[w?.map((o,d)=>{let n=d===q,u=l.isFeatureMedia(o.contentType)?o.previewImage:o.src;return e.jsxs("div",{"aria-hidden":!0,className:N(`gp-gallery-image-item gem-slider-item-${m}
+                  ${n&&I?"gem-slider-item-active":""}`),onClick:()=>y(o?.id||"",M),style:C,onMouseMove:e=>c.handleMouseMove(e,{hoverEffect:j.galleryHoverEffect,zoom:j.galleryZoom,zoomType:j.galleryZoomType}),onMouseOut:e=>c.handleMouseOut(e),"data-border":n&&j?.borderActive?"active":"deactive",children:[e.jsx(a.default,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s.getAspectRatio(f),layout:j?.layout},style:{width:"100%",height:"100%"}},o?.id),e.jsx(i.default,{contentType:o?.contentType||""}),j?.galleryHoverEffect!=="none"&&!l.isFeatureMedia(o?.contentType)&&e.jsx(a.default,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{layout:j.layout,aspectRatio:s.getAspectRatio(f)},className:t.cls("hover-image !gp-max-w-none",l.getZoomImageClass())}),j?.galleryHoverEffect=="zoom"&&j?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(t.getResponsiveValueByScreen(j.position,T)||"")&&!l.isFeatureMedia(o?.contentType)&&e.jsx("div",{className:t.cls(l.getZoomLenClass(),"room-len"),style:{...t.makeStyle({bgi:`url("${o?.src}")`})}}),t.getResponsiveValueByScreen(j?.clickOpenLightBox,T)&&e.jsx(r.default,{})]},o?.id)}),p]})})});exports.default=m;

package/dist/cjs/product/components/product-images-v3/components/child/ProductImagesLightBoxPreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),ProductFeatureVideo=require("../../../product-images-v2/components/child/ProductFeatureVideo.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),NextImage=require("../../../../../image/components/NextImage.js"),MediaIcon=require("./MediaIcon.js"),constants=require("../lightbox/constants.js");const ProductImagesLightBoxPreview=({image:e,isZoomableMedia:t})=>{let{isEditMode:r}=core.useRenderMode(),o=React.useMemo(()=>!r&&["VIDEO","EXTERNAL_VIDEO"].includes(e?.contentType||""),[r,e?.contentType]),s=React.useMemo(()=>e?{...e,src:o?e.src:productFeaturedImage.isFeatureMedia(e?.contentType)?e?.previewImage:e.src}:constants.DEFAULT_LIGHTBOX_IMAGE_ONLY,[e,o]);return o?jsxRuntime.jsx(ProductFeatureVideo.default,{type:s?.contentType,url:s.src??""}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(NextImage.default,{src:s.src,alt:s.alt,width:s.width,height:s.height,isDisableAspectStyle:!0,setting:{layout:{desktop:"contain",tablet:"contain",mobile:"contain"}},style:{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",display:"block",cursor:t?"zoom-in":"default",objectPosition:"center"},className:"gallery-carousel-image-only"}),jsxRuntime.jsx(MediaIcon.default,{contentType:s?.contentType??""})]})};exports.default=ProductImagesLightBoxPreview;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@gem-sdk/core"),s=require("../../../product-images-v2/components/child/ProductFeatureVideo.js"),i=require("../../common/productFeaturedImage.js"),o=require("../../../../../image/components/NextImage.js"),c=require("./MediaIcon.js"),n=require("../lightbox/constants.js");exports.default=({image:a,isZoomableMedia:u})=>{let{isEditMode:l}=r.useRenderMode(),d=t.useMemo(()=>!l&&["VIDEO","EXTERNAL_VIDEO"].includes(a?.contentType||""),[l,a?.contentType]),m=t.useMemo(()=>a?{...a,src:d?a.src:i.isFeatureMedia(a?.contentType)?a?.previewImage:a.src}:n.DEFAULT_LIGHTBOX_IMAGE_ONLY,[a,d]);return d?e.jsx(s.default,{type:m?.contentType,url:m.src??""}):e.jsxs(e.Fragment,{children:[e.jsx(o.default,{src:m.src,alt:m.alt,width:m.width,height:m.height,isDisableAspectStyle:!0,setting:{layout:{desktop:"contain",tablet:"contain",mobile:"contain"}},style:{width:"100%",height:"100%",maxWidth:"100%",maxHeight:"100%",display:"block",cursor:u?"zoom-in":"default",objectPosition:"center"},className:"gallery-carousel-image-only"}),e.jsx(c.default,{contentType:m?.contentType??""})]})};

package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),React=require("react"),GalleryCarousel=require("../gallery-carousel/GalleryCarousel.js"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),useFeatureImageWithGallery=require("../../hooks/useFeatureImageWithGallery.js");const FeatureImageWithGallery=e=>{let{setting:r,styles:t,builderProps:a,gallery:s,onHandleClickImage:u,priorityFeatureImage:l,children:i,noDataChildren:d,isFilterByVariantEnabled:o}=e,{isEditMode:c}=core.useRenderMode(),m=React.useRef(null),n=core.useCurrentDevice(),g=React.useCallback(e=>{if(!m.current)return;let r=m.current.getSwiper();r&&r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),p={...r,...t},{isShowCarousel:I,featureImageHeight:y,featureWrapperImage:j,onClickFeatureArrow:x,activeIndexFromFeatureImage:h,setOnClickFeatureArrow:P,onHandleLoadedFeatureImage:C,setActiveIndexFromFeatureImage:F}=useFeatureImageWithGallery.useFeatureImageWithGallery(e);if(s?.[0]?.id==="noImageError"&&c)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:d});let{ftImageGalleryClasses:R,imageGalleryWrapperClasses:b}=getProductImagesClassName.getProductImagesClassName(e),{wrapperFeaturedImageStyle:G,featureImageStyle:f,galleryImageStyle:v}=getProductImagesStyles.getProductImagesStyles(p,{gallery:s,featureImageHeight:y}),q=JSON.stringify(p?.position)+n+I;return jsxRuntime.jsxs("div",{className:core.cls("gp-grid gp-w-full gp-relative"),style:G,children:[jsxRuntime.jsxs("div",{className:R,style:f,children:[i,jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{ref:m,imgRef:j,productImages:s,...p,onHandleClick:(e,r)=>u(e||"",r),onHandleLoaded:C,onHandleUpdateActiveIndex:F,onClickArrow:e=>P(e),builderPropUID:a?.uid,builderPropsClass:`gp-product-images-feature-${a?.uid}`})]}),s.length>(o?0:1)&&jsxRuntime.jsx("div",{className:b,style:v,children:I?jsxRuntime.jsx(GalleryCarousel.default,{productImages:s,position:p?.position,...p,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),onSwiperReady:g,activeIndexFormFeatureImage:h,priorityFeatureImage:l,onClickFeatureArrow:x,builderPropsClass:`gp-product-images-gallery-${a?.uid}`}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:s,...p,builderPropUID:a?.uid,onHandleClick:(e,r)=>u(e||"",r),activeIndexFromFeatureImage:h,isHiddenInteraction:!0})})]},q)};exports.default=FeatureImageWithGallery;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("react"),t=require("../gallery-carousel/GalleryCarousel.js"),a=require("../child/ProductGalleryGrid.js"),i=require("../child/ProductFeaturedImageCarousel.js"),u=require("../../composables/getProductImagesStyles.js"),l=require("../../composables/getProductImagesClassName.js"),d=require("../../hooks/useFeatureImageWithGallery.js");exports.default=o=>{let{setting:c,styles:n,builderProps:m,gallery:g,onHandleClickImage:p,priorityFeatureImage:I,children:h,noDataChildren:b,isFilterByVariantEnabled:j}=o,{isEditMode:y}=r.useRenderMode(),x=s.useRef(null),f=r.useCurrentDevice(),C=s.useCallback(e=>{if(!x.current)return;let r=x.current.getSwiper();r&&r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),P={...c,...n},{isShowCarousel:v,featureImageHeight:F,featureWrapperImage:q,onClickFeatureArrow:k,activeIndexFromFeatureImage:w,setOnClickFeatureArrow:H,onHandleLoadedFeatureImage:N,setActiveIndexFromFeatureImage:G}=d.useFeatureImageWithGallery(o);if(g?.[0]?.id==="noImageError"&&y)return e.jsx(e.Fragment,{children:b});let{ftImageGalleryClasses:S,imageGalleryWrapperClasses:D}=l.getProductImagesClassName(o),{wrapperFeaturedImageStyle:R,featureImageStyle:U,galleryImageStyle:A}=u.getProductImagesStyles(P,{gallery:g,featureImageHeight:F}),M=JSON.stringify(P?.position)+f+v;return e.jsxs("div",{className:r.cls("gp-grid gp-w-full gp-relative"),style:R,children:[e.jsxs("div",{className:S,style:U,children:[h,e.jsx(i.default,{ref:x,imgRef:q,productImages:g,...P,onHandleClick:(e,r)=>p(e||"",r),onHandleLoaded:N,onHandleUpdateActiveIndex:G,onClickArrow:e=>H(e),builderPropUID:m?.uid,builderPropsClass:`gp-product-images-feature-${m?.uid}`})]}),g.length>(j?0:1)&&e.jsx("div",{className:D,style:A,children:v?e.jsx(t.default,{productImages:g,position:P?.position,...P,builderPropUID:m?.uid,onHandleClick:(e,r)=>p(e||"",r),onSwiperReady:C,activeIndexFormFeatureImage:w,priorityFeatureImage:I,onClickFeatureArrow:k,builderPropsClass:`gp-product-images-gallery-${m?.uid}`}):e.jsx(a.default,{productImages:g,...P,builderPropUID:m?.uid,onHandleClick:(e,r)=>p(e||"",r),activeIndexFromFeatureImage:w,isHiddenInteraction:!0})})]},M)};

package/dist/cjs/product/components/product-images-v3/components/feature-gallery/FeatureImageWithGallery.liquid.js

@@ -1,79 +1,79 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:u,featureImageStyle:o,featureImageCarouselOnlyOneImageStyle:m,featureImageOnlyOneImageStyle:l,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=system.If("other"==a.hoverEffect,system.LiquidIf("product.media.size > 1","group-hover:gp-opacity-0")),f=()=>`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("../../common/common.js"),a=require("../../common/productFeaturedImage.js"),t=require("../../../../../video/components/HTML5Embed.liquid.js"),r=require("../../../../../image/components/Modal3d.liquid.js"),s=require("../../../../../image/components/NextImage.liquid.js"),d=require("../../../../../image/components/Video.liquid.js"),u=require("../../../../helpers/function.js"),o=require("../../composables/getProductImagesStyles.js"),l=require("../../composables/getProductImagesClassName.js"),g=require("../../composables/getProductImagesAttr.js"),c=require("@gem-sdk/system"),n=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");exports.default=({builderPropUID:p,children:f,enableLazyLoadImage:y,...h})=>{let{featuredImageCarouselClasses:I,galleryItemClasses:q,featuredCarouselItemClasses:b}=l.getProductImagesClassName({...h,builderProps:{uid:p}}),{featuredImageCarouselStyle:v,featureImageStyle:M,featureImageCarouselOnlyOneImageStyle:_,featureImageOnlyOneImageStyle:w,featureImageCarouselItemStyle:$}=o.getProductImagesStyles(h),{featuredImageCarouselSettingAttrs:L}=g.getProductImagesAttr(h),S=i.getAspectRatio(h.ftShape),x=c.If("other"==h.hoverEffect,c.LiquidIf("product.media.size > 1","group-hover:gp-opacity-0")),j=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
-        ${q()}
+        ${R()}
       {% when 'external_video' %}
         {% assign mediaSourceVideo = featureMedia | external_video_url %}
-        ${h()}
+        ${z()}
       {% when 'video' %}
         {% assign mediaSourceVideo = featureMedia.sources.last.url %}
-        ${I()}
+        ${P()}
       {% when 'model' %}
-        ${y()}
+        ${O()}
       {% else %}
-        ${b()}
+        ${k()}
     {% endcase %}
-    `,y=()=>Modal3d_liquid.default({src:system.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:n}),h=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),I=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight(a?.ftLayout)});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},q=()=>core.template`
-      ${_(core.cls("gp-w-full gp-transition-opacity",p,"{{shouldHidden}}"))}
-      ${system.If(a?.hoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
-            ${_("image-zoom",!0)}
+    `,O=()=>r.default({src:c.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:S}),z=()=>d.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:S}),P=()=>{let i=c.createStyle({...a.getVideoHeight(h?.ftLayout),...e.makeStyleResponsive("objf",h?.ftLayout)}),r=c.createStyle({...a.getVideoHeight(h?.ftLayout)});return t.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:r,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...i},className:"gp-invisible"})},R=()=>e.template`
+      ${C(e.cls("gp-w-full gp-transition-opacity",x,"{{shouldHidden}}"))}
+      ${c.If(h?.hoverEffect!=="none",`<div class="${e.cls("zoom-element !gp-max-w-none",a.getZoomImageClass())}">
+            ${C("image-zoom",!0)}
           </div>`," ")}
-      ${system.If(a?.hoverEffect=="zoom"&&a?.zoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
-    `,_=(e,t)=>core.template`
+      ${c.If(h?.hoverEffect=="zoom"&&h?.zoomType=="glasses",`<div class="${e.cls("zoom-lens-element",a.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
+    `,C=(a,t)=>e.template`
     {% assign src = featureMedia.src %}
-    ${system.If(t&&"other"==a.hoverEffect,`{% assign media_length = product.media | size %}
-      {% assign other_image_index = ${a.otherImage} | plus: 0 %}
+    ${c.If(t&&"other"==h.hoverEffect,`{% assign media_length = product.media | size %}
+      {% assign other_image_index = ${h.otherImage} | plus: 0 %}
       {% if other_image_index >= media_length %}
         {% assign other_image_index = media_length | minus: 1 %}
       {% endif %}
       {% assign otherImage = product.media[other_image_index] %}
-      ${system.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
+      ${c.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e??""}`,enableLazyLoadImage:i})}`,b=()=>core.template`
-    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:i})}`,M=common.getPaddingBottomByShapeSetting(a.ftShape),v=t=>`
-    ${system.Liquid(`{% assign productImageWidth = 0 %}
+    ${s.default({srcIsLiquidCode:!0,src:c.LiquidIf("src != null",i.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:c.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${i.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},priority:h?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${a??""}`,enableLazyLoadImage:y})}`,k=()=>e.template`
+    ${s.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},priority:h?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:y})}`,T=i.getPaddingBottomByShapeSetting(h.ftShape),N=a.checkRenderFeaturedCarousel(h),W="gp-featured-image-wrapper",A=c.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
+      ${c.LiquidFor("featureMedia in product.media",`
+          {% assign height = featureMedia.height | times: 1.0 %}
+          {% assign width = featureMedia.width | times: 1.0 %}
+          {% assign ratio = height | divided_by: width %}
+          ${c.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
+        `)}
+      ${c.LiquidFor("featureMedia in product.media",`${c.LiquidIf("featureMedia.media_type == 'image'",`${c.LiquidFor("image in product.images",c.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
+        
+    ${c.Liquid(`{% assign productImageWidth = 0 %}
     {% case featureMedia.media_type %}
       {% when 'image' %}
         {% assign productImageWidth = featureMedia.width %}
       {% else %}
         {% assign productImageWidth = featureMedia.preview_image.width %}
     {% endcase %}`)}
-    ${CarouselItem_liquid.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${r(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${t??""}`)}`,parentId:`ft-${e}-{{section.id}}-{{product.id}}`,style:g,customStyle:{width:"{{productImageWidth}}px"},children:`
+    ${m.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${q("gp-ft-image-item !gp-min-w-full !gp-max-w-full ")}`,parentId:`ft-${p}-{{section.id}}-{{product.id}}`,style:$,customStyle:{width:"{{productImageWidth}}px"},children:`
       <div
-        class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-        style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+        class="gp-w-full gp-relative ${c.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
+        style="${u.getStyleOfObject(e.makeStyleResponsive("pb",T))} ${c.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
       >
-        ${f()}
+        ${j()}
       </div>
-      `})}`,$=productFeaturedImage.checkRenderFeaturedCarousel(a),w="gp-featured-image-wrapper",L=system.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
-      ${system.LiquidFor("featureMedia in product.media",`
-          {% assign height = featureMedia.height | times: 1.0 %}
-          {% assign width = featureMedia.width | times: 1.0 %}
-          {% assign ratio = height | divided_by: width %}
-          ${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
-        `)}
-      ${system.LiquidFor("featureMedia in product.media",`${system.LiquidIf("featureMedia.media_type == 'image'",`${system.LiquidFor("image in product.images",system.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
-        ${v()}`)}
-    `,NextImage_liquid.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:a?.preload,setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:i})),x=()=>`
-      ${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:w,rootClass:`${s}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:c,rootStyles:o,styles:u,style:{playSpeed:600},disableMarginAuto:!0,children:L,productBadgeLiquid:t||""})}
-    `,S=()=>{switch(a?.preDisplay){case"1st-images":return`
+      `})}`)}
+    `,s.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:h?.preload,setting:{layout:h?.ftLayout,aspectRatio:S,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:y}));return c.Liquid(`
+    {% capture featureImageOnlyOne %}
+      ${c.Liquid(`
+        {% assign featureMedia = variant.featured_media %}
+        {% unless featureMedia %}
+        {% assign featureMedia = product.featured_media %}
+        {% endunless %}
+        ${c.LiquidIf("product.media.size > 1",(()=>{switch(h?.preDisplay){case"1st-images":return`
           {% assign featureMedia = product.media.first %}
-        `;case"1st-3d-mode":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
+        `;case"1st-3d-mode":return c.LiquidFor("media in product.media",c.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return c.LiquidFor("media in product.media",c.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
           {% assign featureMedia = variant.featured_media %}
           {% unless featureMedia %}
           {% assign featureMedia = product.featured_media %}
           {% endunless %}
-        `}},P=()=>system.Liquid(`
-        {% assign featureMedia = variant.featured_media %}
-        {% unless featureMedia %}
-        {% assign featureMedia = product.featured_media %}
-        {% endunless %}
-        ${system.LiquidIf("product.media.size > 1",S())}
+        `}})())}
         {% assign largestRatio = 0 %}
         {% assign height = featureMedia.height | times: 1.0 %}
         {% assign width = featureMedia.width | times: 1.0 %}
         {% assign ratio = height | divided_by: width %}
-        ${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
+        ${c.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
         {% assign productImageWidth = 0 %}
         {% case featureMedia.media_type %}
           {% when 'image' %}
@@ -81,38 +81,38 @@
           {% else %}
             {% assign productImageWidth = featureMedia.preview_image.width %}
         {% endcase %}
-        ${system.LiquidIf("featureMedia == null","{% assign productImageWidth = 1600 %}")}
+        ${c.LiquidIf("featureMedia == null","{% assign productImageWidth = 1600 %}")}
         <div
           class='gp-feature-image-carousel gp-feature-image-only'
-          style="${_function.getStyleOfObject(o)}"
+          style="${u.getStyleOfObject(M)}"
         >
           <div
             class="gp-relative"
-            style="${_function.getStyleOfObject(l)}"
+            style="${u.getStyleOfObject(w)}"
           >
-            ${t}
+            ${f}
             <div
               type="gp-feature-image-only"
               product-id="{{product.id}}"
               product-media="{{product.media.size}}"
-              class="${d(w)}"
-              style="${_function.getStyleOfObject(m)}"
+              class="${b(W)}"
+              style="${u.getStyleOfObject(_)}"
             >
               <div
-                class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
-                style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
+                class="gp-w-full gp-relative ${c.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
+                style="${u.getStyleOfObject(e.makeStyleResponsive("pb",T))} ${c.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
               >
-                ${f()}
+                ${j()}
               </div>
             </div>
           </div>
         </div>
-      `);return system.Liquid(`
-    {% capture featureImageOnlyOne %}
-      ${P()}
+      `)}
     {% endcapture %}
-    ${system.LiquidIf("product.media.size > 1",`
-        ${system.If($,x()," ")}
-        ${system.If(!$,"{{ featureImageOnlyOne }}"," ")}
+    ${c.LiquidIf("product.media.size > 1",`
+        ${c.If(N,`
+      ${n.default({builderProps:{uid:p},rootId:`ft-${p}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:W,rootClass:`${I}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:L,rootStyles:M,styles:v,style:{playSpeed:600},disableMarginAuto:!0,children:A,productBadgeLiquid:f||""})}
+    `," ")}
+        ${c.If(!N,"{{ featureImageOnlyOne }}"," ")}
       `,"{{ featureImageOnlyOne }}")}
-  `)};exports.default=FeatureImageWithGallery;
+  `)};

package/dist/cjs/product/components/product-images-v3/components/feature-only/OnlyFeatureImage.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductFeaturedImageCarousel=require("../child/ProductFeaturedImageCarousel.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const OnlyFeatureImage=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:s,styles:t,gallery:a,builderProps:u,noDataChildren:l,onHandleClickImage:d,children:o}=e,i={...s,...t};if(a?.[0]?.id==="noImageError"&&r)return jsxRuntime.jsx(jsxRuntime.Fragment,{children:l});let{featureImageOnlyOneImageClasses:m}=getProductImagesClassName.getProductImagesClassName(i),{featureImageStyle:g}=getProductImagesStyles.getProductImagesStyles(i);return jsxRuntime.jsxs("div",{className:m,style:g,children:[jsxRuntime.jsx(ProductFeaturedImageCarousel.default,{productImages:a,...i,onHandleClick:(e,r)=>{d(e||"",r)},builderPropUID:u?.uid,builderPropsClass:`gp-product-images-gallery-${u?.uid}`,isFilterByVariantEnabled:e.isFilterByVariantEnabled}),o]})};exports.default=OnlyFeatureImage;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),s=require("../child/ProductFeaturedImageCarousel.js"),t=require("../../composables/getProductImagesClassName.js"),a=require("../../composables/getProductImagesStyles.js");exports.default=l=>{let{isEditMode:d}=r.useRenderMode(),{setting:u,styles:i,gallery:o,builderProps:c,noDataChildren:g,onHandleClickImage:m,children:n}=l,p={...u,...i};if(o?.[0]?.id==="noImageError"&&d)return e.jsx(e.Fragment,{children:g});let{featureImageOnlyOneImageClasses:j}=t.getProductImagesClassName(p),{featureImageStyle:I}=a.getProductImagesStyles(p);return e.jsxs("div",{className:j,style:I,children:[e.jsx(s.default,{productImages:o,...p,onHandleClick:(e,r)=>{m(e||"",r)},builderPropUID:c?.uid,builderPropsClass:`gp-product-images-gallery-${c?.uid}`,isFilterByVariantEnabled:l.isFilterByVariantEnabled}),n]})};

package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),common=require("../../common/common.js"),productGallery=require("../../common/productGallery.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),MediaIcon=require("../child/MediaIcon.js"),ButtonOpenLightBox=require("../lightbox/ButtonOpenLightBox.js"),NextImage=require("../../../../../image/components/NextImage.js"),Carousel=require("../../../../../carousel-v3/components/root/Carousel.js"),CarouselItem=require("../../../../../carousel-v3/components/item/CarouselItem.js"),useGalleryCarousel=require("../../hooks/useGalleryCarousel.js"),system=require("@gem-sdk/system");const ProductGalleryCarousel=e=>{let{builderPropUID:t,productImages:s,onSwiperReady:r,activeIndexFormFeatureImage:a,onClickFeatureArrow:o,builderPropsClass:u,arrow:l,priorityFeatureImage:i,...m}=e,c=core.useCurrentDevice(),{galleryItemClasses:n}=getProductImagesClassName.getProductImagesClassName(m),{galleryCarouselSettingAttrs:d}=getProductImagesAttr.getProductImagesAttr(m),{galleryCarouselStyle:g,galleryCarouselItemStyle:p}=getProductImagesStyles.getProductImagesStyles(m),{isDisplay:y,shapeByLayout:I,isShowButtonLightbox:j,filteredProductImages:x,handleClickCarouselItem:C,safeMoveToIdx:h,setSliderReady:q}=useGalleryCarousel.useGalleryCarousel(e);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:y&&jsxRuntime.jsx(Carousel.default,{parentClass:u,rootClass:u,setting:d,styles:g,slidesClass:productGallery.getEditorMinHeightClass(c,m.position,m.navigationPosition),builderProps:{uid:`${t}-carousel`},moveToIdx:h,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&q(!0)},onSwiperReady:r,children:x?.map(e=>{let s=productFeaturedImage.isFeatureMedia(e.contentType)?e.previewImage:e.src;return jsxRuntime.jsxs(CarouselItem.default,{contentType:"productImage",className:n(`gp-gallery-image-item gem-slider-item-${t}`),onClickItem:()=>C(e?.id),style:p,"data-id":e?.id,children:[jsxRuntime.jsx(NextImage.default,{draggable:"false",src:s,width:e?.width,height:e?.height,alt:e?.alt,setting:{aspectRatio:common.getAspectRatio(I),layout:m?.layout,qualityPercent:m?.qualityPercent,qualityType:m?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),jsxRuntime.jsx(MediaIcon.default,{contentType:e?.contentType||""}),system.If(j,jsxRuntime.jsx(ButtonOpenLightBox.default,{}))]},e?.id)})})})};exports.default=ProductGalleryCarousel;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/core"),s=require("../../common/common.js"),r=require("../../common/productGallery.js"),a=require("../../composables/getProductImagesClassName.js"),o=require("../../composables/getProductImagesStyles.js"),i=require("../../composables/getProductImagesAttr.js"),l=require("../../common/productFeaturedImage.js"),u=require("../child/MediaIcon.js"),n=require("../lightbox/ButtonOpenLightBox.js"),c=require("../../../../../image/components/NextImage.js"),d=require("../../../../../carousel-v3/components/root/Carousel.js"),m=require("../../../../../carousel-v3/components/item/CarouselItem.js"),g=require("../../hooks/useGalleryCarousel.js"),p=require("@gem-sdk/system");exports.default=y=>{let{builderPropUID:j,productImages:h,onSwiperReady:q,activeIndexFormFeatureImage:I,onClickFeatureArrow:C,builderPropsClass:x,arrow:b,priorityFeatureImage:P,...f}=y,v=t.useCurrentDevice(),{galleryItemClasses:T}=a.getProductImagesClassName(f),{galleryCarouselSettingAttrs:w}=i.getProductImagesAttr(f),{galleryCarouselStyle:k,galleryCarouselItemStyle:A}=o.getProductImagesStyles(f),{isDisplay:M,shapeByLayout:N,isShowButtonLightbox:S,filteredProductImages:F,handleClickCarouselItem:G,safeMoveToIdx:H,setSliderReady:R}=g.useGalleryCarousel(y);return e.jsx(e.Fragment,{children:M&&e.jsx(d.default,{parentClass:x,rootClass:x,setting:w,styles:k,slidesClass:r.getEditorMinHeightClass(v,f.position,f.navigationPosition),builderProps:{uid:`${j}-carousel`},moveToIdx:H,isHiddenArrowWhenDisabled:!0,disableMarginAuto:!0,isEnableCheckHasScrollableContent:!0,onLoaded:e=>{e&&R(!0)},onSwiperReady:q,children:F?.map(t=>{let r=l.isFeatureMedia(t.contentType)?t.previewImage:t.src;return e.jsxs(m.default,{contentType:"productImage",className:T(`gp-gallery-image-item gem-slider-item-${j}`),onClickItem:()=>G(t?.id),style:A,"data-id":t?.id,children:[e.jsx(c.default,{draggable:"false",src:r,width:t?.width,height:t?.height,alt:t?.alt,setting:{aspectRatio:s.getAspectRatio(N),layout:f?.layout,qualityPercent:f?.qualityPercent,qualityType:f?.qualityType},style:{width:"100%",height:"100%",cursor:"pointer"},className:"product-list-image"}),e.jsx(u.default,{contentType:t?.contentType||""}),p.If(S,e.jsx(n.default,{}))]},t?.id)})})})};

package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.liquid.js

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),common=require("../../common/common.js"),productGallery=require("../../common/productGallery.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const ProductGalleryCarousel=({builderPropUID:e,children:t,enableLazyLoadImage:i,...o})=>{let{featuredImageGalleryClasses:s,galleryItemClasses:r}=getProductImagesClassName.getProductImagesClassName(o),{galleryCarouselSettingAttrs:a}=getProductImagesAttr.getProductImagesAttr(o),{galleryCarouselStyle:l,galleryCarouselItemStyle:d}=getProductImagesStyles.getProductImagesStyles(o),p=()=>{let e=(e,t,i)=>{let o=core.getResponsiveValueByScreen(t,i),s=core.getResponsiveValueByScreen(e,i),r="slider"===s&&("bottom-center"===o||"inside-bottom"===o),a=["left","right","inside-left","inside-right"].includes(o??"");return a||r},t=productGallery.checkDisplayGalleryByWidth({shapeByLayout:m}),i={desktop:t.desktop&&e(o.type,o.position,"desktop"),tablet:t.tablet&&e(o.type,o.position,"tablet"),mobile:t.mobile&&e(o.type,o.position,"mobile")};return common.getDisplayStyle(e=>!i[e],"flex")},m=productGallery.getShapeByLayout({shape:o.shape,shapeForBottom:o.shapeForBottom,shapeFor1Col:o.shapeFor1Col,shapeFor2Col:o.shapeFor2Col,shapeForFtOnly:o.shapeForFtOnly,shapeForInsideBottom:o.shapeForInsideBottom,shapeForInside:o.shapeForInside},o.position),g=(e,t)=>core.template`${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:e,baseSrc:"{{media.preview_image | image_url}}",style:t,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:i})}`,u=t=>`
-    ${system.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
-    ${system.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
-    ${system.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
-    ${CarouselItem_liquid.default({id:"{{imageID}}",contentType:"productImage",className:`${r(`gp-gallery-image-item ${t??""}`)}`,parentId:`${e}-{{product.id}}`,builderAttrs:{"data-outline":t?"active":"deactive"},style:d,children:`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("../../../../../image/components/NextImage.liquid.js"),t=require("../../common/common.js"),o=require("../../common/productGallery.js"),r=require("../../../../helpers/function.js"),s=require("../../composables/getProductImagesStyles.js"),a=require("../../composables/getProductImagesClassName.js"),l=require("../../composables/getProductImagesAttr.js"),d=require("@gem-sdk/system"),p=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),g=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");exports.default=({builderPropUID:u,children:m,enableLazyLoadImage:n,...c})=>{let{featuredImageGalleryClasses:C,galleryItemClasses:h}=a.getProductImagesClassName(c),{galleryCarouselSettingAttrs:y}=l.getProductImagesAttr(c),{galleryCarouselStyle:v,galleryCarouselItemStyle:f}=s.getProductImagesStyles(c),L=o.getShapeByLayout({shape:c.shape,shapeForBottom:c.shapeForBottom,shapeFor1Col:c.shapeFor1Col,shapeFor2Col:c.shapeFor2Col,shapeForFtOnly:c.shapeForFtOnly,shapeForInsideBottom:c.shapeForInsideBottom,shapeForInside:c.shapeForInside},c.position),b=(o,r)=>e.template`${i.default({srcIsLiquidCode:!0,src:`${t.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:o,baseSrc:"{{media.preview_image | image_url}}",style:r,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:n})}`,q=e=>`
+    ${d.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
+    ${d.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
+    ${d.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
+    ${g.default({id:"{{imageID}}",contentType:"productImage",className:`${h(`gp-gallery-image-item ${e??""}`)}`,parentId:`${u}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:f,children:`
       <div class="gp-w-full gp-relative gp-h-full"
         
       >
-      ${g({aspectRatio:common.getAspectRatio(m),layout:o?.layout,qualityPercent:o?.qualityPercent,qualityType:o?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
+      ${b({aspectRatio:t.getAspectRatio(L),layout:c?.layout,qualityPercent:c?.qualityPercent,qualityType:c?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
 
-    ${system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
+    ${d.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
         <path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
       </svg>
     </div>`)}
-    ${system.LiquidIf("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
+    ${d.LiquidIf("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
@@ -22,7 +22,7 @@
     </div>`)}
 
     <div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
-    style="${_function.getStyleOfObject(productGallery.getZoomDisplay(o?.clickOpenLightBox))}"
+    style="${r.getStyleOfObject(o.getZoomDisplay(c?.clickOpenLightBox))}"
     >
       <svg
         height="100%"
@@ -40,7 +40,7 @@
       </svg>
     </div>
     </div>
-    `})}`,c=()=>{let e=productGallery.getCarouselVerticalConfigByPosition(o.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`},n=system.LiquidIf("product.media.size > 1",system.LiquidFor("media in product.media",`${system.LiquidIf("media.media_type == 'image'",system.LiquidFor("image in product.images",system.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
-          ${system.LiquidIf("media.id == product.featured_media.id ",u(o?.borderActive?.border!=="none"?"active":""),u())}`));return core.template`
-    ${Carousel_liquid.default({builderProps:{uid:e},rootId:`${e}-{{product.id}}`,rootClass:`${s}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:c(),slidesClass:productGallery.getMinHeightByPosition(o.position,o.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:a,rootStyles:{...p()},styles:l,disableMarginAuto:!0,children:n,renderByLayout:common.getGalleryCarouselRenderByLayout(o.position)})}
-  `};exports.default=ProductGalleryCarousel;
+    `})}`,w=d.LiquidIf("product.media.size > 1",d.LiquidFor("media in product.media",`${d.LiquidIf("media.media_type == 'image'",d.LiquidFor("image in product.images",d.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
+          ${d.LiquidIf("media.id == product.featured_media.id ",q(c?.borderActive?.border!=="none"?"active":""),q())}`));return e.template`
+    ${p.default({builderProps:{uid:u},rootId:`${u}-{{product.id}}`,rootClass:`${C}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:(()=>{let e=o.getCarouselVerticalConfigByPosition(c.position),i=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${i.join(" ")}`})(),slidesClass:o.getMinHeightByPosition(c.position,c.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:y,rootStyles:{...(()=>{let i=(i,t,o)=>{let r=e.getResponsiveValueByScreen(t,o),s=e.getResponsiveValueByScreen(i,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),l=["left","right","inside-left","inside-right"].includes(r??"");return l||a},r=o.checkDisplayGalleryByWidth({shapeByLayout:L}),s={desktop:r.desktop&&i(c.type,c.position,"desktop"),tablet:r.tablet&&i(c.type,c.position,"tablet"),mobile:r.mobile&&i(c.type,c.position,"mobile")};return t.getDisplayStyle(e=>!s[e],"flex")})()},styles:v,disableMarginAuto:!0,children:w,renderByLayout:t.getGalleryCarouselRenderByLayout(c.position)})}
+  `};

package/dist/cjs/product/components/product-images-v3/components/gallery-grid/GalleryGrid.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ProductGalleryGrid=require("../child/ProductGalleryGrid.js");const GalleryGrid=e=>{let{isEditMode:r}=core.useRenderMode(),{setting:d,styles:i,gallery:t,builderProps:o,noDataChildren:l,onHandleClickImage:u,children:n}=e,c={...d,...i,borderActive:{...d?.borderActive,border:"none"}};return t?.[0]?.id==="noImageError"&&r?jsxRuntime.jsx(jsxRuntime.Fragment,{children:l}):jsxRuntime.jsx(ProductGalleryGrid.default,{productImages:t,enableHoverAction:!0,...c,builderPropUID:o?.uid,onHandleClick:(e,r)=>u(e||"",r),children:n})};exports.default=GalleryGrid;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@gem-sdk/core"),d=require("../child/ProductGalleryGrid.js");exports.default=o=>{let{isEditMode:t}=r.useRenderMode(),{setting:i,styles:u,gallery:l,builderProps:n,noDataChildren:c,onHandleClickImage:s,children:a}=o,b={...i,...u,borderActive:{...i?.borderActive,border:"none"}};return l?.[0]?.id==="noImageError"&&t?e.jsx(e.Fragment,{children:c}):e.jsx(d.default,{productImages:l,enableHoverAction:!0,...b,builderPropUID:n?.uid,onHandleClick:(e,r)=>s(e||"",r),children:a})};

package/dist/cjs/product/components/product-images-v3/components/gallery-grid/GalleryGrid.liquid.js

@@ -1,28 +1,28 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),_function=require("../../../../helpers/function.js"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),productGallery=require("../../common/productGallery.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js");const ProductGalleryGrid=({builderPropUID:e,wrapperStyle:i,children:t,enableLazyLoadImage:a,...s})=>{let{galleryItemClasses:o,galleryGridWrapperClasses:d}=getProductImagesClassName.getProductImagesClassName(s),{galleryGridStyles:r,galleryGridItemStyles:l}=getProductImagesStyles.getProductImagesStyles(s),m=productGallery.getShapeByLayout({shape:s.shape,shapeForBottom:s.shapeForBottom,shapeFor1Col:s.shapeFor1Col,shapeFor2Col:s.shapeFor2Col,shapeForFtOnly:s.shapeForFtOnly,shapeForInsideBottom:s.shapeForInsideBottom,shapeForInside:s.shapeForInside},s.position),u=(e=!1)=>{let i=["desktop","mobile","tablet"],t={desktop:"none",tablet:"none",mobile:"none"};return i.forEach(i=>{let a=core.getResponsiveValueByScreen(s?.position,i)||"",o="one-col"===a||"two-col"===a,d=e?!o:o;t[i]=d?"block":"none"}),core.makeStyleResponsive("d",t)},c=()=>u(),g=()=>u(!0),p=(e,i)=>core.template`
-      ${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:i,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:a})}
-      ${system.If(s?.galleryHoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none gp-w-full gp-h-full",productFeaturedImage.getZoomImageClass())}">
-          ${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:i,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:a})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),i=require("@gem-sdk/system"),a=require("../../../../../image/components/Modal3d.liquid.js"),t=require("../../../../../image/components/NextImage.liquid.js"),s=require("../../../../../image/components/Video.liquid.js"),o=require("../../../../../video/components/HTML5Embed.liquid.js"),d=require("../../../../helpers/function.js"),r=require("../../common/common.js"),l=require("../../common/productFeaturedImage.js"),m=require("../../common/productGallery.js"),p=require("../../composables/getProductImagesClassName.js"),g=require("../../composables/getProductImagesStyles.js");exports.default=({builderPropUID:u,wrapperStyle:c,children:n,enableLazyLoadImage:y,...h})=>{let{galleryItemClasses:f,galleryGridWrapperClasses:v}=p.getProductImagesClassName(h),{galleryGridStyles:C,galleryGridItemStyles:L}=g.getProductImagesStyles(h),w=m.getShapeByLayout({shape:h.shape,shapeForBottom:h.shapeForBottom,shapeFor1Col:h.shapeFor1Col,shapeFor2Col:h.shapeFor2Col,shapeForFtOnly:h.shapeForFtOnly,shapeForInsideBottom:h.shapeForInsideBottom,shapeForInside:h.shapeForInside},h.position),q=(i=!1)=>{let a={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(t=>{let s=e.getResponsiveValueByScreen(h?.position,t)||"",o="one-col"===s||"two-col"===s;a[t]=(i?!o:o)?"block":"none"}),e.makeStyleResponsive("d",a)},_=()=>q(),b=()=>q(!0),I=(a,s)=>e.template`
+      ${t.default({srcIsLiquidCode:!0,src:`${r.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:a,style:s,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:y})}
+      ${i.If(h?.galleryHoverEffect!=="none",`<div class="${e.cls("zoom-element !gp-max-w-none gp-w-full gp-h-full",l.getZoomImageClass())}">
+          ${t.default({srcIsLiquidCode:!0,src:`${r.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:a,style:s,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:y})}
           </div>`," ")}
-      ${system.If(s?.galleryHoverEffect=="zoom"&&s?.galleryZoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
+      ${i.If(h?.galleryHoverEffect=="zoom"&&h?.galleryZoomType=="glasses",`<div class="${e.cls("zoom-lens-element",l.getZoomLenClass())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,n=()=>Modal3d_liquid.default({src:system.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:common.getAspectRatio(m)}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),f=()=>HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),h=()=>core.template`
-      ${system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
+    `,$=()=>a.default({src:i.LiquidIf("media.sources.first.url contains '.glb'","{{ media.sources.first.url }}","{{media.sources.last.url}}"),alt:"{{media.preview_image.alt}}",poster:"{{media.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%",height:"100%"},aspectRatio:r.getAspectRatio(w)}),x=()=>s.default({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),S=()=>o.default({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),F=()=>e.template`
+      ${i.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
             <path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
           </svg>
         </div>`)}
-      ${system.LiquidIf("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
+      ${i.LiquidIf("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
             <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
           </svg>
         </div>`)}
-      ${p({aspectRatio:common.getAspectRatio(m),layout:s?.layout,qualityType:s?.qualityType,qualityPercent:s?.qualityPercent},{width:"100%",height:"100%"})}
+      ${I({aspectRatio:r.getAspectRatio(w),layout:h?.layout,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},{width:"100%",height:"100%"})}
 
       <div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
-        style="${_function.getStyleOfObject(productGallery.getZoomDisplay(s?.clickOpenLightBox))}" >
+        style="${d.getStyleOfObject(m.getZoomDisplay(h?.clickOpenLightBox))}" >
         <svg
           height="100%"
           width="100%"
@@ -39,10 +39,10 @@
           />
         </svg>
       </div>
-    `,C=i=>`
-    ${system.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
-    ${system.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}{% assign mediaSource = media | json %}")}
-    ${system.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
+    `,j=a=>`
+    ${i.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
+    ${i.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}{% assign mediaSource = media | json %}")}
+    ${i.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
     <div
       aria-hidden
       id="{{imageID}}"
@@ -53,41 +53,41 @@
       external-id="{{media.external_id}}"
       grid-index="{{forloop.index}}"
       data-outline="none"
-      class="${o(`gem-slider-item-${e}-{{product.id}} gp-gallery-image-item ${i??""} data-[outline=deactive]:after:!gp-border-transparent`)}"
-      style="${_function.getStyleOfObject(l)}"
+      class="${f(`gem-slider-item-${u}-{{product.id}} gp-gallery-image-item ${a??""} data-[outline=deactive]:after:!gp-border-transparent`)}"
+      style="${d.getStyleOfObject(L)}"
       >
-      ${system.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
+      ${i.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video' or media.media_type == 'model'","{% assign isMedia = true %}")}
 
-      ${system.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
+      ${i.LiquidIf("media.media_type == 'external_video' or media.media_type == 'video'","{% assign isVideo = true %}")}
 
-      <div class="gp-h-full gp-w-full" style="${system.LiquidIf("media == null or media.media_type == 'image'","display: block !important;")} ${system.LiquidIf("isVideo == true",_function.getStyleOfObject({...g()}))}">
-        ${system.LiquidIf("media != null",h(),v())}
+      <div class="gp-h-full gp-w-full" style="${i.LiquidIf("media == null or media.media_type == 'image'","display: block !important;")} ${i.LiquidIf("isVideo == true",d.getStyleOfObject({...b()}))}">
+        ${i.LiquidIf("media != null",F(),V())}
       </div>
 
-      <div class="${system.LiquidIf("isMedia","gp-flex gp-justify-center gp-items-center")}"
-      style="${system.LiquidIf("isMedia",_function.getStyleOfObject({...core.makeStyleResponsive("aspect",common.getAspectRatio(m))}))} ${_function.getStyleOfObject({...c()})}"
+      <div class="${i.LiquidIf("isMedia","gp-flex gp-justify-center gp-items-center")}"
+      style="${i.LiquidIf("isMedia",d.getStyleOfObject({...e.makeStyleResponsive("aspect",r.getAspectRatio(w))}))} ${d.getStyleOfObject({..._()})}"
       >
         {% case media.media_type %}
           {% when 'external_video' %}
             {% assign mediaSourceVideo = media | external_video_url %}
-            ${y()}
+            ${x()}
           {% when 'video' %}
             {% assign mediaSourceVideo = media.sources.last.url %}
-            ${f()}
+            ${S()}
           {% when 'model' %}
-            ${n()}
+            ${$()}
         {% endcase %}
       </div>
       {% assign isVideo= false %}
       {% assign isMedia= false %}
-    </div>`,v=()=>core.template`
-    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:common.getAspectRatio(m),layout:s?.layout,qualityType:s?.qualityType,qualityPercent:s?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:a})}`;return system.Liquid(`
+    </div>`,V=()=>e.template`
+    ${t.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{aspectRatio:r.getAspectRatio(w),layout:h?.layout,qualityType:h?.qualityType,qualityPercent:h?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:y})}`;return i.Liquid(`
   <div type="grid-gallery"
-    class="${d}"
-    style="${_function.getStyleOfObject(r)}}"
+    class="${v}"
+    style="${d.getStyleOfObject(C)}}"
   >
-    ${system.LiquidFor("media in product.media",`${system.LiquidIf("media.media_type == 'image'",system.LiquidFor("image in product.images",system.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
-      ${system.LiquidIf("media.id == product.featured_media.id ",C(s?.borderActive?.border!=="none"?"active":""),C())}`)}
-    ${system.LiquidIf("product.media.size > 0",t)}
-    ${system.LiquidIf("product.media.size < 1",C())}
-  </div>`)};exports.default=ProductGalleryGrid;
+    ${i.LiquidFor("media in product.media",`${i.LiquidIf("media.media_type == 'image'",i.LiquidFor("image in product.images",i.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
+      ${i.LiquidIf("media.id == product.featured_media.id ",j(h?.borderActive?.border!=="none"?"active":""),j())}`)}
+    ${i.LiquidIf("product.media.size > 0",n)}
+    ${i.LiquidIf("product.media.size < 1",j())}
+  </div>`)};