@gem-sdk/components 2.0.0-staging.118 → 2.0.0

package/dist/esm/collection/components/CollectionDescription.liquid.js

@@ -1,109 +1,16 @@
-import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
-import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
+import { template } from '@gem-sdk/core';
+import Text from '../../text/components/Text.liquid.js';
 
-const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
-    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
-    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
-    const defaultStyle = {
-        ...getStyleShadow({
-            styleAppliedFor: 'text-shadow'
-        }),
-        ...makeStyleResponsive('ta', setting?.textAlign),
-        ...getGlobalColorStyle(setting?.color),
-        ...makeStyle({
-            tt: setting?.transform
-        }),
-        ...appendTypoStyle
-    };
-    const collapseStyle = {
-        ...defaultStyle,
-        ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
-    };
-    const getDisplayCollapse = ()=>{
-        return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
-    };
-    const moreIcon = `<svg
-          class="gp-ml-1 gp-inline-block"
-          style="display: inline-block; margin-left: 1px;"
-          height="1em"
-          width="1em"
-          viewBox="0 0 22 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-              d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
-              fill="currentColor"
-          />
-        </svg>`;
-    const viewMoreTextTranslate = getDynamicSourceLocales({
-        val: setting?.viewMoreText,
-        uid: builderProps?.uid,
-        settingId: 'viewMoreText',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate
-    });
-    const viewLessTextTranslate = getDynamicSourceLocales({
-        val: setting?.viewLessText,
-        uid: builderProps?.uid,
-        settingId: 'viewLessText',
-        isLiquid: true,
-        pageContext,
-        translate: setting?.translate
-    });
+const CollectionDescription = ({ setting })=>{
     return template`
-  <gp-collection-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
+    ${Text({
+        styles: setting,
         setting: {
-            lineClamp: setting?.lineClamp,
-            hasLineClamp: setting?.hasLineClamp,
-            viewMoreText: viewMoreTextTranslate,
-            viewLessText: viewLessTextTranslate,
-            enableViewMoreIcon: setting?.enableViewMoreIcon
-        },
-        defaultStyle,
-        collapseStyle
-    }).replaceAll("'", '&#039;')}'
-    view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
-    view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
-  >
-    <div></div>
-    <div
-     data-gp-text
-      class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
-      data-gp-text
-      style="${collapseStyle}"
-    >
-    {{collection.description}}
-    </div>
-        {% if collection.description != blank -%}
-      <button
-        type="button"
-        class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
-        style="${{
-        ...makeStyle({
-            tt: setting?.transform
-        }),
-        ...makeStyleResponsive('ta', setting?.textAlign),
-        ...appendTypoStyle,
-        ...getGlobalColorStyle(setting?.showMoreColor),
-        ...getDisplayCollapse(),
-        position: 'absolute',
-        visibility: 'hidden'
-    }}"
-    >
-      ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
-      ${setting?.enableViewMoreIcon ? moreIcon : ''}
-      </button>
-    {%- endif -%}
-    {% style %}
-      .p-description-wrapper.gp-p-description-text * {
-        color: inherit
-      }
-    {% endstyle %}
-  </gp-collection-description>
-  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+            ...setting,
+            text: '{{ collection.description }}',
+            excludeFlex: true
+        }
+    })}
   `;
 };
 

package/dist/esm/collection/components/CollectionPaginator.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { composeTypographyClassName, composeTypographyStyle, composeMemo, removeNullUndefined, makeStyle, getGlobalColorCSSProp, makeStyleResponsive, cls, getGlobalColorClass } from '@gem-sdk/core';
 

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

@@ -48,7 +48,8 @@ const CollectionPaginator = ({ setting, builderProps, pageContext })=>{
         id="${builderProps?.uid}"
         class="gp_collection-paginator"
         style="${{
-        ...makeStyleResponsive('ta', align)
+        ...makeStyleResponsive('ta', align),
+        ...styleSetting.customStyle
     }}"
       >
         <div class="gf_collection-paginator-wrapper gp-inline-flex gp-flex-wrap">

package/dist/esm/collection/components/CollectionTitle.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useCollection } from '@gem-sdk/core';
 import Text from '../../text/components/Text.js';

package/dist/esm/collection/components/CollectionToolbar.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCollection, composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, cls, getGlobalColorClass, makeStyle, getGlobalColorCSSProp } from '@gem-sdk/core';
 

