@gem-sdk/components 2.1.13-staging.0 → 2.1.13-staging.10

package/dist/cjs/article/components/ArticleList.liquid.js

@@ -56,8 +56,12 @@ const ArticleList = ({ setting, styles, className, children, advanced, builderPr
                 assign all_articles = all_articles | concat: articleByHandle
               endfor
             else
-              assign all_articles = blogs['${blogHandle}'].articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
-              assign blogTitle = blogs['${blogHandle}'].title
+              assign current_blog_handle = blogs['${blogHandle}']
+              if gp_enable_custom_dynamic_blog == true
+                assign current_blog_handle = blogs[blog.handle]
+              endif
+              assign all_articles = current_blog_handle.articles | limit: limit | sort: "${articleOrderBy.replace('_REVERSE', '').toLowerCase()}" ${articleOrderBy.includes('_REVERSE') ? '| reverse' : ''}
+              assign blogTitle = current_blog_handle.title
             endif
             
         %} 

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;
@@ -134,6 +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 renderInnerHeroBanner = ()=>{
         return core.template /* liquid */ `
       <div
@@ -183,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
@@ -197,9 +198,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': index.getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${core.cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...core.getStyleBackgroundByDevice(background, {
@@ -208,15 +210,16 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...core.makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getSrcSet.getImageSrc(core.getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
             ...core.makeStyleResponsive('pos', getAttachmentDevice()),
             ...index.getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
+              ${embed()}
             >
             ${!setting?.preload ? getSrcSet.DEVICES.map((device)=>{
             return core.RenderIf(getEnableBgImageByDevice(device), NextImage_liquid.default({
@@ -224,11 +227,10 @@ 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>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${core.RenderIf(overlayEnable, core.template`<div
               aria-label="Overlay"

package/dist/cjs/builder.js

@@ -111,8 +111,18 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./third-party/components/StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./third-party/components/EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./third-party/components/EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./third-party/components/OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./third-party/components/EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./third-party/components/TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -247,6 +257,11 @@ var PostPurchaseCountdownTimer = require('./post-purchase/countdown-timer/compon
 var Text$1 = require('./post-purchase/text/Text.js');
 
 var builder = {
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -483,7 +498,12 @@ var builder = {
     MarqueeItem: MarqueeItem.default,
     ProductBadge: index$8.default,
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.default
 };
 
 exports.default = builder;

package/dist/cjs/common/const.js

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

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, ...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 = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
@@ -31,16 +31,17 @@ 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_lazyload: enableLazyLoadImage,
+        gp_force_load: pageContext?.isOptimizePlan
     })}"
-        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
+        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

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

@@ -8,10 +8,13 @@ var Link = require('../../link/components/Link.js');
 var AdaptiveImage = require('./AdaptiveImage.js');
 var NextImage = require('./NextImage.js');
 var helpers = require('./helpers.js');
+var NoDataImage = require('./NoDataImage.js');
+var React = require('react');
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
+    const currentDevice = core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -56,6 +59,18 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
+    const isShowNoDataState = React.useMemo(()=>{
+        if (setting?.disableNoDataState) return false;
+        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
+        return !setting?.srcSet?.desktop?.src;
+    }, [
+        currentDevice,
+        setting?.disableNoDataState,
+        setting?.srcSet?.desktop?.src,
+        setting?.srcSet?.mobile?.src,
+        setting?.srcSet?.tablet?.src
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -80,14 +95,18 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                 style: {
                     ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
                     borderRadius: 'inherit',
-                    overflow: 'hidden',
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
+                    isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {
+                        style: {
+                            ...imageWidth,
+                            ...imageHeight
+                        }
+                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),
+                        className: core.cls(className, 'gp-inline-block 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 })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
     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)}"
+    class="${core.cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
     style="${{
         ...style,
         ...core.makeStyleResponsive('ta', styles?.align)
@@ -50,7 +50,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         style="${{
         ...core.getStyleShadowState(styles?.boxShadowImg, 'box-shadow', styles?.hasBoxShadowImg),
         'border-radius': 'inherit',
-        overflow: 'hidden',
         ...core.makeStyleResponsive('jc', styles?.align)
     }}"
       >
@@ -77,7 +76,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: core.getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyloadImage
+        enableLazyLoadImage,
+        pageContext
     }) : NextImage_liquid.default({
         ...setting?.image,
         priority: setting?.priority,
@@ -106,7 +106,8 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyloadImage
+        enableLazyLoadImage,
+        pageContext
     })}
       </${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, 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 ? getSrcSet.getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getSrcSet.getImageSrc({
@@ -97,12 +97,13 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${core.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/cjs/image/components/NoDataImage.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var AdaptiveImage = require('./AdaptiveImage.js');
+
+const NoDataImage = ({ style })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "gp-w-full gp-h-full gp-bg-[#F9F9F9] gp-flex gp-items-center gp-justify-center",
+        children: [
+            AdaptiveImage.default({
+                pictureClass: 'gp-w-full',
+                srcSet: {
+                    desktop: {
+                        src: 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif'
+                    }
+                },
+                style: {
+                    ...style,
+                    '--op': 0,
+                    '--z': -1
+                }
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-absolute gp-flex gp-justify-center gp-items-center",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                    width: "40",
+                    height: "40",
+                    viewBox: "0 0 40 40",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("g", {
+                            clipPath: "url(#clip0_942_39561)",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    width: "40",
+                                    height: "40",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    x: "4",
+                                    width: "32",
+                                    height: "40",
+                                    rx: "2",
+                                    fill: "#E2E2E2"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    y: "26",
+                                    width: "40",
+                                    height: "14",
+                                    fill: "url(#paint0_linear_942_39561)"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    x: "8",
+                                    y: "4",
+                                    width: "24",
+                                    height: "24",
+                                    rx: "1",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("circle", {
+                                    cx: "15.2809",
+                                    cy: "11.3688",
+                                    r: "1.36884",
+                                    fill: "#D2D2D2"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                    d: "M13.1916 17.7343L15.3456 15.0797C15.4185 14.9896 15.5086 14.9168 15.6101 14.8659C15.7115 14.815 15.822 14.7872 15.9343 14.7844C16.0466 14.7815 16.1583 14.8036 16.2619 14.8492C16.3656 14.8949 16.459 14.963 16.536 15.0492L17.5432 16.1758L21.4803 11.2146C21.5573 11.1174 21.6542 11.0397 21.7637 10.9874C21.8732 10.9351 21.9925 10.9094 22.1127 10.9123C22.2329 10.9153 22.3509 10.9467 22.458 11.0043C22.5651 11.0619 22.6585 11.1442 22.7312 11.245L27.4383 17.7671C27.5283 17.8921 27.5834 18.0411 27.5974 18.1973C27.6114 18.3535 27.5838 18.5108 27.5176 18.6513C27.4514 18.7919 27.3493 18.9102 27.2228 18.993C27.0963 19.0758 26.9503 19.1198 26.8014 19.12L13.8002 19.1251C13.6473 19.1251 13.4975 19.0789 13.3688 18.992C13.24 18.9051 13.1375 18.7812 13.0735 18.6348C13.0095 18.4885 12.9866 18.326 13.0075 18.1664C13.0285 18.0068 13.0923 17.8569 13.1916 17.7343Z",
+                                    fill: "#D2D2D2"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    x: "24.3333",
+                                    y: "24.3333",
+                                    width: "15.3333",
+                                    height: "15.3333",
+                                    rx: "7.66667",
+                                    fill: "white"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                    x: "24.3333",
+                                    y: "24.3333",
+                                    width: "15.3333",
+                                    height: "15.3333",
+                                    rx: "7.66667",
+                                    stroke: "#C4C4C4",
+                                    strokeWidth: "0.666667"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                    d: "M33.813 34.5199C34.0083 34.7152 34.3249 34.7152 34.5201 34.5199C34.7154 34.3246 34.7154 34.0081 34.5201 33.8128L32.707 31.9997L34.5201 30.1866C34.7154 29.9913 34.7154 29.6747 34.5201 29.4795C34.3249 29.2842 34.0083 29.2842 33.813 29.4795L31.9999 31.2926L30.1868 29.4795C29.9915 29.2842 29.675 29.2842 29.4797 29.4795C29.2844 29.6747 29.2844 29.9913 29.4797 30.1866L31.2928 31.9997L29.4797 33.8128C29.2844 34.0081 29.2844 34.3246 29.4797 34.5199C29.675 34.7152 29.9915 34.7152 30.1868 34.5199L31.9999 32.7068L33.813 34.5199Z",
+                                    fill: "#676767"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("defs", {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("linearGradient", {
+                                    id: "paint0_linear_942_39561",
+                                    x1: "20",
+                                    y1: "26",
+                                    x2: "20",
+                                    y2: "40",
+                                    gradientUnits: "userSpaceOnUse",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("stop", {
+                                            stopColor: "#F9F9F9",
+                                            stopOpacity: "0"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("stop", {
+                                            offset: "1",
+                                            stopColor: "#F9F9F9"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("clipPath", {
+                                    id: "clip0_942_39561",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("rect", {
+                                        width: "40",
+                                        height: "40",
+                                        fill: "white"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+exports.default = NoDataImage;

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, 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);
@@ -271,7 +271,9 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...core.makeStyleResponsive('objf', styles?.imageScale)
-        }
+        },
+        enableLazyLoadImage,
+        pageContext
     })}
       ${NextImage_liquid.default({
         customAttrs: {
@@ -287,7 +289,9 @@ 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

@@ -207,8 +207,18 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./third-party/components/StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./third-party/components/EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./third-party/components/EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./third-party/components/OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./third-party/components/EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./third-party/components/TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.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');
@@ -511,8 +521,18 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews.default;
 exports.HulkProductOptions = HulkProductOptions.default;
 exports.TrustshopProductReviews = TrustshopProductReviews.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus.default;
 exports.HextomCountdownTimerBar = HextomCountdownTimerBar.default;
 exports.TrustBadgesBear = TrustBadgesBear.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -161,9 +161,19 @@ var SeoantTrustBadgesIcon_liquid = require('./third-party/components/SeoantTrust
 var TrustreviewsProductReviews_liquid = require('./third-party/components/TrustreviewsProductReviews.liquid.js');
 var MyappgurusProductReviews_liquid = require('./third-party/components/MyappgurusProductReviews.liquid.js');
 var HulkProductOptions_liquid = require('./third-party/components/HulkProductOptions.liquid.js');
+var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
+var StellarDeliveryDatePickup_liquid = require('./third-party/components/StellarDeliveryDatePickup.liquid.js');
+var EssentialCountdownTimerBar_liquid = require('./third-party/components/EssentialCountdownTimerBar.liquid.js');
+var EssentialAnnouncementBar_liquid = require('./third-party/components/EssentialAnnouncementBar.liquid.js');
+var OkendoReviewsLoyalty_liquid = require('./third-party/components/OkendoReviewsLoyalty.liquid.js');
+var EstimatedDeliveryDatePlus_liquid = require('./third-party/components/EstimatedDeliveryDatePlus.liquid.js');
 var HextomCountdownTimerBar_liquid = require('./third-party/components/HextomCountdownTimerBar.liquid.js');
 var TrustBadgesBear_liquid = require('./third-party/components/TrustBadgesBear.liquid.js');
-var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
+var TrustedsiteTrustBadges_liquid = require('./third-party/components/TrustedsiteTrustBadges.liquid.js');
+var GloColorSwatchvariantImage_liquid = require('./third-party/components/GloColorSwatchvariantImage.liquid.js');
+var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartSizeGuide.liquid.js');
+var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
+var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.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');
@@ -347,9 +357,19 @@ exports.SeoantTrustBadgesIcon = SeoantTrustBadgesIcon_liquid.default;
 exports.TrustreviewsProductReviews = TrustreviewsProductReviews_liquid.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews_liquid.default;
 exports.HulkProductOptions = HulkProductOptions_liquid.default;
+exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup_liquid.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar_liquid.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar_liquid.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty_liquid.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus_liquid.default;
 exports.HextomCountdownTimerBar = HextomCountdownTimerBar_liquid.default;
 exports.TrustBadgesBear = TrustBadgesBear_liquid.default;
-exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges_liquid.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage_liquid.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

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

@@ -5,26 +5,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var Text = require('../../text/Text.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductDiscountTag = ({ setting = {}, styles = {}, style, builderAttrs, builderProps, children })=>{
     const currentProduct = core.useProduct();
     const currentProductId = currentProduct?.baseID?.replace('gid://shopify/Product/', '');
     const currentOfferDiscount = core.useProductOfferDiscount();
+    const { isDynamicProduct, isEnableDynamicDiscount } = useDynamicProduct.useDynamicProduct();
     const { typo } = styles;
     const { message } = setting;
+    const hasDiscount = !!currentOfferDiscount || isDynamicProduct && isEnableDynamicDiscount;
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         className: core.cls(builderProps?.uid, 'gp-flex gp-w-full'),
         style: {
             ...style,
-            opacity: currentOfferDiscount ? 1 : 0.2
+            opacity: hasDiscount ? 1 : 0.2
         },
         id: `shopify-text-element-${builderProps?.uid}`,
         "data-product-id": currentProductId,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
                 setting: {
-                    text: currentOfferDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
+                    text: hasDiscount ? message : message?.replace(new RegExp(/\{\{Discount\}\}/, 'gi'), '0%')
                 },
                 styles: {
                     typo

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

@@ -11,14 +11,20 @@ var Loading = require('../../../common/components/Loading.js');
 var ProductVariant = require('./ProductVariant.js');
 var helper = require('../../utils/helper.js');
 var index = require('../helpers/index.js');
+var ProductOfferPlaceholder = require('../constants/ProductOfferPlaceholder.js');
+var useDynamicProduct = require('../hooks/useDynamicProduct.js');
 
 const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children, setting })=>{
     const mode = core.useEditorMode();
-    const { productSetting, productOfferLayout, inlineAlignment, ...rowSetting } = setting || {};
+    const { productSetting, productOfferLayout, inlineAlignment, discountAndShippingFee, ...rowSetting } = setting || {};
     const { productOfferColumnGap, productOfferVerticalGutter, productOfferWidth, ...rowStyles } = styles || {};
     const productOffers = core.usePageStore((s)=>s.productOffers);
     const publicStoreFrontData = core.usePageStore((s)=>s.publicStoreFrontData);
-    const totalProduct = React.useMemo(()=>productOffers?.length, [
+    const { isDynamicProduct } = useDynamicProduct.useDynamicProduct();
+    const dynamicDiscountOffer = core.usePageStore((s)=>s.dynamicDiscountOffer);
+    const totalProduct = React.useMemo(()=>isDynamicProduct ? dynamicDiscountOffer?.appliedProductCount : productOffers?.length, [
+        dynamicDiscountOffer?.appliedProductCount,
+        isDynamicProduct,
         productOffers?.length
     ]);
     const sortedProductBaseIDs = React.useMemo(()=>{
@@ -44,7 +50,14 @@ const PostPurchaseProductOffer = ({ styles, builderAttrs, builderProps, children
     const products = React.useMemo(()=>core.flattenConnection(productData.data?.products), [
         productData.data?.products
     ]);
-    const productSortedById = sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    const productSortedById = React.useMemo(()=>{
+        return isDynamicProduct && dynamicDiscountOffer?.appliedProductCount ? Array(dynamicDiscountOffer.appliedProductCount).fill(ProductOfferPlaceholder.productOfferPlaceholder) : sortedProductBaseIDs?.map((id)=>products?.find((el)=>el?.baseID === id)).filter(Boolean);
+    }, [
+        isDynamicProduct,
+        dynamicDiscountOffer?.appliedProductCount,
+        sortedProductBaseIDs,
+        products
+    ]);
     const getStyles = ()=>{
         return {
             ...core.makeStyleResponsive('cg', productOfferColumnGap),