@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/esm/form/setting/Textarea.js

@@ -1,333 +0,0 @@
-const config = {
-    tag: 'FormTextarea',
-    label: 'Text Area',
-    icon: `
-  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M37.3333 9.33341V30.6667H38.1667C38.4428 30.6667 38.6667 30.8906 38.6667 31.1667V32.8334C38.6667 33.1096 38.4428 33.3334 38.1667 33.3334H33.8333C33.5572 33.3334 33.3333 33.1096 33.3333 32.8334V31.1667C33.3333 30.8906 33.5572 30.6667 33.8333 30.6667H34.6667V9.33341H33.8333C33.5572 9.33341 33.3333 9.10956 33.3333 8.83341V7.16675C33.3333 6.89061 33.5572 6.66675 33.8333 6.66675H38.1667C38.4428 6.66675 38.6667 6.89061 38.6667 7.16675V8.83341C38.6667 9.10956 38.4428 9.33341 38.1667 9.33341H37.3333Z" fill="currentColor"/>
-    <path d="M12.7147 24.0747H6.78399L5.91906 26.5754C5.84939 26.7769 5.65968 26.912 5.44653 26.912H3.02206C2.84899 26.912 2.72828 26.7404 2.78677 26.5775L7.90246 12.331C7.97376 12.1324 8.16205 12 8.37304 12H11.1469C11.3579 12 11.5462 12.1324 11.6175 12.331L16.7332 26.5775C16.7917 26.7404 16.671 26.912 16.4979 26.912H14.0521C13.839 26.912 13.6493 26.7769 13.5796 26.5754L12.7147 24.0747ZM11.904 21.6853L9.74932 15.456L7.59466 21.6853H11.904Z" fill="currentColor"/>
-    <path d="M18.0868 20.96C18.0868 19.7653 18.3215 18.7058 18.7908 17.7813C19.2744 16.8569 19.9215 16.1458 20.7322 15.648C21.557 15.1502 22.4744 14.9013 23.4842 14.9013C24.3659 14.9013 25.1339 15.0791 25.7882 15.4347C26.4566 15.7902 26.9899 16.2382 27.3882 16.7787V15.5933C27.3882 15.3172 27.612 15.0933 27.8882 15.0933H29.8962C30.1723 15.0933 30.3962 15.3172 30.3962 15.5933V26.412C30.3962 26.6881 30.1723 26.912 29.8962 26.912H27.8882C27.612 26.912 27.3882 26.6881 27.3882 26.412V25.184C27.0042 25.7387 26.4708 26.2009 25.7882 26.5707C25.1197 26.9262 24.3446 27.104 23.4628 27.104C22.4673 27.104 21.557 26.848 20.7322 26.336C19.9215 25.824 19.2744 25.1058 18.7908 24.1813C18.3215 23.2427 18.0868 22.1689 18.0868 20.96ZM27.3882 21.0027C27.3882 20.2773 27.2459 19.6587 26.9615 19.1467C26.677 18.6204 26.293 18.2222 25.8095 17.952C25.3259 17.6676 24.8068 17.5253 24.2522 17.5253C23.6975 17.5253 23.1855 17.6604 22.7162 17.9307C22.2468 18.2009 21.8628 18.5991 21.5642 19.1253C21.2797 19.6373 21.1375 20.2489 21.1375 20.96C21.1375 21.6711 21.2797 22.2969 21.5642 22.8373C21.8628 23.3636 22.2468 23.7689 22.7162 24.0533C23.1997 24.3378 23.7117 24.48 24.2522 24.48C24.8068 24.48 25.3259 24.3449 25.8095 24.0747C26.293 23.7902 26.677 23.392 26.9615 22.88C27.2459 22.3538 27.3882 21.728 27.3882 21.0027Z" fill="currentColor"/>
-  </svg>
-  `,
-    settings: [
-        {
-            id: 'setting',
-            controls: [
-                {
-                    id: 'name',
-                    label: 'Name',
-                    type: 'input',
-                    placeholder: 'contact[note]',
-                    default: 'contact[note]'
-                },
-                {
-                    id: 'placeholder',
-                    label: 'Placeholder',
-                    type: 'input',
-                    info: 'Placeholder helps your buyers understand what to input',
-                    placeholder: 'Enter your text',
-                    default: 'Enter your text'
-                },
-                {
-                    id: 'translate',
-                    type: 'input',
-                    default: 'placeholder'
-                },
-                {
-                    id: 'size',
-                    label: 'Button Spacing',
-                    type: 'size',
-                    default: {
-                        type: 'medium'
-                    },
-                    ignoreReRender: true
-                },
-                {
-                    id: 'required',
-                    label: 'Required',
-                    type: 'toggle',
-                    default: false
-                },
-                {
-                    id: 'fullWidth',
-                    label: 'Full Width',
-                    type: 'toggle',
-                    devices: {
-                        desktop: {
-                            default: true
-                        }
-                    }
-                },
-                {
-                    id: 'width',
-                    type: 'input:unit',
-                    label: 'Width',
-                    min: 0,
-                    emptyOnClear: true,
-                    units: [
-                        'px',
-                        '%'
-                    ],
-                    hide: true,
-                    devices: {
-                        desktop: {
-                            default: undefined
-                        }
-                    }
-                },
-                {
-                    id: 'typo',
-                    label: 'Text styles',
-                    type: 'typography-v2',
-                    default: {
-                        type: 'paragraph-1'
-                    },
-                    hiddenSetting: {
-                        color: true
-                    },
-                    ignoreReRender: true
-                },
-                {
-                    id: 'color',
-                    type: 'colorpicker',
-                    label: 'Text Color',
-                    default: 'text-1'
-                },
-                {
-                    id: 'transform',
-                    label: 'Text Transform',
-                    type: 'select',
-                    options: [
-                        {
-                            value: 'default',
-                            label: 'None'
-                        },
-                        {
-                            value: 'capitalize',
-                            label: 'Capitalize'
-                        },
-                        {
-                            value: 'uppercase',
-                            label: 'Uppercase'
-                        },
-                        {
-                            value: 'lowercase',
-                            label: 'Lowercase'
-                        }
-                    ],
-                    default: 'default'
-                },
-                {
-                    id: 'align',
-                    label: 'Alignment',
-                    type: 'segment',
-                    options: [
-                        {
-                            label: 'Left',
-                            value: 'left',
-                            type: 'align',
-                            tooltip: 'Align left'
-                        },
-                        {
-                            label: 'Center',
-                            value: 'center',
-                            type: 'align',
-                            tooltip: 'Align center'
-                        },
-                        {
-                            label: 'Right',
-                            value: 'right',
-                            type: 'align',
-                            tooltip: 'Align right'
-                        }
-                    ],
-                    devices: {
-                        desktop: {
-                            default: 'left'
-                        }
-                    }
-                }
-            ]
-        }
-    ],
-    ui: [
-        {
-            type: 'control',
-            label: {
-                en: 'Placeholder'
-            },
-            setting: {
-                id: 'placeholder'
-            },
-            options: {
-                label: 'large'
-            }
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Required'
-            },
-            // info: {
-            //   en: 'Your buyers must fill in this input to submit form.',
-            // },
-            setting: {
-                id: 'required'
-            },
-            options: {
-                label: 'large'
-            }
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Size'
-            },
-            info: {
-                en: ''
-            },
-            controls: [
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Field size'
-                    },
-                    setting: {
-                        id: 'size'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Full width'
-                    },
-                    setting: {
-                        id: 'fullWidth'
-                    }
-                },
-                {
-                    type: 'control',
-                    label: {
-                        en: 'Width'
-                    },
-                    condition: 'fullWidth == false',
-                    setting: {
-                        id: 'width'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Align'
-            },
-            setting: {
-                id: 'align'
-            },
-            condition: 'fullWidth == false'
-        },
-        {
-            type: 'group',
-            label: {
-                en: 'Text'
-            },
-            controls: [
-                {
-                    type: 'control',
-                    layout: 'vertical',
-                    setting: {
-                        id: 'typo'
-                    }
-                }
-            ]
-        },
-        {
-            type: 'control',
-            label: {
-                en: 'Name'
-            },
-            setting: {
-                id: 'name'
-            }
-        }
-    ],
-    advanced: {},
-    editorConfigs: {
-        placeholder: {
-            flowTag: [
-                'Newsletter',
-                'ContactForm'
-            ]
-        }
-    },
-    presets: [
-        {
-            id: 'form-text-area',
-            name: {
-                en: 'Text Area'
-            },
-            icon: {
-                desktop: `
-          <svg width="96" height="44" viewBox="0 0 96 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="0.5" y="0.5" width="95" height="43" rx="2.5" stroke="#474747"/>
-          <path d="M21.6323 18.2102V17.2727H28.1777V18.2102H25.4334V26H24.3766V18.2102H21.6323ZM31.4675 26.1364C30.8368 26.1364 30.2928 25.9972 29.8354 25.7188C29.3809 25.4375 29.03 25.0455 28.7828 24.5426C28.5385 24.0369 28.4164 23.4489 28.4164 22.7784C28.4164 22.108 28.5385 21.517 28.7828 21.0057C29.03 20.4915 29.3738 20.0909 29.8141 19.804C30.2573 19.5142 30.7743 19.3693 31.3652 19.3693C31.7061 19.3693 32.0428 19.4261 32.3752 19.5398C32.7076 19.6534 33.0101 19.8381 33.2828 20.0938C33.5556 20.3466 33.7729 20.6818 33.9348 21.0994C34.0968 21.517 34.1777 22.0312 34.1777 22.642V23.0682H29.1323V22.1989H33.155C33.155 21.8295 33.0811 21.5 32.9334 21.2102C32.7885 20.9205 32.5811 20.6918 32.3113 20.5241C32.0442 20.3565 31.7289 20.2727 31.3652 20.2727C30.9647 20.2727 30.6181 20.3722 30.3255 20.571C30.0357 20.767 29.8127 21.0227 29.6564 21.3381C29.5002 21.6534 29.4221 21.9915 29.4221 22.3523V22.9318C29.4221 23.4261 29.5073 23.8452 29.6777 24.1889C29.851 24.5298 30.0911 24.7898 30.3979 24.9688C30.7047 25.1449 31.0613 25.233 31.4675 25.233C31.7317 25.233 31.9703 25.196 32.1834 25.1222C32.3993 25.0455 32.5854 24.9318 32.7417 24.7812C32.8979 24.6278 33.0186 24.4375 33.1039 24.2102L34.0755 24.483C33.9732 24.8125 33.8013 25.1023 33.5598 25.3523C33.3184 25.5994 33.0201 25.7926 32.665 25.9318C32.3098 26.0682 31.9107 26.1364 31.4675 26.1364ZM36.2818 19.4545L37.85 22.1307L39.4181 19.4545H40.5772L38.4636 22.7273L40.5772 26H39.4181L37.85 23.4602L36.2818 26H35.1227L37.2022 22.7273L35.1227 19.4545H36.2818ZM44.8588 19.4545V20.3068H41.4668V19.4545H44.8588ZM42.4554 17.8864H43.4611V24.125C43.4611 24.4091 43.5023 24.6222 43.5847 24.7642C43.6699 24.9034 43.7779 24.9972 43.9086 25.0455C44.0421 25.0909 44.1827 25.1136 44.3304 25.1136C44.4412 25.1136 44.5321 25.108 44.6032 25.0966C44.6742 25.0824 44.731 25.071 44.7736 25.0625L44.9782 25.9659C44.91 25.9915 44.8148 26.017 44.6926 26.0426C44.5705 26.071 44.4157 26.0852 44.2282 26.0852C43.9441 26.0852 43.6657 26.0241 43.3929 25.902C43.123 25.7798 42.8986 25.5938 42.7196 25.3438C42.5435 25.0938 42.4554 24.7784 42.4554 24.3977V17.8864ZM50.2409 26H49.133L52.3375 17.2727H53.4284L56.633 26H55.525L52.9171 18.6534H52.8489L50.2409 26ZM50.65 22.5909H55.1159V23.5284H50.65V22.5909ZM57.856 26V19.4545H58.8276V20.4432H58.8958C59.0151 20.1193 59.231 19.8565 59.5435 19.6548C59.856 19.4531 60.2083 19.3523 60.6003 19.3523C60.6742 19.3523 60.7665 19.3537 60.8773 19.3565C60.9881 19.3594 61.0719 19.3636 61.1287 19.3693V20.392C61.0946 20.3835 61.0165 20.3707 60.8944 20.3537C60.775 20.3338 60.6486 20.3239 60.5151 20.3239C60.1969 20.3239 59.9128 20.3906 59.6628 20.5241C59.4157 20.6548 59.2196 20.8366 59.0748 21.0696C58.9327 21.2997 58.8617 21.5625 58.8617 21.858V26H57.856ZM64.8659 26.1364C64.2353 26.1364 63.6912 25.9972 63.2338 25.7188C62.7793 25.4375 62.4284 25.0455 62.1813 24.5426C61.937 24.0369 61.8148 23.4489 61.8148 22.7784C61.8148 22.108 61.937 21.517 62.1813 21.0057C62.4284 20.4915 62.7722 20.0909 63.2125 19.804C63.6557 19.5142 64.1728 19.3693 64.7637 19.3693C65.1046 19.3693 65.4412 19.4261 65.7736 19.5398C66.106 19.6534 66.4086 19.8381 66.6813 20.0938C66.954 20.3466 67.1713 20.6818 67.3333 21.0994C67.4952 21.517 67.5762 22.0312 67.5762 22.642V23.0682H62.5307V22.1989H66.5534C66.5534 21.8295 66.4796 21.5 66.3319 21.2102C66.187 20.9205 65.9796 20.6918 65.7097 20.5241C65.4426 20.3565 65.1273 20.2727 64.7637 20.2727C64.3631 20.2727 64.0165 20.3722 63.7239 20.571C63.4341 20.767 63.2111 21.0227 63.0549 21.3381C62.8986 21.6534 62.8205 21.9915 62.8205 22.3523V22.9318C62.8205 23.4261 62.9057 23.8452 63.0762 24.1889C63.2495 24.5298 63.4895 24.7898 63.7963 24.9688C64.1032 25.1449 64.4597 25.233 64.8659 25.233C65.1301 25.233 65.3688 25.196 65.5819 25.1222C65.7978 25.0455 65.9838 24.9318 66.1401 24.7812C66.2963 24.6278 66.4171 24.4375 66.5023 24.2102L67.4739 24.483C67.3716 24.8125 67.1998 25.1023 66.9583 25.3523C66.7168 25.5994 66.4185 25.7926 66.0634 25.9318C65.7083 26.0682 65.3091 26.1364 64.8659 26.1364ZM71.0321 26.1534C70.6174 26.1534 70.2409 26.0753 69.9029 25.919C69.5648 25.7599 69.2963 25.5312 69.0975 25.233C68.8986 24.9318 68.7992 24.5682 68.7992 24.142C68.7992 23.767 68.873 23.4631 69.0208 23.2301C69.1685 22.9943 69.3659 22.8097 69.6131 22.6761C69.8603 22.5426 70.133 22.4432 70.4313 22.3778C70.7324 22.3097 71.035 22.2557 71.339 22.2159C71.7367 22.1648 72.0591 22.1264 72.3063 22.1009C72.5563 22.0724 72.7381 22.0256 72.8517 21.9602C72.9682 21.8949 73.0265 21.7812 73.0265 21.6193V21.5852C73.0265 21.1648 72.9114 20.8381 72.6813 20.6051C72.454 20.3722 72.1088 20.2557 71.6458 20.2557C71.1657 20.2557 70.7892 20.3608 70.5165 20.571C70.2438 20.7812 70.052 21.0057 69.9412 21.2443L68.9867 20.9034C69.1571 20.5057 69.3844 20.196 69.6685 19.9744C69.9554 19.75 70.2679 19.5937 70.606 19.5057C70.9469 19.4148 71.2821 19.3693 71.6117 19.3693C71.8219 19.3693 72.0634 19.3949 72.3361 19.446C72.6117 19.4943 72.8773 19.5952 73.133 19.7486C73.3915 19.902 73.606 20.1335 73.7765 20.4432C73.9469 20.7528 74.0321 21.1676 74.0321 21.6875V26H73.0265V25.1136H72.9753C72.9071 25.2557 72.7935 25.4077 72.6344 25.5696C72.4753 25.7315 72.2637 25.8693 71.9995 25.983C71.7353 26.0966 71.4128 26.1534 71.0321 26.1534ZM71.1855 25.25C71.5833 25.25 71.9185 25.1719 72.1912 25.0156C72.4668 24.8594 72.6742 24.6577 72.8134 24.4105C72.9554 24.1634 73.0265 23.9034 73.0265 23.6307V22.7102C72.9838 22.7614 72.8901 22.8082 72.7452 22.8509C72.6032 22.8906 72.4384 22.9261 72.2509 22.9574C72.0662 22.9858 71.8858 23.0114 71.7097 23.0341C71.5364 23.054 71.3958 23.071 71.2878 23.0852C71.0265 23.1193 70.7821 23.1747 70.5549 23.2514C70.3304 23.3253 70.1486 23.4375 70.0094 23.5881C69.873 23.7358 69.8049 23.9375 69.8049 24.1932C69.8049 24.5426 69.9341 24.8068 70.1926 24.9858C70.454 25.1619 70.785 25.25 71.1855 25.25Z" fill="#F9F9F9"/>
-          <path d="M91.5 34L87 38.5" stroke="#474747" stroke-linecap="round"/>
-          <path d="M92 37L90 39" stroke="#474747" stroke-linecap="round"/>
-          </svg>        
-        `
-            },
-            components: [
-                {
-                    tag: 'FormTextarea',
-                    label: 'Textarea',
-                    advanced: {
-                        'spacing-setting': {
-                            desktop: {
-                                margin: {
-                                    bottom: 'var(--g-s-l)'
-                                }
-                            }
-                        },
-                        border: {
-                            desktop: {
-                                normal: {
-                                    borderType: 'style-2',
-                                    borderLabel: 'Style 2',
-                                    border: 'solid',
-                                    color: 'line-2',
-                                    isCustom: false,
-                                    width: '1px 1px 1px 1px'
-                                }
-                            }
-                        },
-                        rounded: {
-                            desktop: {
-                                normal: {
-                                    btrr: '0px',
-                                    bblr: '0px',
-                                    bbrr: '0px',
-                                    btlr: '0px',
-                                    radiusType: 'none'
-                                }
-                            }
-                        },
-                        hasBoxShadow: {
-                            desktop: {
-                                normal: false
-                            }
-                        },
-                        boxShadow: {
-                            desktop: {
-                                normal: {
-                                    type: 'shadow-1'
-                                }
-                            }
-                        }
-                    }
-                }
-            ]
-        }
-    ]
-};
-
-export { config as default };

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

