@gem-sdk/components 2.0.2 → 2.0.4

package/dist/cjs/banner/components/hero-banner/index.liquid.js

@@ -197,6 +197,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}"
         >
           ${AdaptiveImage_liquid.default({
+        priority: setting?.preload,
         pictureClass: 'gp-w-full',
         srcSet: srcSet,
         className: `adaptive-hero-banner`,

package/dist/cjs/builder.js

@@ -101,6 +101,7 @@ var Releasit = require('./third-party/components/Releasit.js');
 var KingProductOptions = require('./third-party/components/KingProductOptions.js');
 var BirdChime = require('./third-party/components/BirdChime.js');
 var DiscountyBulkDiscountSales = require('./third-party/components/DiscountyBulkDiscountSales.js');
+var PowrContactFormBuilder = require('./third-party/components/PowrContactFormBuilder.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -235,6 +236,7 @@ var PostPurchaseCountdownTimer = require('./post-purchase/countdown-timer/compon
 var Text$1 = require('./post-purchase/text/Text.js');
 
 var builder = {
+    PowrContactFormBuilder: PowrContactFormBuilder.default,
     DiscountyBulkDiscountSales: DiscountyBulkDiscountSales.default,
     GloboProductOptionsVariant: GloboProductOptionsVariant.default,
     TeeinblueProductPersonalizer: TeeinblueProductPersonalizer.default,

package/dist/cjs/dialog/components/Dialog.js

@@ -238,20 +238,6 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
         triggerTime
     ]);
     const w = core.makeWidth(width, fullScreen);
-    const heightStyle = {
-        ...fullScreen?.desktop ? core.makeStyle({
-            h: '100%'
-        }) : !height?.desktop ? core.makeStyle({
-            minh: '300px'
-        }) : core.makeStyle({
-            h: height.desktop
-        }),
-        '--h-tablet': common.getPropertyByDevice(fullScreen, 'tablet') ? '100%' : common.getPropertyByDevice(height, 'tablet') ?? '300px',
-        '--h-mobile': common.getPropertyByDevice(fullScreen, 'mobile') ? '100%' : common.getPropertyByDevice(height, 'mobile') ?? '300px',
-        '--maxh': common.getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
-        '--maxh-tablet': common.getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
-        '--maxh-mobile': common.getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
-    };
     const displayStyle = React.useMemo(()=>{
         return Object.keys(style ?? {}).filter((key)=>[
                 '--d',
@@ -378,7 +364,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             ...displayStyle,
                             ...borderStyle,
                             ...core.makeStyleResponsive('w', w),
-                            ...heightStyle
+                            ...common.heightStyle(fullScreen, height)
                         },
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx("button", {
@@ -419,7 +405,8 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 style: {
                                     ...innerStyle,
-                                    ...heightStyle,
+                                    ...common.removeHeightPercentForContent(common.heightStyle(fullScreen, height)),
+                                    ...common.inheritStyleBody,
                                     ...core.getStyleBackgroundByDevice(background, {
                                         ignoreBackgroundImage: true,
                                         ignoreBackgroundImageProperties: true,
@@ -427,10 +414,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                                     })
                                 },
                                 "aria-label": "Dialog body",
-                                className: core.cls('gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden', {
-                                    'gp-max-h-screen': position !== 'center',
-                                    'gp-max-h-[calc(100vh_-_192px)]': position === 'center' && !fullScreen?.desktop
-                                }),
+                                className: common.bodyDialogClass,
                                 children: core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : core.filterToolbarPreview(children)
                             }),
                             core.filterToolbarPreview(children, true)

package/dist/cjs/dialog/components/Dialog.liquid.js

@@ -20,20 +20,6 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
     const { btnBg, btnColor, btnSize, iconSize, closeButtonPosition, btnRounded } = setting ?? {};
     const { isOverlay, overlayColor, overlayOpacity, mobileTrigger, mobileTriggerTime } = setting ?? {};
     const w = core.makeWidth(width, fullScreen);
-    const heightStyle = {
-        ...fullScreen?.desktop ? core.makeStyle({
-            h: '100%'
-        }) : !height?.desktop ? core.makeStyle({
-            minh: '300px'
-        }) : core.makeStyle({
-            h: height.desktop
-        }),
-        '--h-tablet': common.getPropertyByDevice(fullScreen, 'tablet') ? '100%' : common.getPropertyByDevice(height, 'tablet') ?? '300px',
-        '--h-mobile': common.getPropertyByDevice(fullScreen, 'mobile') ? '100%' : common.getPropertyByDevice(height, 'mobile') ?? '300px',
-        '--maxh': common.getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
-        '--maxh-tablet': common.getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
-        '--maxh-mobile': common.getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
-    };
     const displayStyle = Object.keys(style ?? {}).filter((key)=>[
             '--d',
             '--d-mobile',
@@ -131,7 +117,7 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
         ...wrapperStyle,
         ...borderStyle,
         ...core.makeStyleResponsive('w', w),
-        ...heightStyle
+        ...common.heightStyle(fullScreen, height)
     }}"
           >
             <button
@@ -173,7 +159,8 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
             <div
               style="${{
         ...innerStyle,
-        ...heightStyle,
+        ...common.removeHeightPercentForContent(common.heightStyle(fullScreen, height)),
+        ...common.inheritStyleBody,
         ...core.getStyleBackgroundByDevice(background, {
             ignoreBackgroundImage: true,
             ignoreBackgroundImageProperties: true,
@@ -181,10 +168,7 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
         })
     }}"
               aria-label="Dialog body"
-              class="${core.cls('gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden', {
-        'gp-max-h-screen': position !== 'center',
-        'gp-max-h-[calc(100vh_-_192px)]': position === 'center' && !fullScreen?.desktop
-    })}">
+              class="${common.bodyDialogClass}">
                 <div>
                   ${children ?? ''}
                 </div>

package/dist/cjs/dialog/helpers/common.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var core = require('@gem-sdk/core');
+
 const isShowModal = (startDate, numberOfDay = 0)=>{
     const start = startDate ? new Date(Number(startDate)) : new Date();
     const c = Date.now() - start.getTime();
@@ -19,7 +21,35 @@ const getPropertyByDevice = (property, device)=>{
     if (device === 'mobile') return property?.mobile ?? property?.tablet ?? property?.desktop;
     return property?.desktop;
 };
+const heightStyle = (fullScreen, height)=>({
+        ...fullScreen?.desktop ? core.makeStyle({
+            h: '100%'
+        }) : !height?.desktop ? core.makeStyle({
+            minh: '300px'
+        }) : core.makeStyle({
+            h: height.desktop
+        }),
+        '--h-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : getPropertyByDevice(height, 'tablet') ?? '300px',
+        '--h-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : getPropertyByDevice(height, 'mobile') ?? '300px',
+        '--maxh': getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
+        '--maxh-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
+        '--maxh-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
+    });
+const removeHeightPercentForContent = (heightStyle)=>({
+        ...heightStyle,
+        '--h': heightStyle['--h']?.includes('%') ? '100%' : heightStyle['--h'],
+        '--h-tablet': heightStyle['--h-tablet']?.includes('%') ? '100%' : heightStyle['--h-tablet'],
+        '--h-mobile': heightStyle['--h-mobile']?.includes('%') ? '100%' : heightStyle['--h-mobile']
+    });
+const inheritStyleBody = {
+    'border-radius': 'inherit'
+};
+const bodyDialogClass = 'gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden !gp-max-h-screen';
 
+exports.bodyDialogClass = bodyDialogClass;
 exports.getPropertyByDevice = getPropertyByDevice;
+exports.heightStyle = heightStyle;
+exports.inheritStyleBody = inheritStyleBody;
 exports.isMobile = isMobile;
 exports.isShowModal = isShowModal;
+exports.removeHeightPercentForContent = removeHeightPercentForContent;

package/dist/cjs/index.js

@@ -197,6 +197,7 @@ var WishlistKing = require('./third-party/components/WishlistKing.js');
 var TeeinblueProductPersonalizer = require('./third-party/components/TeeinblueProductPersonalizer.js');
 var GloboProductOptionsVariant = require('./third-party/components/GloboProductOptionsVariant.js');
 var DiscountyBulkDiscountSales = require('./third-party/components/DiscountyBulkDiscountSales.js');
+var PowrContactFormBuilder = require('./third-party/components/PowrContactFormBuilder.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');
@@ -488,6 +489,7 @@ exports.WishlistKing = WishlistKing.default;
 exports.TeeinblueProductPersonalizer = TeeinblueProductPersonalizer.default;
 exports.GloboProductOptionsVariant = GloboProductOptionsVariant.default;
 exports.DiscountyBulkDiscountSales = DiscountyBulkDiscountSales.default;
+exports.PowrContactFormBuilder = PowrContactFormBuilder.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -152,6 +152,7 @@ var WishlistKing_liquid = require('./third-party/components/WishlistKing.liquid.
 var TeeinblueProductPersonalizer_liquid = require('./third-party/components/TeeinblueProductPersonalizer.liquid.js');
 var GloboProductOptionsVariant_liquid = require('./third-party/components/GloboProductOptionsVariant.liquid.js');
 var DiscountyBulkDiscountSales_liquid = require('./third-party/components/DiscountyBulkDiscountSales.liquid.js');
+var PowrContactFormBuilder_liquid = require('./third-party/components/PowrContactFormBuilder.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');
@@ -326,6 +327,7 @@ exports.WishlistKing = WishlistKing_liquid.default;
 exports.TeeinblueProductPersonalizer = TeeinblueProductPersonalizer_liquid.default;
 exports.GloboProductOptionsVariant = GloboProductOptionsVariant_liquid.default;
 exports.DiscountyBulkDiscountSales = DiscountyBulkDiscountSales_liquid.default;
+exports.PowrContactFormBuilder = PowrContactFormBuilder_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

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

@@ -48,9 +48,9 @@ const ProductBundleDiscountItem = ({ children, parentSetting, parentStyles, inde
         return selected === i;
     };
     return core.template`
-  <div
+  <gp-product-bundle-discount-item
     ${bundleItem}
-    class="product-bundle-item cursor-pointer"
+    class="product-bundle-item cursor-pointer gp-block"
     style="${{
         ...sizeSettings.padding,
         ...core.makeStyleState('bg', parentStyles?.backgroundColor),
@@ -96,7 +96,7 @@ const ProductBundleDiscountItem = ({ children, parentSetting, parentStyles, inde
       ${children}
     </div>
     </div>
-  </div>
+  </gp-product-bundle-discount-item>
   `;
 };
 

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

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AppConfig = {
+    id: 'powr-contact-form-builder',
+    label: 'POWR Contact Form Builder',
+    logoUrl: 'https://cdn.shopify.com/app-store/listing_images/82d46df63104389a2579e189676678c9/icon/CIn72oKZr_UCEAE=.png',
+    tag: 'PowrContactFormBuilder'
+};
+
+exports.default = AppConfig;

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

@@ -6,6 +6,10 @@ var dynamic = require('next/dynamic');
 var Loading = require('../common/components/Loading.js');
 require('react/jsx-runtime');
 
+const PowrContactFormBuilder = dynamic(()=>Promise.resolve().then(function () { return require('./components/PowrContactFormBuilder.js'); }), {
+    ssr: false,
+    loading: Loading.default
+});
 const DiscountyBulkDiscountSales = dynamic(()=>Promise.resolve().then(function () { return require('./components/DiscountyBulkDiscountSales.js'); }), {
     ssr: false,
     loading: Loading.default
@@ -371,6 +375,7 @@ const Selleasy = dynamic(()=>Promise.resolve().then(function () { return require
     loading: Loading.default
 });
 var thirdParty = {
+    PowrContactFormBuilder,
     DiscountyBulkDiscountSales,
     GloboProductOptionsVariant,
     TeeinblueProductPersonalizer,

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

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PowrContactFormBuilder = require('../configs/PowrContactFormBuilder.js');
+
+const config = {
+    tag: PowrContactFormBuilder.default.tag,
+    label: PowrContactFormBuilder.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/82d46df63104389a2579e189676678c9/icon/CIn72oKZr_UCEAE=.png">',
+    editorConfigs: {
+        component: {
+            isThirdParty: true
+        }
+    },
+    presets: [
+        {
+            id: PowrContactFormBuilder.default.id,
+            name: {
+                en: PowrContactFormBuilder.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/82d46df63104389a2579e189676678c9/icon/CIn72oKZr_UCEAE=.png">
+        <span class="preset-item-title">POWR Contact Form Builder</span>
+      </div>`
+            },
+            components: [
+                {
+                    tag: PowrContactFormBuilder.default.tag
+                }
+            ]
+        }
+    ],
+    settings: [
+        {
+            id: 'setting',
+            controls: [
+                {
+                    id: 'appBlockId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'widgetType',
+                    label: 'Choose widget',
+                    type: 'select',
+                    options: [
+                        {
+                            label: 'App Block',
+                            value: 'app-block'
+                        }
+                    ],
+                    default: 'app-block'
+                },
+                {
+                    id: 'appId',
+                    type: 'input',
+                    default: ''
+                },
+                {
+                    id: 'install',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'install',
+                    href: 'https://apps.shopify.com/powr-form-builder?show_store_picker=1?utm_source=gempages',
+                    appName: PowrContactFormBuilder.default.label
+                },
+                {
+                    id: 'openApp',
+                    type: 'open-link',
+                    target: '_blank',
+                    linkType: 'openApp',
+                    href: 'https://admin.shopify.com/?redirect=/apps/powr-form-builder',
+                    appName: PowrContactFormBuilder.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: 'appId'
+            },
+            label: {
+                en: 'App ID'
+            }
+        },
+        {
+            type: 'control',
+            setting: {
+                id: 'openApp'
+            }
+        },
+        {
+            type: 'control',
+            label: {
+                en: 'Align'
+            },
+            setting: {
+                id: 'align'
+            }
+        }
+    ]
+};
+
+exports.default = config;

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

@@ -93,8 +93,10 @@ var WishlistKing = require('./WishlistKing.js');
 var TeeinblueProductPersonalizer = require('./TeeinblueProductPersonalizer.js');
 var GloboProductOptionsVariant = require('./GloboProductOptionsVariant.js');
 var DiscountyBulkDiscountSales = require('./DiscountyBulkDiscountSales.js');
+var PowrContactFormBuilder = require('./PowrContactFormBuilder.js');
 
 var index = {
+    PowrContactFormBuilder: PowrContactFormBuilder.default,
     DiscountyBulkDiscountSales: DiscountyBulkDiscountSales.default,
     GloboProductOptionsVariant: GloboProductOptionsVariant.default,
     TeeinblueProductPersonalizer: TeeinblueProductPersonalizer.default,

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -193,6 +193,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
     }}"
         >
           ${AdaptiveImage({
+        priority: setting?.preload,
         pictureClass: 'gp-w-full',
         srcSet: srcSet,
         className: `adaptive-hero-banner`,

package/dist/esm/builder.js

@@ -97,6 +97,7 @@ import Releasit from './third-party/components/Releasit.js';
 import KingProductOptions from './third-party/components/KingProductOptions.js';
 import BirdChime from './third-party/components/BirdChime.js';
 import DiscountyBulkDiscountSales from './third-party/components/DiscountyBulkDiscountSales.js';
+import PowrContactFormBuilder from './third-party/components/PowrContactFormBuilder.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -231,6 +232,7 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    PowrContactFormBuilder,
     DiscountyBulkDiscountSales,
     GloboProductOptionsVariant,
     TeeinblueProductPersonalizer,

package/dist/esm/dialog/components/Dialog.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useModalStore, useEditorMode, useInteraction, globalEvent, makeWidth, makeStyle, cls, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
+import { useModalStore, useEditorMode, useInteraction, globalEvent, makeWidth, cls, makeStyle, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
 import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { isShowModal, isMobile, getPropertyByDevice } from '../helpers/common.js';
+import { isShowModal, isMobile, heightStyle, removeHeightPercentForContent, inheritStyleBody, bodyDialogClass } from '../helpers/common.js';
 import { useScrollPercentage } from '../hooks/use-scroll-percentage.js';
 import ChildrenDroppable from '../../grid/components/ChildrenDroppable.js';
 import { ELEMENT_Z_INDEX } from '../../common/const.js';
@@ -234,20 +234,6 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
         triggerTime
     ]);
     const w = makeWidth(width, fullScreen);
-    const heightStyle = {
-        ...fullScreen?.desktop ? makeStyle({
-            h: '100%'
-        }) : !height?.desktop ? makeStyle({
-            minh: '300px'
-        }) : makeStyle({
-            h: height.desktop
-        }),
-        '--h-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : getPropertyByDevice(height, 'tablet') ?? '300px',
-        '--h-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : getPropertyByDevice(height, 'mobile') ?? '300px',
-        '--maxh': getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
-        '--maxh-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
-        '--maxh-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
-    };
     const displayStyle = useMemo(()=>{
         return Object.keys(style ?? {}).filter((key)=>[
                 '--d',
@@ -374,7 +360,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             ...displayStyle,
                             ...borderStyle,
                             ...makeStyleResponsive('w', w),
-                            ...heightStyle
+                            ...heightStyle(fullScreen, height)
                         },
                         children: [
                             /*#__PURE__*/ jsx("button", {
@@ -415,7 +401,8 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             /*#__PURE__*/ jsx("div", {
                                 style: {
                                     ...innerStyle,
-                                    ...heightStyle,
+                                    ...removeHeightPercentForContent(heightStyle(fullScreen, height)),
+                                    ...inheritStyleBody,
                                     ...getStyleBackgroundByDevice(background, {
                                         ignoreBackgroundImage: true,
                                         ignoreBackgroundImageProperties: true,
@@ -423,10 +410,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                                     })
                                 },
                                 "aria-label": "Dialog body",
-                                className: cls('gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden', {
-                                    'gp-max-h-screen': position !== 'center',
-                                    'gp-max-h-[calc(100vh_-_192px)]': position === 'center' && !fullScreen?.desktop
-                                }),
+                                className: bodyDialogClass,
                                 children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : filterToolbarPreview(children)
                             }),
                             filterToolbarPreview(children, true)

package/dist/esm/dialog/components/Dialog.liquid.js

@@ -1,6 +1,6 @@
-import { makeWidth, makeStyle, template, cls, RenderIf, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { makeWidth, template, cls, RenderIf, makeStyle, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
 import { isTransparentColor } from '../../helpers.js';
-import { getPropertyByDevice } from '../helpers/common.js';
+import { heightStyle, removeHeightPercentForContent, inheritStyleBody, bodyDialogClass } from '../helpers/common.js';
 import 'react/jsx-runtime';
 import { ELEMENT_Z_INDEX } from '../../common/const.js';
 
@@ -16,20 +16,6 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
     const { btnBg, btnColor, btnSize, iconSize, closeButtonPosition, btnRounded } = setting ?? {};
     const { isOverlay, overlayColor, overlayOpacity, mobileTrigger, mobileTriggerTime } = setting ?? {};
     const w = makeWidth(width, fullScreen);
-    const heightStyle = {
-        ...fullScreen?.desktop ? makeStyle({
-            h: '100%'
-        }) : !height?.desktop ? makeStyle({
-            minh: '300px'
-        }) : makeStyle({
-            h: height.desktop
-        }),
-        '--h-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : getPropertyByDevice(height, 'tablet') ?? '300px',
-        '--h-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : getPropertyByDevice(height, 'mobile') ?? '300px',
-        '--maxh': getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
-        '--maxh-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
-        '--maxh-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
-    };
     const displayStyle = Object.keys(style ?? {}).filter((key)=>[
             '--d',
             '--d-mobile',
@@ -127,7 +113,7 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
         ...wrapperStyle,
         ...borderStyle,
         ...makeStyleResponsive('w', w),
-        ...heightStyle
+        ...heightStyle(fullScreen, height)
     }}"
           >
             <button
@@ -169,7 +155,8 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
             <div
               style="${{
         ...innerStyle,
-        ...heightStyle,
+        ...removeHeightPercentForContent(heightStyle(fullScreen, height)),
+        ...inheritStyleBody,
         ...getStyleBackgroundByDevice(background, {
             ignoreBackgroundImage: true,
             ignoreBackgroundImageProperties: true,
@@ -177,10 +164,7 @@ const Dialog = ({ setting, children, builderProps, style, advanced })=>{
         })
     }}"
               aria-label="Dialog body"
-              class="${cls('gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden', {
-        'gp-max-h-screen': position !== 'center',
-        'gp-max-h-[calc(100vh_-_192px)]': position === 'center' && !fullScreen?.desktop
-    })}">
+              class="${bodyDialogClass}">
                 <div>
                   ${children ?? ''}
                 </div>

package/dist/esm/dialog/helpers/common.js

@@ -1,3 +1,5 @@
+import { makeStyle } from '@gem-sdk/core';
+
 const isShowModal = (startDate, numberOfDay = 0)=>{
     const start = startDate ? new Date(Number(startDate)) : new Date();
     const c = Date.now() - start.getTime();
@@ -17,5 +19,29 @@ const getPropertyByDevice = (property, device)=>{
     if (device === 'mobile') return property?.mobile ?? property?.tablet ?? property?.desktop;
     return property?.desktop;
 };
+const heightStyle = (fullScreen, height)=>({
+        ...fullScreen?.desktop ? makeStyle({
+            h: '100%'
+        }) : !height?.desktop ? makeStyle({
+            minh: '300px'
+        }) : makeStyle({
+            h: height.desktop
+        }),
+        '--h-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : getPropertyByDevice(height, 'tablet') ?? '300px',
+        '--h-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : getPropertyByDevice(height, 'mobile') ?? '300px',
+        '--maxh': getPropertyByDevice(fullScreen, 'desktop') ? '100%' : '',
+        '--maxh-tablet': getPropertyByDevice(fullScreen, 'tablet') ? '100%' : '',
+        '--maxh-mobile': getPropertyByDevice(fullScreen, 'mobile') ? '100%' : ''
+    });
+const removeHeightPercentForContent = (heightStyle)=>({
+        ...heightStyle,
+        '--h': heightStyle['--h']?.includes('%') ? '100%' : heightStyle['--h'],
+        '--h-tablet': heightStyle['--h-tablet']?.includes('%') ? '100%' : heightStyle['--h-tablet'],
+        '--h-mobile': heightStyle['--h-mobile']?.includes('%') ? '100%' : heightStyle['--h-mobile']
+    });
+const inheritStyleBody = {
+    'border-radius': 'inherit'
+};
+const bodyDialogClass = 'gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden !gp-max-h-screen';
 
-export { getPropertyByDevice, isMobile, isShowModal };
+export { bodyDialogClass, getPropertyByDevice, heightStyle, inheritStyleBody, isMobile, isShowModal, removeHeightPercentForContent };