@gem-sdk/components 2.0.0-staging.128 → 2.0.1

package/dist/cjs/third-party-instant/components/LooxReviews/LooxReviewsSampleContent.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/third-party-instant/components/LooxReviews/SingleProduct.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/third-party-instant/components/LooxReviews/WithoutProduct.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/third-party-instant/components/YotpoLoyalty/YotpoLoyaltySampleContent.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
-require('react');
-require('@gem-sdk/core');
 
 // instant
 const InstantJudgemeReviews = dynamic(()=>Promise.resolve().then(function () { return require('./components/InstantJudgemeReviews.js'); }), {

package/dist/cjs/third-party-instant/setting/InstantJudgemeReviews.js

@@ -63,17 +63,11 @@ const config = {
                     options: [
                         {
                             label: 'Single Product Preview Badge',
-                            value: 'single_product_preview_badge',
-                            flowTag: [
-                                'Product'
-                            ]
+                            value: 'single_product_preview_badge'
                         },
                         {
                             label: 'Reviews Widget',
-                            value: 'review_widget',
-                            flowTag: [
-                                'Product'
-                            ]
+                            value: 'review_widget'
                         },
                         {
                             label: 'Reviews Carousel',

package/dist/cjs/third-party-instant/setting/InstantLooxReviews.js

@@ -46,10 +46,7 @@ const config = {
                     options: [
                         {
                             label: 'Product Reviews Widget',
-                            value: 'product_reviews_widget',
-                            flowTag: [
-                                'Product'
-                            ]
+                            value: 'product_reviews_widget'
                         },
                         {
                             label: 'All Stores Reviews Widget',
@@ -57,17 +54,11 @@ const config = {
                         },
                         {
                             label: 'Product Star Ratings Widget',
-                            value: 'product_star_ratings_widget',
-                            flowTag: [
-                                'Product'
-                            ]
+                            value: 'product_star_ratings_widget'
                         },
                         {
                             label: 'Loox Cards Carousel Widget',
-                            value: 'carousel_widget',
-                            flowTag: [
-                                'Product'
-                            ]
+                            value: 'carousel_widget'
                         }
                     ]
                 }

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

@@ -7,11 +7,11 @@ var InstantLooxReviews = require('./InstantLooxReviews.js');
 var InstantKlaviyo = require('./InstantKlaviyo.js');
 var InstantYotpoLoyalty = require('./InstantYotpoLoyalty.js');
 
-var thirdPartyInstantSetting = {
+var index = {
     InstantJudgemeReviews: InstantJudgemeReviews.default,
     InstantLooxReviews: InstantLooxReviews.default,
     InstantKlaviyo: InstantKlaviyo.default,
     InstantYotpoLoyalty: InstantYotpoLoyalty.default
 };
 
-exports.default = thirdPartyInstantSetting;
+exports.default = index;

package/dist/cjs/third-party-slot/components/ThirdPartySlot.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
-require('react');
-require('@gem-sdk/core');
 
 const ThirdPartySlot = dynamic(()=>Promise.resolve().then(function () { return require('./components/ThirdPartySlot.js'); }), {
     loading: Loading.default

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var ThirdPartySlot = require('./ThirdPartySlot.js');
 
-var thirdPartySlotSetting = {
+var index = {
     ThirdPartySlot: ThirdPartySlot.default
 };
 
-exports.default = thirdPartySlotSetting;
+exports.default = index;

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/video/next.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
-require('react');
-require('@gem-sdk/core');
 
 const Video = dynamic(()=>Promise.resolve().then(function () { return require('./components/Video.js'); }), {
     loading: Loading.default

package/dist/cjs/video/setting/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Video = require('./Video.js');
 
-var videoSetting = {
+var index = {
     Video: Video.default
 };
 
-exports.default = videoSetting;
+exports.default = index;

package/dist/esm/accordion/components/Accordion.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useEffect, Children, isValidElement } from 'react';
 import { makeGlobalSize, useEditorMode, useInteraction, cls, getStyleBackgroundByDevice, makeStyleResponsive } from '@gem-sdk/core';

package/dist/esm/accordion/components/AccordionItem.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo, Children } from 'react';
 import { makeGlobalSize, useEditorMode, makeStyleResponsive, makeWidth, makeStyle, getGlobalColorStateStyle, composeSize, removePaddingYInStyle, getSingleColorVariable, getStyleShadow, getRadiusStyleActiveState, cls, genSizeClass, getGlobalColorClass, getGlobalColorStateClass, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor } from '@gem-sdk/core';

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -85,7 +85,7 @@ const AccordionItem = ({ accordions, index, rawChildren, builderProps, title, pa
       }
     .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-collapsible-icon.gp-accordion-item-active, .gp-accordion-item .gp-accordion-item-${parentUid}-${index}:hover .gp-icon.gp-accordion-item-active
      {
-        color: ${color?.active} !important
+        color: ${iconColor?.active} !important
       }
   </style>
   <div class="gp-overflow-clip" style="${{

package/dist/esm/accordion/hooks/useMountTransition.js

@@ -1,4 +1,3 @@
-'use client';
 import { useState, useEffect } from 'react';
 
 const useMountTransition = (isMounted, unmountDelay)=>{

package/dist/esm/accordion/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Accordion = dynamic(()=>import('./components/Accordion.js'), {
     loading: Loading

package/dist/esm/accordion/setting/index.js

@@ -1,9 +1,9 @@
 import config from './Accordion.js';
 import config$1 from './AccordionItem.js';
 
-var accordionSetting = {
+var index = {
     Accordion: config,
     AccordionItem: config$1
 };
 
-export { accordionSetting as default };
+export { index as default };

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../text/components/Text.js';
 import { useArticleStore } from '@gem-sdk/core';

package/dist/esm/article/components/ArticleAuthor.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../text/components/Text.js';
 import { useArticleStore } from '@gem-sdk/core';

package/dist/esm/article/components/ArticleCategory.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useArticleStore, useCurrentDevice, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorStateStyle, makeStyleResponsive, makeStyle } from '@gem-sdk/core';
 import { useState, useRef, useEffect } from 'react';

package/dist/esm/article/components/ArticleContent.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, getGlobalColorStateStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorStateClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { getSettingPreloadData } from '../../helpers.js';
 

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

@@ -1,28 +1,18 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../text/components/Text.js';
 import { useMemo } from 'react';
-import { useArticleStore, useTimezone } from '@gem-sdk/core';
+import { useArticleStore } from '@gem-sdk/core';
 
 const ArticleDate = ({ setting, builderProps, styles })=>{
     const { dateFormat } = setting ?? {};
     const article = useArticleStore((s)=>s.article);
-    const { timezone } = useTimezone();
-    const convertTZ = (date, tzString)=>{
-        const tz = tzString?.split(' ')?.[1] ?? '';
-        if (!tz) return date;
-        return new Date(new Date(date).toLocaleString('en-US', {
-            timeZone: tz
-        }));
-    };
     const formattedDate = useMemo(()=>{
-        const date = convertTZ(new Date(article.platformUpdatedAt), timezone ?? '');
+        const date = new Date(article.platformCreatedAt);
         const { locales, options } = JSON.parse(dateFormat ?? '{"locales":"en-US","options":{"month":"short","day":"2-digit","year":"numeric"}}');
         return date.toLocaleDateString(locales, options);
     }, [
-        article.platformUpdatedAt,
-        timezone,
-        dateFormat
+        dateFormat,
+        article
     ]);
     return /*#__PURE__*/ jsx("div", {
         id: `shopify-text-element-${builderProps?.uid}`,

package/dist/esm/article/components/ArticleDate.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Link from 'next/link';
 import Text from '../../text/components/Text.js';

package/dist/esm/article/components/ArticleExcerpt.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useArticleStore, cls } from '@gem-sdk/core';
 import Image from '../../image/components/Image.js';
@@ -26,13 +25,7 @@ const ArticleImage = ({ className, setting = {}, styles = {}, advanced, builderP
             setting: {
                 ...setting,
                 alt: image.alt,
-                image,
-                srcSet: {
-                    desktop: {
-                        src: image.src ?? ''
-                    }
-                },
-                disableNoDataState: true
+                image
             },
             styles: styles,
             advanced: advanced

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

@@ -1,4 +1,3 @@
-'use client';
 import { template, cls } from '@gem-sdk/core';
 import Image from '../../image/components/Image.liquid.js';
 
@@ -18,13 +17,7 @@ const ArticleImage = (props)=>{
             image: {
                 src: `{{article.image.src | img_url: '1024x1024'}}`,
                 alt: '{{article.image.alt}}'
-            },
-            srcSet: {
-                desktop: {
-                    src: `{{article.image.src | img_url: '1024x1024'}}`
-                }
-            },
-            disableNoDataState: true
+            }
         },
         advanced: props.advanced,
         builderAttrs: {
@@ -42,13 +35,7 @@ const ArticleImage = (props)=>{
             image: {
                 src: `{{article.image.src | img_url: '1024x1024'}}`,
                 alt: '{{article.image.alt}}'
-            },
-            srcSet: {
-                desktop: {
-                    src: `{{article.image.src | img_url: '1024x1024'}}`
-                }
-            },
-            disableNoDataState: true
+            }
         },
         advanced: props.advanced,
         builderAttrs: {

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useEditorMode, useBlogsQuery, useArticlesQuery, flattenConnection, ArticleListProvider, getBorderStyle, getBorderRadiusStyle, getStyleShadow, makeStyleResponsive, makeWidth, getStyleBackgroundByDevice, getResponsiveValueByScreen, cls, ArticleProvider, isEmptyChildren } from '@gem-sdk/core';
 import ChildrenDroppable from '../../grid/components/ChildrenDroppable.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { template, getBorderStyle, getBorderRadiusStyle, getStyleShadow, makeStyleResponsive, makeWidth, getStyleBackgroundByDevice, getResponsiveValueByScreen, cls } from '@gem-sdk/core';
 import { convertUnitToNumber } from '../../product/components/ProductImages/common/productFeaturedImage.js';
 import { convertSpecialCharacter } from '../utils/string.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { usePageType, useShopStore, filterToolbarPreview } from '@gem-sdk/core';
 import { useMemo } from 'react';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import '@gem-sdk/core';
 import 'react';

package/dist/esm/article/components/ArticlePagination.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import '@gem-sdk/core';
 import CollectionPaginator from '../../collection/components/CollectionPaginator.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../text/components/Text.js';
 import Button from '../../button/components/Button.js';

package/dist/esm/article/components/ArticleReadMore.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template, RenderIf } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 import Button from '../../button/components/Button.liquid.js';

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Text from '../../text/components/Text.js';
 import { useArticleStore } from '@gem-sdk/core';

package/dist/esm/article/components/ArticleTag.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

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

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Link from 'next/link';
 import Text from '../../text/components/Text.js';

package/dist/esm/article/components/ArticleTitle.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 import { template } from '@gem-sdk/core';
 import Text from '../../text/components/Text.liquid.js';
 

package/dist/esm/article/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const ArticleList = dynamic(()=>import('./components/ArticleList.js'), {
     loading: Loading

package/dist/esm/article/setting/index.js

@@ -10,7 +10,7 @@ import config$8 from './ArticleCategory.js';
 import config$9 from './ArticleDate.js';
 import config$a from './ArticleReadMore.js';
 
-var articleListSetting = {
+var index = {
     ArticleList: config,
     ArticleTitle: config$1,
     ArticleExcerpt: config$2,
@@ -24,4 +24,4 @@ var articleListSetting = {
     ArticleReadMore: config$a
 };
 
-export { articleListSetting as default };
+export { index as default };

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

@@ -1,6 +1,5 @@
-'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleShadow, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, getBgImageByDevice } from '@gem-sdk/core';
+import { useEditorMode, useCurrentDevice, makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, getResponsiveValueByScreen, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getStyleBackgroundByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, filterToolbarPreview, getAspectRatioGlobalSize, getBgImageByDevice } from '@gem-sdk/core';
 import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import Row from '../../../grid/components/Row.js';
 import Link from '../../../link/components/Link.js';
@@ -15,7 +14,7 @@ import AnimationManager from './parallax/AnimationManager.js';
 import { useTranslateValue } from './hooks/useTranslateValue.js';
 import { getClipPath, isScaleImage } from './utils/index.js';
 import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
-import { imageNoVideoPlaceholder } from '../../../image/components/helpers.js';
+import { createBlurDataURL } from '../../../image/components/helpers.js';
 
 const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children })=>{
     const mode = useEditorMode();
@@ -78,31 +77,25 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }
         const youtubeUrl = dataVideo.data.video ?? '';
         const videoId = getYoutubeVideoId(youtubeUrl);
+        if (!youtubeVideoRegex.test(youtubeUrl) || !videoId) return undefined;
         const params = `&loop=${dataVideo.data.loop ? 1 : 0}&playlist=${videoId}&showinfo=0&rel=0&fs=0&enablejsapi=1`;
-        if (dataVideo.data.videoType === 'youtube' && videoId && youtubeVideoRegex.test(youtubeUrl)) {
-            return /*#__PURE__*/ jsx(LiteYouTubeEmbed, {
-                id: videoId,
-                isHeroBanner: true,
-                autoplay: true,
-                title: "",
-                controls: false,
-                params: params,
-                adNetwork: false,
-                noCookie: true,
-                muted: true,
-                lazy: dataVideo.data.lazyLoad ?? true,
-                style: {
-                    ...makeStyleResponsive('aspect', aspectRatio),
-                    pointerEvents: 'none'
-                },
-                wrapperClass: "gp-pb-[56.25%] gp-h-full gp-w-full !gp-max-w-none",
-                iframeClass: "!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]"
-            });
-        }
-        return /*#__PURE__*/ jsx("img", {
-            src: imageNoVideoPlaceholder,
-            alt: "no-video",
-            className: "gp-w-full gp-h-full gp-object-cover"
+        return /*#__PURE__*/ jsx(LiteYouTubeEmbed, {
+            id: videoId,
+            isHeroBanner: true,
+            autoplay: true,
+            title: "",
+            controls: false,
+            params: params,
+            adNetwork: false,
+            noCookie: true,
+            muted: true,
+            lazy: dataVideo.data.lazyLoad ?? true,
+            style: {
+                ...makeStyleResponsive('aspect', aspectRatio),
+                pointerEvents: 'none'
+            },
+            wrapperClass: "gp-pb-[56.25%] gp-h-full gp-w-full !gp-max-w-none",
+            iframeClass: "!gp-w-[500%] !gp-ml-[-200%] !gp-h-full !gp-max-w-none gp-scale-[104%]"
         });
     }, [
         dataVideo,
@@ -202,6 +195,11 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }), [
         getEnableBgImageByDevice
     ]);
+    const imagePlaceholder = {
+        desktop: createBlurDataURL(background?.desktop?.image?.width ?? 0, background?.desktop?.image?.height ?? 0),
+        tablet: createBlurDataURL(background?.tablet?.image?.width ?? background?.desktop?.image?.width ?? 0, background?.tablet?.image?.height ?? background?.desktop?.image?.width ?? 0),
+        mobile: createBlurDataURL(background?.mobile?.image?.width ?? background?.tablet?.image?.width ?? background?.desktop?.image?.width ?? 0, background?.mobile?.image?.height ?? background?.tablet?.image?.height ?? background?.desktop?.image?.width ?? 0)
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             preload && /*#__PURE__*/ jsxs(Head, {
@@ -259,6 +257,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     radiusType: 'custom'
                                 }
                             }),
+                            ...background ? {
+                                ...getStyleBgColor(background)
+                            } : {},
+                            ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                             ...getStyleShadow({
                                 value: shadowBg,
                                 styleAppliedFor: 'box-shadow',
@@ -292,7 +294,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                             tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
                                             mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
                                         }),
-                                        ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                                         position: attachment === 'fixed' ? 'fixed' : 'absolute',
                                         '--duration': `${hoverEffectDuration ?? 0}s`,
                                         '--scale': hoverEffectScale ?? 1,
@@ -353,7 +354,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     ...styleWidth,
                                     '--op': 0,
                                     '--z': -1
-                                }
+                                },
+                                imagePlaceholder: imagePlaceholder
                             })
                         ]
                     }),