@gem-sdk/components 2.1.27-staging.5 → 2.1.28

package/dist/cjs/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -18,15 +18,6 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = core.composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = core.composeTypographyStyle(optionTypo, optionTypography);
-    const composeSelectOptionAttrs = `
-    option-data="{{option.name | escape}}"
-    option-value="{{value | escape}}" 
-    data-gp-option-value-id="{{value.id}}" 
-    data-gp-option-available="{{value.available}}"
-    value="{{value | escape}}" 
-    class="option-value-wrapper" 
-    key="{{value | escape}}"
-  `;
     return core.template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -82,42 +73,37 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
                         option-position="{{option.position}}"
-                        ${composeSelectOptionAttrs}>
+                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
                           {{value}} 
                       </option>
                     {% else %}
-                        <option 
-                        disabled 
-                        ${composeSelectOptionAttrs}>
+                        <option disabled option-data="{{option.name | escape}}"
+                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <option ${!hasPreSelected ? '' : 'selected'}   
-                      option-position="{{option.position}}" 
-                      ${composeSelectOptionAttrs}>
+                  <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                       {{value}}
                   </option>
                   {% else %}
-                  <option
-                      ${composeSelectOptionAttrs}
-                      option-position="{{option.position}}">
+                  <option  option-data="{{option.name | escape}}"
+                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <option ${!hasPreSelected ? '' : 'selected'} 
-                  ${composeSelectOptionAttrs}
-                  option-position="{{option.position}}">
+              <option ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                   {{value}} 
               </option>
               {% else %}
