@gem-sdk/components 2.1.27-staging.1 → 2.1.27

package/dist/cjs/article/components/ArticleImage.js

@@ -29,8 +29,7 @@ const ArticleImage = ({ className, setting = {}, styles = {}, advanced, builderP
             setting: {
                 ...setting,
                 alt: image.alt,
-                image,
-                disableNoDataState: true
+                image
             },
             styles: styles,
             advanced: advanced

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -14,7 +14,7 @@ var NextImage_liquid = require('../../../image/components/NextImage.liquid.js');
 var getSrcSet = require('../../../image/helpers/getSrcSet.js');
 var helpers$1 = require('../../../image/components/helpers.js');
 
-const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
+const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
@@ -43,6 +43,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             } else if (data.videoType === 'html5') {
                 delete data.video;
             }
+            if (data.type !== 'image') {
+                delete data.image;
+            }
         }
         return background;
     };
@@ -131,7 +134,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: helpers$1.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: helpers$1.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
-    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
+    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
     const renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -181,7 +184,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
         <div class="${core.cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -224,7 +227,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 alt: `lazy image ${device}`,
                 className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
                 isDisableAspectStyle: true,
-                enableLazyLoadImage
+                enableLazyloadImage
             }));
         }).join('') : ''}
             </div></div>

package/dist/cjs/carousel/components/Carousel.liquid.js

@@ -13,7 +13,7 @@ const DEVICES = [
     'tablet',
     'desktop'
 ];
