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

package/dist/esm/image-comparison/components/CompareImage.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 import { styleLazyPlaceholder } from './common/helpers.js';
 
 const CompareImage = (props)=>{
-    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, enableLazyLoadImage, pageContext, translate } = props;
+    const { handle = null, handleSize = 40, hover = false, leftImage, leftImageAlt = '', leftImageTitle = '', leftImageCss = {}, leftImageLabel = null, onSliderPositionChange, rightImage, rightImageAlt = '', rightImageTitle = '', rightImageCss = {}, rightImageLabel = null, sliderLineColor = '#ffffff', sliderLineWidth = 2, sliderPositionPercentage = 0.5, vertical = false, enableLabel = false, componentUid = '', styles, advanced, builderData, preload = false, pageContext, translate } = props;
     const horizontal = !vertical;
     const leftRatio = (leftImage?.width ?? 0) / (leftImage?.height ?? 1);
     const rightRatio = (rightImage?.width ?? 0) / (rightImage?.height ?? 1);
@@ -267,9 +267,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       ${NextImage({
         customAttrs: {
@@ -285,9 +283,7 @@ const CompareImage = (props)=>{
         style: {
             ...initStyles.rightImage,
             ...makeStyleResponsive('objf', styles?.imageScale)
-        },
-        enableLazyLoadImage,
-        pageContext
+        }
     })}
       <div id="image-comparison-slider-${componentUid}" style="${{
         ...initStyles.slider

package/dist/esm/index.js

@@ -307,7 +307,7 @@ export { index_liquid as liquidComponents };
 export { default as builderComponent } from './builder.js';
 import 'react/jsx-runtime';
 export { ELEMENT_Z_INDEX } from './common/const.js';
-export { getAllHrefFromString, getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceAllHrefFromString, replaceLinkData, youtubeShortsRegex } from './helpers.js';
+export { getDynamicSourceLocales, getInsertLinkData, getSettingPreloadData, getStaticLocale, isHexTransparent, isTransparentColor, isTransparentRGBA, replaceLinkData, youtubeShortsRegex } from './helpers.js';
 export { default as postPurchaseTextSetting } from './post-purchase/text/setting/index.js';
 export { default as PostPurchaseText } from './post-purchase/text/Text.js';
 export { convertSizeToWidth, transformHighlighTag, transformNumberTag } from './stock-counter/helpers.js';

package/dist/esm/product/components/Product.liquid.js

@@ -5,7 +5,6 @@ import { getStaticLocale, getSettingPreloadData } from '../../helpers.js';
 const PRODUCT_ID_LATEST = 'latest';
 const PREFIX_PRODUCT_ID = 'gid://shopify/Product/';
 const PREFIX_PRODUCT_VARIANT_ID = 'gid://shopify/ProductVariant/';
-const PREFIX_PRODUCT_OPTION_VALUE_ID = 'gid://shopify/ProductOptionValue/';
 const STATIC_PRODUCT_STATUS = 'static';
 const DYNAMIC_PRODUCT_STATUS = 'dynamic';
 const Product = ({ children, setting, styles, style, builderProps, rawChildren, advanced })=>{
@@ -21,8 +20,8 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
     const formatProductId = productSetting?.productId?.replace(PREFIX_PRODUCT_ID, '').toLowerCase() || PRODUCT_ID_LATEST;
     const formatVariantId = initVariantId?.replace(PREFIX_PRODUCT_VARIANT_ID, '') || '';
     const productStatus = productSetting?.productStatus ?? STATIC_PRODUCT_STATUS;
-    const preSelectedOptionIds = productSetting?.selectedOptions?.map((option)=>option?.valueBaseID?.replace(PREFIX_PRODUCT_OPTION_VALUE_ID, ''));
     return template /* liquid */ `
+    
     {%- assign gpBkProduct = product -%}
     ${productStatus !== DYNAMIC_PRODUCT_STATUS ? `
         {%- liquid
@@ -97,7 +96,7 @@ const Product = ({ children, setting, styles, style, builderProps, rawChildren,
       {%- endif -%}
       <gp-product data-uid="${builderProps?.uid}" data-id="${builderProps?.uid}" style="${{
         ...advancedStyle
-    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "preSelectedOptionIds": [${preSelectedOptionIds}], "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
+    }}" class="${advanced?.cssClass}" gp-context='{"productId": {{ product.id }}, "isSyncProduct": "${isSyncProduct}", "variantSelected": {{ variant | json | escape }}, "inventoryQuantity": {{ variant.inventory_quantity }}, "quantity": 1, "formId": "{{ product_form_id }}" }'
         gp-data='{"variantSelected": {{ variant | json | escape }}, "quantity": 1, "productUrl":{{ product.url | json | escape }}, "productHandle":{{ product.handle | json | escape }}, "collectionUrl": {{ collection.url | json | escape }}, "collectionHandle": {{ collection.handle | json | escape }}}'>
         <product-form class="product-form">
           {%- form 'product', product, id: product_form_id, class: 'form contents', data-type: 'add-to-cart-form', autocomplete: 'off'  -%}

package/dist/esm/product/components/ProductImagesV2/liquid/ProductFeaturedImageCarousel.liquid.js

@@ -9,7 +9,7 @@ import NextImage from '../../../../image/components/NextImage.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const ftAspectRatio = getAspectRatio(setting.ftShape);
     const getStyleFeaturedImageDisplay = ()=>{
         return getDisplayStyle((device)=>![
@@ -149,7 +149,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${className}`,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const renderNoImage = ()=>{
@@ -167,7 +167,7 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
             },
             priority: setting?.preload,
             className: `gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none`,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const getValueFromValueContainUnit = (value)=>{
@@ -394,11 +394,10 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyLoad
                 },
                 className: `gp-w-full featured-image-only !gp-rounded-none`,
                 customLazyload: true,
-                enableLazyLoadImage
+                enableLazyloadImage
             })}
           {%- endif -%}
-        `,
-            ftShapeProductImage: setting?.ftShape
+        `
         })}
     `;
     };

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryCarousel.liquid.js

@@ -6,7 +6,7 @@ import { convertSpacing, getDisplayStyle, getAspectRatio, getSrcImage } from '..
 import { getShapeByLayout, getSettingMinWidthForCarouselItem, getSettingWidthForCarouselItem, getMinHeightByPosition, getSliderPerShowConfig, getAllowDotConfig, getDotStyleConfig, getCarouselVerticalConfigByPosition, checkDisplayGalleryByWidth, getZoomDisplay } from '../common/productGallery.js';
 import { getStyleOfObject } from '../../../helpers/function.js';
 
-const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyloadImage, ...setting })=>{
     const getCarouselDisplay = ()=>{
         const isDisplayCarousel = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -86,7 +86,7 @@ const ProductGalleryCarousel = ({ builderPropUID, children, enableLazyLoadImage,
             customLazyload: true,
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 gp-cursor-pointer',
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     const aspectRatioToPaddingBottom = ()=>{

package/dist/esm/product/components/ProductImagesV2/liquid/ProductGalleryGrid.liquid.js

@@ -8,7 +8,7 @@ import Model3d from '../../../../image/components/Modal3d.liquid.js';
 import Video from '../../../../image/components/Video.liquid.js';
 import HTML5Embed from '../../../../video/components/HTML5Embed.liquid.js';
 
-const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyLoadImage, ...setting })=>{
+const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazyloadImage, ...setting })=>{
     const getGridDisplay = ()=>{
         const isDisplayGrid = (type, position, device)=>{
             const layout = getResponsiveValueByScreen(position, device);
@@ -97,7 +97,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
       ${setting?.galleryHoverEffect !== 'none' ? `<div class="${cls('zoom-element !gp-max-w-none', getZoomImageClass())}">
           ${NextImage({
@@ -111,7 +111,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             style: style,
             className: '!gp-rounded-none gp-w-full gp-h-full',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}
           </div>` : ''}
       ${setting?.galleryHoverEffect == 'zoom' && setting?.galleryZoomType == 'glasses' ? `
@@ -294,7 +294,7 @@ const ProductGalleryGrid = ({ builderPropUID, wrapperStyle, children, enableLazy
             },
             className: '!gp-rounded-none',
             customLazyload: false,
-            enableLazyLoadImage
+            enableLazyloadImage
         })}`;
     };
     return template`

package/dist/esm/product/components/ProductImagesV2/liquid/ProductImages.liquid.js

@@ -7,7 +7,7 @@ import { getSettingPreloadData } from '../../../../helpers.js';
 import { getShapeByLayout, sizeSettingDefaultForNewLayout } from '../common/productGallery.js';
 
 const ProductImages = (productImageProps)=>{
-    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyLoadImage } = productImageProps;
+    const { setting, styles, builderProps, style, advanced, rawChildren, pageContext, enableLazyloadImage } = productImageProps;
     const settings = {
         ...setting,
         ...styles
@@ -112,7 +112,7 @@ const ProductImages = (productImageProps)=>{
         builderPropUID: `gp-carousel-${builderProps?.uid}`,
         ...settings,
         children: renderProductBadge(),
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
         ${shouldSkipLiquidRenderForSingleImage(settings?.position, template`
             <div
@@ -128,7 +128,7 @@ const ProductImages = (productImageProps)=>{
               ${ProductGalleryCarousel({
         builderPropUID: `gp-gallery-${builderProps?.uid}`,
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
             </div>
             ${ProductGalleryGrid({
@@ -138,7 +138,7 @@ const ProductImages = (productImageProps)=>{
         },
         children: renderProductBadge(),
         ...settings,
-        enableLazyLoadImage
+        enableLazyloadImage
     })}
           `)}
       </div>

package/dist/esm/product/components/ProductVariants/index.liquid.js

@@ -1,4 +1,4 @@
-import { makeStyleResponsive, makeWidth, composeMemo, composeTypographyClassName, template, optionLayoutStyle, RenderIf, isLocalEnv, baseAssetURL, cls, getLayoutClasses, getAlignmentClasses, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
+import { makeStyleResponsive, makeWidth, composeMemo, composeTypographyClassName, template, optionLayoutStyle, RenderIf, isLocalEnv, baseAssetURL, cls, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
 import Text from '../../../text/components/Text.liquid.js';
 import VariantItem from './variants/index.liquid.js';
 import DropdownVariant from './variants/Dropdown.liquid.js';
@@ -93,9 +93,15 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${cls('gp-flex variant-inside', {
-            ...getLayoutClasses(layout),
+            'gp-flex-col': layout?.desktop === 'vertical',
+            'gp-flex-row': layout?.desktop === 'horizontal',
+            'tablet:gp-flex-row': layout?.tablet === 'horizontal',
+            'tablet:gp-flex-col': layout?.tablet === 'vertical',
+            'mobile:gp-flex-row': layout?.mobile === 'horizontal',
+            'mobile:gp-flex-col': layout?.mobile === 'vertical'
+        }, {
             ...getAlignClasses(layout, align)
-        })}"
+        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -127,7 +133,15 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${cls({
-            ...getAlignmentClasses(align)
+            'gp-justify-start': align?.desktop === 'left',
+            'gp-justify-center': align?.desktop === 'center',
+            'gp-justify-end': align?.desktop === 'right',
+            'tablet:gp-justify-start': align?.tablet === 'left',
+            'tablet:gp-justify-center': align?.tablet === 'center',
+            'tablet:gp-justify-end': align?.tablet === 'right',
+            'mobile:gp-justify-start': align?.mobile === 'left',
+            'mobile:gp-justify-center': align?.mobile === 'center',
+            'mobile:gp-justify-end': align?.mobile === 'right'
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...makeStyle({
@@ -310,10 +324,6 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
     `;
     };
     return template`
-  {%- assign total_combinations = 1 -%}
-  {%- for option in product.options_with_values -%}
-    {%- assign total_combinations = total_combinations | times: option.values.size -%}
-  {%- endfor -%}
   <gp-product-variants
     data-id="${uid}"
     class="${advanced?.cssClass}"
@@ -329,10 +339,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "productHandle": {{product.handle | json | escape}},
-      "displayState": ${JSON.stringify(advancedDisplay)},
-      "totalVariantCombinations": {{total_combinations}},
-      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
+      "displayState":${JSON.stringify(advancedDisplay)}
     }
   '>
     {%- assign options = product.options_with_values -%}

package/dist/esm/product/components/ProductVariants/variants/Base.liquid.js

@@ -152,7 +152,6 @@ const BaseVariant = ({ optionTransform, optionTypography, optionBgColor, optionT
     option-data="{{option.name | escape}}"
     option-value="{{value | escape}}"
     option-position="{{option.position}}"
-    data-gp-option-available="{{value.available}}"
     option-type="${type || 'rectangle_list'}"
     data-disabled="{%- if option_disabled == true -%} disabled  {%- endif -%}"
     data-hidden='true'

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

@@ -14,15 +14,6 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
     };
     const appendTypoClass = composeTypographyClassName(optionTypo, optionTypography);
     const appendTypoStyle = 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 template /* liquid */ `
     <select
     aria-label={{option.name | escape}}
@@ -78,42 +69,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/esm/product/components/ProductVariants/variants/DropdownGroup.liquid.js

@@ -1,7 +1,7 @@
 import { makeStyleResponsive, makeWidth, composeTypographyClassName, composeTypographyStyle, template, cls, handleConvertClassColor, getGlobalColorStateClass, getStyleShadowState, makeStyle, getGlobalColorStateStyle, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertBorderColor, composeRadius, getSingleColorVariable } from '@gem-sdk/core';
-import { renderBlankOption, renderCombineVariants } from './combine/index.js';
+import { getStaticLocale } from '../../../../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 = makeStyleResponsive('w', makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return makeStyle({
@@ -23,6 +23,7 @@ const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionB
     option-data="{{option.name}}"
     option-type="{{optionType}}"
     class="${cls('gp-truncate gp-bg-auto gp-pl-4 gp-pr-6 gp-outline-none dropdown-option-item', handleConvertClassColor(optionBorder), appendTypoClass, getGlobalColorStateClass('text', optionTextColor), getGlobalColorStateClass('bg', optionBgColor), 'gp-outline-none', 'gp-shadow-none')}"
+ 
     style="${{
         ...getStyleShadowState(optionShadow, 'box-shadow', optionHasShadow),
         ...getCustomCSSActiveState(),
@@ -44,8 +45,40 @@ const DropdownVariant = ({ price: hasPrice, blankText, optionTypography, optionB
         'background-position': 'right 16px center'
     }}"
   >
-  ${renderBlankOption(hasPreSelected, blankText)}
-  ${renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
+  ${!hasPreSelected ? `<option value="blank" selected>${blankText || 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/esm/tab/hooks/useTabInteraction.js

@@ -1,19 +1,20 @@
 import { useInteraction, useEditorMode } from '@gem-sdk/core';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
+    const [previousTab, setPreviousTab] = useState(activeKey || 1);
+    const { trigger, onListener, interactionListenerLoaded } = useInteraction();
     const mode = 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({
@@ -34,16 +35,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/esm/text/components/Text.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makeGlobalSize, useEditorMode, composeTypographyClassName, composeTypographyStyle, cls, makeStyle, makeStyleResponsive, getGlobalColorClass, getGlobalColorStateClass, getStyleShadowState, getStyleShadow, makeLineClamp, getGlobalColorStyle, getGlobalColorStateStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getCornerStyle } from '@gem-sdk/core';
 import { forwardRef, useMemo } from 'react';
-import { getDisplayText } from './common.js';
 
 const Text = /*#__PURE__*/ forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
     const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
     const composeGlobalSize = makeGlobalSize(setting?.globalSize);
+    console.log('Text: ', text);
     const mode = useEditorMode();
     const getPlaceHolderWhenContentNone = ()=>{
         let classList = '';
@@ -86,7 +86,7 @@ const Text = /*#__PURE__*/ forwardRef(({ styles, builderAttrs, style, setting, a
                         overflow: 'hidden'
                     },
                     dangerouslySetInnerHTML: {
-                        __html: getDisplayText(text?.toString() ?? '<p><br></p>')
+                        __html: styles?.typo?.attrs?.transform === 'capitalize' ? text?.toString().toLocaleLowerCase() : text?.toString() || '<p><br></p>'
                     }
                 })
             }),

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

@@ -1,6 +1,5 @@
 import { makeGlobalSize, composeTypographyClassName, composeTypographyStyle, template, makeStyle, makeStyleResponsive, cls, getGlobalColorClass, getGlobalColorStateClass, getStyleShadowState, getStyleShadow, makeLineClamp, getGlobalColorStyle, getGlobalColorStateStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getCornerStyle } from '@gem-sdk/core';
 import { replaceLinkData, getDynamicSourceLocales } from '../../helpers.js';
-import { getDisplayText } from './common.js';
 
 const Text = ({ styles, builderAttrs, style, setting, advanced, builderProps, className, isText, pageContext, elementAttrs, ...props })=>{
     const { text, htmlTag: Element = 'div', tagWidth, excludeFlex, isForceValue } = setting ?? {};
@@ -28,6 +27,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
         });
@@ -35,7 +35,7 @@ const Text = ({ styles, builderAttrs, style, setting, advanced, builderProps, cl
             displayText = renderText;
         }
     } else {
-        displayText = getDisplayText(renderText ?? '');
+        displayText = styles?.typo?.attrs?.transform === 'capitalize' ? renderText?.toString().toLocaleLowerCase() : renderText;
     }
     return template`
   {% assign locationOrigin = request.origin | append: routes.root_url | split: '/' | join: '/' %}

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

@@ -2,7 +2,7 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const RechargeSubscriptions = ({ setting, advanced })=>{
     const { align, appBlockId } = setting ?? {};
-    return getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+    return getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
 };
 
 export { RechargeSubscriptions as default };

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

@@ -50,11 +50,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/esm/video/components/HTML5Embed.js

@@ -47,14 +47,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ 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__*/ 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__*/ jsx("button", {

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

@@ -3,7 +3,6 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../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;
@@ -20,9 +19,7 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            },
-            enableLazyLoadImage,
-            pageContext
+            }
         })}
     ${RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -71,14 +68,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
+           class="${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/esm/video/components/LiteYouTubeEmbed.liquid.js

@@ -3,7 +3,7 @@ import NextImage from '../../image/components/NextImage.liquid.js';
 import { getSettingPreloadData } from '../../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;
@@ -38,7 +38,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...makeStyleResponsive('bgi', {
-            desktop: preload || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -48,9 +48,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"