-              <option
-                  ${composeSelectOptionAttrs}
-                  option-position="{{option.position}}">
+              <option  option-data="{{option.name | escape}}"
+                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
                   {{value}} 
               </option>
               {%- endif -%}`}

package/dist/cjs/product/components/ProductVariants/variants/DropdownGroup.liquid.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
-var index = require('./combine/index.js');
+var helpers = require('../../../../helpers.js');
 
-const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
     const swatchWidthResponsive = core.makeStyleResponsive('w', core.makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return core.makeStyle({
@@ -27,6 +27,7 @@ const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionB
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${core.cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', core.handleConvertClassColor(optionBorder), appendTypoClass, core.getGlobalColorStateClass('text', optionTextColor), core.getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
+ 
     style="${{
         ...core.getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -48,8 +49,40 @@ const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionB
         'background-position': 'right 16px center'
     }}"
   >
-  ${index.renderBlankOption(hasPreSelected, blankText)}
-  ${index.renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
+  ${!hasPreSelected ? `<option value="blank" selected>${blankText || helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : ''}
+  ${`{%- for variantItem in variants -%}
+      ${isSoldOutMark ? `{%- if variantItem.available == false -%} 
+              {%- if variantItem.id == variant.id -%}
+                    <option origin-price="{{variantItem.price}}" disabled ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
+                    </option>
+              {% else %}
+                    <option origin-price="{{variantItem.price}}" disabled value="{{variantItem.id}}" key="{{variantItem.id}}">
+                    {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
+                    </option>
+              {%- endif -%}
+            {%- else -%} 
+            {%- if variantItem.id == variant.id -%}
+                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''} 
+                </option>
+            {% else %}
+                <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
+                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
+                </option>
+            {%- endif -%}
+            {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+                <option origin-price="{{variantItem.price}}" ${!hasPreSelected ? '' : 'selected'} value="{{variantItem.id}}" key="{{variantItem.id}}">
+                {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
+                </option>
+              {% else %}
+                  <option origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}">
+                  {{variantItem.title}} ${price ? '- {{variantItem.price | money}}' : ''}
+                  </option>
+              {%- endif -%}`}
+       
+      {%- endfor -%}
+    `}
   </select>
     `;
 };

package/dist/cjs/tab/hooks/useTabInteraction.js

@@ -4,18 +4,19 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
+    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
+    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
     const mode = core.useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback, element, key } = params || {};
-        if (data === undefined && isRollback) return;
-        const newData = Number(data) + 1;
+        const { data, isRollback } = params || {};
+        if (data === undefined && isRollback === undefined) return;
         if (isRollback) {
-            setActiveKey(newData);
+            setActiveKey(previousTab);
+            setPreviousTab(activeTab);
             return;
         }
-        saveToElementInteractionData(element, key, String(activeKey));
-        setActiveKey(newData);
+        setPreviousTab(activeTab);
+        setActiveKey(data + 1);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -36,16 +37,11 @@ const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, c
             dispatchEventTabActive(activeTab - 1);
         });
         const selector = `[data-id="${componentUid}"]`;
-        const element = findElementIncludingSelf(document, selector);
         const removeListener = onListener({
             event: 'gp:change-open-tab',
             selector
         }, (params)=>{
-            changeOpenTabInteraction({
-                ...params,
-                element,
-                key: params?.uniqueStorageKey
-            });
+            changeOpenTabInteraction(params);
         });
         return ()=>{
             removeListener?.();

package/dist/cjs/text/components/Text.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
-var common = require('./common.js');
 
 const Text = /*#__PURE__*/ React.forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
     const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
     const composeGlobalSize = core.makeGlobalSize(setting?.globalSize);
+    console.log('Text: ', text);
     const mode = core.useEditorMode();
     const getPlaceHolderWhenContentNone = ()=>{
         let classList = '';
@@ -90,7 +90,7 @@ const Text = /*#__PURE__*/ React.forwardRef(({ styles, builderAttrs, style, sett
                         overflow: 'hidden'
                     },
                     dangerouslySetInnerHTML: {
-                        __html: common.getDisplayText(text?.toString() ?? '<p><br></p>')
+                        __html: styles?.typo?.attrs?.transform === 'capitalize' ? text?.toString().toLocaleLowerCase() : text?.toString() || '<p><br></p>'
                     }
                 })
             }),

package/dist/cjs/text/components/Text.liquid.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
-var common = require('./common.js');
 
 const Text = ({ styles, builderAttrs, style, setting, advanced, builderProps, className, isText, pageContext, elementAttrs, ...props })=>{
     const { text, htmlTag: Element = 'div', tagWidth, excludeFlex, isForceValue } = setting ?? {};
@@ -32,6 +31,7 @@ const Text = ({ styles, builderAttrs, style, setting, advanced, builderProps, cl
             uid: builderProps?.uid,
             settingId: setting?.translate,
             pageContext,
+            isCapitalize: styles?.typo?.attrs?.transform === 'capitalize',
             translate: setting.translate,
             isReplaceLocationOrigin: isViewliveHeadingOrTextComponent
         });
@@ -39,7 +39,7 @@ const Text = ({ styles, builderAttrs, style, setting, advanced, builderProps, cl
             displayText = renderText;
         }
     } else {
-        displayText = common.getDisplayText(renderText ?? '');
+        displayText = styles?.typo?.attrs?.transform === 'capitalize' ? renderText?.toString().toLocaleLowerCase() : renderText;
     }
     return core.template`
   {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}

package/dist/cjs/third-party/components/RechargeSubscriptions.liquid.js

@@ -6,7 +6,7 @@ var thirdParty = require('../helpers/thirdParty.js');
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
 };
 
 exports.default = RechargeSubscriptions;

package/dist/cjs/third-party/setting/RechargeSubscriptions.js

@@ -54,11 +54,8 @@ const config = {
                     options: [
                         {
                             label: 'Subscription Widget',
-                            value: 'subscription-widget'
-                        },
-                        {
-                            label: 'Subscription Widget 2.0',
-                            value: 'subscription-widget-v2'
+                            value: 'subscription-widget',
+                            maxOption: 1
                         }
                     ],
                     default: 'subscription-widget'

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

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

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

@@ -7,7 +7,6 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
-    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -24,9 +23,7 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            },
-            enableLazyLoadImage,
-            pageContext
+            }
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -75,14 +72,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-contain"
+            class="gp-w-full gp-h-full gp-object-cover"
             alt="Video Thumbnail"
           ></img>
           <button

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

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
+    const { style, lazy, preload } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -42,7 +42,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...core.makeStyleResponsive('bgi', {
-            desktop: preload || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -52,9 +52,7 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true,
-        enableLazyLoadImage,
-        pageContext
+        isDisableAspectStyle: true
     })}
         <button
           type="button"

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

@@ -25,8 +25,7 @@ const ArticleImage = ({ className, setting = {}, styles = {}, advanced, builderP
             setting: {
                 ...setting,
                 alt: image.alt,
-                image,
-                disableNoDataState: true
+                image
             },
             styles: styles,
             advanced: advanced

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

@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.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 HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
@@ -39,6 +39,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             } else if (data.videoType === 'html5') {
                 delete data.video;
             }
+            if (data.type !== 'image') {
+                delete data.image;
+            }
         }
         return background;
     };
