@gem-sdk/components 2.0.0-staging.118 → 2.0.0

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
                             })
                         ]
                     }),

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

@@ -1,13 +1,14 @@
-import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, RenderIf, isLocalEnv, baseAssetURL, getResponsiveValueByScreen, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState } from '@gem-sdk/core';
+import { makeStyleResponsive, getHeightByShapeGlobalSize, makeStyleWithDefault, getWidthByShapeGlobalSize, getPaddingGlobalSize, removeUndefinedValuesFromObject, template, cls, dataStringify, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleBgColor, getGradientBgrStyleByDevice, getStyleShadow, getAspectRatioGlobalSize, getStyleBackgroundByDevice, getResponsiveValueByScreen, RenderIf, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import Row from '../../../grid/components/Row.liquid.js';
 import AdaptiveImage from '../../../image/components/AdaptiveImage.liquid.js';
-import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getResponsiveSetting, getClassContentPosition, getDisplayStyleByFitContent, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getBgImage } from '../../helpers/common.js';
+import { getVisibilityStyle, getMarginStyle, getStyleAspectRatioHeroBannerCustom, removeMarginStyle, getContentPosition, mapContentPositionToHorizontal, getClassJustify, getClassContentPosition, getDisplayStyleByFitContent, getClassForContentByFitContent, getClassForStretchContent, getClassSpaceBetween, getWidth, getResponsiveSetting, getBgImage } from '../../helpers/common.js';
 import { getInsertLinkData, getSettingPreloadData } from '../../../helpers.js';
 import HTML5Embed from '../../../video/components/HTML5Embed.liquid.js';
 import { getClipPath, getStyleHeroBannerBg } from './utils/index.js';
 import useAspectRatioSettings from './hooks/useAspectRatioSettings.js';
 import NextImage from '../../../image/components/NextImage.liquid.js';
-import { getImageSrc, imagePlaceholder, DEVICES } from '../../../image/helpers/getSrcSet.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 { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
@@ -55,7 +56,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         if (!getResponsiveValueByScreen(srcSet, device)) return false;
         if (!background?.[device]) {
             if (device === 'mobile') {
-                return background?.['tablet']?.type === 'image' || background?.['desktop']?.type === 'image' && !background?.['tablet'];
+                return background?.['tablet']?.type === 'image' || background?.['desktop']?.type === 'image';
             }
             if (device === 'tablet') return background?.['desktop']?.type === 'image';
         }
@@ -112,7 +113,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             return HTML5Embed({
                 uid: builderProps?.uid,
                 muted: true,
-                loop: backgroundResponsive.desktop?.loop,
+                loop: !!backgroundResponsive?.desktop?.loop,
                 controls: false,
                 autoplay: true,
                 src: '',
@@ -123,136 +124,12 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }
         return;
     };
-    const renderInnerHeroBanner = ()=>{
-        return template /* liquid */ `
-      <div
-        class="${cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden', {
-            ...getClassContentPosition(contentPosition || {})
-        })}"
-        style="${{
-            ...styleHeight,
-            ...styleAspectRatio,
-            ...makeStyle({
-                bs: borderBg?.border ?? borderBg?.border,
-                bw: borderBg?.width ?? borderBg?.width,
-                bc: getSingleColorVariable(borderBg?.color)
-            }),
-            ...getRadiusStyleActiveState({
-                ...cornerBg,
-                active: {
-                    ...cornerBg || {},
-                    radiusType: 'custom'
-                }
-            }),
-            ...getStyleShadow({
-                value: shadowBg,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: hasActiveShadow
-            })
-        }}"
-        >
-          ${AdaptiveImage({
-            pictureClass: 'gp-w-full',
-            srcSet: srcSet,
-            className: `adaptive-hero-banner`,
-            aspectRatio: getAspectRatioGlobalSize(sizeSetting),
-            style: {
-                ...getDisplayStyleByFitContent(sizeSetting, background),
-                ...styleHeight,
-                ...styleWidthShapeOriginal,
-                ...styleWidth,
-                '--op': 0,
-                '--z': -1
-            },
-            alt,
-            title,
-            enableLazyloadImage
-        })}
-            <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
-              <div class="${cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}">
-                <div
-                  aria-label="Background Image"
-                  role="banner"
-                  class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
-                  style="${{
-            'clip-path': getClipPath(borderBg?.width, cornerBg)
-        }}"
-              > 
-              <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
-            'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
-        })}"
-              style="${{
-            ...getStyleBackgroundByDevice(background, {
-                ignoreBgAttachment: true,
-                ignoreBackgroundImage: true,
-                liquid: true
-            }),
-            ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder : ''}')`
-            }),
-            ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
-            '--duration': `${hoverEffectDuration ?? 0}s`,
-            '--scale': hoverEffectScale ?? 1,
-            ...makeStyleResponsive('pos', getAttachmentDevice()),
-            ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
-        }}"
-                >
-               ${!setting?.preload ? DEVICES.map((device)=>{
-            return RenderIf(getEnableBgImageByDevice(device), NextImage({
-                src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
-                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
-            }));
-        }).join('') : ''}
-              </div>  
-                ${embed()} 
-              </div>
-            </div>
-            ${RenderIf(overlayEnable, template`<div
-                  aria-label="Overlay"
-                  role="banner"
-                  class="${cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', getGlobalColorStateClass('bg', overlayColor))}"
-                    style="${{
-            ...getGlobalColorStateStyle('bgc', overlayColor),
-            '--top': 0,
-            '--left': 0,
-            ...makeStyleState('op', overlayOpacity)
-        }}"
-                 > 
-                </div>`)}
-          </div>
-            ${Row({
-            className: cls('gp-hero-banner-row gp-z-1 gp-w-full', getClassForContentByFitContent(sizeSetting, background), getClassForStretchContent(verticalAlign), getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
-            setting: {
-                layout,
-                horizontalAlign: rowHorizontalAlign,
-                verticalAlign,
-                order
-            },
-            styles: {
-                verticalGutter,
-                width: getWidth(contentWidth),
-                fullWidth: {
-                    desktop: false,
-                    tablet: false,
-                    mobile: false
-                }
-            },
-            style: {
-                ...contentPaddingStyle
-            },
-            children,
-            rawChildren
-        })}
-              </div>
-          `;
-    };
     const { urlData } = getInsertLinkData('', link);
+    const imagePlaceholder = {
+        desktop: createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0),
+        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)
+    };
     return template`
     <div class="${cls('gp-flex gp-w-full', getClassJustify(alignBannerData))}" style="${{
         ...styleHeight,
@@ -285,25 +162,144 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}"
         data-id="${builderProps?.uid}"
       >
