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

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

@@ -156,6 +156,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/cjs/product/components/ProductVariants/variants/Dropdown.liquid.js

@@ -18,6 +18,15 @@ 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}}
@@ -73,37 +82,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/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 helpers = require('../../../../helpers.js');
+var index = require('./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 = core.makeStyleResponsive('w', core.makeWidth(combineWidth));
     const getCustomCSSActiveState = ()=>{
         return core.makeStyle({
@@ -27,7 +27,6 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
     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(),
@@ -49,40 +48,8 @@ const DropdownVariant = ({ price, blankText, optionTypography, optionBgColor, op
         'background-position': 'right 16px center'
     }}"
   >
-  ${!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 -%}
-    `}
+  ${index.renderBlankOption(hasPreSelected, blankText)}
+  ${index.renderCombineVariants(isSoldOutMark, hasPreSelected, hasPrice)}
   </select>
     `;
 };

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var helpers = require('../../../../../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 || helpers.getStaticLocale('ProductVariants', 'please_select')}</option>` : '';
+};
+
+exports.renderBlankOption = renderBlankOption;
+exports.renderCombineVariants = renderCombineVariants;

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

@@ -5,23 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var Text = require('../../text/components/Text.js');
-var product = require('../helpers/product.js');
 
 const ProductSku = ({ setting, builderProps, styles })=>{
     const currentVariant = core.useCurrentVariant();
-    const product$1 = core.useProduct();
-    const isDefaultVariant = product.checkDefaultVariant(product$1);
-    const textContent = setting?.label && setting.label.trim().length ? `${setting.label}: ${currentVariant?.sku || ''}` : `${currentVariant?.sku || ''}`;
-    if (isDefaultVariant) {
-        return /*#__PURE__*/ jsxRuntime.jsx("div", {
-            "data-id": builderProps?.uid,
-            children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
             "data-id": builderProps?.uid,
             children: /*#__PURE__*/ jsxRuntime.jsx("p", {

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

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

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

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

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

@@ -4,19 +4,18 @@ var core = require('@gem-sdk/core');
 var React = require('react');
 
 const useTabInteraction = ({ activeKey, setActiveKey, activeTab, refContainer, componentUid })=>{
-    const [previousTab, setPreviousTab] = React.useState(activeKey || 1);
-    const { trigger, onListener, interactionListenerLoaded } = core.useInteraction();
+    const { trigger, onListener, interactionListenerLoaded, saveToElementInteractionData, findElementIncludingSelf } = core.useInteraction();
     const mode = core.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({
@@ -37,11 +36,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/cjs/third-party/components/AlsoBoughtCbb.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var AlsoBoughtCbb$1 = require('../configs/AlsoBoughtCbb.js');
+
+const AlsoBoughtCbbContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Also Bought • CBB',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${AlsoBoughtCbb$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const AlsoBoughtCbb = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(AlsoBoughtCbbContent, {})
+    });
+};
+
+exports.default = AlsoBoughtCbb;

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@gem-sdk/core');
+
+const AlsoBoughtCbb = ({ setting, advanced })=>{
+    const { align } = setting ?? {};
+    return core.template`
+    <div
+      class="${advanced?.cssClass}"
+      style="${{
+        ...core.makeStyleResponsive('ta', align)
+    }}"
+    >
+      <div class="gp-integration-also-bought__position" />
+    </div>
+  `;
+};
+
+exports.default = AlsoBoughtCbb;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var BfSizeChartSizeGuide$1 = require('../configs/BfSizeChartSizeGuide.js');
+
+const BfSizeChartSizeGuideContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'BF Size Chart & Size Guide',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${BfSizeChartSizeGuide$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const BfSizeChartSizeGuide = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(BfSizeChartSizeGuideContent, {})
+    });
+};
+
+exports.default = BfSizeChartSizeGuide;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const BfSizeChartSizeGuide = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass);
+};
+
+exports.default = BfSizeChartSizeGuide;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var EssentialAnnouncementBar$1 = require('../configs/EssentialAnnouncementBar.js');
+
+const EssentialAnnouncementBarContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Essential Announcement Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EssentialAnnouncementBar$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialAnnouncementBar = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EssentialAnnouncementBarContent, {})
+    });
+};
+
+exports.default = EssentialAnnouncementBar;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const EssentialAnnouncementBar = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block `);
+};
+
+exports.default = EssentialAnnouncementBar;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var EssentialCountdownTimerBar$1 = require('../configs/EssentialCountdownTimerBar.js');
+
+const EssentialCountdownTimerBarContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Essential Countdown Timer Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EssentialCountdownTimerBar$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EssentialCountdownTimerBar = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EssentialCountdownTimerBarContent, {})
+    });
+};
+
+exports.default = EssentialCountdownTimerBar;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const EssentialCountdownTimerBar = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block `);
+};
+
+exports.default = EssentialCountdownTimerBar;

package/dist/cjs/third-party/components/EstimatedDeliveryDatePlus.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var EstimatedDeliveryDatePlus$1 = require('../configs/EstimatedDeliveryDatePlus.js');
+
+const EstimatedDeliveryDatePlusContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Estimated Delivery Date ‑ Plus',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EstimatedDeliveryDatePlus$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EstimatedDeliveryDatePlus = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EstimatedDeliveryDatePlusContent, {})
+    });
+};
+
+exports.default = EstimatedDeliveryDatePlus;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const EstimatedDeliveryDatePlus = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+};
+
+exports.default = EstimatedDeliveryDatePlus;

package/dist/cjs/third-party/components/GloColorSwatchvariantImage.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var GloColorSwatchvariantImage$1 = require('../configs/GloColorSwatchvariantImage.js');
+
+const GloColorSwatchvariantImageContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'GLO Color Swatch,Variant Image',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${GloColorSwatchvariantImage$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const GloColorSwatchvariantImage = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(GloColorSwatchvariantImageContent, {})
+    });
+};
+
+exports.default = GloColorSwatchvariantImage;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const GloColorSwatchvariantImage = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+};
+
+exports.default = GloColorSwatchvariantImage;

package/dist/cjs/third-party/components/HextomFreeShippingBar.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+var ThirdPartyPreview = require('./ThirdPartyPreview.js');
+var HextomFreeShippingBar$1 = require('../configs/HextomFreeShippingBar.js');
+
+const HextomFreeShippingBarContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'Hextom: Free Shipping Bar',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${HextomFreeShippingBar$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const HextomFreeShippingBar = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(HextomFreeShippingBarContent, {})
+    });
+};
+
+exports.default = HextomFreeShippingBar;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var thirdParty = require('../helpers/thirdParty.js');
+
+const HextomFreeShippingBar = ({ setting, advanced })=>{
+    const { align, appBlockId } = setting ?? {};
+    return thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''} !gp-block`);
+};
+
+exports.default = HextomFreeShippingBar;

package/dist/cjs/third-party/components/NotifyBackInStockPreOrder.js

@@ -9,7 +9,7 @@ var ThirdPartyPreview = require('./ThirdPartyPreview.js');
 const AppConfig = {
     id: 'notify-back-in-stockpreorder',
     label: 'Notify! Back in Stock|PreOrder',
-    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9216cd5dd17ab1a38de2641bae109159/icon/CNWHjbfSt4MDEAE=.png',
+    logoUrl: 'https://cdn.shopify.com/s/files/1/0643/0497/1949/files/Notify_Me_Logo.png?v=1736234550',
     tag: 'NotifyBackInStockPreOrder'
 };
 const NotifyBackInStockPreOrderContent = ()=>{