@gem-sdk/components 19.0.0-staging.6 → 19.0.0-staging.60

package/dist/esm/product/components/product-button/hooks/useAddToCart.js

@@ -1 +1 @@
-import{useRenderMode as e,useProduct as t,useCurrency as r,useQuantity as i,useProductProperties as s,useCurrentVariant as n,useHasPreSelected as o,useStickyStore as a,useProductStore as u,useCreateCart as l,useAddToCart as c,convertDecimalToNumber as m,useCurrentVariantInStock as b}from"@gem-sdk/core";import{useRef as f,useEffect as p,useCallback as d}from"react";import{addToCartTracking as v}from"../../../helpers/tracking.js";import{useDispatchInteractionEvent as g,useDispatchCustomEvent as I}from"./useDispatchAfterSubmitEvent.js";import{useCartMessage as k}from"./useCartMessage.js";import{useCartOperations as D}from"./useCartOperations.js";let S=({styles:S,setting:E,builderProps:h})=>{let j=f(null),{isEditMode:y,isPreviewSharePageMode:C}=e(),M=t(),{currency:O}=r(),{quantity:w}=i(),A=s(),L=n(),{hasPreSelected:q}=o(),x=a(e=>e.setStickyVisible),B=u(e=>e.updateIsSubmit),T=g(h?.uid),U=I({product:M,currentVariant:L,quantity:w}),{showMessage:V,notiComponent:z}=k(S,E),{handleSuccess:F,handleError:G,cartId:H}=D({setting:E,showMessage:V,dispatchInteractionEvent:T,dispatchCustomEvent:U}),{isMutating:J,trigger:K}=l({onSuccess:F,onError:G}),{isMutating:N,trigger:P}=c({onSuccess:F,onError:G});p(()=>{let e=new IntersectionObserver(e=>{let t=e[0];x(t?.isIntersecting)},{threshold:.1}),t=j.current;return j.current&&e.observe(j.current),()=>{t&&e.unobserve(t)}},[x]);let Q=d(()=>{if(!L?.baseID||!w||!M?.baseID||void 0!==q&&!q||y||C)return;let e=A?.some(e=>e.required&&!e.value);if(B(!0),e)return;let t=A?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));v({quantity:w,currency:O,id:M?.baseID,name:M?.title,brand:M?.vendor,sku:L.sku,price:m(L?.price),variant:L.title});let r={quantity:w,attributes:t,variantId:L.baseID};E?.actionEffect!=="buy-now"&&H?P({cartId:H,lines:[r]}):K({items:[r]})},[y,C,H,O,w,A,q,M?.title,M?.vendor,M?.baseID,L?.sku,L?.price,L?.title,L?.baseID,E?.actionEffect,K,P,B]),R=b(),W=L?E?.outOfStockLabel:"Unavailable";return{addToCartRef:j,isLoading:J||N,isInStock:R,notiComponent:z,outOfStockLabel:W,addToCart:Q}};export{S as useBtnAddToCart};
+import{useRenderMode as e,useProduct as t,useCurrency as r,useQuantity as i,useProductProperties as a,useCurrentVariant as s,useHasPreSelected as o,useStickyStore as u,useProductStore as n,useCreateCart as l,useAddToCart as d,convertDecimalToNumber as m,useCurrentVariantInStock as c}from"@gem-sdk/core";import{useRef as p,useEffect as f,useCallback as b}from"react";import{addToCartTracking as v}from"../../../helpers/tracking.js";import{useDispatchInteractionEvent as g,useDispatchCustomEvent as k}from"./useDispatchAfterSubmitEvent.js";import{useCartMessage as D}from"./useCartMessage.js";import{useCartOperations as I}from"./useCartOperations.js";let E=({styles:E,setting:y,builderProps:S})=>{let j=p(null),{isEditMode:C,isPreviewSharePageMode:M}=e(),h=t(),{currency:w}=r(),{quantity:A}=i(),L=a(),O=s(),{hasPreSelected:q}=o(),x=u(e=>e.setElement),B=u(e=>e.removeElement),T=n(e=>e.updateIsSubmit),U=g(S?.uid),V=k({product:h,currentVariant:O,quantity:A}),{showMessage:z,notiComponent:F}=D(E,y),{handleSuccess:G,handleError:H,cartId:J}=I({setting:y,showMessage:z,dispatchInteractionEvent:U,dispatchCustomEvent:V}),{isMutating:K,trigger:N}=l({onSuccess:G,onError:H}),{isMutating:P,trigger:Q}=d({onSuccess:G,onError:H});f(()=>{let e=j.current;if(!(!e||e.closest(".sticky-wrapper"))&&S?.uid&&S.builderData?.advanced)return x({id:S.uid,element:e,deviceVisibility:S.builderData.advanced.d}),()=>{S?.uid&&B(S.uid)}},[]);let R=b(()=>{if(!O?.baseID||!A||!h?.baseID||void 0!==q&&!q||C||M)return;let e=L?.some(e=>e.required&&!e.value);if(T(!0),e)return;let t=L?.filter(e=>!!e.value)?.map(e=>({key:e.key,value:e.value}));v({quantity:A,currency:w,id:h?.baseID,name:h?.title,brand:h?.vendor,sku:O.sku,price:m(O?.price),variant:O.title});let r={quantity:A,attributes:t,variantId:O.baseID};y?.actionEffect!=="buy-now"&&J?Q({cartId:J,lines:[r]}):N({items:[r]})},[C,M,J,w,A,L,q,h?.title,h?.vendor,h?.baseID,O?.sku,O?.price,O?.title,O?.baseID,y?.actionEffect,N,Q,T]),W=c(),X=O?y?.outOfStockLabel:"Unavailable";return{addToCartRef:j,isLoading:K||P,isInStock:W,notiComponent:F,outOfStockLabel:X,addToCart:R}};export{E as useBtnAddToCart};

package/dist/esm/product/components/product-description/ProductDescription.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useProduct as o,useCurrentDevice as i,getResponsiveValueByScreen as r,useI18nStore as m,makeStyleResponsive as c,makeLineClamp as n}from"@gem-sdk/core";import l from"../../../common/components/NoDataState.js";import{ICON_SVG as a}from"./common/helpers.js";import{createClass as p,createStyle as d,createAttr as h,If as u}from"@gem-sdk/system";import{getClasses as y,getButtonClasses as g,getClassPreBuilt as f}from"./common/classes.js";import{getTextStyle as x,getButtonStyle as k,getStaticCss as N}from"./common/styles.js";import{useGpDescription as j}from"./hooks/useGpDescription.js";let w=w=>{let{setting:L,advanced:b,builderProps:v}=w,{htmlTag:C}=L??{},H=o(),T=i(),M=r(L?.hasLineClamp,T),{ref:_,open:D,isShowViewMore:I,handleToggleShowMore:S,mode:A,redirectProductShopifyLink:P}=j(L),{t:q}=m(),G=p({"gp-product-description":!0,[b?.cssClass]:!0}),V=p(y({setting:L,isLiquid:!1})),$=p(g({setting:L})),z=p({"gp-show-more-text":!0}),B=p({"gp-show-more-icon gp-ml-1":!0,...D?{"gp-rotate-180":!0}:{}}),E=p(f()),F=d({...x({setting:L}),...D?{}:c("line-clamp",n(L?.lineClamp,L?.hasLineClamp))}),J=d(k({setting:L})),K=h({"data-id":`${v?.uid}`}),O=h({"data-gp-text":""}),{gpDescriptionCss:Q,textDescriptionCss:R}=N(),U=!H?.descriptionHtml;return U&&"edit"===A?e(l,{elementType:"secondary",description:q("Highlight key benefits with product description."),descriptionActions:[{text:q("Add description"),callback:P},{text:q("sync data"),callback:"syncProduct"}]}):e(t,{children:u(U,"",s("div",{...K,className:G,children:[e("style",{children:R}),e("style",{children:Q}),e("div",{className:E}),e("html"===C?"div":"p",{ref:_,...O,className:V,style:F,dangerouslySetInnerHTML:{__html:H?.descriptionHtml||""}}),u(M&&I,s("button",{className:$,style:J,onClick:S,children:[e("span",{className:z,children:u(D,L?.viewLessText||"",L?.viewMoreText)}),u(L?.enableViewMoreIcon,e("span",{className:B,dangerouslySetInnerHTML:{__html:a}}))]})," ")]}))})};export{w as default};
+import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useProduct as o,useCurrentDevice as i,getResponsiveValueByScreen as r,useI18nStore as m,makeStyleResponsive as c,makeLineClamp as n}from"@gem-sdk/core";import l from"../../../common/components/NoDataState.js";import{ICON_SVG as a}from"./common/helpers.js";import{createClass as p,createStyle as d,createAttr as h,If as u}from"@gem-sdk/system";import{getClasses as y,getButtonClasses as g,getClassPreBuilt as f}from"./common/classes.js";import{getTextStyle as x,getButtonStyle as k,getStaticCss as N}from"./common/styles.js";import{useGpDescription as j}from"./hooks/useGpDescription.js";let w=w=>{let{setting:L,advanced:b,builderProps:v}=w,{htmlTag:C}=L??{},H=o(),T=i(),M=r(L?.hasLineClamp,T),{ref:_,open:D,isShowViewMore:I,handleToggleShowMore:S,mode:A,redirectProductShopifyLink:P}=j(L),{t:q}=m(),G=p({"gp-product-description":!0,[b?.cssClass]:!0}),V=p(y({setting:L,isLiquid:!1})),$=p(g({setting:L})),z=p({"gp-show-more-text":!0}),B=p({"gp-show-more-icon gp-ml-1":!0,...D?{"gp-rotate-180":!0}:{}}),E=p(f()),F=d({...x({setting:L}),...!D&&I?c("line-clamp",n(L?.lineClamp,L?.hasLineClamp)):{}}),J=d(k({setting:L})),K=h({"data-id":`${v?.uid}`}),O=h({"data-gp-text":""}),{gpDescriptionCss:Q,textDescriptionCss:R}=N(),U=!H?.descriptionHtml;return U&&"edit"===A?e(l,{elementType:"secondary",description:q("Highlight key benefits with product description."),descriptionActions:[{text:q("Add description"),callback:P},{text:q("sync data"),callback:"syncProduct"}]}):e(t,{children:u(U,"",s("div",{...K,className:G,children:[e("style",{children:R}),e("style",{children:Q}),e("div",{className:E}),e("html"===C?"div":"p",{ref:_,...O,className:V,style:F,dangerouslySetInnerHTML:{__html:H?.descriptionHtml||""}}),u(M&&I,s("button",{className:$,style:J,onClick:S,children:[e("span",{className:z,children:u(D,L?.viewLessText||"",L?.viewMoreText)}),u(L?.enableViewMoreIcon,e("span",{className:B,dangerouslySetInnerHTML:{__html:a}}))]})," ")]}))})};export{w as default};

