@gem-sdk/components 2.1.43 → 2.2.0-staging.29

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

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

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -8,6 +8,7 @@ import { composeAspectRatio } from './helpers.js';
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -82,7 +83,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

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

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

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

@@ -3,7 +3,7 @@ import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSe
 import { DEVICES } from '../../product/components/ProductVariants/index.js';
 import { createBlurDataURL } from './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, 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, pageContext, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,12 +93,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyloadImage
+        gp_lazyload: !customLazyload && enableLazyLoadImage,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyloadImage ? imagePlaceholder : srcImage,
+        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,

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

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 import { styleLazyPlaceholder } from './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, 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, enableLazyLoadImage, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -267,7 +267,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       ${NextImage({
         customAttrs: {
@@ -283,7 +285,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/esm/index.js

@@ -218,6 +218,8 @@ export { default as BfSizeChartSizeGuide } from './third-party/components/BfSize
 export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
 export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.js';
 export { default as EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.js';
+export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.js';
+export { default as AppstleBundlesDiscounts } from './third-party/components/AppstleBundlesDiscounts.js';
 export { default as thirdPartyInstantSetting } from './third-party-instant/setting/index.js';
 export { default as InstantJudgemeReviews } from './third-party-instant/components/InstantJudgemeReviews.js';
 export { default as InstantLooxReviews } from './third-party-instant/components/InstantLooxReviews.js';

package/dist/esm/index.liquid.js

@@ -173,6 +173,8 @@ export { default as BfSizeChartSizeGuide } from './third-party/components/BfSize
 export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.liquid.js';
 export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.liquid.js';
 export { default as EcoboostifyShoppableReelUgc } from './third-party/components/EcoboostifyShoppableReelUgc.liquid.js';
+export { default as EcomsendBackInStockAlert } from './third-party/components/EcomsendBackInStockAlert.liquid.js';
+export { default as AppstleBundlesDiscounts } from './third-party/components/AppstleBundlesDiscounts.liquid.js';
 export { default as ImageComparison } from './image-comparison/components/ImageComparison.liquid.js';
 export { default as ThirdPartySlot } from './third-party-slot/components/ThirdPartySlot.liquid.js';
 export { default as Sticky } from './sticky/components/Sticky.liquid.js';

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

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

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

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

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

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

package/dist/esm/product/components/ProductButton.liquid.js

@@ -184,6 +184,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -191,6 +207,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
+      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -268,8 +286,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -288,7 +305,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isForceValue: true
     })}
     </gp-product-button>
     ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

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