@@ -1,21 +0,0 @@
-import config from './Newsletter.js';
-import config$3 from './Contact.js';
-import config$1 from './FormEmail.js';
-import config$2 from './SubmitButton.js';
-import config$4 from './TextField.js';
-import config$5 from './Textarea.js';
-import config$6 from './FormDropdown.js';
-import config$7 from './FormCheckbox.js';
-
-var index = {
-    Newsletter: config,
-    FormEmail: config$1,
-    SubmitButton: config$2,
-    ContactForm: config$3,
-    TextField: config$4,
-    FormTextarea: config$5,
-    FormDropdown: config$6,
-    FormCheckbox: config$7
-};
-
-export { index as default };

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

@@ -1,38 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { usePageType, makeStyleResponsive, cls, isEmptyChildren } from '@gem-sdk/core';
-import ChildrenDroppable from './ChildrenDroppable.js';
-import { useMemo } from 'react';
-
-const Column = ({ children, className, style, builderAttrs, builderProps, advanced, setting, styles, justifyContent, order, ...props })=>{
-    const pageType = usePageType();
-    const orderRender = useMemo(()=>{
-        const od = order ?? styles?.order;
-        if (pageType === 'POST_PURCHASE') {
-            return {
-                desktop: od?.desktop,
-                tablet: od?.desktop,
-                mobile: od?.desktop
-            };
-        }
-        return od;
-    }, [
-        order,
-        pageType,
-        styles?.order
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        ...props,
-        ...builderAttrs,
-        style: {
-            ...makeStyleResponsive('cg', styles?.gap),
-            ...makeStyleResponsive('rg', styles?.gap),
-            ...makeStyleResponsive('ai', styles?.alignItem),
-            ...makeStyleResponsive('jc', justifyContent ?? styles?.justifyContent),
-            ...makeStyleResponsive('o', orderRender)
-        },
-        className: cls(className, builderProps?.uid, 'gp-relative gp-flex gp-flex-col', styles?.fullWidth ? 'gp-w-full' : ''),
-        children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : children
-    });
-};
-
-export { Column as default };

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