@@ -127,7 +130,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         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)
     };
-    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
+    const enableLazyLoad = !setting?.preload && enableLazyloadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -177,7 +180,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -220,7 +223,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 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
+                enableLazyloadImage
             }));
         }).join('') : ''}
             </div></div>

package/dist/esm/carousel/components/Carousel.liquid.js

@@ -9,7 +9,7 @@ const DEVICES = [
     'tablet',
     'desktop'
 ];
-const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ftShapeProductImage, ...props })=>{
+const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ...props })=>{
     const setting = mappingNavigationCarousel(props.setting);
     const styleHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(styles?.sizeSetting));
     const styleWidth = makeStyleWithDefault('w', getWidthByShapeGlobalSize(styles?.sizeSetting, true), {
@@ -108,8 +108,7 @@ const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId
         setting,
         styles,
         moveToIdx,
-        isHiddenArrowWhenDisabled,
-        ftShapeProductImage
+        isHiddenArrowWhenDisabled
     }).replaceAll("'", ''')}' style="${{
         ...makeStyleResponsive('jc', styles?.align),
         ...rootStyles

package/dist/esm/common/const.js

@@ -1,5 +1,5 @@
 const ELEMENT_Z_INDEX = {
-    STICKY: 1000,
+    STICKY: 100000,
     DIALOG: 100001,
     CART_DRAWER: 100002,
     CART_DRAWER_CONFIRM_MODAL: 100003

package/dist/esm/helpers.js

@@ -32,7 +32,7 @@ const isHexTransparent = (hex)=>{
     return Boolean(a);
 };
 const youtubeShortsRegex = /^(?:https?:\/\/)?(?:www\.)?youtube\.com\/shorts\/([^"&?/\s]{11})$/i;
-const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, defaultVal = '', translate, isReplaceLocationOrigin, isReplaceInventoryQuantity })=>{
+const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, isCapitalize, defaultVal = '', translate, isReplaceLocationOrigin, isReplaceInventoryQuantity })=>{
     const hasLiquidInValue = new RegExp(/\{\{.*?\}\}|\{%.*?%\}/).test(val?.toString() ?? '');
     const translateLimit = pageContext?.isTranslateWithLocale ? 1000 : 5000;
     if (!translate || !val?.toString().trim() || val.toString().length > translateLimit || hasLiquidInValue || pageContext?.isPreviewing) return val ?? defaultVal;
@@ -47,6 +47,9 @@ const getDynamicSourceLocales = ({ val, uid, settingId, isLiquid, pageContext, d
     if (isReplaceInventoryQuantity) {
         locale += ` | replace: '<$quantity$>', inventory_quantity | replace: '&lt;$quantity$&gt;', inventory_quantity`;
     }
+    if (isCapitalize) {
+        locale = `${locale} | downcase`;
+    }
     if (isLiquid) return locale;
     return `{{ ${locale} }}`;
 };
@@ -121,28 +124,5 @@ const replaceLinkData = (text, isTranslate)=>{
     }
     return text;
 };
-const getAllHrefFromString = (htmlString)=>{
-    if (!htmlString) return [];
-    const regex = /href="([^"]*)"/g;
-    const hrefs = [];
-    let match;
-    while((match = regex.exec(htmlString)) !== null){
-        match[1] && hrefs.push(match[1]);
-    }
-    return hrefs;
-};
-const replaceAllHrefFromString = (htmlString, hrefs)=>{
-    if (!htmlString) return '';
-    const regex = /href="([^"]*)"/g;
-    let match;
-    let i = 0;
-    while((match = regex.exec(htmlString)) !== null){
-        if (match[1]) {
-            htmlString = htmlString.replace(match[1], hrefs[i] ?? '');
-            i++;
-        }
-    }
-    return htmlString;
-};
 
-export { getAllHrefFromString, getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceAllHrefFromString, replaceLinkData, youtubeShortsRegex };
+export { getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceLinkData, youtubeShortsRegex };

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

@@ -2,7 +2,7 @@ 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, imagePlaceholder, enableLazyLoadImage = true, pageContext, ...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;
@@ -27,17 +27,16 @@ const AdaptiveImage = ({ srcSet, priority, alt, aspectRatio, layout, className,
     }}"
       />
     `, template`
-      ${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?.height ?? 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?.height ?? 0) : 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?.height ?? 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?.height ?? 0) : srcTablet}" />` : ''}
       <img
         ${{
         ...props
     }}
         class="${cls(className, {
-        gp_lazyload: enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: enableLazyloadImage
     })}"
-        src="${enableLazyLoadImage ? imagePlaceholder?.['desktop'] ?? createBlurDataURL(srcSet?.desktop?.width ?? 0, srcSet?.desktop?.height ?? 0) : 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/Image.js

@@ -1,16 +1,13 @@
 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 = {
@@ -55,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,
@@ -94,15 +79,10 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsx(NoDataImage, {
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight
-                        }
-                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsx(AdaptiveImage, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
-                        className: cls(className, 'gp-inline-block gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
+                        className: cls(className, 'gp-w-full gp-max-w-full', handleConvertClassColor(styles?.borderImg)),
                         alt: setting.alt,
                         style: {
                             ...imageWidth,

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

@@ -3,7 +3,7 @@ import AdaptiveImage from './AdaptiveImage.liquid.js';
 import NextImage from './NextImage.liquid.js';
 import { getInsertLinkData } from '../../helpers.js';
 
-const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyLoadImage = true, pageContext })=>{
+const Image = ({ styles, className, setting, builderAttrs, builderProps, style, advanced, enableLazyloadImage = true })=>{
     const { imageLink, isNotLazyload } = setting ?? {};
     const { shape } = styles ?? {};
     const { Wrap: WrapLink, urlData } = getInsertLinkData('div', imageLink);
@@ -30,7 +30,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     }}
      data-id="${builderProps?.uid}"
     role="presentation"
-    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass, `force-publish-${new Date().getTime()}`)}"
+    class="${cls('gp-group/image', builderProps?.uid, advanced?.cssClass)}"
     style="${{
         ...style,
         ...makeStyleResponsive('ta', styles?.align)
@@ -72,8 +72,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         aspectRatio: getAspectRatioGlobalSize(styles?.shape),
         layout: styles?.objectFit,
         priority: setting?.priority,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     }) : NextImage({
         ...setting?.image,
         priority: setting?.priority,
@@ -102,8 +101,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             layout: styles?.objectFit
         },
         isNotLazyload,
-        enableLazyLoadImage,
-        pageContext
+        enableLazyloadImage
     })}
       </${WrapLink}>
   </div>`;

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

@@ -3,7 +3,7 @@ import { getNewBackupFileKey, getImageSrc, getSrcSet } from '../helpers/getSrcSe
 import { DEVICES } from '../../product/components/ProductVariants/index.js';
 import { createBlurDataURL } from './helpers.js';
 
-const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyLoadImage = true, pageContext, srcset, sizes, ...props })=>{
+const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f08-f6665179f02f/-/format/auto/-/quality/lighter/placeholder-1.png', srcIsLiquidCode, alt = 'Alt image', width = 2237, height = 1678, backupFileKey, backupFilePath, storage, style, priority, vw, className, base64, baseSrc, isDisableAspectStyle, isDisableObjectFit, customAttrs, customLazyload, isNotLazyload, enableLazyloadImage = true, srcset, sizes, ...props })=>{
     const { aspectRatio, layout, qualityPercent, qualityType } = setting ?? {};
     const newBackupFilekey = backupFileKey ? getNewBackupFileKey(backupFileKey ?? '', src) : '';
     const srcImage = srcIsLiquidCode ? baseSrc : getImageSrc({
@@ -93,13 +93,12 @@ const NextImage = ({ setting, src = 'https://ucarecdn.com/465c7cbb-f087-4d1d-8f0
       ${customAttrs}
       draggable="false"
       class="${cls(className, {
-        gp_lazyload: !customLazyload && enableLazyLoadImage,
-        gp_force_load: pageContext?.isOptimizePlan
+        gp_lazyload: !customLazyload && enableLazyloadImage
     })}"
       ${{
         'data-src': srcImage,
         'data-srcset': srcSetImg,
-        src: enableLazyLoadImage ? imagePlaceholder : srcImage,
+        src: enableLazyloadImage ? imagePlaceholder : srcImage,
         width,
         height,
         alt,