-const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ftShapeProductImage, ...props })=>{
+const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ...props })=>{
     const setting = arrow.mappingNavigationCarousel(props.setting);
     const styleHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(styles?.sizeSetting));
     const styleWidth = core.makeStyleWithDefault('w', core.getWidthByShapeGlobalSize(styles?.sizeSetting, true), {
@@ -112,8 +112,7 @@ const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId
         setting,
         styles,
         moveToIdx,
-        isHiddenArrowWhenDisabled,
-        ftShapeProductImage
+        isHiddenArrowWhenDisabled
     }).replaceAll("'", ''')}' style="${{
         ...core.makeStyleResponsive('jc', styles?.align),
         ...rootStyles

package/dist/cjs/common/const.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const ELEMENT_Z_INDEX = {
-    STICKY: 1000,
+    STICKY: 100000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/cjs/helpers.js

@@ -47,7 +47,7 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, i
         locale += ` | replace: '$locationOrigin', locationOrigin`;
     }
     if (isReplaceInventoryQuantity) {
-        locale += ` | replace: '<$quantity$>', inventory_quantity`;
+        locale += ` | replace: '<$quantity$>', inventory_quantity | replace: '&lt;$quantity$&gt;', inventory_quantity`;
     }
     if (isCapitalize) {
         locale = `${locale} | downcase`;

package/dist/cjs/image/components/AdaptiveImage.liquid.js

@@ -6,7 +6,7 @@ var core = require('@gem-sdk/core');
 var getSrcSet = require('../helpers/getSrcSet.js');
 var helpers = require('./helpers.js');
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
     const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -31,17 +31,16 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, core.template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['mobile'] ?? helpers.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
-      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyLoadImage ? imagePlaceholder?.['tablet'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
+      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? helpers.createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcMobile}" />` : ''}
+      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.height ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
     }}
         class="${core.cls(className, {
-        gp_lazyload: enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: enableLazyloadImage
     })}"
-        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
+        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

package/dist/cjs/image/components/Image.js

@@ -8,13 +8,10 @@ var Link = require('../../link/components/Link.js');
 var AdaptiveImage = require('./AdaptiveImage.js');
 var NextImage = require('./NextImage.js');
 var helpers = require('./helpers.js');
-var NoDataImage = require('./NoDataImage.js');
-var React = require('react');
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -59,18 +56,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = React.useMemo(()=>{
-        if (setting?.disableNoDataState) return false;
-        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        return !setting?.srcSet?.desktop?.src;
-    }, [
-        currentDevice,
-        setting?.disableNoDataState,
-        setting?.srcSet?.desktop?.src,
-        setting?.srcSet?.mobile?.src,
-        setting?.srcSet?.tablet?.src
-    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -98,15 +83,10 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight
-                        }
-                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: core.cls(className, 'gp-inline-block gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
+                        className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

package/dist/cjs/image/components/Image.liquid.js

@@ -7,7 +7,7 @@ var AdaptiveImage_liquid = require('./AdaptiveImage.liquid.js');
 var NextImage_liquid = require('./NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
     const { imageLink, isNotLazyload } = setting ?? {};
     const { shape } = styles ?? {};
     const { Wrap: WrapLink, urlData } = helpers.getInsertLinkData('div', imageLink);
@@ -34,7 +34,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
+    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
     style="${{
         ...style,
         ...core.makeStyleResponsive('ta', styles?.align)
@@ -76,8 +76,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     }) : NextImage_liquid.default({
         ...setting?.image,
         priority: setting?.priority,
@@ -106,8 +105,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     })}
       </${WrapLink}>
   </div>`;

package/dist/cjs/image/components/NextImage.liquid.js

@@ -7,7 +7,7 @@ var getSrcSet = require('../helpers/getSrcSet.js');
 var index = require('../../product/components/ProductVariants/index.js');
 var helpers = require('./helpers.js');
 
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
+const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getSrcSet.getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getSrcSet.getImageSrc({
@@ -97,13 +97,12 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${core.cls(className, {
-        gp_lazyload: !customLazyload && enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: !customLazyload && enableLazyloadImage
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
+        src: enableLazyloadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,

package/dist/cjs/image-comparison/components/CompareImage.liquid.js

@@ -11,7 +11,7 @@ var helpers$1 = require('../../helpers.js');
 var helpers = require('./common/helpers.js');
 
 const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, enableLazyLoadImage, pageContext, translate } = props;
+    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -271,9 +271,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       ${NextImage_liquid.default({
         customAttrs: {
@@ -289,9 +287,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/cjs/post-purchase/product/components/ProductOffer.js

@@ -69,12 +69,8 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     };
     const getClassNameForItem = (index)=>{
         let className = '';
-        ProductVariant.DEVICES.forEach((device)=>{
+        ProductVariant.DEVICES.map((device)=>{
             const key = device === 'desktop' ? '' : `${device}:`;
-            if (device === 'mobile') {
-                className += ` mobile:gp-col-span-2`;
-                return;
-            }
             if (productOfferLayout?.[device] === '1col' && index % 3 === 0 || (totalProduct || 0) <= 1) {
                 className += ` ${key}gp-col-span-2`;
             }

package/dist/cjs/product/components/Product.liquid.js

@@ -9,7 +9,6 @@ var helpers = require('../../helpers.js');
 const PRODUCT_ID_LATEST = 'latest';
 const PREFIX_PRODUCT_ID = 'gid://shopify/Product/';
 const PREFIX_PRODUCT_VARIANT_ID = 'gid://shopify/ProductVariant/';
-const PREFIX_PRODUCT_OPTION_VALUE_ID = 'gid://shopify/ProductOptionValue/';
 const STATIC_PRODUCT_STATUS = 'static';
 const DYNAMIC_PRODUCT_STATUS = 'dynamic';
 const Product = ({ children, setting, styles, style, builderProps, rawChildren, advanced })=>{
@@ -25,8 +24,8 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
     const formatProductId = productSetting?.productId?.replace(PREFIX_PRODUCT_ID, '').toLowerCase() || PRODUCT_ID_LATEST;
     const formatVariantId = initVariantId?.replace(PREFIX_PRODUCT_VARIANT_ID, '') || '';
     const productStatus = productSetting?.productStatus ?? STATIC_PRODUCT_STATUS;
-    const preSelectedOptionIds = productSetting?.selectedOptions?.map((option)=>option?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID, ''));
     return core.template /* liquid */ `
+    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -101,7 +100,7 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
       {%- endif -%}
       <gp-product data-uid="${builderProps?.uid}" data-id="${builderProps?.uid}" style="${{
         ...advancedStyle
-    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${preSelectedOptionIds}], "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
+    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
         gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }}}'>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}

package/dist/cjs/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js

@@ -13,7 +13,7 @@ var NextImage_liquid = require('../../../../image/components/NextImage.liquid.js
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const ftAspectRatio = common.getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return common.getDisplayStyle((device)=>![
@@ -153,7 +153,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.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 ${className}`,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const renderNoImage = ()=>{
@@ -171,7 +171,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.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
+            enableLazyloadImage
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -398,11 +398,10 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyLoadImage
+                enableLazyloadImage
             })}
           {%- endif -%}
-        `,
-            ftShapeProductImage: setting?.ftShape
+        `
         })}
     `;
     };

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

@@ -10,7 +10,7 @@ var common = require('../common/common.js');
 var productGallery = require('../common/productGallery.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -90,7 +90,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             customLazyload: true,
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{

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

@@ -12,7 +12,7 @@ var Modal3d_liquid = require('../../../../image/components/Modal3d.liquid.js');
 var Video_liquid = require('../../../../image/components/Video.liquid.js');
 var HTML5Embed_liquid = require('../../../../video/components/HTML5Embed.liquid.js');
 
-const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
     const getGridDisplay = ()=>{
         const isDisplayGrid = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -101,7 +101,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${core.cls('zoom-element !gp-max-w-none', productFeaturedImage.getZoomImageClass())}">
           ${NextImage_liquid.default({
@@ -115,7 +115,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -298,7 +298,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     return core.template`

package/dist/cjs/product/components/ProductImagesV2/liquid/ProductImages.liquid.js

@@ -11,7 +11,7 @@ var helpers = require('../../../../helpers.js');
 var productGallery = require('../common/productGallery.js');
 
 const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
+    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -116,7 +116,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
         ${common.shouldSkipLiquidRenderForSingleImage(settings?.position, core.template`
             <div
@@ -132,7 +132,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel_liquid.default({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
             </div>
             ${ProductGalleryGrid_liquid.default({
@@ -142,7 +142,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
           `)}
       </div>

package/dist/cjs/product/components/ProductVariants/index.liquid.js

@@ -97,9 +97,15 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${core.cls('gp-flex variant-inside', {
-            ...core.getLayoutClasses(layout),
+            'gp-flex-col': layout?.desktop === 'vertical',
+            'gp-flex-row': layout?.desktop === 'horizontal',
+            'tablet:gp-flex-row': layout?.tablet === 'horizontal',
+            'tablet:gp-flex-col': layout?.tablet === 'vertical',
+            'mobile:gp-flex-row': layout?.mobile === 'horizontal',
+            'mobile:gp-flex-col': layout?.mobile === 'vertical'
+        }, {
             ..._function.getAlignClasses(layout, align)
-        })}"
+        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -131,7 +137,15 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${core.cls({
-            ...core.getAlignmentClasses(align)
+            'gp-justify-start': align?.desktop === 'left',
+            'gp-justify-center': align?.desktop === 'center',
+            'gp-justify-end': align?.desktop === 'right',
+            'tablet:gp-justify-start': align?.tablet === 'left',
+            'tablet:gp-justify-center': align?.tablet === 'center',
+            'tablet:gp-justify-end': align?.tablet === 'right',
+            'mobile:gp-justify-start': align?.mobile === 'left',
+            'mobile:gp-justify-center': align?.mobile === 'center',
+            'mobile:gp-justify-end': align?.mobile === 'right'
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...core.makeStyle({
@@ -314,10 +328,6 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     `;
     };
     return core.template`
-  {%- assign total_combinations = 1 -%}
-  {%- for option in product.options_with_values -%}
-    {%- assign total_combinations = total_combinations | times: option.values.size -%}
-  {%- endfor -%}
   <gp-product-variants
     data-id="${uid}"
     class="${advanced?.cssClass}"
@@ -333,10 +343,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "productHandle": {{product.handle | json | escape}},
-      "displayState": ${JSON.stringify(advancedDisplay)},
-      "totalVariantCombinations": {{total_combinations}},
-      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
+      "displayState":${JSON.stringify(advancedDisplay)}
     }
   '>
     {%- assign options = product.options_with_values -%}

package/dist/cjs/product/components/ProductVariants/variants/Base.liquid.js

@@ -156,7 +156,6 @@ const BaseVariant = ({ optionTransform, optionTypography, optionBgColor, optionT
     option-data="{{option.name | escape}}"
     option-value="{{value | escape}}"
     option-position="{{option.position}}"
-    data-gp-option-available="{{value.available}}"
     option-type="${type || 'rectangle_list'}"
     data-disabled="{%- if option_disabled == true -%} disabled  {%- endif -%}"
     data-hidden='true'

package/dist/cjs/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -18,15 +18,6 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = core.composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = core.composeTypographyStyle(optionTypo, optionTypography);
-    const composeSelectOptionAttrs = `
-    option-data="{{option.name | escape}}"
-    option-value="{{value | escape}}" 
-    data-gp-option-value-id="{{value.id}}" 
-    data-gp-option-available="{{value.available}}"
-    value="{{value | escape}}" 
-    class="option-value-wrapper" 
-    key="{{value | escape}}"
-  `;
     return core.template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -82,42 +73,37 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
                         option-position="{{option.position}}"
-                        ${composeSelectOptionAttrs}>
+                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
                           {{value}} 
                       </option>
                     {% else %}
-                        <option 
-                        disabled 
-                        ${composeSelectOptionAttrs}>
+                        <option disabled option-data="{{option.name | escape}}"
+                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'}   
-                      option-position="{{option.position}}" 
-                      ${composeSelectOptionAttrs}>
+                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                       {{value}}
                   </option>
                   {% else %}
-                  <option
-                      ${composeSelectOptionAttrs}
-                      option-position="{{option.position}}">
+                  <option  option-data="{{option.name | escape}}"
+                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} 
-                  ${composeSelectOptionAttrs}
-                  option-position="{{option.position}}">
+              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                   {{value}} 
               </option>
               {% else %}
-              <option
-                  ${composeSelectOptionAttrs}
-                  option-position="{{option.position}}">
+              <option  option-data="{{option.name | escape}}"
+                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                   {{value}} 
               </option>
               {%- endif -%}`}