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

package/dist/esm/form/components/form-dropdown/FormDropdown.liquid.js

@@ -1,5 +1,5 @@
-import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeMemo, composeTypographyClassName, composeTypographyStyle, template, cls, genSizeClass, composeSize, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { getDynamicSourceLocales, getSettingPreloadData } from '../../../helpers.js';
+import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeMemo, composeTypographyClassName, composeTypographyStyle, template, cls, genSizeClass, composeSize } from '@gem-sdk/core';
+import { getDynamicSourceLocales } from '../../../helpers.js';
 
 const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
     const { name, childItem, typography, align, width, fullWidth, size, required, translate } = setting ?? {};
@@ -35,7 +35,7 @@ const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
             translate
         }));
     return template`
-    <gp-form-dropdown
+    <div
     data-id="${builderProps?.uid}"
       class="${cls(builderProps?.uid, advanced?.cssClass)}"
       style="${{
@@ -68,8 +68,7 @@ const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
               ${item}
             </option>`).join('')}
       </select>
-    </gp-form-dropdown>
-    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-form-dropdown.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-form-dropdown.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    </div>
   `;
 };
 

package/dist/esm/form/components/form-email/FormEmail.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyClassName, composeTypographyStyle, cls, genSizeClass, composeSize } from '@gem-sdk/core';
 

package/dist/esm/form/components/newsletter/Newsletter.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { isEmptyChildren } from '@gem-sdk/core';
 import ChildrenDroppable from '../../../grid/components/ChildrenDroppable.js';

package/dist/esm/form/components/submit-button/SubmitButton.js

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

package/dist/esm/form/components/textarea/TextArea.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorClass, genSizeClass, getGlobalColorStyle, composeSize, makeStyle, getSingleColorVariable } from '@gem-sdk/core';
 import { useMemo } from 'react';

package/dist/esm/form/components/textfield/TextField.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, makeWidth, composeAdvanceStyle, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorClass, genSizeClass, getGlobalColorStyle, composeSize, makeStyle, getSingleColorVariable } from '@gem-sdk/core';
 

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

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

@@ -7,7 +7,7 @@ import config$5 from './Textarea.js';
 import config$6 from './FormDropdown.js';
 import config$7 from './FormCheckbox.js';
 
-var contactFormSetting = {
+var index = {
     Newsletter: config,
     FormEmail: config$1,
     SubmitButton: config$2,
@@ -18,4 +18,4 @@ var contactFormSetting = {
     FormCheckbox: config$7
 };
 
-export { contactFormSetting as default };
+export { index as default };

package/dist/esm/grid/components/ChildrenDroppable.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useEditorMode, cls } from '@gem-sdk/core';
 import { useState, useRef, useEffect } from 'react';

package/dist/esm/grid/components/Col.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { usePageType, makeStyleResponsive, cls, isEmptyChildren } from '@gem-sdk/core';
 import ChildrenDroppable from './ChildrenDroppable.js';

package/dist/esm/grid/components/Root.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 const Root = ({ children })=>{

package/dist/esm/grid/components/Row.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo, Children, isValidElement, createElement } from 'react';
 import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
@@ -52,13 +51,11 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'left',
         'bottom',
         'right',
-        'z',
-        'ml',
-        'mr'
+        'z'
     ], style);
     const getStyles = ()=>{
         let result = {
-            ...restStyle,
+            ...isSection ? restStyle : style,
             ...makeStyleResponsive('cg', verticalGutter),
             ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
             ...makeStyleResponsive('w', styleObject.content)
@@ -116,7 +113,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ref: ref,
         style: getStyles(),
         className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
-            'gp-content-visibility-hidden': mode !== 'edit' && lazy && !inView
+            'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
             children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
@@ -155,15 +152,16 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(Element, {
-                className: "gp-max-w-full [&_*]:gp-max-w-full",
+            isSection ? /*#__PURE__*/ jsx(Element, {
+                className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
                 style: {
                     ...wrapStyle,
+                    ...makeStyleResponsive('w', styleObject.wrapper),
                     ...makeStyleResponsive('pl', styleObject.padding),
                     ...makeStyleResponsive('pr', styleObject.padding)
                 },
                 children: element
-            })
+            }) : element
         ]
     });
 };

package/dist/esm/grid/components/Row.liquid.js

@@ -12,9 +12,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'left',
         'bottom',
         'right',
-        'z',
-        'ml',
-        'mr'
+        'z'
     ], style);
     const element = template`
     <div
@@ -24,7 +22,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'data-id': builderProps?.uidInteraction ?? builderProps?.uid
     }}
         style="${{
-        ...restStyle,
+        ...isSection ? restStyle : style,
         ...makeStyleResponsive('cg', verticalGutter),
         ...makeStyleResponsive('pc', horizontalAlign),
         ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
