@gem-sdk/core 1.53.0-dev.16 → 1.53.0-dev.161

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -60,7 +60,31 @@ const ComponentToolbarPreview = (props)=>{
         editingPageType
     ]);
     const isSelectOnPage = react.useMemo(()=>interactionData?.isSelectOnPage, [
-        interactionData
+        interactionData?.isSelectOnPage
+    ]);
+    const settingType = react.useMemo(()=>interactionData?.settingType, [
+        interactionData?.settingType
+    ]);
+    const isShowIconInteractionTarget = react.useMemo(()=>{
+        return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && settingType === 'TARGET';
+    }, [
+        interactionData?.item?.targets,
+        props.uid,
+        settingType
+    ]);
+    const isShowIconInteractionTrigger = react.useMemo(()=>{
+        return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && settingType === 'TRIGGER';
+    }, [
+        interactionData?.item?.self?.type,
+        interactionData?.item?.self?.uid,
+        props.uid,
+        settingType
+    ]);
+    const isDisplayIconDrag = react.useMemo(()=>{
+        return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
+    }, [
+        isShowIconInteractionTarget,
+        isShowIconInteractionTrigger
     ]);
     const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = useToolbarPostPurchase.usePostPurchase(props.uid, props.tag || '');
     const editProductElementList = [
@@ -338,7 +362,6 @@ const ComponentToolbarPreview = (props)=>{
         if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
         return constant.ableGenerateContentElements.includes(tag);
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -353,7 +376,39 @@ const ComponentToolbarPreview = (props)=>{
                         onClick: (e)=>onShowParent(e),
                         "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            isShowIconInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-hidden gp-w-[12px] interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "12",
+                                    height: "13",
+                                    viewBox: "0 0 12 13",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        "fill-rule": "evenodd",
+                                        "clip-rule": "evenodd",
+                                        d: "M4.36799 0.430523C4.51596 0.205675 4.76709 0.0703125 5.03626 0.0703125H9.88576C10.2042 0.0703125 10.395 0.424378 10.2198 0.69034L8.36968 3.4992C8.28209 3.63218 8.37747 3.80922 8.53671 3.80922H10.749C11.1111 3.80922 11.2869 4.25204 11.0233 4.50036L3.03971 12.0217C2.7572 12.2878 2.29932 12.0361 2.37262 11.655L3.27994 6.93698C3.30366 6.81364 3.20915 6.69921 3.08354 6.69921H0.984651C0.66625 6.69921 0.475479 6.34529 0.650515 6.07932L4.36799 0.430523Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isShowIconInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "gp-hidden gp-w-[14px] interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        "fill-rule": "evenodd",
+                                        "clip-rule": "evenodd",
+                                        d: "M7.32785 3.66159C7.87459 3.58351 8.25451 3.077 8.17643 2.53026C8.09836 1.98353 7.59184 1.6036 7.0451 1.68168C3.92866 2.12673 1.5332 4.80488 1.5332 8.04424C1.5332 11.594 4.41085 14.4716 7.9606 14.4716C11.1706 14.4716 13.8294 12.1194 14.3105 9.04446C14.3959 8.49881 14.0227 7.98727 13.4771 7.9019C12.9314 7.81654 12.4199 8.18967 12.3345 8.73531C12.0034 10.852 10.1702 12.4716 7.9606 12.4716C5.51541 12.4716 3.5332 10.4894 3.5332 8.04424C3.5332 5.81431 5.18273 3.96793 7.32785 3.66159ZM10.3432 1.97548C10.6232 1.69551 11.102 1.83654 11.1855 2.22355L11.6106 4.19339C11.6313 4.28936 11.7063 4.36432 11.8023 4.38503L13.7721 4.81013C14.1591 4.89365 14.3001 5.37247 14.0202 5.65243L12.3432 7.32945C12.1244 7.54819 11.8168 7.65338 11.5099 7.61436L10.1528 7.44178C9.84592 7.40276 9.53827 7.50795 9.31953 7.72669L8.66719 8.37903C8.35477 8.69145 7.86633 8.70954 7.57623 8.41943C7.28613 8.12933 7.30421 7.64089 7.61663 7.32847L8.26898 6.67613C8.48771 6.45739 8.5929 6.14974 8.55388 5.84287L8.38131 4.48575C8.34228 4.17888 8.44748 3.87123 8.66621 3.6525L10.3432 1.97548ZM8.19853 5.1916C8.35319 5.72179 8.04877 6.27697 7.51858 6.43163C6.83078 6.63226 6.32988 7.2683 6.32988 8.01873C6.32988 8.9316 7.06991 9.67164 7.98279 9.67164C8.73014 9.67164 9.36406 9.17486 9.56743 8.49131C9.72492 7.96195 10.2817 7.6605 10.8111 7.81799C11.3404 7.97548 11.6419 8.53227 11.4844 9.06163C11.0356 10.57 9.63916 11.6716 7.98279 11.6716C5.96535 11.6716 4.32988 10.0362 4.32988 8.01873C4.32988 6.35558 5.44054 4.95445 6.95851 4.51165C7.4887 4.35699 8.04387 4.66141 8.19853 5.1916Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isDisplayIconDrag && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 "data-toolbar-icon-drag": true,
                                 children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
                                     width: "16",
@@ -610,7 +665,6 @@ const ComponentToolbarPreview = (props)=>{
                         ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(InteractionSuffix.InteractionSuffix, {
-                        tag: props.tag,
                         uid: props.uid
                     })
                 ]

package/dist/cjs/components/InteractionSuffix.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
 require('zustand');
+require('react');
 require('swr');
 var PageContext = require('../contexts/PageContext.js');
 require('@gem-sdk/adapter-shopify');
@@ -17,98 +17,25 @@ require('dayjs');
 var index = require('../helpers/interaction/index.js');
 require('../helpers/convert.js');
 
-const InteractionSuffix = ({ tag, uid })=>{
-    const { closeSelectOnPage } = index.useInteraction();
-    const currentInteraction = PageContext.usePageStore((s)=>s.interactionData?.item);
+const InteractionSuffix = ({ uid })=>{
+    const { closeSelectOnPage, selectInteractionElement } = index.useInteraction();
+    const settingType = PageContext.usePageStore((s)=>s.interactionData?.settingType || '');
     const isSelectOnPage = PageContext.usePageStore((s)=>s.interactionData?.isSelectOnPage);
-    const isCurrentInteractionTarget = react.useMemo(()=>{
-        return currentInteraction?.targets?.find((t)=>t.uid === uid && !t.isEntirePage);
-    }, [
-        currentInteraction,
-        uid
-    ]);
-    const isCurrentInteractionTrigger = react.useMemo(()=>{
-        return currentInteraction?.self?.uid === uid && !currentInteraction?.self?.isEntirePage;
-    }, [
-        currentInteraction,
-        uid
-    ]);
-    const isDisplay = react.useMemo(()=>{
-        return isCurrentInteractionTarget || isCurrentInteractionTrigger;
-    }, [
-        isCurrentInteractionTarget,
-        isCurrentInteractionTrigger
-    ]);
-    const positionOffset = react.useMemo(()=>{
-        if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
-            return 80;
-        }
-        return 40;
-    }, [
-        isCurrentInteractionTrigger,
-        isCurrentInteractionTarget
-    ]);
-    if (!isDisplay) {
-        return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
-                onClick: closeSelectOnPage,
-                children: "Use element"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
-                children: [
-                    isCurrentInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `gp-h-8  gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center `,
-                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                fillRule: "evenodd",
-                                clipRule: "evenodd",
-                                d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
-                                fill: "#F9F9F9"
-                            })
-                        })
-                    }),
-                    isCurrentInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center`,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
-                            width: "16",
-                            height: "16",
-                            viewBox: "0 0 16 16",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    fillRule: "evenodd",
-                                    clipRule: "evenodd",
-                                    d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
-                                    fill: "#F9F9F9"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("path", {
-                                    d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
-                                    fill: "#F9F9F9"
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
+    const onClick = (e)=>{
+        selectInteractionElement({
+            $target: e.target,
+            componentUid: uid,
+            settingType
+        });
+        closeSelectOnPage();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx("button", {
+            className: "gp-bg-[#F4F4F4]  gp-px-2 gp-h-[24px] gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-xs gp-font-medium gp-hidden interaction-use-custom-element ",
+            onClick: onClick,
+            "data-setup-interaction": true,
+            children: settingType === 'TRIGGER' ? 'Set as trigger' : 'Set as target'
+        })
     });
 };
 

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

@@ -35,7 +35,7 @@ const componentIconList = [
 const componentUsingAdvanced = [
     'IconList'
 ];
-const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
+const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, largeComponent = [], sizeLargeComponent = 50, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
@@ -74,6 +74,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     advanced: item.advanced,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     pageContext,
+                    largeComponent,
+                    sizeLargeComponent,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
@@ -85,7 +87,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             builder,
                             components,
                             customProps,
-                            pageContext
+                            pageContext,
+                            largeComponent,
+                            sizeLargeComponent
                         };
                     }),
                     children: !constant.customRenderChildren.includes(item.tag) ? WrapRenderChildren({
@@ -97,11 +101,13 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             components,
                             customProps,
                             parentTag: item.tag,
-                            pageContext
+                            pageContext,
+                            largeComponent,
+                            sizeLargeComponent
                         }))) : ''
                 });
             }, ()=>{
-                return Component({
+                const liquid = Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -113,11 +119,20 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     pageContext,
+                    largeComponent,
+                    sizeLargeComponent,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
                     }
                 });
+                if (isLimitSize(liquid, sizeLargeComponent)) {
+                    largeComponent.push({
+                        uid: item.uid,
+                        tag: item.tag
+                    });
+                }
+                return liquid;
             });
         } else {
             liquid = render.template`<div gp-el-wrapper style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
