@gem-sdk/core 1.23.0-moon.60 → 1.23.0-moon.75

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -160,13 +160,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
         window.dispatchEvent(event);
         return false;
     };
-    const toolbarName = ()=>{
-        const name = props.customLabel || props.label;
-        if (name?.toLowerCase() === 'item list' || name?.toLowerCase() === 'icon list') {
-            return 'Advanced list';
-        }
-        return name;
-    };
     const onZoomOut = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -259,7 +252,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
                             }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-name": true,
-                                children: toolbarName()
+                                children: props.customLabel || props.label
                             }),
                             props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-icon-parent": true,

package/dist/cjs/components/ComponentWrapper.js

@@ -20,6 +20,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -35,7 +36,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -106,16 +106,11 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
+                style: style,
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    !props.editorConfigs?.component?.validate && children,
-                    /*#__PURE__*/ react.isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
-                        ...children.props,
-                        style,
-                        advanced
-                    }),
+                    children,
                     /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
                         ...props
                     })

package/dist/cjs/components/Render.liquid.js

@@ -24,9 +24,6 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const componentIconList = [
-    'IconListV2'
-];
 const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -107,7 +104,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                 });
             });
         } else {
-            liquid = render.template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+            liquid = render.template`<div style="${style}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
       ${render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
@@ -156,7 +153,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     },
                     pageContext,
                     isText: componentTexts.includes(item.tag) ? true : null,
-                    style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps
                 });
             })}

package/dist/cjs/components/resize/Resize.js

@@ -3,19 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var Column = require('./Column.js');
 var Spacing = require('./Spacing.js');
 
 function Resize(props) {
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
-                ...props
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(Column.default, {
-                ...props
-            })
-        ]
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
+            ...props
+        })
     });
 }
 

package/dist/cjs/helpers/size.js

@@ -2,6 +2,7 @@
 
 var makeStyle = require('./make-style.js');
 var constant = require('./constant.js');
+var getResonsiveValue = require('./get-resonsive-value.js');
 
 function getCustomSizeCSSByDevice(size, device) {
     if (!size || !device) return {};
@@ -50,21 +51,100 @@ const makeStyleWithDefault = (name, value, defaultVal)=>{
 };
 const getWidthHeightGlobalSize = (type, globalSize)=>{
     if (!globalSize) return {};
-    const data = {
-        desktop: globalSize?.desktop?.[type],
-        tablet: globalSize?.tablet?.[type],
-        mobile: globalSize?.mobile?.[type]
-    };
-    if (data.desktop === undefined) {
-        data.desktop = 'auto';
-    }
-    if (data.tablet === undefined) {
-        data.tablet = data.desktop;
-    }
-    if (data.mobile === undefined) {
-        data.mobile = data.tablet;
-    }
-    return data;
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        result = {
+            ...result,
+            [device]: getResonsiveValue.getResponsiveValueByScreen(globalSize, device)?.[type]
+        };
+    });
+    return result;
+};
+const getHeightByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResonsiveValue.getResponsiveValueByScreen(shapeByLayout, device);
+        const shapeValue = shapeByDevice?.shapeValue;
+        const height = shapeByDevice?.height;
+        result = {
+            ...result,
+            [device]: shapeValue ? 'auto' : height || 'auto'
+        };
+    });
+    return result;
+};
+const getWidthByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResonsiveValue.getResponsiveValueByScreen(shapeByLayout, device);
+        const width = shapeByDevice?.width;
+        result = {
+            ...result,
+            [device]: width || 'auto'
+        };
+    });
+    return result;
+};
+const getAspectRatioGlobalSize = (shape)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeValue = getResonsiveValue.getResponsiveValueByScreen(shape, device)?.shapeValue;
+        if (shapeValue) {
+            result = {
+                ...result,
+                [device]: shapeValue
+            };
+        } else {
+            const shapeConfig = getResonsiveValue.getResponsiveValueByScreen(shape, device)?.shape;
+            switch(shapeConfig){
+                case 'square':
+                    result = {
+                        ...result,
+                        [device]: '1/1'
+                    };
+                    break;
+                case 'vertical':
+                    result = {
+                        ...result,
+                        [device]: '3/4'
+                    };
+                    break;
+                case 'horizontal':
+                    result = {
+                        ...result,
+                        [device]: '4/3'
+                    };
+                    break;
+                case 'original':
+                    result = {
+                        ...result,
+                        [device]: 'auto'
+                    };
+                    break;
+            }
+        }
+    });
+    return result;
 };
 function getCustomPaddingSizeCSSByDevice(globalSize, device) {
     if (!globalSize || !device) return {};
@@ -83,7 +163,10 @@ const getPaddingGlobalSize = (globalSize)=>{
 exports.composeSize = composeSize;
 exports.composeSizeCss = composeSizeCss;
 exports.genSizeClass = genSizeClass;
+exports.getAspectRatioGlobalSize = getAspectRatioGlobalSize;
+exports.getHeightByShapeGlobalSize = getHeightByShapeGlobalSize;
 exports.getPaddingGlobalSize = getPaddingGlobalSize;
+exports.getWidthByShapeGlobalSize = getWidthByShapeGlobalSize;
 exports.getWidthHeightGlobalSize = getWidthHeightGlobalSize;
 exports.makeGlobalSize = makeGlobalSize;
 exports.makeStyleWithDefault = makeStyleWithDefault;

package/dist/cjs/index.js

@@ -221,7 +221,10 @@ exports.isLocalEnv = convert.isLocalEnv;
 exports.composeSize = size.composeSize;
 exports.composeSizeCss = size.composeSizeCss;
 exports.genSizeClass = size.genSizeClass;
+exports.getAspectRatioGlobalSize = size.getAspectRatioGlobalSize;
+exports.getHeightByShapeGlobalSize = size.getHeightByShapeGlobalSize;
 exports.getPaddingGlobalSize = size.getPaddingGlobalSize;
+exports.getWidthByShapeGlobalSize = size.getWidthByShapeGlobalSize;
 exports.getWidthHeightGlobalSize = size.getWidthHeightGlobalSize;
 exports.makeGlobalSize = size.makeGlobalSize;
 exports.makeStyleWithDefault = size.makeStyleWithDefault;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -158,13 +158,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
         window.dispatchEvent(event);
         return false;
     };
-    const toolbarName = ()=>{
-        const name = props.customLabel || props.label;
-        if (name?.toLowerCase() === 'item list' || name?.toLowerCase() === 'icon list') {
-            return 'Advanced list';
-        }
-        return name;
-    };
     const onZoomOut = (e)=>{
         e.preventDefault();
         e.stopPropagation();
@@ -257,7 +250,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
                                 children: isThemeSection ? props.name : `Section ${getIndexSection() + 1}${getSectionNumber() >= SECTION_LIMIT - 5 ? `/${SECTION_LIMIT}` : ''}`
                             }) : /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-name": true,
-                                children: toolbarName()
+                                children: props.customLabel || props.label
                             }),
                             props.tag !== 'Section' && parents.length > 0 && /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-icon-parent": true,

package/dist/esm/components/ComponentWrapper.js

@@ -16,6 +16,7 @@ const ComponentWrapper = ({ children, ...props })=>{
                     advanced: advanced
                 }),
                 /*#__PURE__*/ jsx(children.type, {
+                    className: advanced?.cssClass,
                     ...children.props,
                     style,
                     advanced
@@ -31,7 +32,7 @@ const ComponentWrapper = ({ children, ...props })=>{
             }),
             /*#__PURE__*/ jsx("div", {
                 style: style,
-                className: `${props.uid}`,
+                className: `${props.uid} ${advanced?.cssClass}`,
                 children: children
             })
         ]

package/dist/esm/components/ComponentWrapperPreview.js

@@ -102,16 +102,11 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
                 advanced: advanced
             }),
             /*#__PURE__*/ jsxs("div", {
-                style: !props.editorConfigs?.component?.excludeApplyStyle ? style : {},
+                style: style,
                 className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
                 ...builderAttrs,
                 children: [
-                    !props.editorConfigs?.component?.validate && children,
-                    /*#__PURE__*/ isValidElement(children) && props.editorConfigs?.component?.validate && /*#__PURE__*/ jsx(children.type, {
-                        ...children.props,
-                        style,
-                        advanced
-                    }),
+                    children,
                     /*#__PURE__*/ jsx(ComponentToolbarPreview, {
                         ...props
                     })

package/dist/esm/components/Render.liquid.js

@@ -20,9 +20,6 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const componentIconList = [
-    'IconListV2'
-];
 const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
@@ -103,7 +100,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                 });
             });
         } else {
-            liquid = template`<div style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+            liquid = template`<div style="${style}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
       ${RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
@@ -152,7 +149,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     },
                     pageContext,
                     isText: componentTexts.includes(item.tag) ? true : null,
-                    style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps
                 });
             })}

package/dist/esm/components/resize/Resize.js

@@ -1,17 +1,11 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Column from './Column.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import Spacing from './Spacing.js';
 
 function Resize(props) {
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Spacing, {
-                ...props
-            }),
-            /*#__PURE__*/ jsx(Column, {
-                ...props
-            })
-        ]
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Spacing, {
+            ...props
+        })
     });
 }
 

package/dist/esm/helpers/size.js

@@ -1,5 +1,6 @@
 import { makeStyleResponsive } from './make-style.js';
 import { devicesMapping } from './constant.js';
+import { getResponsiveValueByScreen } from './get-resonsive-value.js';
 
 function getCustomSizeCSSByDevice(size, device) {
     if (!size || !device) return {};
@@ -48,21 +49,100 @@ const makeStyleWithDefault = (name, value, defaultVal)=>{
 };
 const getWidthHeightGlobalSize = (type, globalSize)=>{
     if (!globalSize) return {};
-    const data = {
-        desktop: globalSize?.desktop?.[type],
-        tablet: globalSize?.tablet?.[type],
-        mobile: globalSize?.mobile?.[type]
-    };
-    if (data.desktop === undefined) {
-        data.desktop = 'auto';
-    }
-    if (data.tablet === undefined) {
-        data.tablet = data.desktop;
-    }
-    if (data.mobile === undefined) {
-        data.mobile = data.tablet;
-    }
-    return data;
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        result = {
+            ...result,
+            [device]: getResponsiveValueByScreen(globalSize, device)?.[type]
+        };
+    });
+    return result;
+};
+const getHeightByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResponsiveValueByScreen(shapeByLayout, device);
+        const shapeValue = shapeByDevice?.shapeValue;
+        const height = shapeByDevice?.height;
+        result = {
+            ...result,
+            [device]: shapeValue ? 'auto' : height || 'auto'
+        };
+    });
+    return result;
+};
+const getWidthByShapeGlobalSize = (shapeByLayout)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeByDevice = getResponsiveValueByScreen(shapeByLayout, device);
+        const width = shapeByDevice?.width;
+        result = {
+            ...result,
+            [device]: width || 'auto'
+        };
+    });
+    return result;
+};
+const getAspectRatioGlobalSize = (shape)=>{
+    let result = {};
+    const DEVICES = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    DEVICES.forEach((device)=>{
+        const shapeValue = getResponsiveValueByScreen(shape, device)?.shapeValue;
+        if (shapeValue) {
+            result = {
+                ...result,
+                [device]: shapeValue
+            };
+        } else {
+            const shapeConfig = getResponsiveValueByScreen(shape, device)?.shape;
+            switch(shapeConfig){
+                case 'square':
+                    result = {
+                        ...result,
+                        [device]: '1/1'
+                    };
+                    break;
+                case 'vertical':
+                    result = {
+                        ...result,
+                        [device]: '3/4'
+                    };
+                    break;
+                case 'horizontal':
+                    result = {
+                        ...result,
+                        [device]: '4/3'
+                    };
+                    break;
+                case 'original':
+                    result = {
+                        ...result,
+                        [device]: 'auto'
+                    };
+                    break;
+            }
+        }
+    });
+    return result;
 };
 function getCustomPaddingSizeCSSByDevice(globalSize, device) {
     if (!globalSize || !device) return {};
@@ -78,4 +158,4 @@ const getPaddingGlobalSize = (globalSize)=>{
     return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
 };
 
-export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault };
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault };

package/dist/esm/index.js

@@ -53,7 +53,7 @@ import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { RenderIf, composeMemo, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
-export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault } from './helpers/size.js';
+export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, getHeightByShapeGlobalSize, getPaddingGlobalSize, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
 export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';

package/dist/types/index.d.ts

@@ -92,7 +92,9 @@ type ImageShape$1 = {
     height?: string;
 };
 type SizeSettingGlobal = {
-    shape?: 'square' | 'vertical' | 'horizontal' | 'custom';
+    shape?: 'square' | 'vertical' | 'horizontal' | 'custom' | 'original';
+    shapeLinked?: boolean;
+    shapeValue?: string;
     padding?: {
         type?: 'small' | 'medium' | 'large' | 'custom';
         top?: string;
@@ -914,7 +916,7 @@ type GridArrange<T> = SharedControlType<T> & {
 };
 
 type SettingID = 'shape' | 'width' | 'height' | 'gap' | 'padding';
-type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large';
+type OptionKeyword = 'default' | 'auto' | 'full' | 'equal' | 'small' | 'medium' | 'large' | 'original';
 type PaddingOptions = 'small' | 'medium' | 'large' | 'custom';
 type PaddingConfig = Partial<Record<PaddingOptions, {
     vertical: string;
@@ -931,15 +933,9 @@ type SizeSetting$1<T> = SharedControlType<T> & {
     readonly?: boolean;
     hiddenSettings?: SettingID[];
     settingConfig?: Partial<Record<SettingID, SettingConfig>>;
-    hiddenShowMore?: boolean;
-};
-
-type ChildIconType<T> = SharedControlType<T> & {
-    type: 'child-icon';
-    [key: string]: any;
 };
 
-type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T> | ChildIconType<T>;
+type ControlProp<T> = AngleControlType<T> | CheckboxControlType<T> | ColorPickerControlType<T> | GroupControlType<T> | IconControlType<T> | InputFixContentControlType<T> | InputNumberControlType<T> | InputUnitControlType<T> | InputUnitSpacingControlType<T> | InputUnitWidthControlType<T> | InputControlType<T> | MarginControlType<T> | PaddingControlType<T> | PositionControlType<T> | RadioGroupControlType | RangeControlType<T> | SegmentControlType<T> | SelectControlType<T> | TextareaControlType<T> | ToggleControlType<T> | ImageControlType<T> | ChildrensControlType | GridControlType<T> | FlexControlType<T> | TextEditorControlType<T> | ProductControlType<T> | TypographyControlType<T> | TypographyV2ControlType<T> | MenuControlType<T> | BehaviorStateControlType<T> | PickLinkControlType<T> | BoxShadowControlType<T> | TextShadowControlType<T> | BorderControlType<T> | BorderRadiusControlType<T> | RadiusPresetControlType<T> | SizeControlType<T> | ChildItemType<T> | PickMultiProductControlType<T> | CollectionControlType<T> | BackgroundControlType<T> | VisibilityControlType<T> | SelectVariantControlType | CountdownEvergreenType | Timezone<T> | CustomContentControlType<T> | DateTimePickerControlType | CountdownDailyType | KlaviyoCodes | YotpoLoyaltyCodes | InputWidthControlType<T> | LayoutSegmentControlType<T> | InputSpacing<T> | UniqueIdControlType<T> | PositionSquareControlType<T> | CustomCodeEditor | LayoutControlType<T> | SwatchesLinkControlType<T> | VariantSwatchesPresetControlType<T> | ProductListControlType<T> | CollectionBannerControlType<T> | Ratio<T> | StickyDisplayControlType<T> | SyncProductPropertiesControlType<T> | StepsGuide<T> | ImageShape<T> | GridArrange<T> | SizeSetting$1<T>;
 type Setting<P extends BaseProps> = {
     id: 'setting';
     note?: string;
@@ -967,8 +963,6 @@ type ComponentSetting<P extends BaseProps> = {
     noWrap?: boolean;
     editorConfigs?: {
         component?: {
-            validate?: boolean;
-            excludeApplyStyle?: boolean;
             noDelete?: boolean;
             noDuplicate?: boolean;
             noDragDrop?: boolean;
@@ -9548,6 +9542,9 @@ declare const makeGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) =>
 };
 declare const makeStyleWithDefault: <T extends ShortHandProperty, K>(name: T, value?: Partial<Record<NameDevices, K>> | undefined, defaultVal?: Partial<Record<NameDevices, K>> | undefined) => Record<ResponsiveKey<T>, K>;
 declare const getWidthHeightGlobalSize: (type: 'width' | 'height', globalSize?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string | number>>;
+declare const getHeightByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string>>;
+declare const getWidthByShapeGlobalSize: (shapeByLayout?: ObjectDevices<SizeSettingGlobal>) => Partial<Record<NameDevices, string>>;
+declare const getAspectRatioGlobalSize: (shape?: ObjectDevices<SizeSettingGlobal>) => ObjectDevices<string>;
 declare const getPaddingGlobalSize: (globalSize?: ObjectDevices<SizeSettingGlobal>) => React.CSSProperties;
 
 declare const parseValueWithUnit: (valueWithUnit: string) => any;
@@ -9850,4 +9847,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OptionNormalStyle, OptionSpecialStyle, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OptionNormalStyle, OptionSpecialStyle, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, VariantSelectFragment, VitalsWidgetType, WiserWidgetType, WrapRenderChildren, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeMemo, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertOldLayout, dataStringify, fetchMedias, fetchVariants, filterToolbarPreview, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAspectRatioGlobalSize, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeNullUndefined, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-moon.60",
+  "version": "1.23.0-moon.75",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -24,8 +24,8 @@
     "type-check": "yarn tsc --noEmit"
   },
   "devDependencies": {
-    "@gem-sdk/adapter-shopify": "1.23.0-moon.58",
-    "@gem-sdk/styles": "1.23.0-moon.60"
+    "@gem-sdk/adapter-shopify": "1.23.0-moon.75",
+    "@gem-sdk/styles": "1.23.0-moon.75"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",

package/dist/cjs/components/resize/Column.js

@@ -1,280 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('zustand');
-var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
-require('swr');
-require('@gem-sdk/adapter-shopify');
-require('swr/mutation');
-require('vanilla-lazyload');
-require('../../hooks/useCartUI.js');
-var cls = require('../../helpers/cls.js');
-require('react-transition-group');
-require('@gem-sdk/core');
-require('../../helpers/convert.js');
-
-function Column(props) {
-    const WIDTH_HAND = 16;
-    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
-    const [visualLayout, setVisualLayout] = react.useState(props.settings?.layout);
-    const [currentLayout, setCurrentLayout] = react.useState(props.settings?.layout);
-    const verticalGutter = props.styles?.verticalGutter;
-    const dataDrag = react.useRef();
-    const [isDragging, setIsDragging] = react.useState(false);
-    const newValueCols = react.useRef([]);
-    // Watch props change layout
-    react.useEffect(()=>{
-        setVisualLayout(props.settings?.layout);
-        setCurrentLayout(props.settings?.layout);
-    }, [
-        props
-    ]);
-    // Validate resize column
-    if (![
-        'Row',
-        'Product',
-        'HeroBanner'
-    ].includes(props.tag)) return;
-    const getTotalCol = (cols, i)=>{
-        const cloneToIndex = cols.slice().splice(0, i + 1);
-        return cloneToIndex.reduce((accumulator, currentValue)=>{
-            return accumulator + currentValue;
-        }, 0);
-    };
-    const getPositionLeft = ({ totalCol, len, gap, index })=>{
-        const width = totalCol / 12;
-        return `calc(100%*${width} - ${gap}*${0.5 - width} + ${gap}*${(12 / len * (index + 1) - totalCol) / (12 / len)} - ${WIDTH_HAND / 2}px)`;
-    };
-    const endDrag = ()=>{
-        setIsDragging(false);
-        document.body.style.cursor = '';
-        if (!dataDrag.current) return;
-        // Emit change value
-        const device = dataDrag.current.device;
-        const cols = currentLayout?.[device]?.cols || [];
-        if (JSON.stringify(newValueCols.current) !== JSON.stringify(cols) && newValueCols.current.length) {
-            window.dispatchEvent(new CustomEvent('editor:toolbar:change-column', {
-                bubbles: true,
-                detail: {
-                    componentUid: dataDrag.current.componentUid,
-                    cols: newValueCols.current
-                }
-            }));
-        }
-        window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
-            bubbles: true,
-            detail: {
-                value: false
-            }
-        }));
-        // Remove style inline
-        setChangeVisualNewColumns(false, []);
-        dataDrag.current = undefined;
-        document.removeEventListener('mousemove', onMouseMoveDocument);
-        document.removeEventListener('mouseup', onMouseUpDocument);
-    };
-    const setChangeVisualNewColumns = (value, newCols)=>{
-        if (!dataDrag.current) return;
-        const $components = document.querySelectorAll(`[data-uid="${dataDrag.current.componentUid}"]`);
-        if ($components.length) {
-            $components.forEach(($component)=>{
-                let $row = $component;
-                const tagRow = $row.getAttribute('data-component-tag');
-                if (tagRow !== 'Row') {
-                    const $firstCol = $component.querySelector('[data-component-tag="Col"]');
-                    if ($firstCol && $firstCol.parentElement) {
-                        $row = $firstCol.parentElement;
-                    }
-                }
-                if ($row) {
-                    if (value) {
-                        $row.style.gridTemplateColumns = newCols.map((col)=>`minmax(0, ${col}fr)`).join(' ');
-                    } else {
-                        $row.style.gridTemplateColumns = '';
-                    }
-                }
-            });
-        }
-    };
-    const onMouseMoveDocument = (event)=>{
-        if (!dataDrag.current) return;
-        const currentX = event.clientX;
-        const diffX = currentX - (dataDrag.current.startX ?? 0);
-        const diffXAbs = Math.abs(diffX);
-        const index = dataDrag.current.index;
-        const device = dataDrag.current.device ?? 'desktop';
-        const itemWidth = dataDrag.current.itemWidth ?? 0;
-        const cols = currentLayout?.[device]?.cols || [];
-        const newCols = cols.slice();
-        // Change value
-        if (diffXAbs >= itemWidth) {
-            const times = Math.round(diffXAbs / itemWidth);
-            const action = diffX >= 0 ? 'plus' : 'minus';
-            if (action == 'minus') {
-                const currentCol = newCols[index] ?? 1;
-                if (currentCol - times > 1) {
-                    newCols[index] = (newCols[index] ?? 0) - times;
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) + times;
-                } else {
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) + (newCols[index] ?? 0) - 1;
-                    newCols[index] = 1;
-                }
-            } else {
-                const nextCol = newCols[index + 1] ?? 1;
-                if (nextCol - times > 1) {
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) - times;
-                    newCols[index] = (newCols[index] ?? 0) + times;
-                } else {
-                    newCols[index] = (newCols[index] ?? 0) + (newCols[index + 1] ?? 0) - 1;
-                    newCols[index + 1] = 1;
-                }
-            }
-        }
-        // Cancel when value not change
-        if (JSON.stringify(newValueCols.current) === JSON.stringify(newCols)) {
-            return;
-        }
-        // Update new value to ui
-        if (JSON.stringify(newValueCols.current) !== JSON.stringify(newCols)) {
-            newValueCols.current = newCols; // cache new value
-            setVisualLayout({
-                ...currentLayout,
-                [device]: {
-                    ...currentLayout?.[device],
-                    cols: newCols
-                }
-            });
-            setChangeVisualNewColumns(true, newCols);
-        }
-    };
-    const onMouseUpDocument = ()=>{
-        endDrag();
-    };
-    const onMouseDown = (event, { device, totalCol, index })=>{
-        const target = event.target;
-        if (target) {
-            const $component = target.closest('[data-uid]');
-            if ($component) {
-                document.removeEventListener('mousemove', onMouseMoveDocument);
-                document.removeEventListener('mouseup', onMouseUpDocument);
-                document.addEventListener('mousemove', onMouseMoveDocument);
-                document.addEventListener('mouseup', onMouseUpDocument);
-                setIsDragging(true);
-                const componentUid = $component.getAttribute('data-uid') || undefined;
-                const handRect = target.getBoundingClientRect();
-                const componentRect = $component.getBoundingClientRect();
-                dataDrag.current = {
-                    componentUid,
-                    device,
-                    index,
-                    startX: event.clientX,
-                    itemWidth: (handRect.left - componentRect.left) / totalCol
-                };
-                document.body.style.cursor = 'grab';
-                window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
-                    bubbles: true,
-                    detail: {
-                        value: true
-                    }
-                }));
-            }
-        }
-    };
-    const onMouseUp = ()=>{
-        endDrag();
-    };
-    const isActive = (device, index)=>{
-        return dataDrag.current?.componentUid == props.uid && dataDrag.current.device == device && dataDrag.current.index == index;
-    };
-    const HandDragItems = ()=>{
-        const items = [];
-        const devices = [
-            'desktop',
-            'tablet',
-            'mobile'
-        ];
-        for (const device of devices){
-            if (visualLayout?.[device]) {
-                const cols = visualLayout?.[device]?.cols || visualLayout?.desktop?.cols || [];
-                const colDisplay = visualLayout?.[device]?.display || visualLayout?.desktop?.display || 'fit';
-                if (colDisplay == 'fill') {
-                    const len = cols.length;
-                    for(let i = 0; i < len - 1; i++){
-                        const col = cols[i];
-                        if (col) {
-                            const totalCol = getTotalCol(cols, i);
-                            const gap = verticalGutter?.[device] || verticalGutter?.desktop || '0px';
-                            const left = getPositionLeft({
-                                index: i,
-                                len,
-                                gap,
-                                totalCol
-                            });
-                            items.push(/*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                role: "presentation",
-                                "data-column-hand-drag": true,
-                                "data-col": col,
-                                "data-gap": gap,
-                                "data-column-hand-drag-active": isActive(device, i),
-                                className: cls.cls('absolute h-full cursor-grab', {
-                                    hidden: device !== 'desktop',
-                                    flex: device === 'desktop',
-                                    'tablet:hidden': device !== 'tablet',
-                                    'tablet:flex': device === 'tablet',
-                                    'mobile:hidden': device !== 'mobile',
-                                    'mobile:flex': device === 'mobile'
-                                }),
-                                style: {
-                                    width: `${WIDTH_HAND}px`,
-                                    top: '0px',
-                                    left: left
-                                },
-                                onMouseDown: (e)=>onMouseDown(e, {
-                                        device,
-                                        totalCol,
-                                        index: i
-                                    }),
-                                onMouseUp: onMouseUp,
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        "data-column-hand-visual": true
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        "data-column-hand-visual-drag": true,
-                                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                                            viewBox: "0 0 20 20",
-                                            children: [
-                                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                                    d: "M12.75 3.5a.75.75 0 0 0 0 1.5h1.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l3.22-3.22v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z",
-                                                    fill: "currentColor"
-                                                }),
-                                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                                    d: "M7.25 16.5a.75.75 0 0 0 0-1.5h-1.19l3.22-3.22a.75.75 0 1 0-1.06-1.06l-3.22 3.22v-1.19a.75.75 0 0 0-1.5 0v3c0 .414.336.75.75.75h3Z",
-                                                    fill: "currentColor"
-                                                })
-                                            ]
-                                        })
-                                    })
-                                ]
-                            }, `${device}-${i}`));
-                        }
-                    }
-                }
-            }
-        }
-        return items;
-    };
-    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            "data-column": true,
-            "data-column-theme-section": isThemeSectionEditor,
-            "data-column-is-drag-visible": isDragging,
-            children: HandDragItems()
-        })
-    });
-}
-
-exports.default = Column;

package/dist/esm/components/resize/Column.js

@@ -1,276 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import 'zustand';
-import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
-import 'swr';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'vanilla-lazyload';
-import '../../hooks/useCartUI.js';
-import { cls } from '../../helpers/cls.js';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import '../../helpers/convert.js';
-
-function Column(props) {
-    const WIDTH_HAND = 16;
-    const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
-    const [visualLayout, setVisualLayout] = useState(props.settings?.layout);
-    const [currentLayout, setCurrentLayout] = useState(props.settings?.layout);
-    const verticalGutter = props.styles?.verticalGutter;
-    const dataDrag = useRef();
-    const [isDragging, setIsDragging] = useState(false);
-    const newValueCols = useRef([]);
-    // Watch props change layout
-    useEffect(()=>{
-        setVisualLayout(props.settings?.layout);
-        setCurrentLayout(props.settings?.layout);
-    }, [
-        props
-    ]);
-    // Validate resize column
-    if (![
-        'Row',
-        'Product',
-        'HeroBanner'
-    ].includes(props.tag)) return;
-    const getTotalCol = (cols, i)=>{
-        const cloneToIndex = cols.slice().splice(0, i + 1);
-        return cloneToIndex.reduce((accumulator, currentValue)=>{
-            return accumulator + currentValue;
-        }, 0);
-    };
-    const getPositionLeft = ({ totalCol, len, gap, index })=>{
-        const width = totalCol / 12;
-        return `calc(100%*${width} - ${gap}*${0.5 - width} + ${gap}*${(12 / len * (index + 1) - totalCol) / (12 / len)} - ${WIDTH_HAND / 2}px)`;
-    };
-    const endDrag = ()=>{
-        setIsDragging(false);
-        document.body.style.cursor = '';
-        if (!dataDrag.current) return;
-        // Emit change value
-        const device = dataDrag.current.device;
-        const cols = currentLayout?.[device]?.cols || [];
-        if (JSON.stringify(newValueCols.current) !== JSON.stringify(cols) && newValueCols.current.length) {
-            window.dispatchEvent(new CustomEvent('editor:toolbar:change-column', {
-                bubbles: true,
-                detail: {
-                    componentUid: dataDrag.current.componentUid,
-                    cols: newValueCols.current
-                }
-            }));
-        }
-        window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
-            bubbles: true,
-            detail: {
-                value: false
-            }
-        }));
-        // Remove style inline
-        setChangeVisualNewColumns(false, []);
-        dataDrag.current = undefined;
-        document.removeEventListener('mousemove', onMouseMoveDocument);
-        document.removeEventListener('mouseup', onMouseUpDocument);
-    };
-    const setChangeVisualNewColumns = (value, newCols)=>{
-        if (!dataDrag.current) return;
-        const $components = document.querySelectorAll(`[data-uid="${dataDrag.current.componentUid}"]`);
-        if ($components.length) {
-            $components.forEach(($component)=>{
-                let $row = $component;
-                const tagRow = $row.getAttribute('data-component-tag');
-                if (tagRow !== 'Row') {
-                    const $firstCol = $component.querySelector('[data-component-tag="Col"]');
-                    if ($firstCol && $firstCol.parentElement) {
-                        $row = $firstCol.parentElement;
-                    }
-                }
-                if ($row) {
-                    if (value) {
-                        $row.style.gridTemplateColumns = newCols.map((col)=>`minmax(0, ${col}fr)`).join(' ');
-                    } else {
-                        $row.style.gridTemplateColumns = '';
-                    }
-                }
-            });
-        }
-    };
-    const onMouseMoveDocument = (event)=>{
-        if (!dataDrag.current) return;
-        const currentX = event.clientX;
-        const diffX = currentX - (dataDrag.current.startX ?? 0);
-        const diffXAbs = Math.abs(diffX);
-        const index = dataDrag.current.index;
-        const device = dataDrag.current.device ?? 'desktop';
-        const itemWidth = dataDrag.current.itemWidth ?? 0;
-        const cols = currentLayout?.[device]?.cols || [];
-        const newCols = cols.slice();
-        // Change value
-        if (diffXAbs >= itemWidth) {
-            const times = Math.round(diffXAbs / itemWidth);
-            const action = diffX >= 0 ? 'plus' : 'minus';
-            if (action == 'minus') {
-                const currentCol = newCols[index] ?? 1;
-                if (currentCol - times > 1) {
-                    newCols[index] = (newCols[index] ?? 0) - times;
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) + times;
-                } else {
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) + (newCols[index] ?? 0) - 1;
-                    newCols[index] = 1;
-                }
-            } else {
-                const nextCol = newCols[index + 1] ?? 1;
-                if (nextCol - times > 1) {
-                    newCols[index + 1] = (newCols[index + 1] ?? 0) - times;
-                    newCols[index] = (newCols[index] ?? 0) + times;
-                } else {
-                    newCols[index] = (newCols[index] ?? 0) + (newCols[index + 1] ?? 0) - 1;
-                    newCols[index + 1] = 1;
-                }
-            }
-        }
-        // Cancel when value not change
-        if (JSON.stringify(newValueCols.current) === JSON.stringify(newCols)) {
-            return;
-        }
-        // Update new value to ui
-        if (JSON.stringify(newValueCols.current) !== JSON.stringify(newCols)) {
-            newValueCols.current = newCols; // cache new value
-            setVisualLayout({
-                ...currentLayout,
-                [device]: {
-                    ...currentLayout?.[device],
-                    cols: newCols
-                }
-            });
-            setChangeVisualNewColumns(true, newCols);
-        }
-    };
-    const onMouseUpDocument = ()=>{
-        endDrag();
-    };
-    const onMouseDown = (event, { device, totalCol, index })=>{
-        const target = event.target;
-        if (target) {
-            const $component = target.closest('[data-uid]');
-            if ($component) {
-                document.removeEventListener('mousemove', onMouseMoveDocument);
-                document.removeEventListener('mouseup', onMouseUpDocument);
-                document.addEventListener('mousemove', onMouseMoveDocument);
-                document.addEventListener('mouseup', onMouseUpDocument);
-                setIsDragging(true);
-                const componentUid = $component.getAttribute('data-uid') || undefined;
-                const handRect = target.getBoundingClientRect();
-                const componentRect = $component.getBoundingClientRect();
-                dataDrag.current = {
-                    componentUid,
-                    device,
-                    index,
-                    startX: event.clientX,
-                    itemWidth: (handRect.left - componentRect.left) / totalCol
-                };
-                document.body.style.cursor = 'grab';
-                window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
-                    bubbles: true,
-                    detail: {
-                        value: true
-                    }
-                }));
-            }
-        }
-    };
-    const onMouseUp = ()=>{
-        endDrag();
-    };
-    const isActive = (device, index)=>{
-        return dataDrag.current?.componentUid == props.uid && dataDrag.current.device == device && dataDrag.current.index == index;
-    };
-    const HandDragItems = ()=>{
-        const items = [];
-        const devices = [
-            'desktop',
-            'tablet',
-            'mobile'
-        ];
-        for (const device of devices){
-            if (visualLayout?.[device]) {
-                const cols = visualLayout?.[device]?.cols || visualLayout?.desktop?.cols || [];
-                const colDisplay = visualLayout?.[device]?.display || visualLayout?.desktop?.display || 'fit';
-                if (colDisplay == 'fill') {
-                    const len = cols.length;
-                    for(let i = 0; i < len - 1; i++){
-                        const col = cols[i];
-                        if (col) {
-                            const totalCol = getTotalCol(cols, i);
-                            const gap = verticalGutter?.[device] || verticalGutter?.desktop || '0px';
-                            const left = getPositionLeft({
-                                index: i,
-                                len,
-                                gap,
-                                totalCol
-                            });
-                            items.push(/*#__PURE__*/ jsxs("div", {
-                                role: "presentation",
-                                "data-column-hand-drag": true,
-                                "data-col": col,
-                                "data-gap": gap,
-                                "data-column-hand-drag-active": isActive(device, i),
-                                className: cls('absolute h-full cursor-grab', {
-                                    hidden: device !== 'desktop',
-                                    flex: device === 'desktop',
-                                    'tablet:hidden': device !== 'tablet',
-                                    'tablet:flex': device === 'tablet',
-                                    'mobile:hidden': device !== 'mobile',
-                                    'mobile:flex': device === 'mobile'
-                                }),
-                                style: {
-                                    width: `${WIDTH_HAND}px`,
-                                    top: '0px',
-                                    left: left
-                                },
-                                onMouseDown: (e)=>onMouseDown(e, {
-                                        device,
-                                        totalCol,
-                                        index: i
-                                    }),
-                                onMouseUp: onMouseUp,
-                                children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        "data-column-hand-visual": true
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        "data-column-hand-visual-drag": true,
-                                        children: /*#__PURE__*/ jsxs("svg", {
-                                            viewBox: "0 0 20 20",
-                                            children: [
-                                                /*#__PURE__*/ jsx("path", {
-                                                    d: "M12.75 3.5a.75.75 0 0 0 0 1.5h1.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l3.22-3.22v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z",
-                                                    fill: "currentColor"
-                                                }),
-                                                /*#__PURE__*/ jsx("path", {
-                                                    d: "M7.25 16.5a.75.75 0 0 0 0-1.5h-1.19l3.22-3.22a.75.75 0 1 0-1.06-1.06l-3.22 3.22v-1.19a.75.75 0 0 0-1.5 0v3c0 .414.336.75.75.75h3Z",
-                                                    fill: "currentColor"
-                                                })
-                                            ]
-                                        })
-                                    })
-                                ]
-                            }, `${device}-${i}`));
-                        }
-                    }
-                }
-            }
-        }
-        return items;
-    };
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: /*#__PURE__*/ jsx("div", {
-            "data-column": true,
-            "data-column-theme-section": isThemeSectionEditor,
-            "data-column-is-drag-visible": isDragging,
-            children: HandDragItems()
-        })
-    });
-}
-
-export { Column as default };