@gem-sdk/components 2.2.0-staging.38 → 2.3.0

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/builder.js

@@ -124,8 +124,8 @@ var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuid
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
-var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
 var AppstleBundlesDiscounts = require('./third-party/components/AppstleBundlesDiscounts.js');
+var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');

package/dist/cjs/button/components/Button.js

@@ -129,7 +129,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
                 disabled: disabled,
                 children: [
                     loading ? /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                        className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]/button:gp-visible gp-absolute",
+                        className: "gp-invisible gp-h-5 gp-w-5 gp-animate-spin group-data-[state=loading]:gp-visible gp-absolute",
                         xmlns: "http://www.w3.org/2000/svg",
                         fill: "none",
                         viewBox: "0 0 24 24",
@@ -156,7 +156,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
                         children: [
                             !!iconSvg && iconVisible && /*#__PURE__*/ jsxRuntime.jsx("span", {
                                 className: `
-                gp-button-icon  gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
+                gp-button-icon  gp-transition-colors gp-duration-300 gp-z-1 gp-inline-flex gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)] ${shouldClearSpace && !label ? '!gp-m-0' : ''}`,
                                 style: {
                                     ...iconSpacingStyle,
                                     '--height-desktop': `${size?.desktop}`,
@@ -169,7 +169,7 @@ const Button = ({ className, onClick, builderProps, builderAttrs, setting = {},
                             }),
                             (!!label || !shouldClearSpace) && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-gp-text": true,
-                                className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
+                                className: core.cls(`gp-relative group-hover/button:!gp-text-inherit gp-flex gp-h-full gp-items-center gp-overflow-hidden gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line`, styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : '', mode === 'edit' && !options?.isCannotEditing ? 'gp-text button-text' : '', nodePrice ? appendTypoClass : {}),
                                 style: {
                                     ...core.makeStyle({
                                         tt: styles?.transform

package/dist/cjs/button/components/Button.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
@@ -70,7 +70,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
+    const labelValDisplay = helpers.getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -127,7 +127,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
     }}"
     >
       ${!disabledLoading ? `  <svg
-          class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]/button:gp-animate-spin group-data-[state=loading]/button:gp-visible"
+          class="gp-invisible gp-absolute gp-h-5 gp-w-5 group-data-[state=loading]:gp-animate-spin group-data-[state=loading]:gp-visible"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -151,7 +151,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
         'gp-flex-row-reverse': iconAlign === 'right'
     })}">
     ${core.RenderIf(!!iconSvg && iconVisible, core.template`<span
-        class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]/button:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
+        class="${`gp-inline-flex gp-button-icon gp-transition-colors gp-duration-300 gp-shrink-0 gp-items-center gp-justify-center group-data-[state=loading]:gp-invisible gp-z-1 [&>svg]:!gp-h-[var(--height-desktop)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--height-tablet)] mobile:[&>svg]:!gp-h-[var(--height-mobile)]`}"
         style="${{
         ...label ? iconSpacingStyle : {},
         '--height-desktop': `${size?.desktop}`,
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`gp-content-product-button group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]/button:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`group-hover/button:!gp-text-inherit gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,

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/carousel/components/plugins/AutoPlayPlugin.js

@@ -4,15 +4,41 @@ const AutoPlayPlugin = (slider)=>{
     let autoplay = slider.options.autoplay ?? {};
     let timeout;
     let mouseOver = false;
+    let inViewport = false;
+    let observer = null;
+    // Thêm sự kiện cho dot nếu có
+    const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
+    // Callback của IntersectionObserver
+    function handleIntersection(entries) {
+        entries.forEach((entry)=>{
+            // Với threshold 0, chỉ cần một phần bất kỳ hiển thị sẽ đánh dấu isIntersecting
+            inViewport = entry.isIntersecting;
+            if (inViewport) {
+                nextTimeout();
+            } else {
+                clearNextTimeout();
+            }
+        });
+    }
+    function initIntersectionObserver() {
+        // Nếu đã có observer hoặc không có container thì không khởi tạo lại
+        if (observer || !slider.container) return;
+        observer = new IntersectionObserver(handleIntersection, {
+            root: null,
+            threshold: 0
+        });
+        observer.observe(slider.container);
+    }
     function clearNextTimeout() {
         clearTimeout(timeout);
     }
     function nextTimeout() {
-        clearTimeout(timeout);
+        clearNextTimeout();
         timeout = setTimeout(()=>{
-            if (mouseOver || !autoplay.enable) return;
+            // Nếu đang hover, autoplay bị tắt hoặc slider không trong viewport thì không chuyển slide
+            if (mouseOver || !autoplay.enable || !inViewport) return;
             slider.next();
-        }, autoplay?.delay ?? 2000);
+        }, autoplay.delay ?? 2000);
     }
     function onMouseOver() {
         mouseOver = true;
@@ -23,11 +49,15 @@ const AutoPlayPlugin = (slider)=>{
         nextTimeout();
     }
     slider.on('created', ()=>{
-        if (autoplay.pauseOnHover) {
+        $dots?.addEventListener('mouseover', onMouseOver);
+        $dots?.addEventListener('mouseout', onMouseOut);
+        // Nếu tùy chọn pauseOnHover bật thì thêm sự kiện hover cho container slider
+        if (autoplay.pauseOnHover && slider.container) {
             slider.container.addEventListener('mouseover', onMouseOver);
             slider.container.addEventListener('mouseout', onMouseOut);
         }
-        if (slider.options.autoplay?.enable) {
+        if (autoplay.enable) {
+            initIntersectionObserver();
             nextTimeout();
         }
     });
@@ -35,29 +65,40 @@ const AutoPlayPlugin = (slider)=>{
     slider.on('animationEnded', nextTimeout);
     slider.on('updated', (newOptions)=>{
         autoplay = newOptions.options?.autoplay ?? {};
-        nextTimeout();
-    });
-    slider.on('destroyed', ()=>{
-        slider.container.removeEventListener('mouseover', onMouseOver);
-        slider.container.removeEventListener('mouseout', onMouseOut);
+        if (autoplay.enable) {
+            initIntersectionObserver();
+            nextTimeout();
+        }
     });
     slider.on('optionsChanged', (newOptions)=>{
-        const $dots = slider?.container?.closest('[data-component-type="component"]')?.querySelector('.carousel-dots');
-        $dots?.addEventListener('mouseover', onMouseOver);
-        $dots?.addEventListener('mouseout', onMouseOut);
-        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover) {
+        if (newOptions.options.autoplay?.pauseOnHover !== autoplay.pauseOnHover && slider.container) {
             if (newOptions.options.autoplay?.pauseOnHover) {
                 slider.container.addEventListener('mouseover', onMouseOver);
                 slider.container.addEventListener('mouseout', onMouseOut);
-            }
-            if (!newOptions.options.autoplay?.pauseOnHover) {
+            } else {
                 slider.container.removeEventListener('mouseover', onMouseOver);
                 slider.container.removeEventListener('mouseout', onMouseOut);
                 mouseOver = false;
             }
         }
-        nextTimeout();
         autoplay = newOptions.options.autoplay ?? {};
+        if (autoplay.enable) {
+            initIntersectionObserver();
+            nextTimeout();
+        }
+    });
+    slider.on('destroyed', ()=>{
+        if (slider.container) {
+            slider.container.removeEventListener('mouseover', onMouseOver);
+            slider.container.removeEventListener('mouseout', onMouseOut);
+        }
+        $dots?.removeEventListener('mouseover', onMouseOver);
+        $dots?.removeEventListener('mouseout', onMouseOut);
+        clearNextTimeout();
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
     });
 };
 

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/grid/setting/Section.js

@@ -260,21 +260,6 @@ const config = {
                         }
                     }
                 },
-                {
-                    id: 'columnGap',
-                    type: 'range',
-                    min: 0,
-                    max: 100,
-                    step: 1,
-                    units: [
-                        '%'
-                    ],
-                    devices: {
-                        desktop: {
-                            default: '0%'
-                        }
-                    }
-                },
                 {
                     id: 'background',
                     type: 'background',
@@ -311,29 +296,14 @@ const config = {
     ],
     ui: [
         {
-            type: 'group',
+            type: 'control',
             label: {
                 en: 'Layout'
             },
-            controls: [
-                {
-                    type: 'control',
-                    setting: {
-                        id: 'layout'
-                    },
-                    layout: 'vertical'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Column gap'
-                    },
-                    setting: {
-                        id: 'columnGap'
-                    },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType == "POST_PURCHASE"`
-                }
-            ]
+            setting: {
+                id: 'layout'
+            },
+            layout: 'vertical'
         },
         {
             type: 'group',
@@ -370,7 +340,7 @@ const config = {
                     setting: {
                         id: 'verticalGutter'
                     },
-                    condition: `!!layout.cols && layout.cols.length > 1 && pageType != "POST_PURCHASE"`
+                    condition: `!!layout.cols && layout.cols.length > 1`
                 }
             ]
         },
@@ -379,7 +349,7 @@ const config = {
             label: {
                 en: 'Align'
             },
-            condition: `(layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)) && pageType != "POST_PURCHASE"`,
+            condition: `layout.display !== 'fill' || (layout.display === 'fill' && !!layout.cols && layout.cols.length > 1)`,
             controls: [
                 {
                     type: 'control',

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

@@ -12,7 +12,6 @@ var helpers = require('./helpers.js');
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -87,7 +86,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     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/index.js

@@ -220,8 +220,8 @@ var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuid
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
-var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
 var AppstleBundlesDiscounts = require('./third-party/components/AppstleBundlesDiscounts.js');
+var EcomsendBackInStockAlert = require('./third-party/components/EcomsendBackInStockAlert.js');
 var index$x = require('./third-party-instant/setting/index.js');
 var InstantJudgemeReviews = require('./third-party-instant/components/InstantJudgemeReviews.js');
 var InstantLooxReviews = require('./third-party-instant/components/InstantLooxReviews.js');
@@ -538,8 +538,8 @@ exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
 exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc.default;
-exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert.default;
 exports.AppstleBundlesDiscounts = AppstleBundlesDiscounts.default;
+exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -175,8 +175,8 @@ var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartS
 var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
 var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.liquid.js');
 var EcoboostifyShoppableReelUgc_liquid = require('./third-party/components/EcoboostifyShoppableReelUgc.liquid.js');
-var EcomsendBackInStockAlert_liquid = require('./third-party/components/EcomsendBackInStockAlert.liquid.js');
 var AppstleBundlesDiscounts_liquid = require('./third-party/components/AppstleBundlesDiscounts.liquid.js');
+var EcomsendBackInStockAlert_liquid = require('./third-party/components/EcomsendBackInStockAlert.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
 var Sticky_liquid = require('./sticky/components/Sticky.liquid.js');
@@ -374,8 +374,8 @@ exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
 exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc_liquid.default;
-exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert_liquid.default;
 exports.AppstleBundlesDiscounts = AppstleBundlesDiscounts_liquid.default;
+exports.EcomsendBackInStockAlert = EcomsendBackInStockAlert_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

package/dist/cjs/marquee/components/Marquee.liquid.js

@@ -73,7 +73,7 @@ const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...prop
         const itemMaxWidthValue = core.getResponsiveValueByScreen(styles?.itemMaxWidth, currentDevice);
         return itemMaxWidthValue?.includes('%');
     };
-    const itemMaxWidthValueByScreen = (device)=>{
+    const getItemMaxWidthValueByScreen = (device)=>{
         let value = core.getResponsiveValueByScreen(styles?.itemMaxWidth, device);
         const itemWidthTypeValue = core.getResponsiveValueByScreen(itemWidthType, device);
         if (itemWidthTypeValue === 'FIT_CONTENT') {
@@ -84,22 +84,25 @@ const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...prop
         }
         return value;
     };
+    const getMaxWidth = (device)=>{
+        return getItemMaxWidthValueByScreen(device) === 'auto' ? 'unset' : getItemMaxWidthValueByScreen(device);
+    };
     const getWidthForWrapperItem = ()=>{
         return {
             ...core.makeStyleResponsive('w', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getItemMaxWidthValueByScreen('desktop'),
+                tablet: getItemMaxWidthValueByScreen('tablet'),
+                mobile: getItemMaxWidthValueByScreen('mobile')
             }),
             ...core.makeStyleResponsive('minw', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getItemMaxWidthValueByScreen('desktop'),
+                tablet: getItemMaxWidthValueByScreen('tablet'),
+                mobile: getItemMaxWidthValueByScreen('mobile')
             }),
             ...core.makeStyleResponsive('maxw', {
-                desktop: itemMaxWidthValueByScreen('desktop'),
-                tablet: itemMaxWidthValueByScreen('tablet'),
-                mobile: itemMaxWidthValueByScreen('mobile')
+                desktop: getMaxWidth('desktop'),
+                tablet: getMaxWidth('tablet'),
+                mobile: getMaxWidth('mobile')
             })
         };
     };

package/dist/cjs/post-purchase/product/components/variants/Dropdown.js

@@ -69,7 +69,7 @@ const DropdownVariant = ({ option, optionPosition, optionNumber, variantGroup, v
                     children: /*#__PURE__*/ jsxRuntime.jsx("span", {
                         className: "gp-max-w-full",
                         children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            className: "gp-block gp-overflow-hidden gp-truncate",
+                            className: "gp-block gp-overflow-hidden",
                             children: label
                         })
                     })

package/dist/cjs/product/components/ProductButton.js

@@ -218,7 +218,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     ]);
     const isInStock = core.useCurrentVariantInStock();
     const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
+    const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
     if (!isInStock && isCustomOutOfStock) {
         buttonStyles.backgroundColor = {
             normal: oosBackground