@@ -134,6 +149,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                         cssClass: item?.advanced?.cssClass
                     },
                     pageContext,
+                    largeComponent,
+                    sizeLargeComponent,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
@@ -145,7 +162,9 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             builder,
                             components,
                             customProps,
-                            pageContext
+                            pageContext,
+                            largeComponent,
+                            sizeLargeComponent
                         };
                     }),
                     children: !constant.customRenderChildren.includes(item.tag) ? WrapRenderChildren({
@@ -157,11 +176,13 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             components,
                             customProps,
                             parentTag: item.tag,
-                            pageContext
+                            pageContext,
+                            largeComponent,
+                            sizeLargeComponent
                         }))) : ''
                 });
             }, ()=>{
-                return Component({
+                const liquid = Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -179,6 +200,13 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                         ...passProps.builderAttrs
                     }
                 });
+                if (isLimitSize(liquid, sizeLargeComponent)) {
+                    largeComponent.push({
+                        uid: item.uid,
+                        tag: item.tag
+                    });
+                }
+                return liquid;
             })}
       </div>`;
         }
@@ -303,6 +331,11 @@ const WrapRenderChildren = ({ uid, customProps }, codes)=>{
     }
     return liquid;
 };
+const isLimitSize = (liquid, size = 50)=>{
+    const textEncoder = new TextEncoder();
+    const byteSize = textEncoder.encode(liquid).length;
+    return byteSize >= size * 1024;
+};
 
 exports.RenderChildren = RenderChildren;
 exports.WrapRenderChildren = WrapRenderChildren;

package/dist/cjs/contexts/PageContext.js

@@ -56,6 +56,14 @@ const createPageStoreProvider = (data)=>zustand.createStore((set)=>({
                             selectType
                         }
                     }));
+            },
+            setInteractionSettingType: (settingType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            settingType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -65,7 +73,7 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             productOffers,
             publicStoreFrontData,
             interactionData: {
-                selectType: 'element'
+                selectType: 'ELEMENT'
             }
         }), [
         dynamicProduct,

package/dist/cjs/graphql/queries/published-shop-metas.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const PublishedShopMetasDocument = `
+    query PublishedShopMetas($keys: [String!]) {
+  publishedShopMetas(keys: $keys) {
+    id
+    createdAt
+    updatedAt
+    key
+    value
+  }
+}
+    `;
+
+exports.PublishedShopMetasDocument = PublishedShopMetasDocument;

package/dist/cjs/helpers/animations.js

@@ -53,10 +53,16 @@ const animations = ()=>{
             'left',
             'right'
         ].includes(direction ?? '') ? 'X' : 'Y';
-        const isNeg = [
+        let isNeg = [
             'left',
             'down'
         ].includes(direction ?? '') ? '-' : '';
+        if (reverse) {
+            isNeg = [
+                'left',
+                'down'
+            ].includes(direction ?? '') ? '' : '-';
+        }
         const preset = [
             {
                 opacity: 0,
@@ -126,7 +132,10 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        let zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
+        if (reverse) {
+            zoomPreset = zoomDirection === 'in' ? zoomOutPreset : zoomInPreset;
+        }
         return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
             ...generateOptions(normalizedOptions, 700)
         });

package/dist/cjs/helpers/background.js

@@ -13,7 +13,9 @@ const getStyleBackgroundByDevice = (background, options)=>{
             ...getStyleBgColor(background)
         } : {},
         ...!options?.ignoreBackgroundImage ? {
-            ...getStyleBgImage(background, options),
+            ...getStyleBgImage(background, options)
+        } : {},
+        ...!options?.ignoreBackgroundImageProperties ? {
             ...getStyleBgPosition(background),
             ...getStyleBgSize(background),
             ...getStyleBgRepeat(background)
@@ -74,6 +76,9 @@ const getBgImageByDevice = (background, device, options)=>{
     if (typeof imageByDevice === 'string') {
         return `url(${imageByDevice})`;
     }
+    if (imageByDevice !== undefined) {
+        return 'none';
+    }
 };
 const getStyleBgPosition = (background)=>{
     const bgPosition = {
@@ -205,7 +210,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -213,10 +218,10 @@ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = fa
         'tablet',
         'mobile'
     ].forEach((device)=>{
-        if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
+        if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY) && backgroundStyle[device]?.type !== 'video') {
             Object.assign(bgrStyle, {
-                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: backgroundStyle[device]?.color,
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: !ignoreBackgroundImage?.[device] ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
             });
         }
     });

package/dist/cjs/helpers/compose-advance-style.js

@@ -102,7 +102,12 @@ function composeAdvanceStyle(data, tag, pageType) {
                             Object.assign(styles, radius.composeRadius(value));
                         }
                         if (attr === 'boxShadow') {
-                            Object.assign(styles, shadow.getResonsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                            const hasBoxShadow = {
+                                desktop: value.desktop ?? false,
+                                tablet: value.tablet ?? value.desktop ?? false,
+                                mobile: value.mobile ?? value.tablet ?? value.desktop ?? false
+                            };
+                            Object.assign(styles, shadow.getResponsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
                         }
                         if (composeAttr === 'desktop') {
                             switch(attr){

package/dist/cjs/helpers/interaction/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
+var react = require('react');
 require('react/jsx-runtime');
 require('zustand');
-require('react');
 require('swr');
 var PageContext = require('../../contexts/PageContext.js');
 require('@gem-sdk/adapter-shopify');
@@ -17,9 +17,17 @@ require('dayjs');
 require('../convert.js');
 
 const useInteraction = ()=>{
+    const ref = react.useRef();
     const setInteractionIsSelectOnPage = PageContext.usePageStore((s)=>s.setInteractionIsSelectOnPage);
-    const onListener = ({ event, selector }, callback)=>{
-        const element = document.querySelector(selector);
+    function findElementIncludingSelf(element, selector) {
+        if (!(element instanceof Document) && element?.matches(selector)) {
+            return element;
+        } else {
+            return element?.querySelector(selector);
+        }
+    }
+    const onListener = ({ event, selector, elementRef }, callback)=>{
+        const element = findElementIncludingSelf(elementRef?.current || ref.current || document, selector);
         if (!element) return;
         element.addEventListener(event, (e)=>{
             const event = e;
@@ -27,8 +35,8 @@ const useInteraction = ()=>{
             if (callback) callback(params);
         });
     };
-    const trigger = ({ event, data, selector })=>{
-        const element = document.querySelector(selector);
+    const trigger = ({ event, data, selector, element: elementParam })=>{
+        const element = elementParam || document.querySelector(selector);
         if (!element) return;
         const eventDispatch = new CustomEvent(event, {
             bubbles: false,
@@ -47,6 +55,14 @@ const useInteraction = ()=>{
             [key]: value
         }));
     };
+    const getInteractionPreviousData = (element, key)=>{
+        const interactionData = element.getAttribute('gp-data-interaction');
+        const interactionDataJson = JSON.parse(interactionData || '{}');
+        return {
+            previousData: interactionDataJson[key],
+            interactionDataJson
+        };
+    };
     const closeSelectOnPage = ()=>{
         setInteractionIsSelectOnPage(false);
         const event = new CustomEvent('editor:interaction:change-select-on-page', {
@@ -55,11 +71,34 @@ const useInteraction = ()=>{
         });
         window.dispatchEvent(event);
     };
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    const selectInteractionElement = ({ componentUid, settingType, $target })=>{
+        const event = new CustomEvent('editor:interaction:select-element', {
+            bubbles: true,
+            detail: {
+                componentUid,
+                settingType,
+                $target
+            }
+        });
+        window.dispatchEvent(event);
+    };
     return {
         onListener,
         trigger,
         saveToElementInteractionData,
-        closeSelectOnPage
+        closeSelectOnPage,
+        ref,
+        findElementIncludingSelf,
+        getInteractionPreviousData,
+        changeSelectMode,
+        selectInteractionElement
     };
 };
 

package/dist/cjs/helpers/radius.js

@@ -27,7 +27,14 @@ const getRadiusCSSFromGlobal = (state, key, device)=>{
     };
 };
 const getCustomRadius = (state, radius, device)=>{
-    if (!radius || !state || radius?.radiusType !== 'custom') return {};
+    const list = [
+        'custom',
+        'pill',
+        'rounded',
+        'single',
+        'none'
+    ];
+    if (!radius || !state || !list.includes(radius?.radiusType ?? '')) return {};
     const suffix = device && device !== 'desktop' ? constant.devicesMapping?.[device] : '';
     const mState = constant.stateMapping?.[state];
     return {
@@ -62,6 +69,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('normal', radiusValue.normal, device));
             break;
     }
@@ -74,6 +82,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('hover', radiusValue.hover, device));
             break;
     }
@@ -86,6 +95,7 @@ const composeRadiusState = (radiusValue, device)=>{
         case 'circle':
         case 'none':
         case 'custom':
+        case 'rounded':
             Object.assign(style, getCustomRadius('focus', radiusValue.focus, device));
             break;
     }

package/dist/cjs/helpers/shadow.js

@@ -26,8 +26,9 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (!styleAppliedFor || !value) return {};
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
+    const isNoneValue = value.type === 'none';
     return {
-        [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow && !isNoneValue ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
@@ -44,7 +45,7 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
     }
     return style;
 };
-const getResonsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
+const getResponsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
         return {
@@ -63,7 +64,7 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
 };
 
 exports.composeShadowCss = composeShadowCss;
-exports.getResonsiveStyleShadow = getResonsiveStyleShadow;
+exports.getResponsiveStyleShadow = getResponsiveStyleShadow;
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
 exports.parseValueWithUnit = parseValueWithUnit;