@@ -51,21 +49,21 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
     }))}
     </div>
   `;
-    const elementTag = isSection ? 'section' : 'div';
     return template`
        ${RenderIf(!!styles?.preloadBgImage, `${RenderIf(!!background?.desktop?.image?.src, `<link rel="preload" href="${background?.desktop?.image?.src}" as="image" />`)}${RenderIf(!!background?.tablet?.image?.src, `<link rel="preload" href="${background?.tablet?.image?.src}" as="image" />`)}${RenderIf(!!background?.mobile?.image?.src, `<link rel="preload" href="${background?.mobile?.image?.src}" as="image" />`)}`)}
-      ${template`
-        <${elementTag}
-          class="gp-max-w-full ${isSection ? getSettingPreloadData('gps-lazy') : ''}"
-          style="${{
+      ${isSection ? template`
+            <section
+              class="gp-mx-auto gp-max-w-full ${getSettingPreloadData('gps-lazy')}"
+              style="${{
         ...wrapStyle,
+        ...makeStyleResponsive('w', styleObject.wrapper),
         ...makeStyleResponsive('pl', styleObject.padding),
         ...makeStyleResponsive('pr', styleObject.padding)
     }}"
-        >
-          ${element}
-        </${elementTag}>
-      `} 
+            >
+              ${element}
+            </section>
+          ` : element} 
     `;
 };
 

package/dist/esm/grid/components/Section.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import Row from './Row.js';
 import Loading from '../../common/components/Loading.js';

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

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

@@ -3,11 +3,11 @@ import config$1 from './Section.js';
 import config$2 from './Col.js';
 import config$3 from './Row.js';
 
-var gridSetting = {
+var index = {
     Root: config,
     Section: config$1,
     Col: config$2,
     Row: config$3
 };
 
-export { gridSetting as default };
+export { index as default };

package/dist/esm/header/components/Header.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { usePageType, cls, getGlobalColorResponsiveStyle, makeStyleResponsive } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';

package/dist/esm/header/components/SalePageHeaderWarning.js

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

package/dist/esm/header/components/icons/ChevronLeft.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const ChevronLeft = (props)=>{

package/dist/esm/header/components/icons/Dismiss.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const Dismiss = (props)=>{

package/dist/esm/header/components/icons/MenuIcon.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 
 const MenuIcon = (props)=>{

package/dist/esm/header/components/kind/basic/DesktopMenu.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { composeTypographyClassName, composeTypographyStyle, cls, makeStyleResponsive } from '@gem-sdk/core';
 import DesktopMenuItem from './DesktopMenuItem.js';

package/dist/esm/header/components/kind/basic/DesktopMenuItem.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cls, getGlobalColorStateStyle, getGlobalColorResponsiveStyle } from '@gem-sdk/core';
 import Link from 'next/link';

package/dist/esm/header/components/kind/basic/MenuMobileItem.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cls, getGlobalColorStateStyle, getGlobalColorResponsiveStyle } from '@gem-sdk/core';
 import Link from 'next/link';

package/dist/esm/header/components/kind/basic/MobileMenu.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEditorMode, composeTypographyClassName, composeTypographyStyle, cls, getGlobalColorStateStyle, getGlobalColorResponsiveStyle } from '@gem-sdk/core';
 import { useState, useRef } from 'react';

package/dist/esm/header/components/kind/basic/index.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, cls } from '@gem-sdk/core';
 import dynamic from 'next/dynamic';

package/dist/esm/header/components/kind/modern/index.js

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

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

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

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

package/dist/esm/heading/Heading.js

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

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

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

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

package/dist/esm/helpers.js

@@ -39,7 +39,7 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, i
     const translateKey = `g${uid}_${settingId}`;
     let locale = `section.settings.${translateKey}`;
     if (pageContext?.isTranslateWithLocale) {
-        locale = `'sections.${pageContext.sectionName}.${translateKey}_html' | t`;
+        locale = `"sections.${pageContext.sectionName}.${translateKey}_html" | t`;
     }
     if (isCapitalize) {
         locale = `${locale} | downcase`;
@@ -48,7 +48,7 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, i
     return `{{ ${locale} }}`;
 };
 const getStaticLocale = (tag, key)=>{
-    return `{{ 'gempages.${tag}.${key}' | t }}`;
+    return `{{ "gempages.${tag}.${key}" | t }}`;
 };
 const getSettingPreloadData = (disabledValue, enabledValue)=>{
     return `{% if section.settings.section_preload == "false" %}${disabledValue} ${enabledValue ? `{% else %}${enabledValue}` : ''}{% endif %}`;

package/dist/esm/icon/components/Icon.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import { makeGlobalSizeIcon, makeStyleResponsive, cls, handleConvertClassColor, getGlobalColorStateClass, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getGlobalColorStateStyle, makeStyle } from '@gem-sdk/core';

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

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

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

package/dist/esm/icon-list/components/IconList.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { makeStyleResponsive, getStyleBackgroundByDevice, isEmptyChildren, cls, filterToolbarPreview } from '@gem-sdk/core';
 import { useMemo, Children, isValidElement } from 'react';

package/dist/esm/icon-list/components/IconListItem.js

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

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

package/dist/esm/icon-list/setting/ItemTemplate.js

@@ -11,8 +11,7 @@ const itemChildrenTemplateImage = (src)=>({
                         settings: {
                             image: {
                                 src
-                            },
-                            disableNoDataState: true
+                            }
                         },
                         styles: {
                             shape: {

package/dist/esm/icon-list/setting/index.js

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

package/dist/esm/icon-list-hoz/components/IconListHoz.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { getStyleBackgroundByDevice, isEmptyChildren, cls, makeStyle, makeStyleResponsive, filterToolbarPreview } from '@gem-sdk/core';
 import { Children, isValidElement } from 'react';

package/dist/esm/icon-list-hoz/components/IconListHozItem.js

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

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

package/dist/esm/icon-list-hoz/setting/index.js

@@ -1,9 +1,9 @@
 import config from './IconListHoz.js';
 import config$1 from './IconListItem.js';
 
-var iconListHozSetting = {
+var index = {
     IconListHoz: config,
     IconListItemHoz: config$1
 };
 
-export { iconListHozSetting as default };
+export { index as default };

package/dist/esm/icon-list-v2/components/IconList.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useCurrentDevice, makeGlobalSize, composePostionIconList, getStyleBackgroundByDevice, cls, makeStyleResponsive, makeStyle, getSingleColorVariable } from '@gem-sdk/core';
 import Text from '../../text/components/Text.js';

package/dist/esm/icon-list-v2/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 IconListV2 = dynamic(()=>import('./components/IconList.js'), {
     loading: Loading

package/dist/esm/icon-list-v2/setting/index.js

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

package/dist/esm/image/components/AdaptiveImage.js

@@ -1,10 +1,8 @@
-'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Head from 'next/head';
 import Img from './Img.js';
-import { imagePlaceholder } from '../helpers/getSrcSet.js';
 
-const AdaptiveImage = ({ srcSet, priority, pictureClass, ...rest })=>{
+const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Head, {
@@ -44,7 +42,7 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, ...rest })=>{
                         ...rest,
                         loading: priority ? 'eager' : 'lazy',
                         image: {
-                            src: srcSet?.desktop?.src || imagePlaceholder
+                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
                         }
                     })
                 ]

package/dist/esm/image/components/AdaptiveImage.liquid.js

@@ -1,12 +1,12 @@
 import { template, cls, RenderIf, makeStyleResponsive } from '@gem-sdk/core';
 import { getImageSrc } from '../helpers/getSrcSet.js';
+import { createBlurDataURL } from './helpers.js';
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, enableLazyloadImage = true, ...props })=>{
+const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, imagePlaceholder, enableLazyloadImage = true, ...props })=>{
     const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     const srcDesktop = getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getImageSrc(srcSet?.tablet, 'tablet') ?? getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
     const srcMobile = (getImageSrc(srcSet?.mobile, 'mobile') ?? getImageSrc(srcSet?.tablet, 'mobile') ?? getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
-    const imagePlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
     return template`
   <picture style="border-radius: inherit" class="${cls(pictureClass)}">
   ${RenderIf(priority, template`
@@ -27,8 +27,8 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, template`
-      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder : srcMobile}" />` : ''}
-      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder : srcTablet}" />` : ''}
+      ${srcMobile ? `<source media="(max-width: 767px)" data-srcSet="${srcMobile}" srcset="${enableLazyloadImage ? imagePlaceholder?.['mobile'] ?? createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0) : srcMobile}" />` : ''}
+      ${srcTablet ? `<source media="(max-width: 1024px)" data-srcSet="${srcTablet}" srcset="${enableLazyloadImage ? imagePlaceholder?.['tablet'] ?? createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
@@ -36,7 +36,7 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
         class="${cls(className, {
         gp_lazyload: enableLazyloadImage
     })}"
-        src="${enableLazyloadImage ? imagePlaceholder : srcDesktop}"
+        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

package/dist/esm/image/components/BackgroundImage.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getResponsiveValueByScreen, composeRadius, getStyleShadowState, makeStyleResponsive, cls, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, isEmptyChildren } from '@gem-sdk/core';
 import Image from 'next/image';

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

@@ -1,17 +1,13 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useCurrentDevice, makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
 import { composeAspectRatio } from './helpers.js';
-import NoDataImage from './NoDataImage.js';
-import { useMemo } from 'react';
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link : 'div';
     const opacity = {
@@ -56,18 +52,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = 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__*/ jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -96,7 +80,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {}) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
                         className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),

package/dist/esm/image/components/Img.js

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