package/dist/esm/product/components/product-description/ProductDescription.liquid.js

@@ -1,13 +1,12 @@
-import{makeStyleResponsive as e,makeLineClamp as t,dataStringify as s,template as i,baseAssetURL as o,isLocalEnv as r}from"@gem-sdk/core";import{getDynamicSourceLocales as p,createSettingId as a,getSettingPreloadData as n}from"../../../helpers.js";import{createClass as d,createStyle as l,createAttr as c,createStateOrContext as m,LiquidIf as $,Liquid as u,LiquidUnless as g,If as v}from"@gem-sdk/system";import{getClasses as f,getButtonClasses as x,getClassPreBuilt as w}from"./common/classes.js";import{getTextStyle as h,getButtonStyle as y,getStaticCss as C}from"./common/styles.js";import{ICON_SVG as b}from"./common/helpers.js";import{ProductDescription as j}from"../../settings/product-description/configs/translate.js";let M=M=>{let{setting:S,advanced:I,builderProps:L,pageContext:T}=M,{htmlTag:k,viewMoreText:E,viewLessText:P}=S??{},V="html"===k?"div":"p",A=d({"gp-product-description":!0,[I?.cssClass]:!0}),D=d(f({setting:S,isLiquid:!0})),G=d(x({setting:S})),_=d({"gp-show-more-text":!0}),q=d({"gp-show-more-icon gp-ml-1":!0}),H=l({...h({setting:S,renderMaxHeight:!0}),...e("line-clamp",t(S?.lineClamp,S?.hasLineClamp))}),N=d(w()),O=l(y({setting:S})),R=c({"data-id":`${L?.uid}`}),z=c({"data-gp-text":""}),{textDescriptionCss:B,gpDescriptionCss:F}=C(),J="product.description == blank",K=p({val:E,uid:L?.uid,settingId:a({id:j?.viewMoreText?.id}),pageContext:T??{}}),Q=p({val:P,uid:L?.uid,settingId:a({id:j?.viewLessText?.id}),pageContext:T??{}}),U=m({setting:{lineClamp:S?.lineClamp,hasLineClamp:S?.hasLineClamp,viewMoreText:K,viewLessText:Q,enableViewMoreIcon:S?.enableViewMoreIcon},textStyle:H});return $(J,"",u(i`
+import{makeStyleResponsive as e,makeLineClamp as t,dataStringify as s,template as i,baseAssetURL as o,isLocalEnv as r}from"@gem-sdk/core";import{getDynamicSourceLocales as p,createSettingId as a,getSettingPreloadData as n}from"../../../helpers.js";import{createClass as d,createStyle as l,createAttr as c,createStateOrContext as m,LiquidIf as u,Liquid as $,LiquidUnless as g,If as v}from"@gem-sdk/system";import{getClasses as f,getButtonClasses as x,getClassPreBuilt as w}from"./common/classes.js";import{getTextStyle as h,getButtonStyle as C,getStaticCss as y}from"./common/styles.js";import{ICON_SVG as b}from"./common/helpers.js";import{ProductDescription as j}from"../../settings/product-description/configs/translate.js";let M=M=>{let{setting:S,advanced:I,builderProps:L,pageContext:T}=M,{htmlTag:k,viewMoreText:E,viewLessText:P}=S??{},V="html"===k?"div":"p",A=d({"gp-product-description":!0,[I?.cssClass]:!0}),D=d(f({setting:S,isLiquid:!0})),G=d(x({setting:S})),_=d({"gp-show-more-text":!0}),q=d({"gp-show-more-icon gp-ml-1":!0}),H=l({...h({setting:S,renderMaxHeight:!0}),...e("line-clamp",t(S?.lineClamp,S?.hasLineClamp))}),N=d(w()),O=l(C({setting:S})),R=c({"data-id":`${L?.uid}`}),z=c({"data-gp-text":""}),{textDescriptionCss:B,gpDescriptionCss:F}=y(),J="product.description == blank",K=p({val:E,uid:L?.uid,settingId:a({id:j?.viewMoreText?.id}),pageContext:T??{}}),Q=p({val:P,uid:L?.uid,settingId:a({id:j?.viewLessText?.id}),pageContext:T??{}}),U=m({setting:{lineClamp:S?.lineClamp,hasLineClamp:S?.hasLineClamp,viewMoreText:K,viewLessText:Q,enableViewMoreIcon:S?.enableViewMoreIcon},textStyle:H});return u(J,"",$(i`
     <gp-product-description
       ${R}
       class="${A}"
-      gp-data='${s(U).replaceAll("'","&#039;")}'
+      gp-data='${s(U).replaceAll("'","\\u0027")}'
       data-view-more-text="${K}"
       data-view-less-text="${Q}"
     >
-      <style>${B}</style>
-      <style>${F}</style>
+      <style>${B}${F}</style>
       <div class="${N}" ></div>
       ${g("product","<p>Product not found</p>",i`<${V} ${z} class="${D}" style="${H}">
           {{product.description}}

package/dist/esm/product/components/product-description/hooks/useGpDescription.js

@@ -1 +1 @@
-import{useRef as e,useState as t,useCallback as r,useEffect as l}from"react";import{useProduct as i,useCurrentDevice as o,getResponsiveValueByScreen as n,useProductShopifyEditLink as m,useEditorMode as c,isSafari as p}from"@gem-sdk/core";let s=s=>{let u=e(null),[a,h]=t(!1),[g,d]=t(!1),H=i(),y=o(),x=n(s?.hasLineClamp,y),f=n(s?.lineClamp,y),{redirectProductShopifyLink:C}=m(),w=c(),k=r(()=>`calc(${f} * 1lh)`,[f]),v=r(e=>x&&f&&e||"auto",[x,f]),D=r(()=>{u.current&&(u.current.style.maxHeight=a?k():"none",h(e=>!e))},[a,k]);return l(()=>{v(k())},[s?.typo?.custom,v,k]),l(()=>{let e=u.current;if(h(!1),!e)return;let t=x&&H?.descriptionHtml;t?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,l=window.getComputedStyle(e).getPropertyValue("line-height"),i=parseInt(l,10)||1,o=void 0!==f&&f<Math.round((t??0)/i),n=p()?o:r<t;e.style.maxHeight=k(),f&&n?d(()=>!0):d(()=>!1)},100):e.style.maxHeight="none"},[x,f,H?.descriptionHtml,k]),{ref:u,open:a,isShowViewMore:g,handleToggleShowMore:D,mode:w,redirectProductShopifyLink:C}};export{s as useGpDescription};
+import{useRef as e,useState as t,useCallback as r,useEffect as i}from"react";import{useProduct as n,useCurrentDevice as l,getResponsiveValueByScreen as o,useProductShopifyEditLink as s,useEditorMode as m}from"@gem-sdk/core";let c=c=>{let{htmlTag:a,transform:u,typo:p,typography:y}=c??{},g=e(null),H=e(!1),[d,f]=t(!1),[w,h]=t(!1),x=n(),O=l(),P=o(c?.hasLineClamp,O),S=o(c?.lineClamp,O),v=o(p?.custom?.lineHeight,O),J=JSON.stringify(p),N=JSON.stringify(y),b=JSON.stringify(u),{redirectProductShopifyLink:A}=s(),C=m(),F=r(()=>{if(!g.current)return;let e=!d;H.current=e,g.current.style.maxHeight=e?"none":"",f(e)},[d]);return i(()=>{H.current=!1,f(!1)},[P,S,x?.descriptionHtml]),i(()=>{let e=g.current;if(!e)return;if(!P||!x?.descriptionHtml||!S){e.style.maxHeight="",h(!1);return}let t=()=>{if(H.current){e.style.maxHeight="none";return}e.style.maxHeight="";let t=e.style.getPropertyValue("--line-clamp");e.style.setProperty("--line-clamp",String(S));let r=e.scrollHeight-e.clientHeight>1;""!==t?e.style.setProperty("--line-clamp",t):e.style.removeProperty("--line-clamp"),h(r)},r=window.requestAnimationFrame(t),i=window.setTimeout(t,100),n=new ResizeObserver(()=>{t()});return n.observe(e),()=>{window.cancelAnimationFrame(r),window.clearTimeout(i),n.disconnect()}},[P,S,x?.descriptionHtml,v,a,b,J,N]),{ref:g,open:d,isShowViewMore:w,handleToggleShowMore:F,mode:C,redirectProductShopifyLink:A}};export{c as useGpDescription};

package/dist/esm/product/components/product-images-v2/ProductImagesV2.liquid.js

@@ -1,4 +1,4 @@
-import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as S,If as j,Liquid as v}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,{enableLazyLoadImage:N}=_??{},A={...G,...D},B=`
+import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as S,If as j,Liquid as v}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,N={...G,...D},A=`
     {
       "id":${JSON.stringify(b?.uid)},
       "pageContext": ${JSON.stringify(c(_))},
@@ -9,33 +9,33 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,R
       "collectionUrl": {{ collection.url | json | escape }},
       "collection": {{ collection | json | escape}}
     }
-  `,U=y({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=S({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=S({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=$(A),V=n({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>r`
+  `,B=y({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position,G?.type),q=k?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=f(C),w=S({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=S({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=$(N),R=n({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??g,shapeForInside:N.shapeForInside??g},N.position),V=a(N.position,R,N?.spacing),W=()=>r`
       ${s({uid:b?.uid||"",customProps:O?.[0].customProps},O?.map(e=>{if(e)return r`${t({...e,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
     `;return r`
-  ${j(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:A,uid:b?.uid,type:"Liquid"})}</style>`),"")}
+  ${j(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:N,uid:b?.uid,type:"Liquid"})}</style>`),"")}
   ${v(`
     {% assign featured_image = product.featured_image %}
     ${h("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
   `)}
     <gp-product-images
-      gp-data='${B}'
-      ${{...U}}
+      gp-data='${A}'
+      ${{...B}}
       style="${{...z}}"
-      class="${J}"
+      class="${E}"
     >
       <div
-        class="${h("product.media.size > 1",`${T}`,`${x}`)}"
-        style="${h("product.media.size > 1",I(L),I(M))}"
+        class="${h("product.media.size > 1",`${w}`,`${T}`)}"
+        style="${h("product.media.size > 1",I(x),I(L))}"
       >
-        ${l({builderPropUID:`gp-carousel-${b?.uid}`,...A,children:H(),enableLazyLoadImage:N})}
-        ${j(!k,r`
+        ${l({builderPropUID:`gp-carousel-${b?.uid}`,...N,children:W(),pageContext:_})}
+        ${j(!U,r`
       <div
-        class="${w}"
-        style="${I(R)}"
-        ${{...E}}
+        class="${J}"
+        style="${I(M)}"
+        ${{...q}}
       >
-        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...A,enableLazyLoadImage:N}))}
-        ${j(q,m({builderPropUID:b?.uid,wrapperStyle:{...W},children:H(),...A,enableLazyLoadImage:N}))}
+        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...N,pageContext:_}))}
+        ${j(k,m({builderPropUID:b?.uid,wrapperStyle:{...V},children:W(),...N,pageContext:_}))}
       </div>
     `)}
       </div>

package/dist/esm/product/components/product-images-v2/components/feature-gallery/FeatureImageWithGallery.liquid.js

@@ -1,4 +1,4 @@
-import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import l from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as M,Liquid as _,If as $}from"@gem-sdk/system";import b from"../../../../../carousel/components/root/Carousel.liquid.js";import w from"../../../../../carousel/components/item/CarouselItem.liquid.js";let v=({builderPropUID:v,children:I,enableLazyLoadImage:x,...q})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:j,featuredCarouselItemClasses:S}=f(q),{featuredImageCarouselStyle:R,featureImageStyle:P,featureImageCarouselOnlyOneImageStyle:W,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:T}=c(q),{featuredImageCarouselSettingAttrs:L}=h(q),N=t(q.ftShape),k=()=>`
+import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";import{getAspectRatio as t,getPaddingBottomByShapeSetting as r,getSrcImage as s}from"../../common/common.js";import{checkRenderFeaturedCarousel as d,getZoomImageClass as o,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import m from"../../../../../video/components/HTML5Embed.liquid.js";import l from"../../../../../image/components/Modal3d.liquid.js";import g from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as M,Liquid as _,If as $}from"@gem-sdk/system";import b from"../../../../../carousel/components/root/Carousel.liquid.js";import w from"../../../../../carousel/components/item/CarouselItem.liquid.js";let v=({builderPropUID:v,children:I,pageContext:x,...q})=>{let{featuredImageCarouselClasses:z,galleryItemClasses:j,featuredCarouselItemClasses:S}=f(q),{featuredImageCarouselStyle:R,featureImageStyle:P,featureImageCarouselOnlyOneImageStyle:W,featureImageOnlyOneImageStyle:C,featureImageCarouselItemStyle:T}=c(q),{featuredImageCarouselSettingAttrs:L}=h(q),N=t(q.ftShape),k=()=>`
     {% case featureMedia.media_type %}
       {% when 'image' %}
         ${D()}
@@ -13,7 +13,7 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
       {% else %}
         ${H()}
     {% endcase %}
-    `,E=()=>l({src:y("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}),O=()=>p({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:N}),A=()=>m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,style:{width:"100%","max-height":"100%"},className:"gp-invisible"}),D=()=>i`
+    `,E=()=>l({src:y("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}),O=()=>p({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:N}),A=()=>m({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,style:{width:"100%","max-height":"100%"},className:"gp-invisible",pageContext:x}),D=()=>i`
       ${V(a("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==q.hoverEffect},"{{shouldHidden}}"))}
       ${$(q?.hoverEffect!=="none",`<div class="${a("zoom-element !gp-max-w-none",o())}">
             ${V("image-zoom",!0)}
@@ -29,8 +29,8 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
       {% assign otherImage = product.media[other_image_index] %}
       ${y("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
     `)}
-    ${g({srcIsLiquidCode:!0,src:y("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:y("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.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:x})}`,H=()=>i`
-    ${g({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:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.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:x})}`,F=r(q.ftShape),G=d(q),J="gp-featured-image-wrapper",B=y("product.media.size > 0",`${I||""} {% assign largestRatio = 0 %}
+    ${g({srcIsLiquidCode:!0,src:y("src != null",s("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:y("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${s("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.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}`,pageContext:x})}`,H=()=>i`
+    ${g({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:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},priority:q?.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",pageContext:x})}`,F=r(q.ftShape),G=d(q),J="gp-featured-image-wrapper",B=y("product.media.size > 0",`${I||""} {% assign largestRatio = 0 %}
       ${M("featureMedia in product.media",`
           {% assign height = featureMedia.height | times: 1.0 %}
           {% assign width = featureMedia.width | times: 1.0 %}
@@ -54,7 +54,7 @@ import{makeStyleResponsive as e,cls as a,template as i}from"@gem-sdk/core";impor
         ${k()}
       </div>
       `})}`)}
-    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:q?.preload,setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:x}));return _(`
+    `,g({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:q?.preload,setting:{layout:q?.ftLayout,aspectRatio:N,qualityType:q?.qualityType,qualityPercent:q?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,pageContext:x}));return _(`
     {% capture featureImageOnlyOne %}
       ${_(`
         {% assign featureMedia = variant.featured_media %}

package/dist/esm/product/components/product-images-v2/components/gallery-carousel/GalleryCarousel.liquid.js

@@ -1,4 +1,4 @@
-import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getAspectRatio as s,getDisplayStyle as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,getZoomDisplay as m,checkDisplayGalleryByWidth as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let w=({builderPropUID:w,children:L,enableLazyLoadImage:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),M=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",customLazyload:!0,style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:F})}`,Z=r(V),q=e=>`
+import{template as e,makeStyleResponsive as t,getResponsiveValueByScreen as i}from"@gem-sdk/core";import o from"../../../../../image/components/NextImage.liquid.js";import{getPaddingBottomByShapeSetting as r,getAspectRatio as s,getDisplayStyle as a,getSrcImage as p}from"../../common/common.js";import{getShapeByLayout as l,getMinHeightByPosition as d,getZoomDisplay as m,checkDisplayGalleryByWidth as g,getCarouselVerticalConfigByPosition as n}from"../../common/productGallery.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as C}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as h}from"../../composables/getProductImagesAttr.js";import{LiquidIf as y,LiquidFor as b}from"@gem-sdk/system";import v from"../../../../../carousel/components/root/Carousel.liquid.js";import f from"../../../../../carousel/components/item/CarouselItem.liquid.js";let w=({builderPropUID:w,children:L,pageContext:F,...$})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:I}=C($),{galleryCarouselSettingAttrs:_}=h($),{galleryCarouselStyle:k,galleryCarouselItemStyle:j}=u($),V=l({shape:$.shape,shapeForBottom:$.shapeForBottom,shapeFor1Col:$.shapeFor1Col,shapeFor2Col:$.shapeFor2Col,shapeForFtOnly:$.shapeForFtOnly,shapeForInsideBottom:$.shapeForInsideBottom,shapeForInside:$.shapeForInside},$.position),M=(t,i)=>e`${o({srcIsLiquidCode:!0,src:`${p("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",customLazyload:!0,style:i,className:"!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer",pageContext:F})}`,Z=r(V),q=e=>`
     ${y("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
     ${y("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
     ${y("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}

package/dist/esm/product/components/product-images-v2/components/gallery-grid/GalleryGrid.liquid.js

@@ -1,12 +1,12 @@
-import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,enableLazyLoadImage:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(e=>{let o=a(L?.position,e)||"",s="one-col"===o||"two-col"===o;t[e]=(i?!s:s)?"block":"none"}),e("d",t)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
-      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}
+import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cls as t}from"@gem-sdk/core";import{Liquid as o,LiquidFor as s,LiquidIf as d,If as r}from"@gem-sdk/system";import l from"../../../../../image/components/Modal3d.liquid.js";import m from"../../../../../image/components/NextImage.liquid.js";import p from"../../../../../image/components/Video.liquid.js";import g from"../../../../../video/components/HTML5Embed.liquid.js";import{getStyleOfObject as c}from"../../../../helpers/function.js";import{getAspectRatio as n,getSrcImage as u}from"../../common/common.js";import{getZoomImageClass as h,getZoomLenClass as y}from"../../common/productFeaturedImage.js";import{getShapeByLayout as C,getZoomDisplay as v}from"../../common/productGallery.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as w}from"../../composables/getProductImagesStyles.js";let _=({builderPropUID:_,wrapperStyle:$,children:b,pageContext:x,...L})=>{let{galleryItemClasses:F,galleryGridWrapperClasses:V}=f(L),{galleryGridStyles:q,galleryGridItemStyles:I}=w(L),M=C({shape:L.shape,shapeForBottom:L.shapeForBottom,shapeFor1Col:L.shapeFor1Col,shapeFor2Col:L.shapeFor2Col,shapeForFtOnly:L.shapeForFtOnly,shapeForInsideBottom:L.shapeForInsideBottom,shapeForInside:L.shapeForInside},L.position),j=(i=!1)=>{let t={desktop:"none",tablet:"none",mobile:"none"};return["desktop","mobile","tablet"].forEach(e=>{let o=a(L?.position,e)||"",s="one-col"===o||"two-col"===o;t[e]=(i?!s:s)?"block":"none"}),e("d",t)},k=()=>j(),S=()=>j(!0),Z=(e,a)=>i`
+      ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",baseSrc:"{{media.preview_image | image_url}}",setting:e,style:a,className:"!gp-rounded-none",customLazyload:!1,pageContext:x})}
       ${r(L?.galleryHoverEffect!=="none",`<div class="${t("zoom-element !gp-max-w-none gp-w-full gp-h-full",h())}">
-          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,enableLazyLoadImage:x})}
+          ${m({srcIsLiquidCode:!0,src:`${u("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",baseSrc:"{{media.preview_image | image_url}}",alt:"{{media.alt | escape}}",setting:e,style:a,className:"!gp-rounded-none gp-w-full gp-h-full",customLazyload:!1,pageContext:x})}
           </div>`," ")}
       ${r(L?.galleryHoverEffect=="zoom"&&L?.galleryZoomType=="glasses",`<div class="${t("zoom-lens-element",y())}" style="opacity: 0; background-image: url('{{media.preview_image | product_img_url: '1024x1024'}}')">
             </div>
           `," ")}
-    `,z=()=>l({src:d("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:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"}}),P=()=>i`
+    `,z=()=>l({src:d("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:n(M)}),B=()=>p({src:"{{mediaSourceVideo}}",alt:"{{media.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),H=()=>g({src:"{{mediaSourceVideo}}",title:"{{media.alt | escape}}",autoplay:!1,controls:!0,style:{width:"100%","max-height":"100%"},pageContext:x}),P=()=>i`
       ${d("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"/>
@@ -81,7 +81,7 @@ import{makeStyleResponsive as e,template as i,getResponsiveValueByScreen as a,cl
       {% assign isVideo= false %}
       {% assign isMedia= false %}
     </div>`,T=()=>i`
-    ${m({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:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,enableLazyLoadImage:x})}`;return o(`
+    ${m({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:n(M),layout:L?.layout,qualityType:L?.qualityType,qualityPercent:L?.qualityPercent},className:"!gp-rounded-none",customLazyload:!1,pageContext:x})}`;return o(`
   <div type="grid-gallery"
     class="${V}"
     style="${c(q)}}"

package/dist/esm/product/components/product-images-v3/ProductImageV3.js

@@ -1,5 +1,5 @@
 'use client';
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore as c,filterToolbarPreview as m}from"@gem-sdk/core";import{useMemo as f,useState as g,useEffect as h,Children as u,isValidElement as y}from"react";import D from"./components/feature-gallery/FeatureImageWithGallery.js";import b from"./components/feature-only/OnlyFeatureImage.js";import I from"./components/lightbox/ProductImagesLightBox.js";import M from"../../../common/components/NoDataState.js";import{getProductImagesClassName as Z}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as w}from"./common/getBorderActiveCss.js";import k from"./components/gallery-grid/GalleryGrid.js";let V=e=>e?.medias?.edges.map(e=>e?.node),v=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],E=E=>{let L=f(()=>a(E),[E]),{redirectProductShopifyLink:x}=l(),{setting:B,styles:H,builderProps:O,builderAttrs:j,style:S,children:F}=L,P=C(),A=o(),T=r(),{isChangeSelectedOption:_}=n(),N=d(),G=s(e=>e.setProductFeaturedImage),[z,R]=g(!1),J=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,U=e=>e?.featuredImage,W=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,X=f(()=>B?.typeDisplay==="all-images"&&!_,[_,B?.typeDisplay]),q=f(()=>{if(X){let e;switch(B?.preDisplay){case"1st-images":e=U(P);break;case"1st-3d-mode":e=W(P);break;case"1st-video":e=J(P);break;case"1st-available-variant":e=T?.media}return G(e),e}},[X,B?.preDisplay,G,P,T?.media]),K=f(()=>B?.filterByVariant==="selected_variant",[B?.filterByVariant]),Q=f(()=>{let e=V(P);if(!e?.length)return[{id:P?.featuredImage?.id||"noImageError",baseID:P?.featuredImage?.baseID||"noImageError",src:P?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:P?.featuredImage?.width||480,height:P?.featuredImage?.height||480}];if(!K||!T?.selectedOptions?.length)return e;let t=T.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),a=t.join("-"),i=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),l=e?.filter(e=>{if(!e?.alt)return!1;let t=i(e.alt),l=i(a),C=t===l||t.includes(l);return"all-variants"===t||C});return l?.length>0?l:e},[T?.selectedOptions,K,P]),Y=f(()=>Q.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[Q]),$=f(()=>p(H?.position,A),[A,H?.position]),ee=(e,t)=>{ea(e),t&&et()},et=()=>{R(!0)},ea=e=>{if(!e)return;let t=Y[e];if(void 0!==t){let e=Q[t];e&&G(e)}};h(()=>{if(T&&!X){let e=Y[T?.mediaId];if(void 0!==e){let t=Q[e]??P?.featuredImage;t&&G(t)}}},[T,Y,Q,P?.featuredImage,G,X]);let ei=f(()=>{let e="popup"===p(B?.ftClickOpenLightBox,A)||p(B?.clickOpenLightBox,A);return e||"edit"!==N||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[B?.ftClickOpenLightBox,B?.clickOpenLightBox,A,N]),el=()=>Q.length>0?u.map(m(F),t=>y(t)?e(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:B?.ftNavigationPosition,imageData:{imageShape:H?.ftShape,imageAlign:H?.align,imageLayout:H?.position},dotData:{dotSize:B?.ftDotSize,dotGapToCarousel:B?.ftDotGapToCarousel,dotStyle:B?.ftDotStyle}}):null):null,eC=`
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineSetting as a,getAspectRatio as i}from"./common/common.js";import{useProductShopifyEditLink as l,useProduct as C,useCurrentDevice as o,useCurrentVariant as r,useSelectedOption as n,useEditorMode as d,useProductStore as s,getResponsiveValueByScreen as p,useI18nStore as m,filterToolbarPreview as c}from"@gem-sdk/core";import{useMemo as g,useState as f,useEffect as h,Children as u,isValidElement as y}from"react";import D from"./components/feature-gallery/FeatureImageWithGallery.js";import I from"./components/feature-only/OnlyFeatureImage.js";import b from"./components/lightbox/ProductImagesLightBox.js";import M from"../../../common/components/NoDataState.js";import{getProductImagesClassName as Z}from"./composables/getProductImagesClassName.js";import{getBorderActiveCss as k}from"./common/getBorderActiveCss.js";import w from"./components/gallery-grid/GalleryGrid.js";let v=e=>e?.medias?.edges.map(e=>e?.node),E=["bottom-left","bottom-center","left","right","inside-left","inside-right","inside-bottom"],V=V=>{let L=g(()=>a(V),[V]),{redirectProductShopifyLink:x}=l(),{setting:H,styles:O,builderProps:B,builderAttrs:j,style:F,children:S}=L,A=C(),P=o(),T=r(),{isChangeSelectedOption:G}=n(),_=d(),N=s(e=>e.setProductFeaturedImage),[z,R]=f(!1),[J,U]=f(!1),W=e=>e?.medias?.edges.find(e=>["VIDEO","EXTERNAL_VIDEO"].includes(e?.node?.contentType??""))?.node,X=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="IMAGE")?.node,q=e=>e?.medias?.edges.find(e=>e?.node?.contentType==="MODEL_3D")?.node,K=g(()=>H?.typeDisplay==="all-images"&&!G,[G,H?.typeDisplay]),Q=g(()=>{if(K){let e;switch(H?.preDisplay){case"1st-images":e=X(A);break;case"1st-3d-mode":e=q(A);break;case"1st-video":e=W(A);break;case"1st-available-variant":e=T?.media}return N(e),e}},[K,H?.preDisplay,N,A,T?.media]),Y=g(()=>H?.filterByVariant==="selected_variant",[H?.filterByVariant]),$=g(()=>{let e=v(A);return e?.length?e:[{id:A?.featuredImage?.id||"noImageError",baseID:A?.featuredImage?.baseID||"noImageError",src:A?.featuredImage?.src||"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:A?.featuredImage?.width||480,height:A?.featuredImage?.height||480}]},[A]),ee=g(()=>{if(!Y||!T?.selectedOptions?.length)return $;let e=T.selectedOptions.map(e=>e.value).filter(Boolean).map(e=>e?.trim().toLowerCase()),t=e.join("-"),a=e=>e.toLowerCase().trim().replace(/[\s_]+/g,"-").replace(/[^a-z\d-]/g,"").replace(/-+/g,"-"),i=$?.filter(e=>{if(!e?.alt)return!1;let i=a(e.alt),l=a(t),C=i===l||i.includes(l);return"all-variants"===i||C});return i?.length>0?i:$},[T?.selectedOptions,Y,$]),et=g(()=>$.reduce((e,t,a)=>t?{...e,[t.id]:a}:e,{}),[$]),ea=g(()=>p(O?.position,P),[P,O?.position]),ei=({imageID:e,enableOpenLightBox:t,isClickFromFeatureImage:a=!1})=>{eC(e),t&&(U(a),el())},el=()=>{R(!0)},eC=e=>{if(!e)return;let t=et[e];if(void 0!==t){let e=$[t];e&&N(e)}};h(()=>{if(!T||K)return;let e=et[T?.mediaId],t=Y?ee[0]:void 0,a=void 0!==e?$[e]??A?.featuredImage:t;a&&N(a)},[T,et,$,ee,A?.featuredImage,N,K,Y]);let eo=g(()=>{let e="popup"===p(H?.ftClickOpenLightBox,P)||p(H?.clickOpenLightBox,P);return e||"edit"!==_||window?.parent?.postMessage?.(JSON.stringify({type:"active-modal",value:open}),"*"),e},[H?.ftClickOpenLightBox,H?.clickOpenLightBox,P,_]),er=()=>ee.length>0?u.map(c(S),t=>y(t)?e(t.type,{...t.props,isInsideProductImage:!0,navigationPosition:H?.ftNavigationPosition,imageData:{imageShape:O?.ftShape,imageAlign:O?.align,imageLayout:O?.position},dotData:{dotSize:H?.ftDotSize,dotGapToCarousel:H?.ftDotGapToCarousel,dotStyle:H?.ftDotStyle}}):null):null,en=`
       <svg viewBox="0 0 452 400" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M0 7.99999C0 3.58171 3.58172 0 8 0H444C448.418 0 452 3.58172 452 8V392C452 396.418 448.418 400 444 400H8C3.58173 400 0 396.418 0 392V7.99999Z" fill="#F9F9F9"/>
         <path d="M208.148 348.801C239.683 348.75 265.245 347.272 265.242 345.499C265.239 343.726 239.673 342.33 208.138 342.381C176.603 342.432 151.041 343.91 151.044 345.683C151.047 347.456 176.614 348.851 208.148 348.801Z" fill="#E6E6E6"/>
@@ -23,4 +23,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{setDefaultWhenUndefineS
         <path opacity="0.2" d="M293.196 231.862C306.954 231.862 318.106 217.921 318.106 200.724C318.106 183.527 306.954 169.586 293.196 169.586C279.439 169.586 268.286 183.527 268.286 200.724C268.286 217.921 279.439 231.862 293.196 231.862Z" fill="white"/>
         <path opacity="0.2" d="M293.196 247.637C313.923 247.637 330.726 226.634 330.726 200.725C330.726 174.816 313.923 153.812 293.196 153.812C272.469 153.812 255.666 174.816 255.666 200.725C255.666 226.634 272.469 247.637 293.196 247.637Z" fill="white"/>
       </svg>
-    `,{t:eo}=c(),er=e(M,{elementType:"secondary",description:eo("Catch your customer's attention with attracted media."),descriptionActions:[{text:eo("Add image"),callback:x},{text:eo("sync data"),callback:"syncProduct"}],additionalMedia:eC}),{wrapperClasses:en}=Z(E);return t("div",{...j,className:en,style:S,children:[e("style",{dangerouslySetInnerHTML:{__html:w({settings:{...B,...H},uid:O?.uid,type:"React"})}}),v.includes($)&&e(D,{...L,isFilterByVariantEnabled:K,gallery:Q,priorityFeatureImage:q,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,children:el()}),"only-feature"===$&&e(b,{gallery:Q,...L,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,isFilterByVariantEnabled:K,children:el()}),["one-col","two-col"].includes($)&&e(k,{gallery:Q,...L,onHandleClickImage:(e,t)=>ee(e||"",t),noDataChildren:er,children:el()}),ei&&e(I,{productImages:Q,builderPropUID:O?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(H?.ftShape)}),m(F,!0)]})};export{E as default};
+    `,{t:ed}=m(),es=e(M,{elementType:"secondary",description:ed("Catch your customer's attention with attracted media."),descriptionActions:[{text:ed("Add image"),callback:x},{text:ed("sync data"),callback:"syncProduct"}],additionalMedia:en}),{wrapperClasses:ep}=Z(V);return t("div",{...j,className:ep,style:F,children:[e("style",{dangerouslySetInnerHTML:{__html:k({settings:{...H,...O},uid:B?.uid,type:"React"})}}),E.includes(ea)&&e(D,{...L,isFilterByVariantEnabled:Y,gallery:ee,featureGallery:$,priorityFeatureImage:Q,onHandleClickImage:(e,t,a)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:a}),noDataChildren:es,children:er()}),"only-feature"===ea&&e(I,{gallery:$,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t,isClickFromFeatureImage:!0}),noDataChildren:es,children:er()}),["one-col","two-col"].includes(ea)&&e(w,{gallery:ee,...L,onHandleClickImage:(e,t)=>ei({imageID:e||"",enableOpenLightBox:t}),noDataChildren:es,children:er()}),eo&&e(b,{productImages:J?$:ee,builderPropUID:B?.uid,open:z,onHandleClose:()=>R(!1),imageRatio:i(O?.ftShape)}),c(S,!0)]})};export{V as default};

package/dist/esm/product/components/product-images-v3/ProductImagesV3.liquid.js

@@ -1,4 +1,4 @@
-import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as v,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,{enableLazyLoadImage:N}=_??{},A={...G,...D},B=`
+import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as v,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:G,styles:D,builderProps:b,style:z}=P,{rawChildren:O,pageContext:_}=C,N={...G,...D},A=`
     {
       "id":${JSON.stringify(b?.uid)},
       "pageContext": ${JSON.stringify(c(_))},
@@ -9,33 +9,33 @@ import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,R
       "collectionUrl": {{ collection.url | json | escape }},
       "collection": {{ collection | json | escape}}
     }
-  `,U=y({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:k,isRenderGalleryGrid:q}=i(A?.position,G?.type),E=q?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:J,productImagesGalleryClasses:w}=f(C),T=v({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),x=v({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:L,wrapContainerStyleOnlyOneImage:M,galleryImageStyle:R}=$(A),V=n({shape:A.shape,shapeForBottom:A.shapeForBottom,shapeFor1Col:A.shapeFor1Col,shapeFor2Col:A.shapeFor2Col,shapeForFtOnly:A.shapeForFtOnly,shapeForInsideBottom:A.shapeForInsideBottom??g,shapeForInside:A.shapeForInside??g},A.position),W=a(A.position,V,A?.spacing),H=()=>r`
+  `,B=y({"section-id":"{{section.id}}","data-id":`${b?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position,G?.type),q=k?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=f(C),w=v({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=v({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=$(N),R=n({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??g,shapeForInside:N.shapeForInside??g},N.position),V=a(N.position,R,N?.spacing),W=()=>r`
       ${s({uid:b?.uid||"",customProps:O?.[0].customProps},O?.map(e=>{if(e)return r`${t({...e,isInsideProductImage:!0,imageData:{imageShape:D?.ftShape,imageAlign:D?.align,imageLayout:D?.position},dotData:{dotSize:G?.ftDotSize,dotGapToCarousel:G?.ftDotGapToCarousel,dotStyle:G?.ftDotStyle}})}`}))}
     `;return r`
-  ${S(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:A,uid:b?.uid,type:"Liquid"})}</style>`),"")}
+  ${S(G?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:N,uid:b?.uid,type:"Liquid"})}</style>`),"")}
   ${j(`
     {% assign featured_image = product.featured_image %}
     ${h("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
   `)}
     <gp-product-images-v3
-      gp-data='${B}'
-      ${{...U}}
+      gp-data='${A}'
+      ${{...B}}
       style="${{...z}}"
-      class="${J}"
+      class="${E}"
     >
       <div
-        class="${h("product.media.size > 1",`${T}`,`${x}`)}"
-        style="${h("product.media.size > 1",I(L),I(M))}"
+        class="${h("product.media.size > 1",`${w}`,`${T}`)}"
+        style="${h("product.media.size > 1",I(x),I(L))}"
       >
-        ${l({builderPropUID:`gp-carousel-${b?.uid}`,...A,children:H(),enableLazyLoadImage:N})}
-        ${S(!k,r`
+        ${l({builderPropUID:`gp-carousel-${b?.uid}`,...N,children:W(),pageContext:_})}
+        ${S(!U,r`
       <div
-        class="${w}"
-        style="${I(R)}"
-        ${{...E}}
+        class="${J}"
+        style="${I(M)}"
+        ${{...q}}
       >
-        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...A,enableLazyLoadImage:N}))}
-        ${S(q,m({builderPropUID:b?.uid,wrapperStyle:{...W},children:H(),...A,enableLazyLoadImage:N}))}
+        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${b?.uid}`,...N,pageContext:_}))}
+        ${S(k,m({builderPropUID:b?.uid,wrapperStyle:{...V},children:W(),...N,pageContext:_}))}
       </div>
     `)}
       </div>

package/dist/esm/product/components/product-images-v3/ProductImagesV3Embla.liquid.js

@@ -0,0 +1,44 @@
+import{isLocalEnv as e,baseAssetURL as o,template as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGalleryEmbla.liquid.js";import d from"./components/gallery-carousel/GalleryCarouselEmbla.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{filterPageContext as c,getSettingPreloadData as u}from"../../../helpers.js";import{getShapeByLayout as n,sizeSettingDefaultForNewLayout as g}from"./common/productGallery.js";import{getProductImagesClassName as f}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as $}from"./composables/getProductImagesStyles.js";import{createAttr as y,LiquidIf as h,createClass as v,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as F}from"./common/getBorderActiveCss.js";import{getStyleOfObject as I}from"../../helpers/function.js";let C=C=>{let P=p(C),{setting:b,styles:G,builderProps:D,style:z}=P,{rawChildren:O,pageContext:_}=C,E={...b,...G},N=`
+    {
+      "id":${JSON.stringify(D?.uid)},
+      "pageContext": ${JSON.stringify(c(_))},
+      "setting":${JSON.stringify(b)},
+      "styles":${JSON.stringify(G)},
+      "productUrl":{{product.url | json | escape}},
+      "product":{{product | json | escape}},
+      "collectionUrl": {{ collection.url | json | escape }},
+      "collection": {{ collection | json | escape}}
+    }
+  `,A=y({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),{isOnlyFeatureAllDevices:B,isRenderGalleryGrid:U}=i(E?.position,b?.type),k=U?{}:y({"data-only-image":h("product.media.size > 1","false","true")}),{wrapperClasses:q,productImagesGalleryClasses:J}=f(C),w=v({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=v({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=$(E),R=n({shape:E.shape,shapeForBottom:E.shapeForBottom,shapeFor1Col:E.shapeFor1Col,shapeFor2Col:E.shapeFor2Col,shapeForFtOnly:E.shapeForFtOnly,shapeForInsideBottom:E.shapeForInsideBottom??g,shapeForInside:E.shapeForInside??g},E.position),V=a(E.position,R,E?.spacing),W=()=>r`
+      ${s({uid:D?.uid||"",customProps:O?.[0].customProps},O?.map(e=>{if(e)return r`${t({...e,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:b?.ftDotSize,dotGapToCarousel:b?.ftDotGapToCarousel,dotStyle:b?.ftDotStyle}})}`}))}
+    `;return r`
+  ${S(b?.borderActive?.border!=="none",h("product.media.size > 1",`<style>${F({settings:E,uid:D?.uid,type:"Liquid"})}</style>`),"")}
+  ${j(`
+    {% assign featured_image = product.featured_image %}
+    ${h("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
+  `)}
+    <gp-product-images-v3
+      gp-data='${N}'
+      ${{...A}}
+      style="${{...z}}"
+      class="${q}"
+    >
+      <div
+        class="${h("product.media.size > 1",`${w}`,`${T}`)}"
+        style="${h("product.media.size > 1",I(x),I(L))}"
+      >
+        ${l({builderPropUID:`gp-carousel-${D?.uid}`,...E,children:W(),pageContext:_})}
+        ${S(!B,r`
+      <div
+        class="${J}"
+        style="${I(M)}"
+        ${{...k}}
+      >
+        ${h("product.media.size > 1",d({builderPropUID:`gp-gallery-${D?.uid}`,...E,pageContext:_}))}
+        ${S(U,m({builderPropUID:D?.uid,wrapperStyle:{...V},children:W(),...E,pageContext:_}))}
+      </div>
+    `)}
+      </div>
+    </gp-product-images-v3>
+    ${S(e,`<script ${u('class="gps-link" delay',"src")}="{{ 'gp-product-images-v3-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${u('class="gps-link" delay',"src")}="${o}/assets-v2/gp-product-images-v3-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{C as default};

package/dist/esm/product/components/product-images-v3/common/classes.js

@@ -1 +1 @@
-import{DEVICES as e,getResponsiveValueByScreen as l}from"@gem-sdk/core";function t(e){return e.split(" ").reduce((e,l)=>(e[l]=!0,e),{})}let r=({extraClass:e,isAddOverFlowClass:l=!1})=>{let r="gp-relative gp-w-full";return e&&(r+=` ${e}`),l&&(r+=" gp-overflow-hidden"),t(r)},g=({extraClass:e})=>{let l="gallery-wrapper gp-product-images-gallery gp-flex gp-overflow-hidden gp-max-w-full gp-max-h-full data-[only-image=true]:gp-hidden";return e&&(l+=` ${e}`),t(l)},p=({extraClass:e})=>{let l="product-feature-image grid-gallery gp-flex !gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400 gp-z-1";return e&&(l+=` ${e}`),t(l)},a=({extraClass:e})=>{let l="gp-flex !gp-h-fit gp-relative gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},s=({extraClass:e})=>{let l="gp-flex gp-h-fit gp-max-w-full gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},i=({extraClass:e})=>{let l="`gp-flex-1 gp-w-full gp-feature-image-carousel";return e&&(l+=` ${e}`),t(l)},o=({setting:r,extraClass:g})=>{let p=g??"";return e.forEach(e=>{let t=l(r?.ftNavigationPosition,e),g="desktop"!==e?`${e}:`:"";"outside"===t?p+=` ${g}gp-px-[16px]`:p+=` ${g}gp-px-0`}),t(p)},u=({settings:r,extraClass:g})=>{let p=g??"gp-flex-1 gp-w-full carousel-gallery";return e.forEach(e=>{let t=l(r?.navigationPosition,e),g=l(r?.type,e),a=l(r?.position,e),s="desktop"!==e?`${e}:`:"";"outside"===t&&"slider"===g&&["bottom-center"].includes(a||"")?p+=` ${s}gp-px-[16px]`:p+=` ${s}gp-px-0`}),t(p)},f=({extraClass:e})=>{let l="gp-image-item gp-flex gp-items-center gp-justify-center gp-group gp-relative gp-overflow-hidden gp-cursor-pointer";return e&&(l+=` ${e}`),t(l)},n=({extraClass:e})=>{let l="gp-group gp-z-0 gp-flex !gp-min-w-full !gp-max-w-full gp-w-full gp-relative gp-items-start gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-image-item gp-ft-image-item data-[outline=active]:gp-outline";return e&&(l+=` ${e}`),t(l)};export{n as getFeaturedCarouselItemClasses,i as getFeaturedImageCarouselClasses,o as getFeaturedImageClasses,u as getFeaturedImageGalleryClasses,a as getFtImageWithGalleryClasses,p as getGalleryGridWrapperClasses,f as getGalleryItemClasses,g as getGalleryWrapperClasses,s as getImageGalleryWrapperClasses,r as getWrapperClasses};
+import{DEVICES as e,getResponsiveValueByScreen as l}from"@gem-sdk/core";function t(e){return e.split(" ").reduce((e,l)=>(e[l]=!0,e),{})}let r=({extraClass:e,isAddOverFlowClass:l=!1})=>{let r="gp-relative gp-w-full";return e&&(r+=` ${e}`),l&&(r+=" gp-overflow-hidden"),t(r)},g=({extraClass:e})=>{let l="gallery-wrapper gp-product-images-gallery gp-flex gp-overflow-hidden gp-max-w-full gp-max-h-full data-[only-image=true]:gp-hidden";return e&&(l+=` ${e}`),t(l)},p=({extraClass:e})=>{let l="product-feature-image grid-gallery gp-flex !gp-h-fit gp-w-full gp-flex-wrap scrollbar-track:gp-rounded-2xl scrollbar-thumb:gp-rounded-2xl scrollbar-thumb:gp-bg-gray-400 gp-z-1";return e&&(l+=` ${e}`),t(l)},a=({extraClass:e})=>{let l="gp-flex !gp-h-fit gp-relative gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},s=({extraClass:e})=>{let l="gp-flex gp-h-fit gp-max-w-full gp-overflow-hidden";return e&&(l+=` ${e}`),t(l)},i=({extraClass:e})=>{let l="`gp-flex-1 gp-w-full gp-feature-image-carousel";return e&&(l+=` ${e}`),t(l)},o=({setting:r,extraClass:g})=>{let p=g??"";return e.forEach(e=>{let t=l(r?.ftNavigationPosition,e),g="desktop"!==e?`${e}:`:"";"outside"===t?p+=` ${g}gp-px-[16px]`:p+=` ${g}gp-px-0`}),t(p)},u=({settings:r,extraClass:g})=>{let p=g??"gp-flex-1 gp-w-full carousel-gallery";return e.forEach(e=>{let t=l(r?.navigationPosition,e),g=l(r?.type,e),a=l(r?.position,e),s="desktop"!==e?`${e}:`:"";"outside"===t&&"slider"===g&&["bottom-center"].includes(a||"")?p+=` ${s}gp-px-[16px]`:p+=` ${s}gp-px-0`}),t(p)},f=({extraClass:e})=>{let l="gp-image-item gp-flex gp-items-center gp-justify-center gp-group gp-relative gp-overflow-hidden gp-cursor-pointer";return e&&(l+=` ${e}`),t(l)},n=({extraClass:e})=>{let l="gp-group gp-z-0 gp-flex !gp-min-w-full !gp-max-w-full gp-w-full gp-relative gp-items-start gp-justify-center gp-overflow-hidden gp-outline-1 -gp-outline-offset-1 gp-image-item gp-ft-image-item data-[outline=active]:gp-outline";return e&&(l+=` ${e}`),t(l)},d="gp-flex gp-items-center gp-justify-center";export{d as FEATURE_MEDIA_CENTER_CLASSES,n as getFeaturedCarouselItemClasses,i as getFeaturedImageCarouselClasses,o as getFeaturedImageClasses,u as getFeaturedImageGalleryClasses,a as getFtImageWithGalleryClasses,p as getGalleryGridWrapperClasses,f as getGalleryItemClasses,g as getGalleryWrapperClasses,s as getImageGalleryWrapperClasses,r as getWrapperClasses};

package/dist/esm/product/components/product-images-v3/common/common.js

@@ -1 +1 @@
-import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as i,makeStyleResponsive as o,removeNullUndefined as r}from"@gem-sdk/core";let l=e=>{let t=e?.desktop,i=e?.tablet===void 0?t:e?.tablet,o=e?.mobile===void 0?i:e?.mobile;return{desktop:t,tablet:i,mobile:o}},a=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let i=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(i))?t:Number(i)},n=e=>{if(!e)return{desktop:5};let t=a(e.desktop,5),i=a(e.tablet,t),o=a(e.mobile,i);return{desktop:t,tablet:i,mobile:o}},s=(e,t)=>{let i={};return["desktop","mobile","tablet"].forEach(o=>{i={...i,[`--d${"desktop"===o?"":`-${o}`}`]:`${e(o)?"none":t}`}}),i},d=e=>{let t=e?.["--radius"],i=e?.["--bblr"]||"0px",o=e?.["--bbrr"]||"0px",r=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==i||"0px"!==o||"0px"!==r||"0px"!==l},u=i=>{let o={};return["desktop","mobile","tablet"].forEach(t=>{let r=e(i,t)?.shapeValue;if(r)o={...o,[t]:r};else{let r=e(i,t)?.shape;switch(r){case"square":o={...o,[t]:"1/1"};break;case"vertical":o={...o,[t]:"3/4"};break;case"horizontal":o={...o,[t]:"4/3"};break;case"original":o={...o,[t]:""}}}}),t(o)},b=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let r=!1;i.forEach(i=>{let l=e(t.position,i),a=e(t.ratioLayout,i),n=e(t.ratioLayoutRight,i),s="desktop"===i?"--gtc":`--gtc-${i}`,d="desktop"===i?"--gtr":`--gtr-${i}`,u="left"===l?a:n,b=["left","right"].includes(l||"");b&&u?(r=!0,Object.assign(o={...o,[s]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[d]:"fit-content(0)"})):r&&Object.assign(o,{[d]:"unset"})})}return o},c=t=>{let i={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(o=>{let r=e(t.position,o),l="desktop"===o?"--o":`--o-${o}`;i={...i,[l]:"left"===r?"1":"0"}}),i},m=t=>{let i={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(o=>{let r=e(t.position,o),l="desktop"===o?"--o":`--o-${o}`;i={...i,[l]:"left"===r?"0":"1"}}),i},p=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,g=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},f=(t,i,l)=>{let a={},n={},s={},d={},u={},b={};return["desktop","mobile","tablet"].forEach(o=>{let r=e(t,o),c=e(i,o)?.width,m=e(l,o);if(a={...a,[o]:["inside-bottom","inside-left","inside-right"].includes(r)?"absolute":"static"},["inside-bottom"].includes(r)){let e=g(m);c=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(r)&&(c="100%"),s={...s,[o]:"inside-bottom"===r?`${m}`:"auto"},d={...d,[o]:["inside-left","inside-right"].includes(r)?`${m}`:"auto"},b={...b,[o]:["inside-bottom","inside-left"].includes(r)?`${m}`:"auto"},u={...u,[o]:"inside-right"===r?`${m}`:"auto"},n={...n,[o]:c}}),{...o("pos",a),...o("w",r(n)),...o("bottom",r(s)),...o("top",r(d)),...o("left",r(b)),...o("right",r(u))}},h=(t,i)=>{let o=!0,r=!1;return["desktop","mobile","tablet"].forEach(l=>{let a=e(t,l),n=e(i,l);a&&"only-feature"!==a&&(o=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(r=!0)}),{isOnlyFeatureAllDevices:o,isRenderGalleryGrid:r}},k=e=>({...e,setting:{...e.setting}}),$=e=>{let t=e.match(/\d+/g);return t?t[0]:e},y=t=>{let i=u(t),o={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(r=>{let l=e(t,r),a=l?.height,n=l?.width||"",s=$(a||""),d=n.toString().match(/px/g)?$(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(d))){o={...o,[r]:`${Number(s)/Number(d)*100}%`};return}if(a&&!isNaN(Number(s))){o={...o,[r]:a};return}let u=i?.[r]!=="auto"&&i?.[r]?i?.[r]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";o={...o,[r]:`calc((${u})*100%)`}}),o};export{d as checkAddOverFlowClass,n as convertSpacing,g as convertSpacingForIndisdeLayout,a as convertUnitToNumber,u as getAspectRatio,h as getConditionRenderGalleryImages,s as getDisplayStyle,y as getPaddingBottomByShapeSetting,p as getSrcImage,b as getStyleGridLayout,c as getStyleGridOrderForFeature,m as getStyleGridOrderForGallery,f as getStyleInsideLayout,l as getTypeWidthDevice,k as setDefaultWhenUndefineSetting};
+import{getResponsiveValueByScreen as e,makeAspectRatio as t,DEVICES as o,makeStyleResponsive as i,removeNullUndefined as l}from"@gem-sdk/core";let r=(t,o,i)=>{let l=e(t?.ftShape,o)?.shape==="original",r=l?e(t?.ftNavigationPosition,o):"";return[JSON.stringify(t?.position),r,o,i].join("|")},a=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,i=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:i}},n=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},s=e=>{if(!e)return{desktop:5};let t=n(e.desktop,5),o=n(e.tablet,t),i=n(e.mobile,o);return{desktop:t,tablet:o,mobile:i}},u=(e,t)=>{let o={};return["desktop","mobile","tablet"].forEach(i=>{o={...o,[`--d${"desktop"===i?"":`-${i}`}`]:`${e(i)?"none":t}`}}),o},d=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",i=e?.["--bbrr"]||"0px",l=e?.["--btlr"]||"0px",r=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==i||"0px"!==l||"0px"!==r},c=o=>{let i={};return["desktop","mobile","tablet"].forEach(t=>{let l=e(o,t)?.shapeValue;if(l)i={...i,[t]:l};else{let l=e(o,t)?.shape;switch(l){case"square":i={...i,[t]:"1/1"};break;case"vertical":i={...i,[t]:"3/4"};break;case"horizontal":i={...i,[t]:"4/3"};break;case"original":i={...i,[t]:""}}}}),t(i)},b=t=>{let i={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let l=!1;o.forEach(o=>{let r=e(t.position,o),a=e(t.ratioLayout,o),n=e(t.ratioLayoutRight,o),s="desktop"===o?"--gtc":`--gtc-${o}`,u="desktop"===o?"--gtr":`--gtr-${o}`,d="left"===r?a:n,c=["left","right"].includes(r||"");c&&d?(l=!0,Object.assign(i={...i,[s]:`minmax(0, ${d[0]}fr) minmax(0, ${d[1]}fr)`},{[u]:"fit-content(0)"})):l&&Object.assign(i,{[u]:"unset"})})}return i},m=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"1":"0"}}),o},p=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t.position,i),r="desktop"===i?"--o":`--o-${i}`;o={...o,[r]:"left"===l?"0":"1"}}),o},g=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,f=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},h=(t,o,r)=>{let a={},n={},s={},u={},d={},c={};return["desktop","mobile","tablet"].forEach(i=>{let l=e(t,i),b=e(o,i)?.width,m=e(r,i);if(a={...a,[i]:["inside-bottom","inside-left","inside-right"].includes(l)?"absolute":"static"},["inside-bottom"].includes(l)){let e=f(m);b=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(l)&&(b="100%"),s={...s,[i]:"inside-bottom"===l?`${m}`:"auto"},u={...u,[i]:["inside-left","inside-right"].includes(l)?`${m}`:"auto"},c={...c,[i]:["inside-bottom","inside-left"].includes(l)?`${m}`:"auto"},d={...d,[i]:"inside-right"===l?`${m}`:"auto"},n={...n,[i]:b}}),{...i("pos",a),...i("w",l(n)),...i("bottom",l(s)),...i("top",l(u)),...i("left",l(c)),...i("right",l(d))}},y=(t,o)=>{let i=!0,l=!1;return["desktop","mobile","tablet"].forEach(r=>{let a=e(t,r),n=e(o,r);a&&"only-feature"!==a&&(i=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:i,isRenderGalleryGrid:l}},k=e=>({...e,setting:{...e.setting}}),$=e=>{let t=e.match(/\d+/g);return t?t[0]:e},N=t=>{let o=c(t),i={desktop:"auto",mobile:"auto",tablet:"auto"};return["desktop","mobile","tablet"].forEach(l=>{let r=e(t,l),a=r?.height,n=r?.width||"",s=$(a||""),u=n.toString().match(/px/g)?$(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(u))){i={...i,[l]:`${Number(s)/Number(u)*100}%`};return}if(a&&!isNaN(Number(s))){i={...i,[l]:a};return}let d=o?.[l]!=="auto"&&o?.[l]?o?.[l]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";i={...i,[l]:`calc((${d})*100%)`}}),i},x=["only-feature","one-col","two-col"],S=t=>{let i={};return o.forEach(o=>{let l=e(t,o);i[o]=null==l||!x.includes(l)}),i};export{d as checkAddOverFlowClass,s as convertSpacing,f as convertSpacingForIndisdeLayout,n as convertUnitToNumber,c as getAspectRatio,y as getConditionRenderGalleryImages,u as getDisplayStyle,r as getFeatureGalleryComponentKey,S as getGalleryCarouselShouldInitByLayout,N as getPaddingBottomByShapeSetting,g as getSrcImage,b as getStyleGridLayout,m as getStyleGridOrderForFeature,p as getStyleGridOrderForGallery,h as getStyleInsideLayout,a as getTypeWidthDevice,k as setDefaultWhenUndefineSetting};

package/dist/esm/product/components/product-images-v3/common/getBorderActiveCss.js

@@ -4,6 +4,7 @@ import{composeBorderCss as e,composeCornerCss as t}from"@gem-sdk/core";let i=({s
       height: 100%;
       width: 100%;
       position: absolute;
+      box-sizing: border-box;
       z-index: 999;
       top: 0;
       left: 0;

package/dist/esm/product/components/product-images-v3/components/child/ProductFeatureVideo.js

@@ -1 +1 @@
-import{jsx as e,Fragment as o}from"react/jsx-runtime";import{memo as t,useMemo as r}from"react";import"@gem-sdk/core";import"next/link";import i from"../../../../../video/components/Video.js";var m=t(t=>{let{url:m,aspectRatio:l}=t,u=r(()=>m.includes("youtu.be")?"youtube":m.includes("vimeo")?"vimeo":"html5",[m]);return e(o,{children:e(i,{setting:{type:u,html5Url:m,youtubeUrl:m,vimeoUrl:m,preload:!0,controls:!0,aspectRatio:l}})})});export{m as default};
+import{jsx as e}from"react/jsx-runtime";import{memo as o,useMemo as r}from"react";import"@gem-sdk/core";import"next/link";import t from"../../../../../video/components/Video.js";import{FEATURE_MEDIA_CENTER_CLASSES as l}from"../../common/classes.js";var m=o(o=>{let{url:m,aspectRatio:i,thumbnail:s}=o,u=r(()=>m.includes("youtu.be")?"youtube":m.includes("vimeo")?"vimeo":"html5",[m]);return e("div",{className:`gp-w-full gp-h-full ${l}`,children:e(t,{setting:{type:u,html5Url:m,youtubeUrl:m,vimeoUrl:m,preload:!0,controls:!0,aspectRatio:i,poster:s?{src:s}:void 0},className:"gp-w-full"})})});export{m as default};

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

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

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

@@ -1,2 +1,2 @@
 'use client';
-import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useProduct as r,useCurrentDevice as i,useShopStore as a,useRenderMode as c,getResponsiveValueByScreen as n,cls as s,makeStyle as h}from"@gem-sdk/core";import{memo as l,useMemo as f,useCallback as p}from"react";import m from"../../../../../image/components/NextImage.js";import g from"./MediaIcon.js";import{isFeatureMedia as d,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import v from"./ProductFeatureVideo.js";let E={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 T=l(({image:l,imageShowWhenHover:T,setting:w,aspectRatio:b})=>{var I;let x=r(),L=i(),j=a(e=>e.storefrontUrl),{isEditMode:N,isPreviewSharePageMode:O}=c(),k=f(()=>"none"!==n(w.ftClickOpenLightBox,L),[L,w.ftClickOpenLightBox]),R=f(()=>!N&&["VIDEO","EXTERNAL_VIDEO"].includes(l?.contentType||"")&&!k,[N,l?.contentType,k]),$=f(()=>l?{...l,src:R?l.src:d(l?.contentType)?l?.previewImage:l.src}:E,[l,R]),z=f(()=>{if(O)return"javascript:void(0)";if(!j)return"#";let e=new URL(j);return x?`${e.protocol}//${e.host}/products/${x.handle}`:"#"},[j,x,O]),A=f(()=>w?.hoverEffect!=="none"&&!d($?.contentType),[$?.contentType,w?.hoverEffect]),B=f(()=>w?.hoverEffect=="zoom"&&w?.zoomType=="glasses"&&!d($?.contentType),[$?.contentType,w?.hoverEffect,w?.zoomType]),C=p(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),F=f(()=>T?"other"!==w.hoverEffect?C($):C(T):E.src,[T,$,w.hoverEffect,C]);return e(t,{children:(I=e(t,{children:R?e(v,{type:$?.contentType,url:$.src??"",aspectRatio:b}):o(t,{children:[e(m,{draggable:"false",src:$.src,width:$?.width,height:$?.height,alt:$?.alt,setting:{aspectRatio:b,layout:w?.ftLayout},priority:w?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),e(g,{contentType:$?.contentType??""}),A&&e(m,{draggable:"false",src:F,width:w?.hoverEffect==="other"?T?.width:$.width,height:w?.hoverEffect==="other"?T?.height:$.height,alt:w?.hoverEffect==="other"?T?.alt:$.alt,setting:{layout:w.ftLayout,aspectRatio:b},style:{width:"100%",height:"100%"},className:s("hover-image featured-image-only !gp-max-w-none",y()),priority:w?.preload}),B&&e("div",{className:s(u(),"room-len"),style:{...h({bgi:`url("${$?.src}")`})}})]})}),"product-link"===n(w.ftClickOpenLightBox,L)?e("a",{title:x?.title,href:z,className:"gp-w-full",children:I}):I)})});export{T as default};
+import{jsx as e,Fragment as t,jsxs as o}from"react/jsx-runtime";import{useProduct as r,useCurrentDevice as i,useShopStore as a,useRenderMode as c,getResponsiveValueByScreen as n,cls as s,makeStyle as h}from"@gem-sdk/core";import{memo as l,useMemo as f,useCallback as p}from"react";import m from"../../../../../image/components/NextImage.js";import g from"./MediaIcon.js";import{isFeatureMedia as d,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import v from"./ProductFeatureVideo.js";let E={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 T=l(({image:l,imageShowWhenHover:T,setting:w,aspectRatio:b})=>{var I;let x=r(),L=i(),j=a(e=>e.storefrontUrl),{isEditMode:N,isPreviewSharePageMode:O}=c(),k=f(()=>"none"!==n(w.ftClickOpenLightBox,L),[L,w.ftClickOpenLightBox]),R=f(()=>!N&&["VIDEO","EXTERNAL_VIDEO"].includes(l?.contentType||"")&&!k,[N,l?.contentType,k]),$=f(()=>l?{...l,src:R?l.src:d(l?.contentType)?l?.previewImage:l.src}:E,[l,R]),z=f(()=>{if(O)return"javascript:void(0)";if(!j)return"#";let e=new URL(j);return x?`${e.protocol}//${e.host}/products/${x.handle}`:"#"},[j,x,O]),A=f(()=>w?.hoverEffect!=="none"&&!d($?.contentType),[$?.contentType,w?.hoverEffect]),B=f(()=>w?.hoverEffect=="zoom"&&w?.zoomType=="glasses"&&!d($?.contentType),[$?.contentType,w?.hoverEffect,w?.zoomType]),C=p(e=>"IMAGE"!==e.contentType?e.previewImage:e.src,[]),F=f(()=>T?"other"!==w.hoverEffect?C($):C(T):E.src,[T,$,w.hoverEffect,C]);return e(t,{children:(I=e(t,{children:R?e(v,{type:$?.contentType,url:$.src??"",thumbnail:$?.previewImage,aspectRatio:b}):o(t,{children:[e(m,{draggable:"false",src:$.src,width:$?.width,height:$?.height,alt:$?.alt,setting:{aspectRatio:b,layout:w?.ftLayout},priority:w?.preload,className:"featured-image-only",style:{width:"100%",height:"100%",cursor:"pointer"}}),e(g,{contentType:$?.contentType??""}),A&&e(m,{draggable:"false",src:F,width:w?.hoverEffect==="other"?T?.width:$.width,height:w?.hoverEffect==="other"?T?.height:$.height,alt:w?.hoverEffect==="other"?T?.alt:$.alt,setting:{layout:w.ftLayout,aspectRatio:b},style:{width:"100%",height:"100%"},className:s("hover-image featured-image-only !gp-max-w-none",y()),priority:w?.preload}),B&&e("div",{className:s(u(),"room-len"),style:{...h({bgi:`url("${$?.src}")`})}})]})}),"product-link"===n(w.ftClickOpenLightBox,L)?e("a",{title:x?.title,href:z,className:"gp-w-full",children:I}):I)})});export{T as default};

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

@@ -1,2 +1 @@
-import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r,cls as i,getResponsiveValueByScreen as a,makeStyle as m}from"@gem-sdk/core";import{memo as l}from"react";import{getAspectRatio as s}from"../../common/common.js";import c from"../../../../../image/components/NextImage.js";import n from"../lightbox/ButtonOpenLightBox.js";import d from"./MediaIcon.js";import{isFeatureMedia as g,getZoomImageClass as p,getZoomLenClass as h}from"../../common/productFeaturedImage.js";import{handleMouseOut as y,handleMouseMove as f}from"../../common/hoverAction.js";import{getProductImagesClassName as u}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as v}from"../../composables/getProductImagesStyles.js";import{useProductGalleryGrid as j}from"../../hooks/useProductGalleryGrid.js";var w=l(l=>{let{builderPropUID:w,productImages:T,onHandleClick:x,activeIndexFromFeatureImage:b,children:I,isHiddenInteraction:N,...k}=l,{isDisplay:E,shapeByLayout:G,imageActiveIndex:M,enableOpenLightBox:P,isEnableBorderActive:$,filteredProductImages:z}=j(l),B=r(),{galleryGridWrapperClasses:H,galleryItemClasses:O}=u(k),{galleryGridStyles:Z,galleryGridItemStyles:A}=v(k);return e(o,{children:E&&t("div",{"data-slot":"children","data-id":w,className:H,style:Z,"gp-data-hidden":`${N}`,children:[z?.map((o,r)=>{let l=r===M,u=g(o.contentType)?o.previewImage:o.src;return t("div",{"aria-hidden":!0,className:O(`gp-gallery-image-item gem-slider-item-${w}
-                  ${l&&$?"gem-slider-item-active":""}`),onClick:()=>x(o?.id||"",P),style:A,onMouseMove:e=>f(e,{hoverEffect:k.galleryHoverEffect,zoom:k.galleryZoom,zoomType:k.galleryZoomType}),onMouseOut:e=>y(e),"data-border":l&&k?.borderActive?"active":"deactive",children:[e(c,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{aspectRatio:s(G),layout:k?.layout},style:{width:"100%",height:"100%"}},o?.id),e(d,{contentType:o?.contentType||""}),k?.galleryHoverEffect!=="none"&&!g(o?.contentType)&&e(c,{src:u,width:o?.width,height:o?.height,alt:o?.alt,setting:{layout:k.layout,aspectRatio:s(G)},className:i("hover-image !gp-max-w-none",p())}),k?.galleryHoverEffect=="zoom"&&k?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(a(k.position,B)||"")&&!g(o?.contentType)&&e("div",{className:i(h(),"room-len"),style:{...m({bgi:`url("${o?.src}")`})}}),a(k?.clickOpenLightBox,B)&&e(n,{})]},o?.id)}),I]})})});export{w as default};
+import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r,useRenderMode as i,getResponsiveValueByScreen as a,cls as m,makeStyle as l}from"@gem-sdk/core";import{memo as c}from"react";import{getAspectRatio as s}from"../../common/common.js";import n from"../../../../../image/components/NextImage.js";import d from"../lightbox/ButtonOpenLightBox.js";import p from"./MediaIcon.js";import g from"./ProductFeatureVideo.js";import{isFeatureMedia as h,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import{handleMouseOut as f,handleMouseMove as v}from"../../common/hoverAction.js";import{getProductImagesClassName as j}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as T}from"../../composables/getProductImagesStyles.js";import{useProductGalleryGrid as w}from"../../hooks/useProductGalleryGrid.js";var I=c(c=>{let{builderPropUID:I,productImages:b,onHandleClick:E,activeIndexFromFeatureImage:x,children:N,isHiddenInteraction:O,...P}=c,{isDisplay:k,shapeByLayout:G,imageActiveIndex:M,enableOpenLightBox:R,isEnableBorderActive:$,filteredProductImages:z}=w(c),A=r(),{isEditMode:B}=i(),H=a(P.position,A)||"",L=["one-col","two-col"].includes(H),V="bottom-center"===H,{galleryGridWrapperClasses:Z,galleryItemClasses:C}=j(P),{galleryGridStyles:D,galleryGridItemStyles:F}=T(P),S=V?"none":P.galleryHoverEffect;return e(o,{children:k&&t("div",{"data-slot":"children","data-id":I,className:Z,style:D,"gp-data-hidden":`${O}`,children:[z?.map((r,i)=>{let c=i===M,j=h(r.contentType)?r.previewImage:r.src,T=!B&&L&&!R&&["VIDEO","EXTERNAL_VIDEO"].includes(r?.contentType||"");return t("div",{"aria-hidden":!0,className:C(`gp-gallery-image-item gem-slider-item-${I} ${c&&$?"gem-slider-item-active":""}`),onClick:()=>E(r?.id||"",R),style:F,onMouseMove:e=>v(e,{hoverEffect:S,zoom:P.galleryZoom,zoomType:P.galleryZoomType}),onMouseOut:e=>f(e),"data-border":c&&P?.borderActive?"active":"deactive",children:[T?e(g,{type:r?.contentType,url:r?.src??"",thumbnail:r?.previewImage,aspectRatio:s(G)}):t(o,{children:[e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{aspectRatio:s(G),layout:P?.layout},style:{width:"100%",height:"100%"}},r?.id),e(p,{contentType:r?.contentType||""})]}),P?.galleryHoverEffect!=="none"&&!h(r?.contentType)&&e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{layout:P.layout,aspectRatio:s(G)},className:m("hover-image !gp-max-w-none",y())}),P?.galleryHoverEffect=="zoom"&&P?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(a(P.position,A)||"")&&!h(r?.contentType)&&e("div",{className:m(u(),"room-len"),style:{...l({bgi:`url("${r?.src}")`})}}),a(P?.clickOpenLightBox,A)&&e(d,{})]},r?.id)}),N]})})});export{I as default};

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

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as o,cls as a}from"@gem-sdk/core";import{useRef as l,useCallback as s}from"react";import d from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import u from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as p}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as n}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as c}from"../../hooks/useFeatureImageWithGallery.js";let g=g=>{let{setting:I,styles:f,builderProps:h,gallery:b,onHandleClickImage:y,priorityFeatureImage:C,children:F,noDataChildren:P,isFilterByVariantEnabled:v}=g,{isEditMode:w}=i(),j=l(null),k=o(),x=s(e=>{if(!j.current)return;let r=j.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())},[]),H={...I,...f},{isShowCarousel:G,featureImageHeight:N,featureWrapperImage:S,onClickFeatureArrow:U,activeIndexFromFeatureImage:A,setOnClickFeatureArrow:D,onHandleLoadedFeatureImage:R,setActiveIndexFromFeatureImage:W}=c(g);if(b?.[0]?.id==="noImageError"&&w)return e(r,{children:P});let{ftImageGalleryClasses:$,imageGalleryWrapperClasses:E}=n(g),{wrapperFeaturedImageStyle:J,featureImageStyle:L,galleryImageStyle:O}=p(H,{gallery:b,featureImageHeight:N}),q=JSON.stringify(H?.position)+k+G;return t("div",{className:a("gp-grid gp-w-full gp-relative"),style:J,children:[t("div",{className:$,style:L,children:[F,e(u,{ref:j,imgRef:S,productImages:b,...H,onHandleClick:(e,r)=>y(e||"",r),onHandleLoaded:R,onHandleUpdateActiveIndex:W,onClickArrow:e=>D(e),builderPropUID:h?.uid,builderPropsClass:`gp-product-images-feature-${h?.uid}`})]}),b.length>(v?0:1)&&e("div",{className:E,style:O,children:G?e(d,{productImages:b,position:H?.position,...H,builderPropUID:h?.uid,onHandleClick:(e,r)=>y(e||"",r),onSwiperReady:x,activeIndexFormFeatureImage:A,priorityFeatureImage:C,onClickFeatureArrow:U,builderPropsClass:`gp-product-images-gallery-${h?.uid}`}):e(m,{productImages:b,...H,builderPropUID:h?.uid,onHandleClick:(e,r)=>y(e||"",r),activeIndexFromFeatureImage:A,isHiddenInteraction:!0})})]},q)};export{g as default};
+import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as l,cls as o}from"@gem-sdk/core";import{useRef as d,useEffect as a,useCallback as s,useMemo as n}from"react";import u from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import c from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as p}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as g}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as f}from"../../hooks/useFeatureImageWithGallery.js";import{getFeatureGalleryComponentKey as I}from"../../common/common.js";let h=h=>{let{setting:b,styles:v,builderProps:y,gallery:C,featureGallery:x,onHandleClickImage:F,priorityFeatureImage:P,children:j,noDataChildren:k,isFilterByVariantEnabled:w}=h,{isEditMode:H}=i(),G=d(null),L=l(),N=d(C);N.current=C;let R=d(x??C);R.current=x??C;let U=d(null);a(()=>()=>{U.current?.(),U.current=null},[]);let $=s((e,r)=>{if(e.destroyed||r.destroyed)return;let t=R.current[e.realIndex]?.id;if(void 0===t)return;let i=N.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),A=s(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(U.current?.(),U.current=null,w){let t=()=>$(r,e);r.on("slideChange",t),U.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[w,$]),D={...b,...v},{isShowCarousel:S,featureImageHeight:T,featureWrapperImage:B,onClickFeatureArrow:E,activeIndexFromFeatureImage:W,setOnClickFeatureArrow:q,onHandleLoadedFeatureImage:z,setActiveIndexFromFeatureImage:J}=f(h),K=n(()=>{if(void 0===W)return;let e=(x??C)[W]?.id;if(void 0===e)return;let r=C.findIndex(r=>r?.id===e);return r>-1?r:void 0},[W,x,C]);if(C?.[0]?.id==="noImageError"&&H)return e(r,{children:k});let{ftImageGalleryClasses:M,imageGalleryWrapperClasses:O}=g(h),{wrapperFeaturedImageStyle:Q,featureImageStyle:V,galleryImageStyle:X}=p(D,{gallery:C,featureImageHeight:T}),Y=`${I(D,L,S)}|${w?"variant-filtered":"all-media"}`;return t("div",{className:o("gp-grid gp-w-full gp-relative"),style:Q,children:[t("div",{className:M,style:V,children:[j,e(c,{ref:G,imgRef:B,productImages:x??C,enableThumbsLink:!w,...D,onHandleClick:(e,r)=>F(e||"",r,!0),onHandleLoaded:z,onHandleUpdateActiveIndex:J,onClickArrow:e=>q(e),builderPropUID:y?.uid,builderPropsClass:`gp-product-images-feature-${y?.uid}`})]}),C.length>(w?0:1)&&e("div",{className:O,style:X,children:S?e(u,{productImages:C,position:D?.position,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),onSwiperReady:A,activeIndexFormFeatureImage:K,priorityFeatureImage:P,onClickFeatureArrow:E,builderPropsClass:`gp-product-images-gallery-${y?.uid}`}):e(m,{productImages:C,...D,builderPropUID:y?.uid,onHandleClick:(e,r)=>F(e||"",r),activeIndexFromFeatureImage:K,isHiddenInteraction:!0})})]},Y)};export{h as default};