-        
-        ${RenderIf(!link?.link, renderInnerHeroBanner())}
-        ${RenderIf(!!link?.link, template /* liquid */ `
-          <gp-hero-banner-link
-            gp-data='${dataStringify({
-        href: urlData?.href ?? '',
-        target: urlData?.target ?? '_blank'
-    })}'
-            aria-label="Hero banner link"
-            class="${cls(link?.link ? 'gp-cursor-pointer' : '')}"
-          >
-            ${renderInnerHeroBanner()}
-          </gp-hero-banner-link>`)}
+        <div
+        class="${cls('gp-relative gp-flex gp-flex-col gp-items-center gp-overflow-hidden gp_haslazybg', {
+        ...getClassContentPosition(contentPosition || {})
+    })}"
+          style="${{
+        ...styleHeight,
+        ...styleAspectRatio,
+        ...makeStyle({
+            bs: borderBg?.border ?? borderBg?.border,
+            bw: borderBg?.width ?? borderBg?.width,
+            bc: getSingleColorVariable(borderBg?.color)
+        }),
+        ...getRadiusStyleActiveState({
+            ...cornerBg,
+            active: {
+                ...cornerBg || {},
+                radiusType: 'custom'
+            }
+        }),
+        ...background ? {
+            ...getStyleBgColor(background)
+        } : {},
+        ...getGradientBgrStyleByDevice(background, bgiEnableByDevice),
+        ...getStyleShadow({
+            value: shadowBg,
+            styleAppliedFor: 'box-shadow',
+            isEnableShadow: hasActiveShadow
+        })
+    }}"
+        >
+          ${AdaptiveImage({
+        pictureClass: 'gp-w-full',
+        srcSet: srcSet,
+        className: `adaptive-hero-banner`,
+        aspectRatio: getAspectRatioGlobalSize(sizeSetting),
+        style: {
+            ...getDisplayStyleByFitContent(sizeSetting, background),
+            ...styleHeight,
+            ...styleWidthShapeOriginal,
+            ...styleWidth,
+            '--op': 0,
+            '--z': -1
+        },
+        alt,
+        title,
+        imagePlaceholder,
+        enableLazyloadImage
+    })}
+          <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
+            <div
+              class="${cls('gp-overflow-hidden gp-relative gp-w-full gp-h-full')}"
+              >
+              <div
+                aria-label="Background Image"
+                role="banner"
+                class='gp-hero-banner-bg gp-absolute gp-overflow-hidden gp-w-full gp-h-full top-0 left-0'
+                style="${{
+        'clip-path': getClipPath(borderBg?.width, cornerBg)
+    }}"
+              > 
+              <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+        'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
+        'gp-transition-transform': hoverEffect
+    })}"
+              style="${{
+        ...getStyleBackgroundByDevice(background, {
+            ignoreBgAttachment: true,
+            ignoreBackgroundImage: true,
+            liquid: true
+        }),
+        ...makeStyleResponsive('bgi', {
+            desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+            tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+            mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+        }),
+        '--duration': `${hoverEffectDuration ?? 0}s`,
+        '--scale': hoverEffectScale ?? 1,
+        ...makeStyleResponsive('pos', getAttachmentDevice()),
+        ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
+    }}"
+             >
+             ${!setting?.preload ? DEVICES.map((device)=>{
+        return RenderIf(getEnableBgImageByDevice(device), NextImage({
+            src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
+            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
+        }));
+    }).join('') : ''}
+              </div>  
+              ${embed()} </div>
+            </div>
+            ${RenderIf(overlayEnable, template`<div
+            aria-label="Overlay"
+            role="banner"
+            class="${cls('gp-absolute gp-inset-0 gp-left-[var(--left)] gp-top-[var(--top)] gp-transition-all gp-duration-300 group-hover/hero:gp-bg-[color:var(--hvr-bgc,_var(--bgc))] group-hover/hero:gp-opacity-[var(--hvr-op,_var(--op))]', getGlobalColorStateClass('bg', overlayColor))}"
+            style="${{
+        ...getGlobalColorStateStyle('bgc', overlayColor),
+        '--top': 0,
+        '--left': 0,
+        ...makeStyleState('op', overlayOpacity)
+    }}"
+          > </div>`)}
+          </div>
+          ${RenderIf(!!link?.link, `<a
+              href="${urlData?.href}"
+              target="${urlData?.target}"
+              aria-label="Hero banner link"
+              class="gp-absolute gp-inset-0 gp-z-1"
+            > </a>`)}
+          ${Row({
+        className: cls('gp-hero-banner-row gp-z-1 gp-w-full', getClassForContentByFitContent(sizeSetting, background), getClassForStretchContent(verticalAlign), getClassSpaceBetween(setting?.layout || {}, styles?.contentPosition1Col || {}, styles?.contentPosition2Col || {})),
+        setting: {
+            layout,
+            horizontalAlign: rowHorizontalAlign,
+            verticalAlign,
+            order
+        },
+        styles: {
+            verticalGutter,
+            width: getWidth(contentWidth),
+            fullWidth: {
+                desktop: false,
+                tablet: false,
+                mobile: false
+            }
+        },
+        style: {
+            ...contentPaddingStyle
+        },
+        children,
+        rawChildren
+    })}
+        </div>
       </gp-hero-banner>
     </div>