@@ -1,36 +0,0 @@
-import { getResponsiveValue, getResponsiveValueByScreen, isColumnDirectionExist, template, makeStyleResponsive, cls } from '@gem-sdk/core';
-
-const Column = ({ children, className, style, builderAttrs, builderProps, advanced, setting, styles, justifyContent, order, layout, parentTag, ...props })=>{
-    const display = getResponsiveValue(layout, 'display');
-    const displayByBreakpointIfChildrenEmpty = {};
-    const DEVICES = [
-        'desktop',
-        'tablet',
-        'mobile'
-    ];
-    const REMOVE_SPACING_COMPONENT_TAG = [
-        'IconListItem',
-        'ThirdPartySlot'
-    ];
-    for (const device of DEVICES){
-        displayByBreakpointIfChildrenEmpty[device] = getResponsiveValueByScreen(display, device) === 'fit' || !!layout && isColumnDirectionExist(layout, device) || REMOVE_SPACING_COMPONENT_TAG.includes(parentTag || '') ? 'none' : styles?.display?.[device];
-    }
-    return template`<div
-      ${{
-        ...props
-    }}
-      style="${{
-        ...makeStyleResponsive('cg', styles?.gap),
-        ...makeStyleResponsive('rg', styles?.gap),
-        ...makeStyleResponsive('ai', styles?.alignItem),
-        ...makeStyleResponsive('jc', justifyContent ?? styles?.justifyContent),
-        ...makeStyleResponsive('o', order ?? styles?.order),
-        ...makeStyleResponsive('d', children ? styles?.display : displayByBreakpointIfChildrenEmpty)
-    }}"
-      class="${cls(className, builderProps?.uid, advanced?.cssClass, 'gp-relative gp-flex gp-flex-col', styles?.fullWidth ? 'gp-w-full' : '')}"
-    >
-      ${children ?? ''}
-    </div>`;
-};
-
-export { Column as default };

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

