@gem-sdk/components 2.1.27-staging.2 → 2.1.27-staging.20

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

@@ -14,7 +14,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
     const { articleSetting, numberOfArticle } = setting ?? {};
     const { articleIds, articlePickType } = articleSetting ?? {};
     const articlesQuery = {
-        first: articleIds?.length ?? 50,
+        first: articleIds?.length || 50,
         where: {
             baseIDIn: [
                 ...articleSetting?.articleIds ?? []

package/dist/cjs/builder.js

@@ -123,6 +123,7 @@ var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatc
 var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
+var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -503,7 +504,8 @@ var builder = {
     GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
     BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
     AlsoBoughtCbb: AlsoBoughtCbb.default,
-    HextomFreeShippingBar: HextomFreeShippingBar.default
+    HextomFreeShippingBar: HextomFreeShippingBar.default,
+    EcoboostifyShoppableReelUgc: EcoboostifyShoppableReelUgc.default
 };
 
 exports.default = builder;

package/dist/cjs/button/components/Button.liquid.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@gem-sdk/core');
 var helpers = require('../../helpers.js');
 
-const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId })=>{
+const Button = ({ className, builderProps, customAttrs, pageContext, setting = {}, styles = {}, style, wrapClassName = '', advanced, nodePrice, dataId, isForceValue = false })=>{
     const { align, size, backgroundColor, textColor, roundedBtn, iconSpacing, globalSize } = styles;
     const { label, iconSvg, btnLink, htmlType, disabled, loading, iconAlign, iconVisible, translate, disabledLoading = true } = setting;
     const [wrapStyle, restStyle] = core.splitStyle([
@@ -70,7 +70,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       color: ${core.getSingleColorVariable(styles?.textColor?.hover)};
     }
   `;
-    const labelValDisplay = helpers.getDynamicSourceLocales({
+    const labelValDisplay = isForceValue ? label : helpers.getDynamicSourceLocales({
         val: label,
         uid: builderProps?.uidTranslate ?? builderProps?.uid,
         settingId: translate ?? 'label',
@@ -161,7 +161,7 @@ const Button = ({ className, builderProps, customAttrs, pageContext, setting = {
       >${iconSvg}</span>`)}
       <span
         data-gp-text
-        class="${`gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
+        class="${`gp-content-product-button gp-button-text-only gp-break-words group-data-[state=loading]:gp-invisible [&_p]:gp-whitespace-pre-line gp-z-1 gp-h-full gp-flex gp-items-center gp-overflow-hidden ${nodePrice ? appendTypoClass : ''}
         ${styles?.typo?.attrs?.italic ? '[&:not(:has(p))]:gp-pr-[0.2em] [&_p]:[&:has(p)]:gp-pr-[0.2em]' : ''}`}"
         style="${{
         ...nodePrice && appendTypoStyle,

package/dist/cjs/collection/components/CollectionPaginator.liquid.js

@@ -7,7 +7,7 @@ var helpers = require('../../helpers.js');
 
 const CollectionPaginator = ({ setting, builderProps, pageContext })=>{
     const { layout, previousText, nextText, typographyPaginator, normalColor, activeColor, align, typo, translate } = setting ?? {};
-    const numberOfProductOfProductList = pageContext?.numberOfProductOfProductList || 0;
+    const numberOfProductOfProductList = setting?.numberOfProducts || pageContext?.numberOfProductOfProductList || 0;
     const limit = numberOfProductOfProductList > 0 ? numberOfProductOfProductList : 4;
     const appendTypoClass = core.composeTypographyClassName(typo, typographyPaginator);
     const appendTypoStyle = core.composeTypographyStyle(typo, typographyPaginator);

package/dist/cjs/collection/setting/CollectionPaginator.js

@@ -158,6 +158,11 @@ const config = {
                             tooltip: 'Align right'
                         }
                     ]
+                },
+                {
+                    id: 'numberOfProducts',
+                    type: 'input:number',
+                    default: 0
                 }
             ]
         }

package/dist/cjs/helpers.js

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

package/dist/cjs/image/components/AdaptiveImage.js

@@ -7,6 +7,7 @@ var Head = require('next/head');
 var Img = require('./Img.js');
 
 const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
+    const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs(Head, {
@@ -36,17 +37,17 @@ const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...re
                 children: [
                     !!srcSet?.mobile?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
                         media: "(max-width: 767px)",
-                        srcSet: srcSet.mobile.src
+                        srcSet: srcSet.mobile.src || fallBackImage
                     }),
                     !!srcSet?.tablet?.src && /*#__PURE__*/ jsxRuntime.jsx("source", {
                         media: "(max-width: 1024px)",
-                        srcSet: srcSet?.tablet?.src
+                        srcSet: srcSet?.tablet?.src || fallBackImage
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(Img.default, {
                         ...rest,
                         loading: priority ? 'eager' : 'lazy',
                         image: {
-                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop']
+                            src: srcSet?.desktop?.src || imagePlaceholder?.['desktop'] || fallBackImage
                         }
                     })
                 ]

package/dist/cjs/image/components/Image.js

@@ -8,13 +8,11 @@ var Link = require('../../link/components/Link.js');
 var AdaptiveImage = require('./AdaptiveImage.js');
 var NextImage = require('./NextImage.js');
 var helpers = require('./helpers.js');
-var NoDataImage = require('./NoDataImage.js');
-var React = require('react');
 
 const Image = ({ styles, className, setting, builderAttrs, builderProps, style, children, onClick, onLoad })=>{
     const { image, imageLink, srcSet, isNotLazyload } = setting ?? {};
     const { customAspectRadio } = styles ?? {};
-    const currentDevice = core.useCurrentDevice();
+    core.useCurrentDevice();
     const { shape } = styles ?? {};
     const WrapLink = imageLink?.link ? Link.default : 'div';
     const opacity = {
@@ -59,18 +57,6 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
             custom: customAspectRadio
         })
     };
-    const isShowNoDataState = React.useMemo(()=>{
-        if (setting?.disableNoDataState) return false;
-        if (currentDevice === 'mobile') return !setting?.srcSet?.mobile?.src && !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        if (currentDevice === 'tablet') return !setting?.srcSet?.tablet?.src && !setting?.srcSet?.desktop?.src;
-        return !setting?.srcSet?.desktop?.src;
-    }, [
-        currentDevice,
-        setting?.disableNoDataState,
-        setting?.srcSet?.desktop?.src,
-        setting?.srcSet?.mobile?.src,
-        setting?.srcSet?.tablet?.src
-    ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         ...builderAttrs,
         "data-id": builderProps?.uid,
@@ -98,12 +84,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
                     ...core.makeStyleResponsive('jc', styles?.align)
                 },
                 children: [
-                    isShowNoDataState ? /*#__PURE__*/ jsxRuntime.jsx(NoDataImage.default, {
-                        style: {
-                            ...imageWidth,
-                            ...imageHeight
-                        }
-                    }) : setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
+                    setting?.isAdaptive ? /*#__PURE__*/ jsxRuntime.jsx(AdaptiveImage.default, {
                         srcSet: setting.srcSet,
                         pictureClass: "gp-contents",
                         className: core.cls(className, 'gp-inline-block gp-w-full gp-max-w-full', core.handleConvertClassColor(styles?.borderImg)),

package/dist/cjs/image/helpers/getSrcSet.js

@@ -30,7 +30,8 @@ const getSrcSetLiquid = (liquid, storage)=>{
     return `{{ '${liquid}' | asset_img_url: '768x' }} 768w, {{ '${liquid}' | asset_img_url: '1024x' }} 1024w, {{ '${liquid}' | asset_img_url: 'master' }} 1440w`;
 };
 const getSrcSetLink = (link)=>{
-    return `${link} 768w,${link} 1024w,${link} 1440w`;
+    return link; // Since image src didn't change in size so this line of code is pointless
+// return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
     let src = image?.backupFilePath;

package/dist/cjs/index.js

@@ -219,6 +219,7 @@ var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatc
 var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
 var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
 var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
+var EcoboostifyShoppableReelUgc = require('./third-party/components/EcoboostifyShoppableReelUgc.js');
 var index$x = require('./third-party-instant/setting/index.js');
 var InstantJudgemeReviews = require('./third-party-instant/components/InstantJudgemeReviews.js');
 var InstantLooxReviews = require('./third-party-instant/components/InstantLooxReviews.js');
@@ -534,6 +535,7 @@ exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage.default;
 exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
+exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;
@@ -622,6 +624,7 @@ exports.nextComponent = next.default;
 exports.liquidComponents = index_liquid;
 exports.builderComponent = builder.default;
 exports.ELEMENT_Z_INDEX = _const.ELEMENT_Z_INDEX;
+exports.getAllHrefFromString = helpers.getAllHrefFromString;
 exports.getDynamicSourceLocales = helpers.getDynamicSourceLocales;
 exports.getInsertLinkData = helpers.getInsertLinkData;
 exports.getSettingPreloadData = helpers.getSettingPreloadData;
@@ -629,6 +632,7 @@ exports.getStaticLocale = helpers.getStaticLocale;
 exports.isHexTransparent = helpers.isHexTransparent;
 exports.isTransparentColor = helpers.isTransparentColor;
 exports.isTransparentRGBA = helpers.isTransparentRGBA;
+exports.replaceAllHrefFromString = helpers.replaceAllHrefFromString;
 exports.replaceLinkData = helpers.replaceLinkData;
 exports.youtubeShortsRegex = helpers.youtubeShortsRegex;
 exports.postPurchaseTextSetting = index$M.default;

package/dist/cjs/index.liquid.js

@@ -174,6 +174,7 @@ var GloColorSwatchvariantImage_liquid = require('./third-party/components/GloCol
 var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartSizeGuide.liquid.js');
 var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
 var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.liquid.js');
+var EcoboostifyShoppableReelUgc_liquid = require('./third-party/components/EcoboostifyShoppableReelUgc.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
 var Sticky_liquid = require('./sticky/components/Sticky.liquid.js');
@@ -370,6 +371,7 @@ exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage_liquid.default;
 exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
 exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
 exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
+exports.EcoboostifyShoppableReelUgc = EcoboostifyShoppableReelUgc_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

package/dist/cjs/post-purchase/product/components/variants/Dropdown.js

@@ -69,7 +69,7 @@ const DropdownVariant = ({ option, optionPosition, optionNumber, variantGroup, v
                     children: /*#__PURE__*/ jsxRuntime.jsx("span", {
                         className: "gp-max-w-full",
                         children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                            className: "gp-block gp-overflow-hidden",
+                            className: "gp-block gp-overflow-hidden gp-truncate",
                             children: label
                         })
                     })

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

@@ -218,7 +218,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     ]);
     const isInStock = core.useCurrentVariantInStock();
     const isDisable = !isInStock || createCartLoading || addToCartLoading;
-    const label = !isInStock ? setting?.outOfStockLabel : setting?.label;
+    const label = !isInStock ? !currentVariant ? 'Unavailable' : setting?.outOfStockLabel : setting?.label;
     if (!isInStock && isCustomOutOfStock) {
         buttonStyles.backgroundColor = {
             normal: oosBackground

package/dist/cjs/product/components/ProductButton.liquid.js

@@ -188,6 +188,22 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
         pageContext,
         translate: setting?.translate
     });
+    const labelUnavailableTranslate = helpers.getDynamicSourceLocales({
+        val: 'Unavailable',
+        uid: builderProps?.uid,
+        settingId: 'unavailableLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'unavailableLabel' : undefined
+    });
+    const labelOutOfStockTranslate = helpers.getDynamicSourceLocales({
+        val: setting?.outOfStockLabel,
+        uid: builderProps?.uid,
+        settingId: 'outOfStockLabel',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate ? 'outOfStockLabel' : undefined
+    });
     return core.template /* liquid */ `
    {%- liquid
       assign inventory_quantity = variant.inventory_quantity | default: 0
@@ -195,6 +211,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
     <gp-product-button
       class="gp-product-button"
       gp-data-wrapper="true"
+      label-out-of-Stock="${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}"
+      label-unavailable="${pageContext?.isPreviewing ? labelUnavailableTranslate : `{{${labelUnavailableTranslate}}}`}"
       gp-data='${JSON.stringify({
         setting: {
             actionEffect: setting?.actionEffect,
@@ -272,8 +290,7 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             'gp-data-hidden': `{% if variant.available %}true{% endif %}`
         },
         setting: {
-            label: setting?.outOfStockLabel,
-            translate: setting?.translate ? 'outOfStockLabel' : undefined,
+            label: `${pageContext?.isPreviewing ? labelOutOfStockTranslate : `{{${labelOutOfStockTranslate}}}`}`,
             htmlType: 'button',
             iconAlign: iconAlign,
             iconSvg: iconSvg,
@@ -292,7 +309,8 @@ const ProductButton = ({ setting, builderProps, builderAttrs, style, styles, adv
             }
         },
         pageContext,
-        nodePrice: composeNodePrice()
+        nodePrice: composeNodePrice(),
+        isForceValue: true
     })}
     </gp-product-button>
     ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-button.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-product-button.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/cjs/product/components/ProductList.liquid.js

@@ -237,6 +237,7 @@ const ProductList = ({ setting, builderProps, styles, className, children, advan
             endif
             assign arrayRelatedExclude = relatedExclude | split: ","
             assign idSelectedList = ''
+            assign relatedListProduct = null
             for collection in collections
             assign collectionId = collection.id
             assign isInCollection = false
@@ -251,20 +252,15 @@ const ProductList = ({ setting, builderProps, styles, className, children, advan
                      break
                     else
                       assign idSelectedList = idSelectedList | append: "," | append: product.id
+                      assign productSelected = product | sort
+                      assign relatedListProduct = relatedListProduct | concat: productSelected
                     endif
                   endfor
                   endif
                 endunless
               endfor
             endfor
-            for item in allProductsPaginated
-            assign handle = item.handle
-            assign productF = item | sort
-            if idSelectedList contains item.id
-              assign products = products | concat: productF
-            endif
-          endfor
-            assign products = products | uniq
+            assign products = relatedListProduct | uniq
           when 'vendor'
             assign vendorAssignProduct = assignProduct.vendor
             assign productFilter = allProductsPaginated | where: 'vendor', vendorAssignProduct

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

@@ -18,9 +18,17 @@ const ProductTag = ({ setting, styles, builderProps, ...passProps })=>{
     const mode = core.useEditorMode();
     const product = core.useProduct();
     const currentVariant = core.useCurrentVariant();
+    const { quantity, hasUpdatePrice } = core.useQuantity();
+    const quantityProduct = React.useMemo(()=>{
+        return hasUpdatePrice && customContent?.unit !== 'percentage' ? quantity || 1 : 1;
+    }, [
+        hasUpdatePrice,
+        customContent?.unit,
+        quantity
+    ]);
     const price = currentVariant?.price ?? 0;
     const salePrice = currentVariant?.salePrice ?? 0;
-    const priceSave = salePrice - price;
+    const priceSave = (salePrice - price) * quantityProduct;
     const moneyFormatted = core.useFormatMoney(priceSave < 0 ? 0 : priceSave, setting?.moneyWithCurrentFormat || false);
     const customDisplayWithUnit = React.useMemo(()=>{
         if (!salePrice && salePrice !== 0 || !price && price !== 0) return `${customContent?.unit === 'percentage' ? '0%' : moneyFormatted}`;

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

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

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

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

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var helpers = require('../../helpers.js');
+
+const getDisplayText = (renderText, isTextCapitalize = false)=>{
+    let displayText = renderText;
+    if (isTextCapitalize) {
+        const links = helpers.getAllHrefFromString(renderText ?? '');
+        displayText = helpers.replaceAllHrefFromString(renderText?.toString().toLocaleLowerCase(), links);
+    }
+    return displayText;
+};
+
+exports.getDisplayText = getDisplayText;

package/dist/cjs/third-party/components/EcoboostifyShoppableReelUgc.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 EcoboostifyShoppableReelUgc$1 = require('../configs/EcoboostifyShoppableReelUgc.js');
+
+const EcoboostifyShoppableReelUgcContent = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "gp-p-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ThirdPartyPreview.default, {
+                setting: {
+                    label: 'EcoBoostify Shoppable Reel UGC',
+                    iconSvg: `<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="${EcoboostifyShoppableReelUgc$1.default.logoUrl}">`
+                }
+            })
+        })
+    });
+};
+const EcoboostifyShoppableReelUgc = ({ setting })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        style: {
+            ...core.makeStyleResponsive('ta', setting?.align)
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(EcoboostifyShoppableReelUgcContent, {})
+    });
+};
+
+exports.default = EcoboostifyShoppableReelUgc;

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

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

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

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

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

