@gem-sdk/pages 1.44.2-staging.89 → 1.45.0-dev.91

package/dist/cjs/components/builder/Header.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var SwitchView = require('./SwitchView.js');
+var InteractionSelectOnPageHeader = require('./InteractionSelectOnPageHeader.js');
 
 const defaultMargin = {
     desktop: '16px',
@@ -21,6 +22,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = core.useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = core.usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -177,7 +179,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsxRuntime.jsx(InteractionSelectOnPageHeader.default, {})
         ]
     });
 };

package/dist/cjs/components/builder/InteractionSelectOnPageHeader.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@gem-sdk/core');
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = core.usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    console.log('selectType123', selectType);
+    return /*#__PURE__*/ jsxRuntime.jsxs("header", {
+        className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "gp-h-10 gp-w-10"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("section", {
+                className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        onClick: ()=>setInteractionSelectType('element'),
+                        className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                        children: "Select an element"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        onClick: ()=>setInteractionSelectType('page'),
+                        className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                        children: "Choose entire page"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                onClick: closeSelectOnPage,
+                className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                        d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                        fill: "#3C67FF"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+exports.default = InteractionSelectOnPageHeader;

package/dist/cjs/components/builder/PopupManager.js

@@ -20,7 +20,7 @@ const PopupManager = ()=>{
     ]);
     const onSetActiveModal = react.useCallback((e)=>{
         const detail = e.detail;
-        setModalActive(detail?.modalId);
+        setModalActive(detail?.modalId, false);
     }, [
         setModalActive
     ]);

package/dist/cjs/components/builder/Toolbar.js

@@ -379,23 +379,30 @@ const Toolbar = ()=>{
         countShowOnboarding,
         onCloseOnboarding
     ]);
-    const getSelectorComponent = ({ componentUid, productId, articleId })=>{
+    const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
         if (articleId) {
             return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
         }
+        if (marqueeKey) {
+            return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
+        }
         return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
     };
-    const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
+    const setActiveComponent = react.useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
         if (!componentUid) return;
         const selector = getSelectorComponent({
             componentUid,
             productId,
-            articleId
+            articleId,
+            marqueeKey
         });
         const $component = await waitForElementToExist(selector, timeAwait);
         if (!$component) return;
-        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
+        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
         if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
+        if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
+            removeActiveComponent();
+        }
         const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -404,7 +411,8 @@ const Toolbar = ()=>{
             currentComponentActive.current = {
                 componentUid,
                 productId,
-                articleId
+                articleId,
+                marqueeKey
             };
             $toolbar.removeAttribute('style');
             $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -423,8 +431,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
+        const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
         // Active same element in product list
-        if (productId || articleId) {
+        if (productId || articleId || isChildOfMarquee) {
             const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
             if ($relatedElements?.length) {
                 $relatedElements.forEach(($relatedElement)=>{
@@ -685,7 +694,8 @@ const Toolbar = ()=>{
             setActiveComponent({
                 componentUid: detail.componentUid,
                 productId: detail.productId,
-                articleId: detail.articleId
+                articleId: detail.articleId,
+                marqueeKey: detail.marqueeKey
             });
         } else {
             removeActiveComponent();

package/dist/cjs/components/builder/Toolbox.js

@@ -36,6 +36,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
     const clearModal = core.useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
@@ -329,6 +331,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = react.useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = react.useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     react.useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -356,6 +370,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -375,6 +391,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
         };
     }, [
         onAddEntity,
@@ -395,7 +413,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js

@@ -89,12 +89,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                 }),
                 ACTIONS_DATA.map((action)=>{
                     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
+                        className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
                         id: action.id,
                         "aria-hidden": true,
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
+                                className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]  mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
                                 children: [
                                     action.title,
                                     action.hasAILogo && /*#__PURE__*/ jsxRuntime.jsxs("svg", {

package/dist/esm/components/builder/Header.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useShopStore, cls, makeStyleResponsive } from '@gem-sdk/core';
+import { useShopStore, usePageStore, cls, makeStyleResponsive } from '@gem-sdk/core';
 import Devices from './SwitchView.js';
+import InteractionSelectOnPageHeader from './InteractionSelectOnPageHeader.js';
 
 const defaultMargin = {
     desktop: '16px',
@@ -17,6 +18,7 @@ const sizeCheck = {
 const Header = (props)=>{
     const { pageType, isOriginTemplate } = props;
     const layoutSetting = useShopStore((s)=>s.layoutSettings);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -173,7 +175,8 @@ const Header = (props)=>{
                         })
                     ]
                 })
-            })
+            }),
+            isSelectOnPage && /*#__PURE__*/ jsx(InteractionSelectOnPageHeader, {})
         ]
     });
 };