@@ -1,9 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-const Root = ({ children })=>{
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-};
-
-export { Root as default };

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

@@ -1,5 +0,0 @@
-const Root = ({ children })=>{
-    return children;
-};
-
-export { Root as default };

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

@@ -1,177 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useMemo, Children, isValidElement, createElement } from 'react';
-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';
-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({
-        addRootMargin: mode == 'edit' ? 500 : 100,
-        initialInView: mode == 'edit' ? true : !lazy,
-        triggerOnce: mode == 'edit' ? false : true,
-        skip: !isSection,
-        onChange: (inView, node)=>{
-            if (mode == 'edit' && !inView && node) {
-                const computedStyle = getComputedStyle(node);
-                let height = node?.getBoundingClientRect().height;
-                height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
-                setCacheHeightOutViewport(height ?? 500);
-            }
-        }
-    });
-    const isDisplaySection = useMemo(()=>{
-        return inView || mode !== 'edit' || pageType === 'POST_PURCHASE';
-    }, [
-        inView,
-        mode,
-        pageType
-    ]);
-    //=== END lazyload section ====
-    const childHasChildren = useMemo(()=>{
-        return builderProps?.builderData?.childrens?.length;
-    }, [
-        builderProps
-    ]);
-    const currentDevice = useCurrentDevice();
-    const isRowEmpty = useMemo(()=>{
-        return isEmptyChildren(children) || !childHasChildren;
-    }, [
-        childHasChildren,
-        children
-    ]);
-    const { fullWidth, width, verticalGutter, background, columnGap, height } = styles ?? {};
-    const styleObject = createStyleObject(width, pageType === 'POST_PURCHASE' && isSection ? {
-        desktop: false,
-        tablet: false,
-        mobile: false
-    } : fullWidth);
-    const [wrapStyle, restStyle] = splitStyle([
-        'pos',
-        'top',
-        'left',
-        'bottom',
-        'right',
-        'z'
-    ], style);
-    const getStyles = ()=>{
-        let result = {
-            ...isSection ? restStyle : style,
-            ...makeStyleResponsive('cg', verticalGutter),
-            ...layout ? composeGridLayout(layout) : makeStyleResponsive('gtc', responsive),
-            ...makeStyleResponsive('w', styleObject.content),
-            ...makeStyleResponsive('h', height)
-        };
-        if (pageType === 'POST_PURCHASE') {
-            result = {
-                ...result,
-                '--mb': '0px',
-                '--mt': '0px',
-                ...makeStyleResponsive('cg', columnGap),
-                ...makeStyle({
-                    pc: inlineAlignment
-                })
-            };
-        } else {
-            result = {
-                ...result,
-                ...makeStyleResponsive('pc', horizontalAlign),
-                ...getStyleBackgroundByDevice(background),
-                ...getGradientBgrStyleByDevice(background)
-            };
-        }
-        const display = getResponsiveValue(layout, 'display');
-        const displayByDevice = display[currentDevice];
-        if (maxWidthWithEmptyChildren && isRowEmpty && mode === 'edit') {
-            result = {
-                ...result,
-                width: displayByDevice === 'fit' ? 'fit-content' : '400px'
-            };
-        }
-        if (isNotFullWidth && !isRowEmpty) {
-            result = {
-                ...result,
-                marginLeft: '0px',
-                marginRight: '0px'
-            };
-        }
-        return result;
-    };
-    const getVerticalAlign = ()=>{
-        if (pageType === 'POST_PURCHASE') {
-            return {
-                desktop: blockAlignment,
-                tablet: blockAlignment,
-                mobile: blockAlignment
-            };
-        }
-        return verticalAlign;
-    };
-    const element = /*#__PURE__*/ jsx("div", {
-        ...builderAttrs,
-        ...props,
-        id: builderProps?.uid,
-        "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 gp-grid-rows-[1fr]', {
-            'gp-content-visibility-hidden': mode !== 'edit' && isSection && lazy && !inView
-        }),
-        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,
-                    key: el.key,
-                    order: setting?.order,
-                    justifyContent: getVerticalAlign()
-                });
-                return null;
-            })
-        }) : /*#__PURE__*/ jsx("div", {
-            style: {
-                height: `${cacheHeightOutViewport}px`
-            }
-        })
-    });
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            !!styles?.preloadBgImage && /*#__PURE__*/ jsxs(Head, {
-                children: [
-                    !!background?.desktop?.image?.src && /*#__PURE__*/ jsx("link", {
-                        rel: "preload",
-                        href: background.desktop.image.src,
-                        as: "image"
-                    }),
-                    !!background?.tablet?.image?.src && /*#__PURE__*/ jsx("link", {
-                        rel: "preload",
-                        href: background.tablet.image.src,
-                        as: "image"
-                    }),
-                    !!background?.mobile?.image?.src && /*#__PURE__*/ jsx("link", {
-                        rel: "preload",
-                        href: background.mobile.image.src,
-                        as: "image"
-                    })
-                ]
-            }),
-            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
-        ]
-    });
-};
-
-export { Row as default };