@@ -2,11 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var thirdParty = require('../helpers/thirdParty.js');
 var core = require('@gem-sdk/core');
 
 const Releasit = ({ setting, advanced })=>{
-    const { align } = setting ?? {};
-    return core.template`
+    const { align, version, appBlockId } = setting ?? {};
+    console.log('version', version);
+    return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, `${advanced?.cssClass ?? ''}!gp-block`) : core.template`
     <div
       class="${advanced?.cssClass}"
       style="${{

package/dist/cjs/third-party/configs/BoldProductOptions.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var BoldProductOptionsConfig = {
     id: 'bold-product-options',
-    label: 'Bold Product Options',
-    logoUrl: 'https://ucarecdn.com/cae13b55-18b6-416a-a447-c18211d78cfe/-/format/auto/-/preview/3000x3000/-/quality/lighter/Bold%20Product%20Options.png',
+    label: 'SC Product Options',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/9a0bf1159f79c6ab0660ec422f350445/icon/CP2Uwo_GuYIDEAE=.png',
     tag: 'BoldProductOptions'
 };
 

package/dist/cjs/third-party/configs/EcoboostifyShoppableReelUgc.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'ecoboostify-shoppable-reel-ugc',
+    label: 'EcoBoostify Shoppable Reel UGC',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/cdbdfc53291cf8d2908e72deae77f94e/icon/CJWKq4vxxIkDEAE=.png',
+    tag: 'EcoboostifyShoppableReelUgc'
+};
+
+exports.default = AppConfig;

package/dist/cjs/third-party/next.js

@@ -458,7 +458,12 @@ const HextomFreeShippingBar = dynamic(()=>Promise.resolve().then(function () { r
     ssr: false,
     loading: Loading.default
 });
+const EcoboostifyShoppableReelUgc = dynamic(()=>Promise.resolve().then(function () { return require('./components/EcoboostifyShoppableReelUgc.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
 var thirdParty = {
+    EcoboostifyShoppableReelUgc,
     EstimatedDeliveryDatePlus,
     OkendoReviewsLoyalty,
     EssentialAnnouncementBar,