@gem-sdk/components 2.1.13-staging.3 → 2.1.13-staging.30

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,10 +394,11 @@ 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, makeStyle, getResponsiveValueByScreen } from '@gem-sdk/core';
+import { makeStyleResponsive, makeWidth, composeMemo, composeTypographyClassName, template, optionLayoutStyle, RenderIf, isLocalEnv, baseAssetURL, cls, getLayoutClasses, getAlignmentClasses, 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,15 +93,9 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
         <div
         option-name="{{option.name | escape}}"
         class="${cls('gp-flex variant-inside', {
-            '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'
-        }, {
+            ...getLayoutClasses(layout),
             ...getAlignClasses(layout, align)
-        })} {% if hiddenPresetOptions contains option.name %} gp-hidden {% endif %}"
+        })}"
 
         >
           {% assign showVariantClass = 'variant-display' %}
@@ -133,15 +127,7 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
           <div
               variant-option-name="{{option.name | escape}}"
               class="${cls({
-            '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'
+            ...getAlignmentClasses(align)
         }, 'gp-flex gp-w-full gp-flex-wrap gp-items-center variant-option-group')}"
               style="${{
             ...makeStyle({
@@ -324,6 +310,10 @@ 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}"
@@ -339,7 +329,10 @@ const ProductVariants = ({ builderProps, style, styles, setting, advanced })=>{
       "moneyFormat": {{shop.money_format | json | escape}},
       "productId": {{product.id | json | escape}},
       "productUrl": {{product.url | json | escape}},
-      "displayState":${JSON.stringify(advancedDisplay)}
+      "productHandle": {{product.handle | json | escape}},
+      "displayState": ${JSON.stringify(advancedDisplay)},
+      "totalVariantCombinations": {{total_combinations}},
+      "firstAvailableVariant": {{product.selected_or_first_available_variant | json | escape}}
     }
   '>
     {%- assign options = product.options_with_values -%}

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

@@ -152,6 +152,7 @@ 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,6 +14,15 @@ 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}}
@@ -69,37 +78,42 @@ const DropdownVariant = ({ variantGroup, blankText, swatchAutoWidth, swatchHeigh
           -%}
           ${isSoldOutMark ? `{%- if option_disabled == true -%}
                     {%- if value == selectedValue -%}
-                      <option disabled ${!hasPreSelected ? '' : 'selected'} option-data="{{option.name | escape}}"
+                      <option disabled ${!hasPreSelected ? '' : 'selected'} 
                         option-position="{{option.position}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                       </option>
                     {% else %}
-                        <option disabled option-data="{{option.name | escape}}"
-                        option-value="{{value | escape}}" value="{{value | escape}}" class="option-value-wrapper" key="{{value | escape}}">
+                        <option 
+                        disabled 
+                        ${composeSelectOptionAttrs}>
                           {{value}} 
                         </option>
                     {%- endif -%}
                 {%- else -%}
                 {%- if value == selectedValue -%}
-                  <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}}">
+                  <option ${!hasPreSelected ? '' : 'selected'}   
+                      option-position="{{option.position}}" 
+                      ${composeSelectOptionAttrs}>
                       {{value}}
                   </option>
                   {% else %}
-                  <option  option-data="{{option.name | escape}}"
-                      option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+                  <option
+                      ${composeSelectOptionAttrs}
+                      option-position="{{option.position}}">
                       {{value}} 
                   </option>
                   {%- endif -%}
                 {%- endif -%}` : `{%- if value == selectedValue -%}
-              <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}}">
+              <option ${!hasPreSelected ? '' : 'selected'} 
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{value}} 
               </option>
               {% else %}
-              <option  option-data="{{option.name | escape}}"
-                  option-value="{{value | escape}}" option-position="{{option.position}}" class="option-value-wrapper" value="{{value | escape}}" key="{{value | escape}}">
+              <option
+                  ${composeSelectOptionAttrs}
+                  option-position="{{option.position}}">
                   {{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 { getStaticLocale } from '../../../../helpers.js';
+import { renderBlankOption, renderCombineVariants } from './combine/index.js';
 
-const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, optionTextColor, optionRounded, optionShadow, optionHasShadow, optionBorder, optionTransform, hasPreSelected, optionTypo, combineWidth, combineHeight, soldOutStyle })=>{
+const DropdownVariant = ({ price: hasPrice, 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,7 +23,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     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(),
@@ -45,40 +44,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!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 -%}
-    `}
+  ${renderBlankOption(hasPreSelected, blankText)}
+  ${renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

package/dist/esm/product/components/ProductVariants/variants/combine/index.js

@@ -0,0 +1,44 @@
+import { getStaticLocale } from '../../../../../helpers.js';
+
+const renderCombineVariants = (isSoldOutMark, hasPreSelected, enablePrice)=>{
+    const hasPrice = enablePrice ? '- {{variantItem.price | money}}' : '';
+    const optionAttrs = 'origin-price="{{variantItem.price}}" value="{{variantItem.id}}" key="{{variantItem.id}}"';
+    return `${`{%- 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}} ${hasPrice} : ''} 
+                  </option>
+            {% else %}
+                  <option ${optionAttrs} disabled>
+                  {{variantItem.title}} ${hasPrice}
+                  </option>
+            {%- endif -%}
+          {%- else -%} 
+          {%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice} 
+              </option>
+          {% else %}
+              <option ${optionAttrs}>
+              {{variantItem.title}} ${hasPrice}
+              </option>
+          {%- endif -%}
+          {%- endif -%}` : `{%- if variantItem.id == variant.id -%}
+              <option origin-price="{{variantItem.price}}" ${hasPreSelected ? 'selected' : ''} value="{{variantItem.id}}" key="{{variantItem.id}}">
+              {{variantItem.title}} ${hasPrice}
+              </option>
+            {% else %}
+                <option ${optionAttrs}>
+                {{variantItem.title}} ${hasPrice}
+                </option>
+            {%- endif -%}`}
+     
+    {%- endfor -%}
+  `}`;
+};
+const renderBlankOption = (hasPreSelected, blankText)=>{
+    return !hasPreSelected ? `<option value="blank" selected>${blankText || getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+export { renderBlankOption, renderCombineVariants };

package/dist/esm/product/components/Sku.js

@@ -1,23 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { useCurrentVariant, useProduct } from '@gem-sdk/core';
+import { useCurrentVariant } from '@gem-sdk/core';
 import Text from '../../text/components/Text.js';
-import { checkDefaultVariant } from '../helpers/product.js';
 
 const ProductSku = ({ setting, builderProps, styles })=>{
     const currentVariant = useCurrentVariant();
-    const product = useProduct();
-    const isDefaultVariant = checkDefaultVariant(product);
-    const textContent = setting?.label && setting.label.trim().length ? `${setting.label}: ${currentVariant?.sku || ''}` : `${currentVariant?.sku || ''}`;
-    if (isDefaultVariant) {
-        return /*#__PURE__*/ jsx("div", {
-            "data-id": builderProps?.uid,
-            children: /*#__PURE__*/ jsx("p", {
-                className: "gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500",
-                children: "This product does not have a SKU"
-            })
-        });
-    }
-    if (!isDefaultVariant && !currentVariant?.sku) {
+    const textContent = setting?.label?.trim()?.length ? `${setting.label}: ${currentVariant?.sku ?? ''}` : `${currentVariant?.sku ?? ''}`;
+    if (!currentVariant?.sku) {
         return /*#__PURE__*/ jsx("div", {
             "data-id": builderProps?.uid,
             children: /*#__PURE__*/ jsx("p", {

package/dist/esm/product/setting/ProductBadge.js

@@ -81,6 +81,11 @@ const config = {
                                 }
                             ]
                         },
+                        {
+                            id: 'translate',
+                            type: 'input',
+                            default: 'displayContent'
+                        },
                         {
                             id: 'shape',
                             label: 'Shape',

package/dist/esm/product/setting/ProductDescription.js

@@ -64,6 +64,11 @@ const config = {
                     default: 'Show less',
                     hide: true
                 },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewMoreText,viewLessText'
+                },
                 {
                     id: 'enableViewMoreIcon',
                     label: 'Enable Icon',

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

@@ -1,20 +1,19 @@
 import { useInteraction, useEditorMode } from '@gem-sdk/core';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = useInteraction();
     const mode = useEditorMode();
     const changeOpenTabInteraction = (params)=>{
-        const { data, isRollback } = params || {};
-        if (data === undefined && isRollback === undefined) return;
+        const { data, isRollback, element, key } = params || {};
+        if (data === undefined && isRollback) return;
+        const newData = Number(data) + 1;
         if (isRollback) {
-            setActiveKey(previousTab);
-            setPreviousTab(activeTab);
+            setActiveKey(newData);
             return;
         }
-        setPreviousTab(activeTab);
-        setActiveKey(data + 1);
+        saveToElementInteractionData(element, key, String(activeKey));
+        setActiveKey(newData);
     };
     const dispatchEventTabActive = (index)=>{
         trigger({
@@ -35,11 +34,16 @@ 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);
+            changeOpenTabInteraction({
+                ...params,
+                element,
+                key: params?.uniqueStorageKey
+            });
         });
         return ()=>{
             removeListener?.();

package/dist/esm/third-party/components/AlsoBoughtCbb.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/AlsoBoughtCbb.js';
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+export { AlsoBoughtCbb as default };

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

@@ -0,0 +1,17 @@
+import { template, makeStyleResponsive } from '@gem-sdk/core';
+
+const AlsoBoughtCbb = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return template`
+    <div
+      class="${advanced?.cssClass}"
+      style="${{
+        ...makeStyleResponsive('ta', align)
+    }}"
+    >
+      <div class="gp-integration-also-bought__position" />
+    </div>
+  `;
+};
+
+export { AlsoBoughtCbb as default };

package/dist/esm/third-party/components/BfSizeChartSizeGuide.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/BfSizeChartSizeGuide.js';
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+export { BfSizeChartSizeGuide as default };

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

@@ -0,0 +1,8 @@
+import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
+
+const BfSizeChartSizeGuide = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
+};
+
+export { BfSizeChartSizeGuide as default };

package/dist/esm/third-party/components/EssentialAnnouncementBar.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EssentialAnnouncementBar.js';
+
+const EssentialAnnouncementBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Announcement Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialAnnouncementBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialAnnouncementBarContent, {})
+    });
+};
+
+export { EssentialAnnouncementBar as default };

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

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

package/dist/esm/third-party/components/EssentialCountdownTimerBar.js

@@ -0,0 +1,28 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { makeStyleResponsive } from '@gem-sdk/core';
+import ThirdPartyPreview from './ThirdPartyPreview.js';
+import AppConfig from '../configs/EssentialCountdownTimerBar.js';
+
+const EssentialCountdownTimerBarContent = ()=>{
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsx(ThirdPartyPreview, {
+                setting: {
+                    label: 'Essential Countdown Timer Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AppConfig.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialCountdownTimerBar = ({ setting })=>{
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            ...makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsx(EssentialCountdownTimerBarContent, {})
+    });
+};
+
+export { EssentialCountdownTimerBar as default };