package/dist/esm/collection/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const CollectionTitle = dynamic(()=>import('./components/CollectionTitle.js'), {
     loading: Loading

package/dist/esm/collection/setting/CollectionDescription.js

@@ -35,59 +35,6 @@ const config = {
                         }
                     ]
                 },
-                {
-                    id: 'hasLineClamp',
-                    label: 'Enable View More',
-                    type: 'toggle',
-                    devices: {
-                        desktop: {
-                            default: true
-                        }
-                    }
-                },
-                {
-                    id: 'lineClamp',
-                    label: 'Maximum Row(s) To Show',
-                    type: 'input:number',
-                    min: 1,
-                    hide: true,
-                    devices: {
-                        desktop: {
-                            default: 12
-                        }
-                    }
-                },
-                {
-                    id: 'viewMoreText',
-                    label: 'View More Text',
-                    type: 'input',
-                    default: 'Show more',
-                    hide: true
-                },
-                {
-                    id: 'showMoreColor',
-                    type: 'colorpicker',
-                    default: 'text-1'
-                },
-                {
-                    id: 'viewLessText',
-                    label: 'View Less Text',
-                    type: 'input',
-                    default: 'Show less',
-                    hide: true
-                },
-                {
-                    id: 'enableViewMoreIcon',
-                    label: 'Enable Icon',
-                    type: 'toggle',
-                    default: true,
-                    hide: true
-                },
-                {
-                    id: 'translate',
-                    type: 'input',
-                    default: 'viewLessText,viewMoreText'
-                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -123,86 +70,11 @@ const config = {
                             default: 'center'
                         }
                     }