@@ -9,7 +9,7 @@ import NextImage from '../../../../image/components/NextImage.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
     const ftAspectRatio = getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return getDisplayStyle((device)=>![
@@ -149,7 +149,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 = ()=>{
@@ -167,7 +167,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)=>{
@@ -394,10 +394,11 @@ 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/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js

@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
 import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -86,7 +86,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/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js

@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import HTML5Embed from '../../../../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 = getResponsiveValueByScreen(position, device);
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
           ${NextImage({
@@ -111,7 +111,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' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}`;
     };
     return template`

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

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
 import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../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
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
         ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
             <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
             </div>
             ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyloadImage
+        enableLazyLoadImage
     })}
           `)}
       </div>

package/dist/esm/product/components/ProductVariants/variants/combine/index.js

@@ -38,7 +38,7 @@ const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
   `}`;
 };
 const renderBlankOption = (hasPreSelected, blankText)=>{
-    return !hasPreSelected ? `<option value="blank" selected>${blankText ?? getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+    return !hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
 };
 
 export { renderBlankOption, renderCombineVariants };

package/dist/esm/product/setting/ProductList.js

@@ -814,7 +814,7 @@ const config = {
                     options: {
                         tooltip: {
                             icon: 'info-line-16',
-                            content: 'Note: this might not work properly on Safari for iOS versions below 17',
+                            content: 'Note: this might not work properly on Safari for iOS versions below 16',
                             iconClass: 'text-[#757575] hover:text-[#F9F9F9]'
                         }
                     },

package/dist/esm/tab/hooks/useTabInteraction.js

@@ -1,20 +1,19 @@
 import { useInteraction, useEditorMode } from '@gem-sdk/core';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
     const mode = useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback } = params || {};
-        if (data === undefined && isRollback === undefined) return;
+        const { data, isRollback, element, key } = params || {};
+        if (data === undefined && isRollback) return;
+        const newData = Number(data) + 1;
         if (isRollback) {
-            setActiveKey(previousTab);
-            setPreviousTab(activeTab);
+            setActiveKey(newData);
             return;
         }
-        setPreviousTab(activeTab);
-        setActiveKey(data + 1);
+        saveToElementInteractionData(element, key, String(activeKey));
+        setActiveKey(newData);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -35,11 +34,16 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
             dispatchEventTabActive(activeTab - 1);
         });
         const selector = `[data-id="${componentUid}"]`;
+        const element = findElementIncludingSelf(document, selector);
         const removeListener = onListener({
             event: 'gp:change-open-tab',
             selector
         }, (params)=>{
-            changeOpenTabInteraction(params);
+            changeOpenTabInteraction({
+                ...params,
+                element,
+                key: params?.uniqueStorageKey
+            });
         });
         return ()=>{
             removeListener?.();

package/dist/esm/text/components/Text.js

@@ -6,7 +6,6 @@ import { getDisplayText } from './common.js';
 const Text = /*#__PURE__*/ forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
     const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
     const composeGlobalSize = makeGlobalSize(setting?.globalSize);
-    console.log('Text: ', text);
     const mode = useEditorMode();
     const getPlaceHolderWhenContentNone = ()=>{
         let classList = '';

package/dist/esm/third-party/components/AppstleBundlesDiscounts.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/AppstleBundlesDiscounts.js';
+
+const AppstleBundlesDiscountsContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Appstle℠ Bundles & Discounts',
+                    iconSvg: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AppstleBundlesDiscounts = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(AppstleBundlesDiscountsContent, {})
+    });
+};
+
+export { AppstleBundlesDiscounts as default };

package/dist/esm/third-party/components/AppstleBundlesDiscounts.liquid.js

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const AppstleBundlesDiscounts = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
+};
+
+export { AppstleBundlesDiscounts as default };

package/dist/esm/third-party/components/Bogos/BogosSampleContent.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import BogosConfig from '../../configs/Bogos.js';
 import ThirdPartyPreview from '../ThirdPartyPreview.js';
@@ -9,7 +9,8 @@ const mapWidgetLabel = {
     slider: 'Gift slider',
     message: 'Cart message',
     ['classic-bundle']: 'Classic bundle',
-    ['quantity-break']: 'Quantity break'
+    ['quantity-break']: 'Quantity break',
+    ['mix-match']: 'Mix and match'
 };
 const BogosSampleContent = ({ setting })=>{
     const widgetLabel = setting?.widgetType && mapWidgetLabel[setting.widgetType];
@@ -18,15 +19,13 @@ const BogosSampleContent = ({ setting })=>{
     }, [
         widgetLabel
     ]);
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsx("div", {
-            className: "p-2",
-            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
-                setting: {
-                    label,
-                    iconSvg: `<img class="gp-w-[24px] border border-[#494949] rounded-[3px]" src="${BogosConfig.logoUrl}">`
-                }
-            })
+    return /*#__PURE__*/ jsx("div", {
+        className: "p-2",
+        children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+            setting: {
+                label,
+                iconSvg: `<img class="gp-w-[24px] border border-[#494949] rounded-[3px]" src="${BogosConfig.logoUrl}">`
+            }
         })
     });
 };

package/dist/esm/third-party/components/EcomsendBackInStockAlert.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EcomsendBackInStockAlert.js';
+
+const EcomsendBackInStockAlertContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'EcomSend Back in Stock Alert',
+                    iconSvg: `<img class="gp-w-[24px] gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EcomsendBackInStockAlert = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EcomsendBackInStockAlertContent, {})
+    });
+};
+
+export { EcomsendBackInStockAlert as default };

package/dist/esm/third-party/components/EcomsendBackInStockAlert.liquid.js

@@ -0,0 +1,17 @@
+import { template, makeStyleResponsive } from '@gem-sdk/core';
+
+const EcomsendBackInStockAlert = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return template`
+  <div
+    class="${advanced?.cssClass}"
+    style="${{
+        ...makeStyleResponsive('ta', align)
+    }}"
+  >
+    <div id="sealapps-bis-widget"></div>
+  </div>
+`;
+};
+
+export { EcomsendBackInStockAlert as default };

package/dist/esm/third-party/components/RechargeSubscriptions.liquid.js

@@ -2,7 +2,7 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`);
+    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
 };
 
 export { RechargeSubscriptions as default };