@gem-sdk/components 2.1.11 → 2.1.13-staging.0

package/dist/cjs/builder.js

@@ -111,6 +111,8 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
+var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -479,7 +481,9 @@ var builder = {
     ArticleReadMore: ArticleReadMore.default,
     Marquee: Marquee.default,
     MarqueeItem: MarqueeItem.default,
-    ProductBadge: index$8.default
+    ProductBadge: index$8.default,
+    HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    TrustBadgesBear: TrustBadgesBear.default
 };
 
 exports.default = builder;

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

@@ -55,13 +55,11 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'left',
         'bottom',
         'right',
-        'z',
-        'ml',
-        'mr'
+        'z'
     ], style);
     const getStyles = ()=>{
         let result = {
-            ...restStyle,
+            ...isSection ? restStyle : style,
             ...core.makeStyleResponsive('cg', verticalGutter),
             ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
             ...core.makeStyleResponsive('w', styleObject.content)
@@ -119,7 +117,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         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 ', {
-            'gp-content-visibility-hidden': mode !== 'edit' && lazy && !inView
+            'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: inView || mode !== 'edit' ? /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
             children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.map(children, (el)=>{
@@ -158,15 +156,16 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(Element, {
-                className: "gp-max-w-full [&_*]:gp-max-w-full",
+            isSection ? /*#__PURE__*/ jsxRuntime.jsx(Element, {
+                className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
                 style: {
                     ...wrapStyle,
+                    ...core.makeStyleResponsive('w', styleObject.wrapper),
                     ...core.makeStyleResponsive('pl', styleObject.padding),
                     ...core.makeStyleResponsive('pr', styleObject.padding)
                 },
                 children: element
-            })
+            }) : element
         ]
     });
 };

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

@@ -16,9 +16,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'left',
         'bottom',
         'right',
-        'z',
-        'ml',
-        'mr'
+        'z'
     ], style);
     const element = core.template`
     <div
@@ -28,7 +26,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'data-id': builderProps?.uidInteraction ?? builderProps?.uid
     }}
         style="${{
-        ...restStyle,
+        ...isSection ? restStyle : style,
         ...core.makeStyleResponsive('cg', verticalGutter),
         ...core.makeStyleResponsive('pc', horizontalAlign),
         ...layout ? core.composeGridLayout(layout) : core.makeStyleResponsive('gtc', responsive),
@@ -55,21 +53,21 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
     }))}
     </div>
   `;
-    const elementTag = isSection ? 'section' : 'div';
     return core.template`
        ${core.RenderIf(!!styles?.preloadBgImage, `${core.RenderIf(!!background?.desktop?.image?.src, `<link rel="preload" href="${background?.desktop?.image?.src}" as="image" />`)}${core.RenderIf(!!background?.tablet?.image?.src, `<link rel="preload" href="${background?.tablet?.image?.src}" as="image" />`)}${core.RenderIf(!!background?.mobile?.image?.src, `<link rel="preload" href="${background?.mobile?.image?.src}" as="image" />`)}`)}
-      ${core.template`
-        <${elementTag}
-          class="gp-max-w-full ${isSection ? helpers.getSettingPreloadData('gps-lazy') : ''}"
-          style="${{
+      ${isSection ? core.template`
+            <section
+              class="gp-mx-auto gp-max-w-full ${helpers.getSettingPreloadData('gps-lazy')}"
+              style="${{
         ...wrapStyle,
+        ...core.makeStyleResponsive('w', styleObject.wrapper),
         ...core.makeStyleResponsive('pl', styleObject.padding),
         ...core.makeStyleResponsive('pr', styleObject.padding)
     }}"
-        >
-          ${element}
-        </${elementTag}>
-      `} 
+            >
+              ${element}
+            </section>
+          ` : element} 
     `;
 };
 

package/dist/cjs/index.js

@@ -207,6 +207,8 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
+var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.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');
@@ -509,6 +511,8 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews.default;
 exports.HulkProductOptions = HulkProductOptions.default;
 exports.TrustshopProductReviews = TrustshopProductReviews.default;