-    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-hero-banner.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
-`)}
-     ${RenderIf(isLocalEnv && !!link?.link, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner-link.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-hero-banner-link.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
-`)}
+    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-hero-banner.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-hero-banner.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/esm/banner/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 HeroBanner = dynamic(()=>import('./components/hero-banner/index.js'), {
     loading: Loading

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

@@ -1,7 +1,7 @@
 import config from './HeroBanner.js';
 
-var bannerSetting = {
+var index = {
     HeroBanner: config
 };
 
-export { bannerSetting as default };
+export { index as default };

package/dist/esm/breadcrumb/components/Breadcrumb.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, cls, getGlobalColorStateStyle, makeStyle, getSingleColorVariable, removeNullUndefined } from '@gem-sdk/core';
 import { useMemo, useState, useEffect } from 'react';

package/dist/esm/breadcrumb/components/Breadcrumb.liquid.js

@@ -38,7 +38,7 @@ const Breadcrumb = ({ setting = {}, builderAttrs, style, styles = {}, className,
         '--gap-desktop': `${spacing?.desktop}`,
         '--gap-tablet': `${spacing?.tablet || spacing?.desktop}`,
         '--gap-mobile': `${spacing?.mobile || spacing?.tablet || spacing?.desktop}`
-    }}" class="gp-flex gp-align-center !gp-gap-[var(--gap-desktop)] tablet:!gp-gap-[var(--gap-tablet)] mobile:!gp-gap-[var(--gap-mobile)] gp-flex-wrap" aria-label="breadcrumb">
+    }}" class="gp-flex gp-align-center !gp-gap-[var(--gap-desktop)] tablet:!gp-gap-[var(--gap-tablet)] mobile:!gp-gap-[var(--gap-mobile)]" aria-label="breadcrumb">
         {% if t == 'index' %} 
           <a class="${cls({
         'gp-hidden': isHiddenOnDesktop,

package/dist/esm/breadcrumb/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 Breadcrumb = dynamic(()=>import('./components/Breadcrumb.js'), {
     loading: Loading

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

@@ -1,7 +1,7 @@
 import config from './Breadcrumb.js';
 
-var breadcrumbSetting = {
+var index = {
     Breadcrumb: config
 };
 
-export { breadcrumbSetting as default };
+export { index as default };