package/dist/esm/components/builder/InteractionSelectOnPageHeader.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePageStore } from '@gem-sdk/core';
+
+const InteractionSelectOnPageHeader = ()=>{
+    const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    console.log('selectType123', selectType);
+    return /*#__PURE__*/ jsxs("header", {
+        className: "gp-flex gp-justify-between gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "gp-h-10 gp-w-10"
+            }),
+            /*#__PURE__*/ jsxs("section", {
+                className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-p-1 gp-gap-1",
+                children: [
+                    /*#__PURE__*/ jsx("button", {
+                        onClick: ()=>setInteractionSelectType('element'),
+                        className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                        children: "Select an element"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        onClick: ()=>setInteractionSelectType('page'),
+                        className: `gp-h-8 gp-w-[132px] gp-items-center gp-justify-center gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-[6px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#3C67FF]'}`,
+                        children: "Choose entire page"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("button", {
+                onClick: closeSelectOnPage,
+                className: "gp-h-10 gp-w-10 gp-bg-[#3C67FF]/[0.15] gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
+                children: /*#__PURE__*/ jsx("svg", {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M3.94194 3.05806C3.69786 2.81398 3.30214 2.81398 3.05806 3.05806C2.81398 3.30214 2.81398 3.69786 3.05806 3.94194L9.11612 10L3.05806 16.0581C2.81398 16.3021 2.81398 16.6979 3.05806 16.9419C3.30214 17.186 3.69786 17.186 3.94194 16.9419L10 10.8839L16.0581 16.9419C16.3021 17.186 16.6979 17.186 16.9419 16.9419C17.186 16.6979 17.186 16.3021 16.9419 16.0581L10.8839 10L16.9419 3.94194C17.186 3.69786 17.186 3.30214 16.9419 3.05806C16.6979 2.81398 16.3021 2.81398 16.0581 3.05806L10 9.11612L3.94194 3.05806Z",
+                        fill: "#3C67FF"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+export { InteractionSelectOnPageHeader as default };

package/dist/esm/components/builder/PopupManager.js

@@ -16,7 +16,7 @@ const PopupManager = ()=>{
     ]);
     const onSetActiveModal = useCallback((e)=>{
         const detail = e.detail;
-        setModalActive(detail?.modalId);
+        setModalActive(detail?.modalId, false);
     }, [
         setModalActive
     ]);

package/dist/esm/components/builder/Toolbar.js

@@ -375,23 +375,30 @@ const Toolbar = ()=>{
         countShowOnboarding,
         onCloseOnboarding
     ]);
-    const getSelectorComponent = ({ componentUid, productId, articleId })=>{
+    const getSelectorComponent = ({ componentUid, productId, articleId, marqueeKey })=>{
         if (articleId) {
             return `${articleId ? `[data-article-id="${articleId}"][data-uid="${componentUid}"], [data-article-id="${articleId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
         }
+        if (marqueeKey) {
+            return `[marquee-item-key="${marqueeKey}"] [data-uid="${componentUid}"]`;
+        }
         return `${productId ? `[data-product-id="${productId}"][data-uid="${componentUid}"], [data-product-id="${productId}"] [data-uid="${componentUid}"]` : `[data-uid="${componentUid}"]`}`;
     };
-    const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, articleId, forceReActive })=>{
+    const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 600, articleId, forceReActive, marqueeKey })=>{
         if (!componentUid) return;
         const selector = getSelectorComponent({
             componentUid,
             productId,
-            articleId
+            articleId,
+            marqueeKey
         });
         const $component = await waitForElementToExist(selector, timeAwait);
         if (!$component) return;
-        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId) return;
+        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId && articleId == currentComponentActive.current?.articleId && marqueeKey == currentComponentActive.current?.marqueeKey) return;
         if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || articleId !== currentComponentActive.current?.articleId || forceReActive) removeActiveComponent();
+        if (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || marqueeKey !== currentComponentActive.current?.marqueeKey) {
+            removeActiveComponent();
+        }
         const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
         const $outline = getChildrenByAttrSelector($component, 'data-outline');
         const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
@@ -400,7 +407,8 @@ const Toolbar = ()=>{
             currentComponentActive.current = {
                 componentUid,
                 productId,
-                articleId
+                articleId,
+                marqueeKey
             };
             $toolbar.removeAttribute('style');
             $toolbar.setAttribute('data-toolbar-active', 'true');
@@ -419,8 +427,9 @@ const Toolbar = ()=>{
         if ($btnAddBottom) {
             $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
         }
+        const isChildOfMarquee = !!$component.closest('[data-component-tag="Marquee"]');
         // Active same element in product list
-        if (productId || articleId) {
+        if (productId || articleId || isChildOfMarquee) {
             const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
             if ($relatedElements?.length) {
                 $relatedElements.forEach(($relatedElement)=>{
@@ -681,7 +690,8 @@ const Toolbar = ()=>{
             setActiveComponent({
                 componentUid: detail.componentUid,
                 productId: detail.productId,
-                articleId: detail.articleId
+                articleId: detail.articleId,
+                marqueeKey: detail.marqueeKey
             });
         } else {
             removeActiveComponent();

package/dist/esm/components/builder/Toolbox.js

@@ -32,6 +32,8 @@ const Toolbox = ()=>{
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -325,6 +327,18 @@ const Toolbox = ()=>{
     }, [
         setSalePageProductId
     ]);
+    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
+        const isSelectOnPage = e.detail;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+    }, [
+        setInteractionIsSelectOnPage
+    ]);
+    const onUpdateInteractionItem = useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -352,6 +366,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -371,6 +387,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
         };
     }, [
         onAddEntity,
@@ -391,7 +409,9 @@ const Toolbox = ()=>{
         onUpdateItemName,
         onUpdateItemAttribute,
         onUpdateProductOffers,
-        onUpdateSalePageProductId
+        onUpdateSalePageProductId,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js

@@ -85,12 +85,12 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                 }),
                 ACTIONS_DATA.map((action)=>{
                     return /*#__PURE__*/ jsxs("div", {
-                        className: `gp-relative gp-mx-1 gp-h-[60px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
+                        className: `gp-relative gp-mx-1 gp-h-[60px] mobile:gp-h-[72px] gp-w-[172px] w375:gp-w-auto w576:gp-w-auto gp-cursor-pointer gp-flex-col gp-items-center gp-justify-center gp-rounded-[3px] gp-bg-[#F4F4F4] hover:gp-bg-black/10 ${isInput ? 'gp-hidden' : 'gp-flex'}`,
                         id: action.id,
                         "aria-hidden": true,
                         children: [
                             /*#__PURE__*/ jsxs("div", {
-                                className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]",
+                                className: "gp-mb-[4px] gp-flex gp-gap-2 gp-text-[14px] gp-font-medium gp-text-[#212121]  mobile:gp-flex-col mobile:gp-items-center mobile:gp-gap-0",
                                 children: [
                                     action.title,
                                     action.hasAILogo && /*#__PURE__*/ jsxs("svg", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.44.2-staging.89",
+  "version": "1.45.0-dev.91",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,10 +26,10 @@
     "next": "latest"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.44.2-staging.89",
-    "@gem-sdk/plugin-cookie-bar": "1.44.2-staging.87",
-    "@gem-sdk/plugin-quick-view": "1.44.2-staging.87",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.44.2-staging.87"
+    "@gem-sdk/core": "1.45.0-dev.91",
+    "@gem-sdk/plugin-cookie-bar": "1.45.0-dev.91",
+    "@gem-sdk/plugin-quick-view": "1.45.0-dev.91",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.45.0-dev.91"
   },
   "peerDependencies": {
     "next": ">=13"