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

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

@@ -39,7 +39,7 @@ const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
             translate
         }));
     return core.template`
-    <gp-form-dropdown
+    <div
     data-id="${builderProps?.uid}"
       class="${core.cls(builderProps?.uid, advanced?.cssClass)}"
       style="${{
@@ -72,8 +72,7 @@ const FormDropdown = ({ builderProps, setting, advanced, pageContext })=>{
               ${item}
             </option>`).join('')}
       </select>
-    </gp-form-dropdown>
-    ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-form-dropdown.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-form-dropdown.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    </div>
   `;
 };
 

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/form/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 Newsletter = dynamic(()=>Promise.resolve().then(function () { return require('./components/newsletter/Newsletter.js'); }), {
     loading: Loading.default

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

@@ -11,7 +11,7 @@ var Textarea = require('./Textarea.js');
 var FormDropdown = require('./FormDropdown.js');
 var FormCheckbox = require('./FormCheckbox.js');
 
-var contactFormSetting = {
+var index = {
     Newsletter: Newsletter.default,
     FormEmail: FormEmail.default,
     SubmitButton: SubmitButton.default,
@@ -22,4 +22,4 @@ var contactFormSetting = {
     FormCheckbox: FormCheckbox.default
 };
 
-exports.default = contactFormSetting;
+exports.default = index;

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -56,13 +55,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,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
             ...core.makeStyleResponsive('w', styleObject.content)
@@ -120,7 +117,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ref: ref,
         style: getStyles(),
         className: core.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__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
             children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
@@ -159,15 +156,16 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(Element, {
-                className: "gp-max-w-full [&_*]:gp-max-w-full",
+            isSection ? /*#__PURE__*/ jsxRuntime.jsx(Element, {
+                className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
                 style: {
                     ...wrapStyle,
+                    ...core.makeStyleResponsive('w', styleObject.wrapper),
                     ...core.makeStyleResponsive('pl', styleObject.padding),
                     ...core.makeStyleResponsive('pr', styleObject.padding)
                 },
                 children: element
-            })
+            }) : element
         ]
     });
 };

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

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

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

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

package/dist/cjs/grid/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 Section = dynamic(()=>Promise.resolve().then(function () { return require('./components/Section.js'); }), {
     loading: Loading.default

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

@@ -7,11 +7,11 @@ var Section = require('./Section.js');
 var Col = require('./Col.js');
 var Row = require('./Row.js');
 
-var gridSetting = {
+var index = {
     Root: Root.default,
     Section: Section.default,
     Col: Col.default,
     Row: Row.default
 };
 
-exports.default = gridSetting;
+exports.default = index;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/header/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 Header = dynamic(()=>Promise.resolve().then(function () { return require('./components/Header.js'); }), {
     loading: Loading.default

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

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

package/dist/cjs/heading/Heading.js

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

package/dist/cjs/heading/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 Heading = dynamic(()=>Promise.resolve().then(function () { return require('./Heading.js'); }), {
     loading: Loading.default

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

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

package/dist/cjs/helpers.js

@@ -41,7 +41,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`;
@@ -50,7 +50,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/cjs/icon/components/Icon.js

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

package/dist/cjs/icon/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 Icon = dynamic(()=>Promise.resolve().then(function () { return require('./components/Icon.js'); }), {
     loading: Loading.default

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

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

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

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

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

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

package/dist/cjs/icon-list/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 IconList = dynamic(()=>Promise.resolve().then(function () { return require('./components/IconList.js'); }), {
     loading: Loading.default

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

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

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var IconList = require('./IconList.js');
 var IconListItem = require('./IconListItem.js');
 
-var iconListSetting = {
+var index = {
     IconList: IconList.default,
     IconListItem: IconListItem.default
 };
 
-exports.default = iconListSetting;
+exports.default = index;

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

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

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

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

package/dist/cjs/icon-list-hoz/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 IconListHoz = dynamic(()=>Promise.resolve().then(function () { return require('./components/IconListHoz.js'); }), {
     loading: Loading.default

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var IconListHoz = require('./IconListHoz.js');
 var IconListItem = require('./IconListItem.js');
 
-var iconListHozSetting = {
+var index = {
     IconListHoz: IconListHoz.default,
     IconListItemHoz: IconListItem.default
 };
 
-exports.default = iconListHozSetting;
+exports.default = index;

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

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

package/dist/cjs/icon-list-v2/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 IconListV2 = dynamic(()=>Promise.resolve().then(function () { return require('./components/IconList.js'); }), {
     loading: Loading.default

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -6,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Head = require('next/head');
 var Img = require('./Img.js');
-var getSrcSet = require('../helpers/getSrcSet.js');
 
-const AdaptiveImage = ({ srcSet, priority, pictureClass, ...rest })=>{
+const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(Head, {
@@ -48,7 +46,7 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, ...rest })=>{
                         ...rest,
                         loading: priority ? 'eager' : 'lazy',
                         image: {
-                            src: srcSet?.desktop?.src || getSrcSet.imagePlaceholder
+                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
                         }
                     })
                 ]

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var getSrcSet = require('../helpers/getSrcSet.js');
+var helpers = require('./helpers.js');
 
-const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className, pictureClass, style, 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 = getSrcSet.getImageSrc(srcSet?.desktop, 'desktop') || fallBackImage;
     const srcTablet = (getSrcSet.getImageSrc(srcSet?.tablet, 'tablet') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'tablet')) || fallBackImage;
     const srcMobile = (getSrcSet.getImageSrc(srcSet?.mobile, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.tablet, 'mobile') ?? getSrcSet.getImageSrc(srcSet?.desktop, 'mobile')) || fallBackImage;
-    const imagePlaceholder = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
     return core.template`
   <picture style="border-radius: inherit" class="${core.cls(pictureClass)}">
   ${core.RenderIf(priority, core.template`
@@ -31,8 +31,8 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, core.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'] ?? helpers.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'] ?? helpers.createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
@@ -40,7 +40,7 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
         class="${core.cls(className, {
         gp_lazyload: enableLazyloadImage
     })}"
-        src="${enableLazyloadImage ? imagePlaceholder : srcDesktop}"
+        src="${enableLazyloadImage ? imagePlaceholder?.['desktop'] ?? helpers.createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : srcDesktop}"
         data-src="${srcDesktop}"
         width="100%"
         alt="${alt}"

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -9,13 +8,10 @@ var Link = require('../../link/components/Link.js');
 var AdaptiveImage = require('./AdaptiveImage.js');
 var NextImage = require('./NextImage.js');
 var helpers = require('./helpers.js');
-var NoDataImage = require('./NoDataImage.js');
-var React = require('react');
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -60,18 +56,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = React.useMemo(()=>{
-        if (setting?.disableNoDataState) return false;
-        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        return !setting?.srcSet?.desktop?.src;
-    }, [
-        currentDevice,
-        setting?.disableNoDataState,
-        setting?.srcSet?.desktop?.src,
-        setting?.srcSet?.mobile?.src,
-        setting?.srcSet?.tablet?.src
-    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -100,7 +84,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {}) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
                         className: core.cls(className, 'gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),

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

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

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

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