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

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

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

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

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

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

@@ -89,7 +89,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/cjs/accordion/hooks/useMountTransition.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -11,22 +10,13 @@ var core = require('@gem-sdk/core');
 const ArticleDate = ({ setting, builderProps, styles })=>{
     const { dateFormat } = setting ?? {};
     const article = core.useArticleStore((s)=>s.article);
-    const { timezone } = core.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 = React.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__*/ jsxRuntime.jsx("div", {
         id: `shopify-text-element-${builderProps?.uid}`,

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

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

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

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

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

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

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -30,13 +29,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/cjs/article/components/ArticleImage.liquid.js

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -22,13 +21,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: {
@@ -46,13 +39,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/cjs/article/components/ArticleList.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ var ArticleCategory = require('./ArticleCategory.js');
 var ArticleDate = require('./ArticleDate.js');
 var ArticleReadMore = require('./ArticleReadMore.js');
 
-var articleListSetting = {
+var index = {
     ArticleList: ArticleList.default,
     ArticleTitle: ArticleTitle.default,
     ArticleExcerpt: ArticleExcerpt.default,
@@ -28,4 +28,4 @@ var articleListSetting = {
     ArticleReadMore: ArticleReadMore.default
 };
 
-exports.default = articleListSetting;
+exports.default = index;

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -82,31 +81,25 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }
         const youtubeUrl = dataVideo.data.video ?? '';
         const videoId = common$1.getYoutubeVideoId(youtubeUrl);
+        if (!common$1.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 && common$1.youtubeVideoRegex.test(youtubeUrl)) {
-            return /*#__PURE__*/ jsxRuntime.jsx(LiteYouTubeEmbed.default, {
-                id: videoId,
-                isHeroBanner: true,
-                autoplay: true,
-                title: "",
-                controls: false,
-                params: params,
-                adNetwork: false,
-                noCookie: true,
-                muted: true,
-                lazy: dataVideo.data.lazyLoad ?? true,
-                style: {
-                    ...core.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__*/ jsxRuntime.jsx("img", {
-            src: helpers.imageNoVideoPlaceholder,
-            alt: "no-video",
-            className: "gp-w-full gp-h-full gp-object-cover"
+        return /*#__PURE__*/ jsxRuntime.jsx(LiteYouTubeEmbed.default, {
+            id: videoId,
+            isHeroBanner: true,
+            autoplay: true,
+            title: "",
+            controls: false,
+            params: params,
+            adNetwork: false,
+            noCookie: true,
+            muted: true,
+            lazy: dataVideo.data.lazyLoad ?? true,
+            style: {
+                ...core.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,
@@ -206,6 +199,11 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         }), [
         getEnableBgImageByDevice
     ]);
+    const imagePlaceholder = {
+        desktop: helpers.createBlurDataURL(background?.desktop?.image?.width ?? 0, background?.desktop?.image?.height ?? 0),
+        tablet: helpers.createBlurDataURL(background?.tablet?.image?.width ?? background?.desktop?.image?.width ?? 0, background?.tablet?.image?.height ?? background?.desktop?.image?.width ?? 0),
+        mobile: helpers.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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             preload && /*#__PURE__*/ jsxRuntime.jsxs(Head, {
@@ -263,6 +261,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     radiusType: 'custom'
                                 }
                             }),
+                            ...background ? {
+                                ...core.getStyleBgColor(background)
+                            } : {},
+                            ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                             ...core.getStyleShadow({
                                 value: shadowBg,
                                 styleAppliedFor: 'box-shadow',
@@ -296,7 +298,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                             tablet: bgiEnableByDevice['tablet'] ? getBgImageByDeviceOnly('tablet') : 'url()',
                                             mobile: bgiEnableByDevice['mobile'] ? getBgImageByDeviceOnly('mobile') : 'url()'
                                         }),
-                                        ...core.getGradientBgrStyleByDevice(background, bgiEnableByDevice),
                                         position: attachment === 'fixed' ? 'fixed' : 'absolute',
                                         '--duration': `${hoverEffectDuration ?? 0}s`,
                                         '--scale': hoverEffectScale ?? 1,
@@ -357,7 +358,8 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                                     ...styleWidth,
                                     '--op': 0,
                                     '--z': -1
-                                }
+                                },
+                                imagePlaceholder: imagePlaceholder
                             })
                         ]
                     }),