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

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

@@ -188,22 +188,6 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
-    const labelUnavailableTranslate = helpers.getDynamicSourceLocales({
-        val: 'Unavailable',
-        uid: builderProps?.uid,
-        settingId: 'unavailableLabel',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate ? 'unavailableLabel' : undefined
-    });
-    const labelOutOfStockTranslate = helpers.getDynamicSourceLocales({
-        val: setting?.outOfStockLabel,
-        uid: builderProps?.uid,
-        settingId: 'outOfStockLabel',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate ? 'outOfStockLabel' : undefined
-    });
     return core.template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -211,8 +195,6 @@ 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,
@@ -290,7 +272,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
+            label: setting?.outOfStockLabel,
+            translate: setting?.translate ? 'outOfStockLabel' : undefined,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -309,8 +292,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice(),
-        isForceValue: true
+        nodePrice: composeNodePrice()
     })}
     </gp-product-button>
     ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

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

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

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

@@ -10,7 +10,7 @@ var common = require('../common/common.js');
 var productGallery = require('../common/productGallery.js');
 var _function = require('../../../helpers/function.js');
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = core.getResponsiveValueByScreen(position, device);
@@ -90,7 +90,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             customLazyload: true,
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{
@@ -106,7 +106,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             'tablet'
         ];
         DEVICES.forEach((device)=>{
-            const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('/').reverse().join('/') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
+            const value = aspectRatio?.[device] !== 'auto' && !!aspectRatio?.[device] ? aspectRatio?.[device]?.split('').reverse().join('') : '{%if media.height%} {{media.height}} / {{media.width}} {%else%} 100 / 100 {%endif%}';
             result = {
                 ...result,
                 [device]: `calc((${value})*100%)`

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

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

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

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

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

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

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

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

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

@@ -4,18 +4,19 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
+    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
+    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
     const mode = core.useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback, element, key } = params || {};
-        if (data === undefined && isRollback) return;
-        const newData = Number(data) + 1;
+        const { data, isRollback } = params || {};
+        if (data === undefined && isRollback === undefined) return;
         if (isRollback) {
-            setActiveKey(newData);
+            setActiveKey(previousTab);
+            setPreviousTab(activeTab);
             return;
         }
-        saveToElementInteractionData(element, key, String(activeKey));
-        setActiveKey(newData);
+        setPreviousTab(activeTab);
+        setActiveKey(data + 1);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -36,16 +37,11 @@ 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,
-                element,
-                key: params?.uniqueStorageKey
-            });
+            changeOpenTabInteraction(params);
         });
         return ()=>{
             removeListener?.();

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

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

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

@@ -6,7 +6,7 @@ var thirdParty = require('../helpers/thirdParty.js');
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`);
 };
 
 exports.default = RechargeSubscriptions;

package/dist/cjs/third-party/components/Releasit.liquid.js

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var thirdParty = require('../helpers/thirdParty.js');
 var core = require('@gem-sdk/core');
 
 const Releasit = ({ setting, advanced })=>{
-    const { align, version, appBlockId } = setting ?? {};
-    console.log('version', version);
-    return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : core.template`
+    const { align } = setting ?? {};
+    return core.template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/cjs/third-party/configs/BoldProductOptions.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var BoldProductOptionsConfig = {
     id: 'bold-product-options',
-    label: 'SC Product Options',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9a0bf1159f79c6ab0660ec422f350445/icon/CP2Uwo_GuYIDEAE=.png',
+    label: 'Bold Product Options',
+    logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
     tag: 'BoldProductOptions'
 };
 

package/dist/cjs/third-party/configs/EcoboostifyShoppableReelUgc.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var AppConfig = {
     id: 'ecoboostify-shoppable-reel-ugc',
     label: 'EcoBoostify Shoppable Reel UGC',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png',
     tag: 'EcoboostifyShoppableReelUgc'
 };
 

package/dist/cjs/third-party/next.js

@@ -6,11 +6,11 @@ var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
 
-const EcomsendBackInStockAlert = dynamic(()=>Promise.resolve().then(function () { return require('./components/EcomsendBackInStockAlert.js'); }), {
+const AppstleBundlesDiscounts = dynamic(()=>Promise.resolve().then(function () { return require('./components/AppstleBundlesDiscounts.js'); }), {
     ssr: false,
     loading: Loading.default
 });
-const AppstleBundlesDiscounts = dynamic(()=>Promise.resolve().then(function () { return require('./components/AppstleBundlesDiscounts.js'); }), {
+const EcomsendBackInStockAlert = dynamic(()=>Promise.resolve().then(function () { return require('./components/EcomsendBackInStockAlert.js'); }), {
     ssr: false,
     loading: Loading.default
 });
@@ -471,8 +471,8 @@ const EcoboostifyShoppableReelUgc = dynamic(()=>Promise.resolve().then(function
     loading: Loading.default
 });
 var thirdParty = {
-    EcomsendBackInStockAlert,
     AppstleBundlesDiscounts,
+    EcomsendBackInStockAlert,
     EcoboostifyShoppableReelUgc,
     EstimatedDeliveryDatePlus,
     OkendoReviewsLoyalty,

package/dist/cjs/third-party/setting/EcoboostifyShoppableReelUgc.js

@@ -7,7 +7,7 @@ var EcoboostifyShoppableReelUgc = require('../configs/EcoboostifyShoppableReelUg
 const config = {
     tag: EcoboostifyShoppableReelUgc.default.tag,
     label: EcoboostifyShoppableReelUgc.default.label,
-    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">',
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">',
     editorConfigs: {
         component: {
             isThirdParty: true
@@ -22,7 +22,7 @@ const config = {
             hideTextContent: true,
             icon: {
                 desktop: `<div class="w-full flex flex-col items-center">
-        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/COuT9MaKvosDEAE=.png">
         <span class="preset-item-title">EcoBoostify Shoppable Reel UGC</span>
       </div>`
             },

package/dist/cjs/third-party/setting/Releasit.js

@@ -11,11 +11,6 @@ const config = {
     editorConfigs: {
         component: {
             isThirdParty: true
-        },
-        placeholder: {
-            flowTag: [
-                'Product'
-            ]
         }
     },
     presets: [
@@ -44,16 +39,6 @@ const config = {
         {
             id: 'setting',
             controls: [
-                {
-                    id: 'appBlockId',
-                    type: 'input',
-                    default: ''
-                },
-                {
-                    id: 'productHandle',
-                    type: 'input',
-                    default: ''
-                },
                 {
                     id: 'install',
                     type: 'open-link',
@@ -70,38 +55,6 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/releasit-cod-order-form',
                     appName: Releasit.default.label
                 },
-                {
-                    id: 'version',
-                    label: 'Choose version',
-                    type: 'select',
-                    default: 'v1',
-                    options: [
-                        {
-                            label: 'V1',
-                            value: 'v1'
-                        },
-                        {
-                            label: 'V2',
-                            value: 'v2'
-                        }
-                    ]
-                },
-                {
-                    id: 'widgetTypeV2',
-                    label: 'Choose widget',
-                    type: 'select',
-                    default: 'button-app-block',
-                    options: [
-                        {
-                            label: 'Releasit button',
-                            value: 'button-app-block'
-                        },
-                        {
-                            label: 'Releasit embedded form',
-                            value: 'form-app-block'
-                        }
-                    ]
-                },
                 {
                     id: 'align',
                     label: 'Alignment',
@@ -139,24 +92,14 @@ const config = {
                 id: 'install'
             }
         },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose version'
-            },
-            setting: {
-                id: 'version'
-            }
-        },
         {
             type: 'control',
             label: {
                 en: 'Choose widget'
             },
             setting: {
-                id: 'widgetTypeV2'
-            },
-            condition: 'version === "v2"'
+                id: 'widgetType'
+            }
         },
         {
             type: 'control',

package/dist/cjs/third-party/setting/index.js

@@ -116,8 +116,8 @@ var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
 var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 var EcoboostifyShoppableReelUgc = require('./EcoboostifyShoppableReelUgc.js');
-var EcomsendBackInStockAlert = require('./EcomsendBackInStockAlert.js');
 var AppstleBundlesDiscounts = require('./AppstleBundlesDiscounts.js');
+var EcomsendBackInStockAlert = require('./EcomsendBackInStockAlert.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
@@ -234,8 +234,8 @@ var index = {
     AlsoBoughtCbb: AlsoBoughtCbb.default,
     HextomFreeShippingBar: HextomFreeShippingBar.default,
     EcoboostifyShoppableReelUgc: EcoboostifyShoppableReelUgc.default,
-    EcomsendBackInStockAlert: EcomsendBackInStockAlert.default,
-    AppstleBundlesDiscounts: AppstleBundlesDiscounts.default
+    AppstleBundlesDiscounts: AppstleBundlesDiscounts.default,
+    EcomsendBackInStockAlert: EcomsendBackInStockAlert.default
 };
 
 exports.default = index;

package/dist/cjs/video/components/HTML5Embed.js

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -7,7 +7,6 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
-    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -24,9 +23,7 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            },
-            enableLazyLoadImage,
-            pageContext
+            }
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -75,14 +72,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-contain"
+            class="gp-w-full gp-h-full gp-object-cover"
             alt="Video Thumbnail"
           ></img>
           <button

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
+    const { style, lazy, preload } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -42,7 +42,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...core.makeStyleResponsive('bgi', {
-            desktop: preload || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -52,9 +52,7 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true,
-        enableLazyLoadImage,
-        pageContext
+        isDisableAspectStyle: true
     })}
         <button
           type="button"

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

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

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;
@@ -39,6 +39,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             } else if (data.videoType === 'html5') {
                 delete data.video;
             }
+            if (data.type !== 'image') {
+                delete data.image;
+            }
         }
         return background;
     };
@@ -127,7 +130,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
-    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
+    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -177,7 +180,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
@@ -220,7 +223,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 alt: `lazy image ${device}`,
                 className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
                 isDisableAspectStyle: true,
-                enableLazyLoadImage
+                enableLazyloadImage
             }));
         }).join('') : ''}
             </div></div>