@gem-sdk/components 2.5.3-staging.1 → 2.5.3-staging.10

package/dist/cjs/carousel/components/CarouselItem.js

@@ -71,7 +71,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

package/dist/cjs/carousel/components/CarouselItem.liquid.js

@@ -82,7 +82,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/cjs/grid/components/Row.js

@@ -13,6 +13,7 @@ var ChildrenDroppable = require('./ChildrenDroppable.js');
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
     const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
     const mode = core.useEditorMode();
+    const pageType = core.usePageType();
     //=== START lazyload section ====
     const [cacheHeightOutViewport, setCacheHeightOutViewport] = React.useState(500);
     const [ref, inView] = useInView.useInView({
@@ -29,6 +30,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             }
         }
     });
+    const isDisplaySection = React.useMemo(()=>{
+        return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
+    }, [
+        inView,
+        mode,
+        pageType
+    ]);
     //=== END lazyload section ====
     const childHasChildren = React.useMemo(()=>{
         return builderProps?.builderData?.childrens?.length;
@@ -42,8 +50,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
-    const pageType = core.usePageType();
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = helpers.createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -62,7 +69,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
-            ...core.makeStyleResponsive('w', styleObject.content)
+            ...core.makeStyleResponsive('w', styleObject.content),
+            ...core.makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -116,10 +124,10 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: core.cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
-        children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: isDisplaySection ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
             children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
                 if (/*#__PURE__*/ React.isValidElement(el)) return /*#__PURE__*/ React.createElement(el.type, {
                     ...el.props,

package/dist/cjs/grid/components/Row.liquid.js

@@ -8,7 +8,7 @@ var helpers = require('../../helpers.js');
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = helpers$1.createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = core.splitStyle([
         'pos',
@@ -31,6 +31,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...core.makeStyleResponsive('pc', horizontalAlign),
         ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
         ...core.makeStyleResponsive('w', styleObject.content),
+        ...core.makeStyleResponsive('h', height),
         ...core.getStyleBackgroundByDevice(background, {
             liquid: true
         }),

package/dist/cjs/grid/setting/Row.js

@@ -254,6 +254,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space around'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Auto-resize <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -408,6 +429,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

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

@@ -21,6 +21,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? core.makeStyleResponsive('w', core.getWidthByShapeGlobalSize(shape)) : core.makeStyleResponsive('w', core.makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = core.getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -61,7 +62,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: core.cls('gp-group/image gp-relative', builderProps?.uid),
+        className: core.cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...core.makeStyleResponsive('ta', styles?.align)

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

@@ -34,7 +34,7 @@ const getSrcSetLink = (link)=>{
 // return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
-    let src = image?.backupFilePath;
+    let src = image?.backupFilePath ?? image?.src;
     if (image?.backupFileKey) {
         const newBackupFileKey = getNewBackupFileKey(image.backupFileKey, image?.src ?? '');
         if (image.storage === 'THEME' || !image.storage) {
@@ -53,7 +53,7 @@ const getImageSrc = (image, currentDevice)=>{
                 break;
         }
     }
-    return src ?? image?.src;
+    return src;
 };
 const regexReplaceEndDot = /\.(?=[^.]*$)/;
 const replaceBackupFileKeyFileContent = (backupFileKey)=>{

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

@@ -148,6 +148,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

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

@@ -123,7 +123,12 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
         return core.template`
     {% assign src = featureMedia.src %}
     ${hasHoverEffect && setting.hoverEffect == 'other' ? `
-      {% assign otherImage = product.media[${setting.otherImage}] %}
+      {% assign media_length = product.media | size %}
+      {% assign other_image_index = ${setting.otherImage} | plus: 0 %}
+      {% if other_image_index >= media_length %}
+        {% assign other_image_index = media_length | minus: 1 %}
+      {% endif %}
+      {% assign otherImage = product.media[other_image_index] %}
       {% assign src = otherImage.src %}
       {% if otherImage.media_type != 'image' %}
         {% assign src = otherImage.preview_image.src %}

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

@@ -150,7 +150,8 @@ const config = {
                     default: {
                         type: 'paragraph-1',
                         attrs: {
-                            color: 'text-1'
+                            color: 'text-1',
+                            isAlwaysLoadBold: false
                         }
                     },
                     ignoreReRender: true

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

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

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

@@ -8,13 +8,17 @@ var thirdParty = require('../helpers/thirdParty.js');
 
 const Trustoo = ({ setting, advanced })=>{
     const { widgetType, align, version, appBlockId } = setting ?? {};
-    return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
-    <div
-      class="${advanced?.cssClass}"
-      style="${{
-        ...core.makeStyleResponsive('ta', align)
-    }}"
-    >
+    const widgetTypeMap = {
+        'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
+        'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
+        'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
+        'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
+        'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
+        'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
+    };
+    const renderOldVersionTrustoo = ()=>{
+        return version === 'v2' ? thirdParty.getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : core.template`
+    <div>
       {% if '${widgetType}' == 'starRatingInList' %}
         {% if request.page_type != 'product' %}
           <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -37,6 +41,19 @@ const Trustoo = ({ setting, advanced })=>{
       {% endif %}
     </div>
   `;
+    };
+    return !!version ? renderOldVersionTrustoo() : core.template`
+  <div
+    class="${advanced?.cssClass}"
+    style="${{
+        ...core.makeStyleResponsive('ta', align)
+    }}"
+  >
+    ${widgetType && widgetTypeMap?.[widgetType]}
+    <script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
+    <link ${helpers.getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
+  </div>
+  `;
 };
 
 exports.default = Trustoo;

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

@@ -65,76 +65,11 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/sealapps-product-review',
                     appName: Trustoo.default.label
                 },
-                {
-                    id: 'version',
-                    label: 'Choose version',
-                    type: 'select',
-                    default: 'v1',
-                    options: [
-                        {
-                            label: 'V1',
-                            value: 'v1'
-                        },
-                        {
-                            label: 'V2',
-                            value: 'v2'
-                        }
-                    ]
-                },
                 {
                     id: 'widgetType',
                     label: 'Choose widget',
                     type: 'select',
-                    default: 'starRating',
-                    options: [
-                        {
-                            label: 'Star Rating',
-                            value: 'starRating',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ],
-                            flowTag: [
-                                'Product'
-                            ],
-                            condition: 'or'
-                        },
-                        {
-                            label: 'Star Rating List',
-                            value: 'starRatingInList',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ],
-                            flowTag: [
-                                'ProductList'
-                            ],
-                            condition: 'or'
-                        },
-                        {
-                            label: 'Reviews',
-                            value: 'reviews',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'widgetTypeV2',
-                    label: 'Choose widget',
-                    type: 'select',
-                    default: 'barrage-carousel',
+                    default: 'star-rating-widget',
                     options: [
                         {
                             label: 'Testimonials',
@@ -150,33 +85,11 @@ const config = {
                         },
                         {
                             label: 'Review Widget',
-                            value: 'review-widget',
-                            hideOnPage: [
-                                'ARTICLE',
-                                'BLOG',
-                                'COLLECTION',
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC',
-                                'STATIC'
-                            ]
+                            value: 'review-widget'
                         },
                         {
                             label: 'Star Rating Widget',
-                            value: 'star-rating-widget',
-                            hideOnPage: [
-                                'ARTICLE',
-                                'BLOG',
-                                'COLLECTION',
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC',
-                                'STATIC'
-                            ]
+                            value: 'star-rating-widget'
                         },
                         {
                             label: 'Text Carousel',
@@ -226,15 +139,6 @@ const config = {
                 id: 'install'
             }
         },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose version'
-            },
-            setting: {
-                id: 'version'
-            }
-        },
         {
             type: 'control',
             label: {
@@ -242,18 +146,7 @@ const config = {
             },
             setting: {
                 id: 'widgetType'
-            },
-            condition: 'version === "v1"'
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose widget'
-            },
-            setting: {
-                id: 'widgetTypeV2'
-            },
-            condition: 'version === "v2"'
+            }
         },
         {
             type: 'control',

package/dist/esm/carousel/components/CarouselItem.js

@@ -67,7 +67,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
         onClick: onClickItem,
         "aria-hidden": true,
         children: /*#__PURE__*/ jsx("div", {
-            className: "gp-w-full",
+            className: "gp-w-full gp-h-full",
             style: {
                 ...itemShadowStyle
             },

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

@@ -78,7 +78,7 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
       data-index="${index}"
     >
       <div
-        class="gp-w-full",
+        class="gp-w-full gp-h-full",
         style="${{
         ...itemShadowStyle
     }}"

package/dist/esm/grid/components/Row.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo, Children, isValidElement, createElement } from 'react';
-import { useEditorMode, useCurrentDevice, isEmptyChildren, usePageType, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
+import { useEditorMode, usePageType, useCurrentDevice, isEmptyChildren, splitStyle, cls, makeStyleResponsive, composeGridLayout, makeStyle, getStyleBackgroundByDevice, getGradientBgrStyleByDevice, getResponsiveValue } from '@gem-sdk/core';
 import Head from 'next/head';
 import { useInView } from '../../intersection-observer/useInView.js';
 import { createStyleObject } from './helpers.js';
@@ -9,6 +9,7 @@ import ChildrenDroppable from './ChildrenDroppable.js';
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, advanced, maxWidthWithEmptyChildren, isNotFullWidth, ...props })=>{
     const { isSection, as: Element = 'div', lazy, layout, horizontalAlign, verticalAlign, responsive, inlineAlignment, blockAlignment } = setting ?? {};
     const mode = useEditorMode();
+    const pageType = usePageType();
     //=== START lazyload section ====
     const [cacheHeightOutViewport, setCacheHeightOutViewport] = useState(500);
     const [ref, inView] = useInView({
@@ -25,6 +26,13 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             }
         }
     });
+    const isDisplaySection = useMemo(()=>{
+        return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
+    }, [
+        inView,
+        mode,
+        pageType
+    ]);
     //=== END lazyload section ====
     const childHasChildren = useMemo(()=>{
         return builderProps?.builderData?.childrens?.length;
@@ -38,8 +46,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         childHasChildren,
         children
     ]);
-    const { fullWidth, width, verticalGutter, background, columnGap } = styles ?? {};
-    const pageType = usePageType();
+    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
     const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
         desktop: false,
         tablet: false,
@@ -58,7 +65,8 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
             ...isSection ? restStyle : style,
             ...makeStyleResponsive('cg', verticalGutter),
             ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
-            ...makeStyleResponsive('w', styleObject.content)
+            ...makeStyleResponsive('w', styleObject.content),
+            ...makeStyleResponsive('h', height)
         };
         if (pageType === 'POST_PURCHASE') {
             result = {
@@ -112,10 +120,10 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         "data-id": builderProps?.uidInteraction ?? builderProps?.uid,
         ref: ref,
         style: getStyles(),
-        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out ', {
+        className: cls(className, builderProps?.uid, 'gp-mb-0 gp-grid gp-mx-auto gp-max-w-full gp-gap-y-0 gp-transition-colors gp-duration-200 gp-ease-in-out gp-grid-rows-[1fr]', {
             'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
-        children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
+        children: isDisplaySection ? /*#__PURE__*/ jsx(Fragment, {
             children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
                 if (/*#__PURE__*/ isValidElement(el)) return /*#__PURE__*/ createElement(el.type, {
                     ...el.props,

package/dist/esm/grid/components/Row.liquid.js

@@ -4,7 +4,7 @@ import { getSettingPreloadData } from '../../helpers.js';
 
 const Row = ({ className, children, setting, builderAttrs, builderProps, styles, style, rawChildren, advanced, ...props })=>{
     const { isSection, horizontalAlign, verticalAlign, order, layout, responsive } = setting ?? {};
-    const { fullWidth, width, verticalGutter, background } = styles ?? {};
+    const { fullWidth, width, verticalGutter, background, height } = styles ?? {};
     const styleObject = createStyleObject(width, fullWidth);
     const [wrapStyle, restStyle] = splitStyle([
         'pos',
@@ -27,6 +27,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         ...makeStyleResponsive('pc', horizontalAlign),
         ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
         ...makeStyleResponsive('w', styleObject.content),
+        ...makeStyleResponsive('h', height),
         ...getStyleBackgroundByDevice(background, {
             liquid: true
         }),

package/dist/esm/grid/setting/Row.js

@@ -250,6 +250,27 @@ const config = {
                         }
                     }
                 },
+                {
+                    id: 'height',
+                    type: 'segment',
+                    devices: {
+                        desktop: {
+                            default: 'auto'
+                        }
+                    },
+                    options: [
+                        {
+                            label: 'Full',
+                            value: '100%',
+                            tooltip: 'Stretch to fill <br> vertical space around'
+                        },
+                        {
+                            label: 'Fit',
+                            value: 'auto',
+                            tooltip: 'Auto-resize <br> based on content'
+                        }
+                    ]
+                },
                 {
                     id: 'verticalGutter',
                     type: 'input:unit-spacing',
@@ -404,6 +425,16 @@ const config = {
                     },
                     layout: 'horizontal'
                 },
+                {
+                    type: 'control',
+                    setting: {
+                        id: 'height'
+                    },
+                    label: {
+                        en: 'Height'
+                    },
+                    layout: 'horizontal'
+                },
                 {
                     type: 'control',
                     label: {

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
+import { makeStyleResponsive, getWidthByShapeGlobalSize, makeWidth, getHeightByShapeGlobalSize, getFlexGrowClassByShapeGlobalSize, cls, getStyleShadowState, handleConvertClassColor, getBorderStyle, getBorderRadiusStyle, getStyleShadow, getAspectRatioGlobalSize, getGlobalColorStateClass, getGlobalColorStateStyle, makeStyleState, getCornerCSSFromGlobal } from '@gem-sdk/core';
 import Link from '../../link/components/Link.js';
 import AdaptiveImage from './AdaptiveImage.js';
 import NextImage from './NextImage.js';
@@ -17,6 +17,7 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
     };
     const imageWidth = shape ? makeStyleResponsive('w', getWidthByShapeGlobalSize(shape)) : makeStyleResponsive('w', makeWidth(styles?.width, styles?.fullWidth));
     const imageHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(shape));
+    const imageFlexGrowClass = getFlexGrowClassByShapeGlobalSize(shape);
     const overwriteDefaultRadius = (cornerRadius)=>{
         const radius = {
             ...cornerRadius
@@ -57,7 +58,9 @@ const Image = ({ styles, className, setting, builderAttrs, builderProps, style,
         "data-id": builderProps?.uid,
         onClick: onClick,
         role: "presentation",
-        className: cls('gp-group/image gp-relative', builderProps?.uid),
+        className: cls('gp-group/image gp-relative', builderProps?.uid, {
+            ...imageFlexGrowClass
+        }),
         style: {
             ...style,
             ...makeStyleResponsive('ta', styles?.align)

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

@@ -32,7 +32,7 @@ const getSrcSetLink = (link)=>{
 // return `${link} 768w,${link} 1024w,${link} 1440w`;
 };
 const getImageSrc = (image, currentDevice)=>{
-    let src = image?.backupFilePath;
+    let src = image?.backupFilePath ?? image?.src;
     if (image?.backupFileKey) {
         const newBackupFileKey = getNewBackupFileKey(image.backupFileKey, image?.src ?? '');
         if (image.storage === 'THEME' || !image.storage) {
@@ -51,7 +51,7 @@ const getImageSrc = (image, currentDevice)=>{
                 break;
         }
     }
-    return src ?? image?.src;
+    return src;
 };
 const regexReplaceEndDot = /\.(?=[^.]*$)/;
 const replaceBackupFileKeyFileContent = (backupFileKey)=>{

package/dist/esm/image/setting/Image.js

@@ -144,6 +144,15 @@ const config = {
                             displayOptions: [
                                 'full'
                             ]
+                        },
+                        height: {
+                            displayOptions: [
+                                'full'
+                            ],
+                            units: [
+                                'px',
+                                '%'
+                            ]
                         }
                     },
                     hiddenSettings: [

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

@@ -119,7 +119,12 @@ const ProductFeaturedImageCarousel = ({ builderPropUID, children, enableLazyload
         return template`
     {% assign src = featureMedia.src %}
     ${hasHoverEffect && setting.hoverEffect == 'other' ? `
-      {% assign otherImage = product.media[${setting.otherImage}] %}
+      {% assign media_length = product.media | size %}
+      {% assign other_image_index = ${setting.otherImage} | plus: 0 %}
+      {% if other_image_index >= media_length %}
+        {% assign other_image_index = media_length | minus: 1 %}
+      {% endif %}
+      {% assign otherImage = product.media[other_image_index] %}
       {% assign src = otherImage.src %}
       {% if otherImage.media_type != 'image' %}
         {% assign src = otherImage.preview_image.src %}

package/dist/esm/text/setting/Text.js

@@ -146,7 +146,8 @@ const config = {
                     default: {
                         type: 'paragraph-1',
                         attrs: {
-                            color: 'text-1'
+                            color: 'text-1',
+                            isAlwaysLoadBold: false
                         }
                     },
                     ignoreReRender: true

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

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

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

@@ -4,13 +4,17 @@ import { getLiquidForAppBlock } from '../helpers/thirdParty.js';
 
 const Trustoo = ({ setting, advanced })=>{
     const { widgetType, align, version, appBlockId } = setting ?? {};
-    return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
-    <div
-      class="${advanced?.cssClass}"
-      style="${{
-        ...makeStyleResponsive('ta', align)
-    }}"
-    >
+    const widgetTypeMap = {
+        'review-widget': '<div class="custom-vstar-review-widget" style="width:100%"></div>',
+        'star-rating-widget': '<div class="custom-vstar-rating-widget" data-product-id="{{product.id}}"></div>',
+        'text-carousel': '<div id="trustoo-text-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
+        'barrage-carousel': '<div id="trustoo-barrage-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>',
+        'card-carousel': '<div id="trustoo-card-carousel-widget" style="display:block;max-width:1200px;margin:0 auto"></div>',
+        'photo-carousel': '<div id="trustoo-photo-carousel" style="display:block;max-width:1200px;margin:0 auto" data-type="block"></div>'
+    };
+    const renderOldVersionTrustoo = ()=>{
+        return version === 'v2' ? getLiquidForAppBlock(appBlockId, align, advanced?.cssClass) : template`
+    <div>
       {% if '${widgetType}' == 'starRatingInList' %}
         {% if request.page_type != 'product' %}
           <div class="custom-vstar-rating-widget" product-id="{{ product.id }}"></div>
@@ -33,6 +37,19 @@ const Trustoo = ({ setting, advanced })=>{
       {% endif %}
     </div>
   `;
+    };
+    return !!version ? renderOldVersionTrustoo() : template`
+  <div
+    class="${advanced?.cssClass}"
+    style="${{
+        ...makeStyleResponsive('ta', align)
+    }}"
+  >
+    ${widgetType && widgetTypeMap?.[widgetType]}
+    <script ${getSettingPreloadData('class="gps-link" delay', 'src')}="https://cdn.vstar.app/static/dist/js/swiper-reviews.min.js" defer="defer"></script>
+    <link ${getSettingPreloadData('class="gps-link" delay', 'href')}="https://cdn.vstar.app/static/css/swiper-reviews.min.css" rel="stylesheet" type="text/css" media="all">
+  </div>
+  `;
 };
 
 export { Trustoo as default };

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

@@ -61,76 +61,11 @@ const config = {
                     href: 'https://admin.shopify.com/?redirect=/apps/sealapps-product-review',
                     appName: TrustooConfig.label
                 },
-                {
-                    id: 'version',
-                    label: 'Choose version',
-                    type: 'select',
-                    default: 'v1',
-                    options: [
-                        {
-                            label: 'V1',
-                            value: 'v1'
-                        },
-                        {
-                            label: 'V2',
-                            value: 'v2'
-                        }
-                    ]
-                },
                 {
                     id: 'widgetType',
                     label: 'Choose widget',
                     type: 'select',
-                    default: 'starRating',
-                    options: [
-                        {
-                            label: 'Star Rating',
-                            value: 'starRating',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ],
-                            flowTag: [
-                                'Product'
-                            ],
-                            condition: 'or'
-                        },
-                        {
-                            label: 'Star Rating List',
-                            value: 'starRatingInList',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ],
-                            flowTag: [
-                                'ProductList'
-                            ],
-                            condition: 'or'
-                        },
-                        {
-                            label: 'Reviews',
-                            value: 'reviews',
-                            hideOnPage: [
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC'
-                            ]
-                        }
-                    ]
-                },
-                {
-                    id: 'widgetTypeV2',
-                    label: 'Choose widget',
-                    type: 'select',
-                    default: 'barrage-carousel',
+                    default: 'star-rating-widget',
                     options: [
                         {
                             label: 'Testimonials',
@@ -146,33 +81,11 @@ const config = {
                         },
                         {
                             label: 'Review Widget',
-                            value: 'review-widget',
-                            hideOnPage: [
-                                'ARTICLE',
-                                'BLOG',
-                                'COLLECTION',
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC',
-                                'STATIC'
-                            ]
+                            value: 'review-widget'
                         },
                         {
                             label: 'Star Rating Widget',
-                            value: 'star-rating-widget',
-                            hideOnPage: [
-                                'ARTICLE',
-                                'BLOG',
-                                'COLLECTION',
-                                'GP_ARTICLE',
-                                'GP_BLOG',
-                                'GP_COLLECTION',
-                                'GP_INDEX',
-                                'GP_STATIC',
-                                'STATIC'
-                            ]
+                            value: 'star-rating-widget'
                         },
                         {
                             label: 'Text Carousel',
@@ -222,15 +135,6 @@ const config = {
                 id: 'install'
             }
         },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose version'
-            },
-            setting: {
-                id: 'version'
-            }
-        },
         {
             type: 'control',
             label: {
@@ -238,18 +142,7 @@ const config = {
             },
             setting: {
                 id: 'widgetType'
-            },
-            condition: 'version === "v1"'
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Choose widget'
-            },
-            setting: {
-                id: 'widgetTypeV2'
-            },
-            condition: 'version === "v2"'
+            }
         },
         {
             type: 'control',

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import * as _gem_sdk_core from '@gem-sdk/core';
-import { BaseProps, TypographySettingV2, ObjectDevices, Background, SizeSettingGlobal, StateProp, ColorValueType, TypographySetting, Border, SizeSetting, CornerRadius, ShadowProps, BasePropsWrap, AlignProp, NameDevices, ResponsiveStateProp, Ratio, ObjectLayoutValue, TransformProp, PageContext, ProductProviderProps, JudgeMeReviewsWidgetType, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, ProductReviewsWidgetType, RyviuWidgetType, RivyoWidgetType, VitalsWidgetType, OmnisendWidgetType, TrustooWidgetType, TrustooWidgetTypeV2, FeraReviewsWidgetType, FeraReviewsV3WidgetType, BoldSubscriptionsWidgetType, PickyStoryWidgetType, WiserWidgetType, WiserV2WidgetType, StampedWidgetType, StampedWidgetTypeV2, LaiProductReviewsWidgetType, LaiProductReviewsAdvancedWidgetType, GrowaveWidgetTypeV2, GrowaveWidgetTypeV1, OpinewWidgetType, OpinewDesignWidgetType, UltimateSalesBoostWidgetType, YotpoReviewsWidgetType, AliReviewsWidgetType, BogosWidgetType, FastBundleWidgetType, PreOrderNowWodWidgetType, TagShopWidgetType, AirProductReview, InstantJudgeMeReviewsWidgetType, InstantLooxReviewsWidgetType, PostPurchaseTypo, AdvancedType, RawChild } from '@gem-sdk/core';
+import { BaseProps, TypographySettingV2, ObjectDevices, Background, SizeSettingGlobal, StateProp, ColorValueType, TypographySetting, Border, SizeSetting, CornerRadius, ShadowProps, BasePropsWrap, AlignProp, NameDevices, ResponsiveStateProp, Ratio, ObjectLayoutValue, TransformProp, PageContext, ProductProviderProps, JudgeMeReviewsWidgetType, LooxReviewsWidgetType, LooxReviewsWidgetTypeV2, ProductReviewsWidgetType, RyviuWidgetType, RivyoWidgetType, VitalsWidgetType, OmnisendWidgetType, TrustooWidgetType, FeraReviewsWidgetType, FeraReviewsV3WidgetType, BoldSubscriptionsWidgetType, PickyStoryWidgetType, WiserWidgetType, WiserV2WidgetType, StampedWidgetType, StampedWidgetTypeV2, LaiProductReviewsWidgetType, LaiProductReviewsAdvancedWidgetType, GrowaveWidgetTypeV2, GrowaveWidgetTypeV1, OpinewWidgetType, OpinewDesignWidgetType, UltimateSalesBoostWidgetType, YotpoReviewsWidgetType, AliReviewsWidgetType, BogosWidgetType, FastBundleWidgetType, PreOrderNowWodWidgetType, TagShopWidgetType, AirProductReview, InstantJudgeMeReviewsWidgetType, InstantLooxReviewsWidgetType, PostPurchaseTypo, AdvancedType, RawChild } from '@gem-sdk/core';
 import * as csstype from 'csstype';
 import { Property } from 'csstype';
 import * as _gem_sdk_keen_slider_react from '@gem-sdk/keen-slider/react';
@@ -548,6 +548,7 @@ type RowProps$1 = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -2555,7 +2556,6 @@ declare const Omnisend$1: React.FC<OmnisendProps>;
 
 type TrustooProps = BaseProps<{
     widgetType?: TrustooWidgetType;
-    widgetTypeV2?: TrustooWidgetTypeV2;
     openApp?: any;
     install?: any;
     align?: ObjectDevices<AlignProp>;
@@ -5537,6 +5537,7 @@ type RowProps = BaseProps<{
 }, {
     fullWidth?: ObjectDevices<boolean>;
     width?: ObjectDevices<string>;
+    height?: ObjectDevices<'auto' | '100%'>;
     verticalGutter?: ObjectDevices<string>;
     background?: ObjectDevices<Background>;
     preloadBgImage?: boolean;
@@ -5682,6 +5683,7 @@ declare const Product: ({ children, setting, styles, style, builderProps, rawChi
 }, {
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6481,6 +6483,7 @@ declare const HeroBanner: ({ builderAttrs, builderProps, setting, styles, style,
 } & Pick<{
     fullWidth?: Partial<Record<NameDevices, boolean>> | undefined;
     width?: Partial<Record<NameDevices, string>> | undefined;
+    height?: Partial<Record<NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<NameDevices, string>> | undefined;
     background?: Partial<Record<NameDevices, Background>> | undefined;
     preloadBgImage?: boolean | undefined;
@@ -6724,6 +6727,7 @@ declare const CollectionBanner: ({ builderAttrs, builderProps, setting, style, c
 }, "layout" | "verticalAlign" | "horizontalAlign"> & Pick<{
     fullWidth?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
     width?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
+    height?: Partial<Record<_gem_sdk_core.NameDevices, "auto" | "100%">> | undefined;
     verticalGutter?: Partial<Record<_gem_sdk_core.NameDevices, string>> | undefined;
     background?: Partial<Record<_gem_sdk_core.NameDevices, _gem_sdk_core.Background>> | undefined;
     preloadBgImage?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "2.5.3-staging.1",
+  "version": "2.5.3-staging.10",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
     "format": "prettier --write \"./src/**/*.{ts,tsx}\""
   },
   "devDependencies": {
-    "@gem-sdk/core": "2.5.3-staging.1",
+    "@gem-sdk/core": "2.5.3-staging.10",
     "@gem-sdk/styles": "2.4.8",
     "@types/react-transition-group": "^4.4.5"
   },