@gem-sdk/components 2.1.13-staging.3 → 2.1.13-staging.6

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

@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.js';
 import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../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;
@@ -179,7 +179,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -204,9 +204,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyLoadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
@@ -220,7 +220,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>  

package/dist/esm/builder.js

@@ -107,8 +107,18 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
+import StellarDeliveryDatePickup from './third-party/components/StellarDeliveryDatePickup.js';
+import EssentialCountdownTimerBar from './third-party/components/EssentialCountdownTimerBar.js';
+import EssentialAnnouncementBar from './third-party/components/EssentialAnnouncementBar.js';
+import OkendoReviewsLoyalty from './third-party/components/OkendoReviewsLoyalty.js';
+import EstimatedDeliveryDatePlus from './third-party/components/EstimatedDeliveryDatePlus.js';
 import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
 import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
+import TrustedsiteTrustBadges from './third-party/components/TrustedsiteTrustBadges.js';
+import GloColorSwatchvariantImage from './third-party/components/GloColorSwatchvariantImage.js';
+import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.js';
+import AlsoBoughtCbb from './third-party/components/AlsoBoughtCbb.js';
+import HextomFreeShippingBar from './third-party/components/HextomFreeShippingBar.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -243,6 +253,11 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    EstimatedDeliveryDatePlus,
+    OkendoReviewsLoyalty,
+    EssentialAnnouncementBar,
+    EssentialCountdownTimerBar,
+    StellarDeliveryDatePickup,
     TrustshopProductReviews,
     HulkProductOptions,
     TrustreviewsProductReviews,
@@ -479,7 +494,12 @@ var builder = {
     MarqueeItem,
     ProductBadge,
     HextomCountdownTimerBar,
-    TrustBadgesBear
+    TrustBadgesBear,
+    TrustedsiteTrustBadges,
+    GloColorSwatchvariantImage,
+    BfSizeChartSizeGuide,
+    AlsoBoughtCbb,
+    HextomFreeShippingBar
 };
 
 export { builder as default };

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.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)
@@ -73,7 +73,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,
@@ -102,7 +103,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: !isNotLazyload && 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/index.js

@@ -205,8 +205,18 @@ export { default as TrustreviewsProductReviews } from './third-party/components/
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.js';
 export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.js';
 export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.js';
 export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.js';
+export { default as AlsoBoughtCbb } from './third-party/components/AlsoBoughtCbb.js';
+export { default as HextomFreeShippingBar } from './third-party/components/HextomFreeShippingBar.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

@@ -159,9 +159,19 @@ export { default as SeoantTrustBadgesIcon } from './third-party/components/Seoan
 export { default as TrustreviewsProductReviews } from './third-party/components/TrustreviewsProductReviews.liquid.js';
 export { default as MyappgurusProductReviews } from './third-party/components/MyappgurusProductReviews.liquid.js';
 export { default as HulkProductOptions } from './third-party/components/HulkProductOptions.liquid.js';
+export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as StellarDeliveryDatePickup } from './third-party/components/StellarDeliveryDatePickup.liquid.js';
+export { default as EssentialCountdownTimerBar } from './third-party/components/EssentialCountdownTimerBar.liquid.js';
+export { default as EssentialAnnouncementBar } from './third-party/components/EssentialAnnouncementBar.liquid.js';
+export { default as OkendoReviewsLoyalty } from './third-party/components/OkendoReviewsLoyalty.liquid.js';
+export { default as EstimatedDeliveryDatePlus } from './third-party/components/EstimatedDeliveryDatePlus.liquid.js';
 export { default as HextomCountdownTimerBar } from './third-party/components/HextomCountdownTimerBar.liquid.js';
 export { default as TrustBadgesBear } from './third-party/components/TrustBadgesBear.liquid.js';
-export { default as TrustshopProductReviews } from './third-party/components/TrustshopProductReviews.liquid.js';
+export { default as TrustedsiteTrustBadges } from './third-party/components/TrustedsiteTrustBadges.liquid.js';
+export { default as GloColorSwatchvariantImage } from './third-party/components/GloColorSwatchvariantImage.liquid.js';
+export { default as BfSizeChartSizeGuide } from './third-party/components/BfSizeChartSizeGuide.liquid.js';
+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 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/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,7 +394,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             })}
           {%- endif -%}
         `

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/third-party/components/AlsoBoughtCbb.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/AlsoBoughtCbb.js';
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+export { AlsoBoughtCbb as default };

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

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

package/dist/esm/third-party/components/BfSizeChartSizeGuide.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/BfSizeChartSizeGuide.js';
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+export { BfSizeChartSizeGuide as default };

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

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

package/dist/esm/third-party/components/EssentialAnnouncementBar.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/EssentialAnnouncementBar.js';
+
+const EssentialAnnouncementBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Announcement Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialAnnouncementBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialAnnouncementBarContent, {})
+    });
+};
+
+export { EssentialAnnouncementBar as default };

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

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

package/dist/esm/third-party/components/EssentialCountdownTimerBar.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/EssentialCountdownTimerBar.js';
+
+const EssentialCountdownTimerBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Countdown Timer Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialCountdownTimerBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialCountdownTimerBarContent, {})
+    });
+};
+
+export { EssentialCountdownTimerBar as default };

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

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

package/dist/esm/third-party/components/EstimatedDeliveryDatePlus.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/EstimatedDeliveryDatePlus.js';
+
+const EstimatedDeliveryDatePlusContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Estimated Delivery Date ‑ Plus',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EstimatedDeliveryDatePlus = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EstimatedDeliveryDatePlusContent, {})
+    });
+};
+
+export { EstimatedDeliveryDatePlus as default };

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

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

package/dist/esm/third-party/components/GloColorSwatchvariantImage.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/GloColorSwatchvariantImage.js';
+
+const GloColorSwatchvariantImageContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'GLO Color Swatch,Variant Image',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const GloColorSwatchvariantImage = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(GloColorSwatchvariantImageContent, {})
+    });
+};
+
+export { GloColorSwatchvariantImage as default };

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

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

package/dist/esm/third-party/components/HextomFreeShippingBar.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/HextomFreeShippingBar.js';
+
+const HextomFreeShippingBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Hextom: Free Shipping Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const HextomFreeShippingBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(HextomFreeShippingBarContent, {})
+    });
+};
+
+export { HextomFreeShippingBar as default };

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

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