-                },
-                {
-                    id: 'color',
-                    type: 'colorpicker',
-                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
-        {
-            type: 'group',
-            label: {
-                en: ''
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Show more'
-                    },
-                    options: {
-                        label: 'large'
-                    },
-                    setting: {
-                        id: 'hasLineClamp'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Text color'
-                    },
-                    setting: {
-                        id: 'showMoreColor'
-                    },
-                    condition: 'hasLineClamp == true'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Max lines'
-                    },
-                    setting: {
-                        id: 'lineClamp'
-                    },
-                    condition: 'hasLineClamp == true'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Show more label'
-                    },
-                    setting: {
-                        id: 'viewMoreText'
-                    },
-                    condition: 'hasLineClamp == true'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Show less label'
-                    },
-                    setting: {
-                        id: 'viewLessText'
-                    },
-                    condition: 'hasLineClamp == true'
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Icon'
-                    },
-                    setting: {
-                        id: 'enableViewMoreIcon'
-                    },
-                    condition: 'hasLineClamp == true'
-                }
-            ]
-        },
         {
             label: {
                 en: 'Text'

package/dist/esm/collection/setting/index.js

@@ -4,7 +4,7 @@ import config$1 from './CollectionDescription.js';
 import config$2 from './CollectionToolbar.js';
 import config$3 from './CollectionPaginator.js';
 
-var collectionSetting = {
+var index = {
     CollectionTitle: config,
     CollectionDescription: config$1,
     CollectionToolbar: config$2,
@@ -12,4 +12,4 @@ var collectionSetting = {
     CollectionBanner: config$4
 };
 
-export { collectionSetting as default };
+export { index as default };

package/dist/esm/common/components/Loading.js

@@ -1,10 +1,7 @@
-'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEditorMode } from '@gem-sdk/core';
 
 const Loading = ()=>{
-    const mode = useEditorMode();
-    return mode === 'edit' ? /*#__PURE__*/ jsxs("div", {
+    return /*#__PURE__*/ jsxs("div", {
         className: "gp-loading-placeholder gp-relative gp-my-0.5 gp-h-3 gp-w-full gp-overflow-hidden",
         children: [
             /*#__PURE__*/ jsx("div", {
@@ -14,7 +11,7 @@ const Loading = ()=>{
                 className: "gp-absolute gp-h-full gp-bg-green-500 gp-animate-progress-bar"
             })
         ]
-    }) : null;
+    });
 };
 
 export { Loading as default };

package/dist/esm/common/components/Tooltip.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 const Tooltip = ({ tooltip, width, children })=>{

package/dist/esm/countdown-timer/components/Countdown.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { formatTime, convertTime } from '../helpers.js';
 import useTimeLeft from '../hooks/useTimeLeft.js';
@@ -53,7 +52,6 @@ const Countdown = ({ setting, styles, builderProps })=>{
             }
         });
     };
-    const renderClassWithCondition = (condition, className)=>condition ? className : '';
     if (setting?.autoHideWhenTimeout && timeLeft <= 0) {
         if (mode !== 'edit') {
             return null;
@@ -90,7 +88,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             bg: getGlobalColorCSSProp(styles?.backgroundItemColor)
                         })
                     },
-                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center ', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', renderClassWithCondition(!setting?.weekLabel, 'gp-content-center')),
+                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : ''),
                     children: [
                         /*#__PURE__*/ jsx(Text, {
                             className: cls(getGlobalColorClass('text', colorNumber)),
@@ -111,7 +109,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(Text, {
-                            className: cls(getGlobalColorClass('text', colorLabel), renderClassWithCondition(!setting?.weekLabel, 'gp-hidden')),
+                            className: cls(getGlobalColorClass('text', colorLabel)),
                             styles: {
                                 typography: styles?.labelTypography,
                                 typo: styles?.labelTypo
@@ -140,7 +138,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             bg: getGlobalColorCSSProp(styles?.backgroundItemColor)
                         })
                     },
-                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', renderClassWithCondition(!setting?.dayLabel, 'gp-content-center')),
+                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : ''),
                     children: [
                         /*#__PURE__*/ jsx(Text, {
                             className: cls(getGlobalColorClass('text', colorNumber)),
@@ -161,7 +159,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(Text, {
-                            className: `${cls(getGlobalColorClass('text', colorLabel), renderClassWithCondition(!setting?.dayLabel, 'gp-hidden'))} , `,
+                            className: cls(getGlobalColorClass('text', colorLabel)),
                             styles: {
                                 typography: styles?.labelTypography,
                                 typo: styles?.labelTypo
@@ -180,7 +178,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                     ]
                 }),
                 setting?.enableHour && /*#__PURE__*/ jsxs("div", {
-                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', renderClassWithCondition(!setting?.hourLabel, 'gp-content-center')),
+                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : ''),
                     style: {
                         ...!styles?.itemPadding?.type ? composeSize(styles?.itemPadding?.custom) : {},
                         ...handleConvertBorderStyle(styles?.borderState),
@@ -211,7 +209,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(Text, {
-                            className: cls(getGlobalColorClass('text', colorLabel), renderClassWithCondition(!setting?.hourLabel, 'gp-hidden')),
+                            className: cls(getGlobalColorClass('text', colorLabel)),
                             styles: {
                                 typography: styles?.labelTypography,
                                 typo: styles?.labelTypo
@@ -230,7 +228,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                     ]
                 }),
                 setting?.enableMinute && /*#__PURE__*/ jsxs("div", {
-                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', renderClassWithCondition(!setting?.minuteLabel, 'gp-content-center')),
+                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : ''),
                     style: {
                         ...!styles?.itemPadding?.type ? composeSize(styles?.itemPadding?.custom) : {},
                         ...handleConvertBorderStyle(styles?.borderState),
@@ -261,7 +259,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(Text, {
-                            className: cls(getGlobalColorClass('text', colorLabel), renderClassWithCondition(!setting?.minuteLabel, 'gp-hidden')),
+                            className: cls(getGlobalColorClass('text', colorLabel)),
                             styles: {
                                 typography: styles?.labelTypography,
                                 typo: styles?.labelTypo
@@ -280,7 +278,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                     ]
                 }),
                 setting?.enableSecond && /*#__PURE__*/ jsxs("div", {
-                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', renderClassWithCondition(!setting?.secondLabel, 'gp-content-center')),
+                    className: cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-min-w-max !gp-max-w-max gp-flex-1 gp-text-center', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : ''),
                     style: {
                         ...!styles?.itemPadding?.type ? composeSize(styles?.itemPadding?.custom) : {},
                         ...handleConvertBorderStyle(styles?.borderState),
@@ -311,7 +309,7 @@ const Countdown = ({ setting, styles, builderProps })=>{
                             }
                         }),
                         /*#__PURE__*/ jsx(Text, {
-                            className: cls(getGlobalColorClass('text', colorLabel), renderClassWithCondition(!setting?.secondLabel, 'gp-hidden')),
+                            className: cls(getGlobalColorClass('text', colorLabel)),
                             styles: {
                                 typography: styles?.labelTypography,
                                 typo: styles?.labelTypo

package/dist/esm/countdown-timer/components/Countdown.liquid.js

@@ -16,7 +16,7 @@ const Countdown = ({ builderProps, setting, styles, advanced, pageContext })=>{
                 bg: getGlobalColorCSSProp(styles?.backgroundItemColor)
             })
         }}"
-    class="${cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '', !textLabel ? 'gp-content-center' : '')}">
+    class="${cls(getGlobalColorClass('bg', styles?.backgroundItemColor), 'gp-flex-1 gp-text-center gp-min-w-max !gp-max-w-max', styles?.itemPadding?.type ? genSizeClass(styles?.itemPadding?.type) : '')}">
     ${Text({
             styles: {
                 typography: styles?.numTypography,

package/dist/esm/countdown-timer/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Countdown = dynamic(()=>import('./components/Countdown.js'), {
     loading: Loading,

package/dist/esm/countdown-timer/setting/index.js

@@ -1,7 +1,7 @@
 import config from './Countdown.js';
 
-var countdownSetting = {
+var index = {
     Countdown: config
 };
 
-export { countdownSetting as default };
+export { index as default };

package/dist/esm/coupon/components/Coupon.js

@@ -1,4 +1,3 @@
-'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useEditorMode } from '@gem-sdk/core';
 import Button from '../../button/components/Button.js';

package/dist/esm/coupon/next.js

@@ -1,8 +1,6 @@
 import dynamic from 'next/dynamic';
 import Loading from '../common/components/Loading.js';
 import 'react/jsx-runtime';
-import 'react';
-import '@gem-sdk/core';
 
 const Coupon = dynamic(()=>import('./components/Coupon.js'), {
     loading: Loading

package/dist/esm/coupon/setting/index.js

@@ -1,7 +1,7 @@
 import config from './Coupon.js';
 
-var couponSetting = {
+var index = {
     Coupon: config
 };
 
-export { couponSetting as default };
+export { index as default };

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

@@ -1,8 +1,7 @@
-'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useModalStore, useEditorMode, useInteraction, globalEvent, makeWidth, cls, makeStyle, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
+import { useModalStore, useEditorMode, useInteraction, globalEvent, makeWidth, makeStyle, cls, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
 import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { isShowModal, isMobile, heightStyle, removeHeightPercentForContent, inheritStyleBody } from '../helpers/common.js';
+import { isShowModal, isMobile, getPropertyByDevice } 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';
@@ -235,6 +234,20 @@ 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',
@@ -253,29 +266,13 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                 '--bw-mobile',
                 '--bw-tablet',
                 '--bc',
-                '--bc-tablet',
-                '--bc-mobile',
                 '--b',
-                '--b-tablet',
-                '--b-mobile',
                 '--bs',
-                '--bs-tablet',
-                '--bs-mobile',
                 '--radius',
-                '--radius-tablet',
-                '--radius-mobile',
                 '--bblr',
                 '--bbrr',
                 '--btlr',
-                '--btrr',
-                '--bblr-tablet',
-                '--bbrr-tablet',
-                '--btlr-tablet',
-                '--btrr-tablet',
-                '--bblr-mobile',
-                '--bbrr-mobile',
-                '--btlr-mobile',
-                '--btrr-mobile'
+                '--btrr'
             ].includes(key)).reduce((curr, key)=>({
                 ...curr,
                 [key]: style?.[key]
@@ -377,7 +374,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             ...displayStyle,
                             ...borderStyle,
                             ...makeStyleResponsive('w', w),
-                            ...heightStyle(fullScreen, height)
+                            ...heightStyle
                         },
                         children: [
                             /*#__PURE__*/ jsx("button", {
@@ -418,8 +415,7 @@ const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
                             /*#__PURE__*/ jsx("div", {
                                 style: {
                                     ...innerStyle,
-                                    ...removeHeightPercentForContent(heightStyle(fullScreen, height)),
-                                    ...inheritStyleBody,
+                                    ...heightStyle,
                                     ...getStyleBackgroundByDevice(background, {
                                         ignoreBackgroundImage: true,
                                         ignoreBackgroundImageProperties: true,
@@ -427,7 +423,10 @@ 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'),
+                                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
+                                }),
                                 children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : filterToolbarPreview(children)
                             }),
                             filterToolbarPreview(children, true)