+exports.HextomCountdownTimerBar = HextomCountdownTimerBar.default;
+exports.TrustBadgesBear = TrustBadgesBear.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -161,6 +161,8 @@ var SeoantTrustBadgesIcon_liquid = require('./third-party/components/SeoantTrust
 var TrustreviewsProductReviews_liquid = require('./third-party/components/TrustreviewsProductReviews.liquid.js');
 var MyappgurusProductReviews_liquid = require('./third-party/components/MyappgurusProductReviews.liquid.js');
 var HulkProductOptions_liquid = require('./third-party/components/HulkProductOptions.liquid.js');
+var HextomCountdownTimerBar_liquid = require('./third-party/components/HextomCountdownTimerBar.liquid.js');
+var TrustBadgesBear_liquid = require('./third-party/components/TrustBadgesBear.liquid.js');
 var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
@@ -345,6 +347,8 @@ exports.SeoantTrustBadgesIcon = SeoantTrustBadgesIcon_liquid.default;
 exports.TrustreviewsProductReviews = TrustreviewsProductReviews_liquid.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews_liquid.default;
 exports.HulkProductOptions = HulkProductOptions_liquid.default;
+exports.HextomCountdownTimerBar = HextomCountdownTimerBar_liquid.default;
+exports.TrustBadgesBear = TrustBadgesBear_liquid.default;
 exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'hextom-countdown-timer-bar',
+    label: 'Hextom: Countdown Timer Bar',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/904be13e4bba460880341eba1a5579e1/icon/CKCYtc2d5oYDEAE=.png',
+    tag: 'HextomCountdownTimerBar'
+};
+
+exports.default = AppConfig;

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'trust-badges-bear',
+    label: 'Trust Badges Bear',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/c9141bfba8db18a258f290a5a639986e/icon/CLDR_q6erfwCEAE=.png',
+    tag: 'TrustBadgesBear'
+};
+
+exports.default = AppConfig;

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

@@ -410,6 +410,14 @@ const Selleasy = dynamic(()=>Promise.resolve().then(function () { return require
     ssr: false,
     loading: Loading.default
 });
+const HextomCountdownTimerBar = dynamic(()=>Promise.resolve().then(function () { return require('./components/HextomCountdownTimerBar.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
+const TrustBadgesBear = dynamic(()=>Promise.resolve().then(function () { return require('./components/TrustBadgesBear.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
 var thirdParty = {
     TrustshopProductReviews,
     HulkProductOptions,
@@ -511,7 +519,9 @@ var thirdParty = {
     Releasit,
     RequestQuoteHidePrice,
     BirdChime,
-    FordeerProductLabels
+    FordeerProductLabels,
+    HextomCountdownTimerBar,
+    TrustBadgesBear
 };
 
 exports.default = thirdParty;

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

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var HextomCountdownTimerBar = require('../configs/HextomCountdownTimerBar.js');
+
+const config = {
+    tag: HextomCountdownTimerBar.default.tag,
+    label: HextomCountdownTimerBar.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/904be13e4bba460880341eba1a5579e1/icon/CKCYtc2d5oYDEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: HextomCountdownTimerBar.default.id,
+            name: {
+                en: HextomCountdownTimerBar.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/904be13e4bba460880341eba1a5579e1/icon/CKCYtc2d5oYDEAE=.png">
+        <span class="preset-item-title">Hextom: Countdown Timer Bar</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: HextomCountdownTimerBar.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Fsb Custom Placement',
+                            value: 'fsb-custom-placement'
+                        }
+                    ],
+                    default: 'fsb-custom-placement'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/event-promotion-bar?utm_source=gempages',
+                    appName: HextomCountdownTimerBar.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: '',
+                    appName: HextomCountdownTimerBar.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var TrustBadgesBear = require('../configs/TrustBadgesBear.js');
+
+const config = {
+    tag: TrustBadgesBear.default.tag,
+    label: TrustBadgesBear.default.label,
+    icon: '<img class="gp-w-6 gp-border gp-border-[#494949] gp-rounded-[3px]" src="https://cdn.shopify.com/app-store/listing_images/c9141bfba8db18a258f290a5a639986e/icon/CLDR_q6erfwCEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: TrustBadgesBear.default.id,
+            name: {
+                en: TrustBadgesBear.default.label
+            },
+            hideTextContent: true,
+            icon: {
+                desktop: `<div class="w-full flex flex-col items-center">
+        <img class="w-24 border border-dark-200 rounded-medium" src="https://cdn.shopify.com/app-store/listing_images/c9141bfba8db18a258f290a5a639986e/icon/CLDR_q6erfwCEAE=.png">
+        <span class="preset-item-title">Trust Badges Bear</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: TrustBadgesBear.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'Widget',
+                            value: 'widget'
+                        }
+                    ],
+                    default: 'widget'
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/ultimate-trust-badges?utm_source=gempages',
+                    appName: TrustBadgesBear.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/ultimate-trust-badge',
+                    appName: TrustBadgesBear.default.label
+                },
+                {
+                    id: 'align',
+                    label: 'Alignment',
+                    type: 'segment',
+                    options: [
+                        {
+                            label: 'Left',
+                            value: 'left',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Center',
+                            value: 'center',
+                            type: 'align'
+                        },
+                        {
+                            label: 'Right',
+                            value: 'right',
+                            type: 'align'
+                        }
+                    ],
+                    devices: {
+                        desktop: {
+                            default: 'left'
+                        }
+                    }
+                }
+            ]
+        }
+    ],
+    ui: [
+        {
+            type: 'control',
+            setting: {
+                id: 'install'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -103,8 +103,11 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
+var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
+var TrustBadgesBear = require('./TrustBadgesBear.js');
 
 var index = {
+    HextomCountdownTimerBar: HextomCountdownTimerBar.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -205,7 +208,8 @@ var index = {
     KingProductOptions: KingProductOptions.default,
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
-    FordeerProductLabels: FordeerProductLabels.default
+    FordeerProductLabels: FordeerProductLabels.default,
+    TrustBadgesBear: TrustBadgesBear.default
 };
 
 exports.default = index;

package/dist/esm/builder.js

@@ -107,6 +107,8 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
+import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
+import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -475,7 +477,9 @@ var builder = {
     ArticleReadMore,
     Marquee,
     MarqueeItem,
-    ProductBadge
+    ProductBadge,
+    HextomCountdownTimerBar,
+    TrustBadgesBear
 };
 
 export { builder as default };

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

@@ -51,13 +51,11 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         'left',
         'bottom',
         'right',
-        'z',
-        'ml',
-        'mr'
+        'z'
     ], style);
     const getStyles = ()=>{
         let result = {
-            ...restStyle,
+            ...isSection ? restStyle : style,
             ...makeStyleResponsive('cg', verticalGutter),
             ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
             ...makeStyleResponsive('w', styleObject.content)
@@ -115,7 +113,7 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
         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 ', {
-            'gp-content-visibility-hidden': mode !== 'edit' && lazy && !inView
+            'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
         }),
         children: inView || mode !== 'edit' ? /*#__PURE__*/ jsx(Fragment, {
             children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : Children.map(children, (el)=>{
@@ -154,15 +152,16 @@ const Row = ({ className, children, setting, builderAttrs, builderProps, styles,
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(Element, {
-                className: "gp-max-w-full [&_*]:gp-max-w-full",
+            isSection ? /*#__PURE__*/ jsx(Element, {
+                className: "gp-mx-auto gp-max-w-full [&_*]:gp-max-w-full",
                 style: {
                     ...wrapStyle,
+                    ...makeStyleResponsive('w', styleObject.wrapper),
                     ...makeStyleResponsive('pl', styleObject.padding),
                     ...makeStyleResponsive('pr', styleObject.padding)
                 },
                 children: element
-            })
+            }) : element
         ]
     });
 };