@gem-sdk/pages 1.23.0-staging.34 → 1.23.0-staging.349

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
+import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
 import { memo, useMemo, useCallback, useEffect } from 'react';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
@@ -8,24 +8,24 @@ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
 
 const globalStyleId = 'global-style';
-const globalFontId = 'google-font-builder';
-const fontElementSettingClassName = 'google-font-element';
 const Toolbox = ()=>{
     const matchMutate = useMatchMutate();
     const provider = useShopStore((s)=>s.provider);
     const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
+    const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
+    const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
     const initState = useBuilderPreviewStore((s)=>s.initState);
     const state = useBuilderPreviewStore((s)=>s.state);
     const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
     const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
     const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
-    const setDynamicProduct = useBuilderPreviewStore((s)=>s.setDynamicProduct);
-    const setDynamicCollection = useBuilderPreviewStore((s)=>s.setDynamicCollection);
     const addItem = useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
+    const updateItemAttribute = useBuilderPreviewStore((s)=>s.updateItemAttribute);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
@@ -33,11 +33,62 @@ const Toolbox = ()=>{
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
-    const customFontUrl = useMemo(()=>{
-        return createFontUrl(fonts);
-    }, [
-        fonts
-    ]);
+    const setFontsToHead = (className, fonts)=>{
+        // clear fonts
+        if (!fonts?.length) {
+            const googleFonts = document.querySelectorAll(`.${className}`);
+            googleFonts.forEach((googleFont)=>{
+                googleFont.remove();
+            });
+            return;
+        }
+        // clear fonts not use
+        const googleFonts = document.querySelectorAll(`.${className}`);
+        googleFonts.forEach((googleFont)=>{
+            const fontName = googleFont.getAttribute('data-font');
+            const variantName = googleFont.getAttribute('data-font-variant');
+            if (!fontName || !variantName) {
+                googleFont.remove();
+            } else {
+                const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
+                if (!isUse) {
+                    googleFont.remove();
+                }
+            }
+        });
+        // append new fonts
+        for (const font of fonts){
+            if (font.type !== 'custom') {
+                if (font.variants?.length) {
+                    for (const variant of font.variants){
+                        const cloneFont = JSON.parse(JSON.stringify(font));
+                        cloneFont.variants = [
+                            variant
+                        ]; // set single variant. Fix error reload font when change href other variant
+                        const fontName = cloneFont.family;
+                        const variantName = variant;
+                        const url = createFontUrl([
+                            cloneFont
+                        ]);
+                        if (url) {
+                            const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
+                            if (googleFont) {
+                                continue;
+                            } else {
+                                const link = document.createElement('link');
+                                link.className = className;
+                                link.dataset.font = fontName;
+                                link.dataset.fontVariant = variantName;
+                                link.href = url;
+                                link.rel = 'stylesheet';
+                                document.head.appendChild(link);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
     // Revalidate all query with key match query/
     const onRevalidateQuery = useCallback(()=>{
         matchMutate(/query\//, {
@@ -73,22 +124,8 @@ const Toolbox = ()=>{
                     }
                     return item;
                 });
-                const fontUrl = createFontUrl(font);
                 const globalStyle = document.getElementById(globalStyleId);
-                const googleFont = document.getElementById(globalFontId);
-                if (fontUrl) {
-                    if (googleFont) {
-                        if (googleFont.getAttribute('href') !== fontUrl) {
-                            googleFont.setAttribute('href', fontUrl);
-                        }
-                    } else {
-                        const link = document.createElement('link');
-                        link.id = globalFontId;
-                        link.href = fontUrl;
-                        link.rel = 'stylesheet';
-                        document.head.appendChild(link);
-                    }
-                }
+                setFontsToHead('google-font-builder', font);
                 if (globalStyle) {
                     globalStyle.innerHTML = themeStyle;
                 } else {
@@ -222,52 +259,62 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     const onUpdateCreateThemeSectionCount = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeCreateThemeSectionCount(detail);
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
     }, [
         changeCreateThemeSectionCount
     ]);
     const onUpdateShopPlan = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeShopPlan(detail);
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
     }, [
         changeShopPlan
     ]);
     const onUpdateDynamicProduct = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicProduct(detail);
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
     }, [
         setDynamicProduct
     ]);
     const onUpdateDynamicCollection = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicCollection(detail);
+        const collection = e.detail;
+        if (!collection) return;
+        setDynamicCollection(collection);
     }, [
         setDynamicCollection
     ]);
     useEffect(()=>{
-        if (customFontUrl) {
-            const fontId = 'google-font';
-            const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
-            if (googleFont) {
-                if (googleFont.getAttribute('href') !== customFontUrl) {
-                    googleFont.setAttribute('href', customFontUrl);
-                }
-            } else {
-                const link = document.createElement('link');
-                link.className = fontElementSettingClassName;
-                link.dataset.font = fontId;
-                link.href = customFontUrl;
-                link.rel = 'stylesheet';
-                document.head.appendChild(link);
-            }
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
+    ]);
+    const onUpdateItemName = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemName(detail.uid, detail.name || '');
+        }
+    }, [
+        updateItemName
+    ]);
+    const onUpdateItemAttribute = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
         }
     }, [
-        customFontUrl
+        updateItemAttribute
+    ]);
+    useEffect(()=>{
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
     ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
@@ -285,6 +332,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-shop-plan', onUpdateShopPlan);
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+        window.addEventListener('update-item-name', onUpdateItemName);
+        window.addEventListener('update-item-attribute', onUpdateItemAttribute);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -300,6 +349,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-shop-plan', onUpdateShopPlan);
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+            window.removeEventListener('update-item-name', onUpdateItemName);
+            window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
         };
     }, [
         onAddEntity,
@@ -316,7 +367,9 @@ const Toolbox = ()=>{
         onChangeLayoutSettingData,
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
-        onUpdateDynamicCollection
+        onUpdateDynamicCollection,
+        onUpdateItemName,
+        onUpdateItemAttribute
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

package/dist/esm/components/builder/toolbar/Onboarding.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Onboarding = ({ enable, position, onCloseOnboarding })=>{
+    const closeOnboarding = ()=>{
+        onCloseOnboarding();
+    };
+    const videoSrc = 'https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/';
+    const Video = ()=>{
+        return /*#__PURE__*/ jsxs("video", {
+            width: "100%",
+            className: "w-full",
+            loop: true,
+            muted: true,
+            autoPlay: true,
+            playsInline: true,
+            children: [
+                /*#__PURE__*/ jsx("source", {
+                    src: videoSrc,
+                    type: "video/mp4"
+                }),
+                "Sorry, your browser doesn‘t support embedded videos."
+            ]
+        });
+    };
+    const MemoVideo = /*#__PURE__*/ memo(Video);
+    return /*#__PURE__*/ jsx("div", {
+        "data-toolbar-onboarding": true,
+        "data-toolbar-onboarding-position": position,
+        children: enable && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "data-icon": true,
+                    "data-position": position,
+                    children: position === 'bottom' ? /*#__PURE__*/ jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
+                            fill: "white"
+                        })
+                    }) : /*#__PURE__*/ jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
+                            fill: "white"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    "data-onboarding-wrapper": true,
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            "data-close": true,
+                            type: "button",
+                            onClick: closeOnboarding,
+                            children: /*#__PURE__*/ jsxs("svg", {
+                                width: "32",
+                                height: "32",
+                                viewBox: "0 0 32 32",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: [
+                                    /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",
+                                        fill: "#212121"
+                                    }),
+                                    /*#__PURE__*/ jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",
+                                        fill: "#212121"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(MemoVideo, {}),
+                        /*#__PURE__*/ jsxs("div", {
+                            "data-content": true,
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    children: "New way to select parent element"
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    children: "Select parent from here in case you can‘t find yours at times."
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var Onboarding$1 = /*#__PURE__*/ memo(Onboarding);
+
+export { Onboarding$1 as default };

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

@@ -33,11 +33,6 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
     const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const [link, setLink] = useState('');
     const [isInput, setIsInput] = useState(false);
-    const onClick = (index)=>{
-        if (index === 1) {
-            setIsInput(true);
-        }
-    };
     useEffect(()=>{
         if (!isInput || totalSection === 0) {
             setLink('');
@@ -78,11 +73,10 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                     className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
                     children: "Add section"
                 }),
-                ACTIONS_DATA.map((action, index)=>{
+                ACTIONS_DATA.map((action)=>{
                     return /*#__PURE__*/ jsxs("div", {
                         className: `relative mx-1 h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
                         id: action.id,
-                        onClick: ()=>onClick(index),
                         "aria-hidden": true,
                         children: [
                             /*#__PURE__*/ jsxs("div", {

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

@@ -1,116 +1,157 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const DropElement = ()=>{
+    const dispatchEventBuildWithSectionActiveTab = (value)=>{
+        const event = new CustomEvent('editor:sidebar:build-with-section-active-tab', {
+            bubbles: true,
+            detail: {
+                value
+            }
+        });
+        window.dispatchEvent(event);
+    };
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex w-full flex-1 flex-col items-center justify-center",
+        className: "flex w-full flex-col items-center justify-center",
         children: [
-            /*#__PURE__*/ jsx("span", {
-                className: "mb-6 text-sm font-normal text-[#676767]",
-                children: "Drag element from sidebar here"
-            }),
             /*#__PURE__*/ jsxs("svg", {
-                width: "276",
-                height: "129",
-                viewBox: "0 0 276 129",
+                width: "290",
+                height: "162",
+                viewBox: "0 0 290 162",
                 fill: "none",
                 xmlns: "http://www.w3.org/2000/svg",
+                className: "mb-[24px]",
                 children: [
                     /*#__PURE__*/ jsx("rect", {
-                        x: "47",
-                        y: "0.5",
-                        width: "182",
-                        height: "128",
-                        rx: "8",
-                        fill: "#E8E9EC"
+                        x: "0.570588",
+                        y: "0.570588",
+                        width: "288.859",
+                        height: "160.859",
+                        rx: "8.55882",
+                        fill: "white"
                     }),
                     /*#__PURE__*/ jsx("rect", {
-                        x: "124",
-                        y: "12.5",
-                        width: "94",
-                        height: "104",
-                        rx: "6",
-                        fill: "white",
-                        stroke: "#AEB6CD",
-                        strokeWidth: "1.5",
-                        strokeLinecap: "round",
-                        strokeDasharray: "2 4"
+                        x: "0.570588",
+                        y: "0.570588",
+                        width: "288.859",
+                        height: "160.859",
+                        rx: "8.55882",
+                        stroke: "#E2E2E2",
+                        strokeWidth: "1.14118"
                     }),
-                    /*#__PURE__*/ jsx("rect", {
-                        x: "59",
-                        y: "14.5",
-                        width: "44",
-                        height: "22",
-                        rx: "2",
-                        fill: "white"
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M22.2529 29.6708C22.2529 25.8893 25.3185 22.8237 29.1 22.8237H126.1C129.882 22.8237 132.947 25.8893 132.947 29.6708V132.377C132.947 136.158 129.882 139.224 126.1 139.224H29.1C25.3185 139.224 22.2529 136.158 22.2529 132.377V29.6708Z",
+                        fill: "#3C67FF",
+                        fillOpacity: "0.1"
                     }),
-                    /*#__PURE__*/ jsx("rect", {
-                        x: "59",
-                        y: "67.5",
-                        width: "44",
-                        height: "22",
-                        rx: "2",
-                        fill: "white"
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M76.0283 91.1587C77.3298 92.6353 76.2754 94.958 74.3066 94.9513L57.7218 94.8955C55.762 94.8889 54.7231 92.5777 56.0182 91.1058L64.2787 81.7175C65.1873 80.6849 66.7951 80.6836 67.7039 81.7146L76.0283 91.1587Z",
+                        fill: "#7190FF"
                     }),
-                    /*#__PURE__*/ jsx("g", {
-                        clipPath: "url(#clip0_3791_281943)",
-                        children: /*#__PURE__*/ jsx("rect", {
-                            x: "59",
-                            y: "41.5",
-                            width: "44",
-                            height: "22",
-                            rx: "2",
-                            fill: "#BDCEFF"
-                        })
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M98.1352 91.1406C99.4315 92.62 98.3727 94.9382 96.4053 94.9282L67.9725 94.7838C66.0044 94.7738 64.9727 92.4437 66.2873 90.9779L80.6046 75.0135C81.5189 73.994 83.118 74.0026 84.0198 75.0318L98.1352 91.1406Z",
+                        fill: "#7190FF"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M63.2783 74.2252C66.1589 73.8964 68.1647 71.3676 67.8369 68.478C67.5091 65.5883 64.9883 63.5762 62.1077 63.905C59.2272 64.2338 57.2214 66.7626 57.5492 69.6523C57.877 72.5419 60.3978 74.554 63.2783 74.2252Z",
+                        fill: "#7190FF"
                     }),
                     /*#__PURE__*/ jsx("rect", {
-                        x: "59",
-                        y: "94.5",
-                        width: "44",
-                        height: "22",
-                        rx: "2",
-                        fill: "white"
+                        x: "157.482",
+                        y: "45.647",
+                        width: "83.3059",
+                        height: "11.4118",
+                        rx: "5.70588",
+                        fill: "#AAAAAA"
                     }),
                     /*#__PURE__*/ jsx("rect", {
-                        x: "112",
-                        y: "39.5",
-                        width: "71",
-                        height: "50.0492",
-                        rx: "3.4918",
+                        x: "157.5",
+                        y: "98.9995",
+                        width: "48",
+                        height: "18",
+                        rx: "9",
                         fill: "#3C67FF"
                     }),
-                    /*#__PURE__*/ jsx("path", {
-                        opacity: "0.8",
-                        d: "M147.819 73.2147C148.963 74.508 148.04 76.5453 146.314 76.5395L131.719 76.4905C129.999 76.4848 129.088 74.456 130.226 73.1671L137.495 64.9309C138.291 64.0294 139.697 64.0288 140.493 64.9296L147.819 73.2147Z",
-                        fill: "white",
-                        fillOpacity: "0.84"
+                    /*#__PURE__*/ jsx("rect", {
+                        x: "157.5",
+                        y: "66.9995",
+                        width: "68",
+                        height: "5",
+                        rx: "2.5",
+                        fill: "#E2E2E2"
                     }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M167.258 73.1989C168.397 74.4947 167.471 76.5281 165.746 76.5193L140.732 76.3927C139.006 76.384 138.101 74.3387 139.256 73.0551L151.851 59.0548C152.652 58.1648 154.05 58.1728 154.84 59.072L167.258 73.1989Z",
-                        fill: "white"
+                    /*#__PURE__*/ jsx("rect", {
+                        x: "157.5",
+                        y: "79.9995",
+                        width: "52",
+                        height: "5",
+                        rx: "2.5",
+                        fill: "#E2E2E2"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col items-center",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "text-16 font-medium mb-4 text-[#212121]",
+                        children: "Start with Sections from sidebar"
                     }),
-                    /*#__PURE__*/ jsx("path", {
-                        opacity: "0.8",
-                        d: "M136.608 58.3724C139.141 58.0841 140.904 55.8675 140.616 53.3346C140.328 50.8017 138.111 49.0381 135.578 49.3263C133.045 49.6145 131.282 51.8311 131.57 54.364C131.858 56.8969 134.075 58.6606 136.608 58.3724Z",
-                        fill: "white",
-                        fillOpacity: "0.84"
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex w-[291px] justify-between",
+                        children: [
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
+                                className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#1C1C1C] text-[14px] text-white hover:bg-[#3B3B3B]",
+                                children: "Add sections"
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
+                                className: "flex h-[40px] w-[136px] items-center font-medium justify-center rounded-[8px] bg-[#f4f4f4] text-[14px] text-[#212121] hover:bg-[#E2E2E2]",
+                                children: "Add elements"
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsx("path", {
-                        d: "M189.56 94.5C189.7 94.6393 189.81 94.8047 189.886 94.9867C189.961 95.1687 190 95.3638 190 95.5608C190 95.7578 189.961 95.9529 189.886 96.1349C189.81 96.3169 189.7 96.4823 189.56 96.6216L189.122 97.0603C188.982 97.1997 188.817 97.3102 188.635 97.3856C188.453 97.461 188.258 97.4998 188.061 97.4998C187.864 97.4998 187.669 97.461 187.487 97.3856C187.305 97.3102 187.139 97.1997 187 97.0603L181.82 91.8816L179.769 96.601C179.654 96.8687 179.463 97.0966 179.219 97.2565C178.976 97.4163 178.691 97.501 178.399 97.5H178.326C178.023 97.4873 177.73 97.3816 177.488 97.1971C177.247 97.0126 177.068 96.7584 176.975 96.4688L172.075 81.4613C171.989 81.1987 171.978 80.9174 172.042 80.6486C172.106 80.3799 172.243 80.1342 172.439 79.9388C172.634 79.7434 172.88 79.606 173.149 79.5418C173.417 79.4776 173.699 79.4891 173.961 79.575L188.969 84.4753C189.256 84.5713 189.507 84.7517 189.689 84.9929C189.872 85.2341 189.977 85.5249 189.991 85.827C190.006 86.1291 189.928 86.4285 189.769 86.6858C189.61 86.9432 189.377 87.1465 189.101 87.2691L184.382 89.3203L189.56 94.5Z",
-                        fill: "#2B2D34",
-                        stroke: "#E8E8E8"
+                    /*#__PURE__*/ jsx("div", {
+                        className: "my-6",
+                        children: /*#__PURE__*/ jsxs("svg", {
+                            width: "338",
+                            height: "24",
+                            viewBox: "0 0 338 24",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("rect", {
+                                    width: "150",
+                                    height: "1",
+                                    transform: "translate(0 11.4999)",
+                                    fill: "#D6D6D6"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M166.395 17.159C165.705 17.159 165.101 16.995 164.58 16.6668C164.063 16.3387 163.659 15.8797 163.367 15.2897C163.079 14.6997 162.935 14.0104 162.935 13.2215C162.935 12.4261 163.079 11.7317 163.367 11.1384C163.659 10.5452 164.063 10.0845 164.58 9.75633C165.101 9.42821 165.705 9.26414 166.395 9.26414C167.084 9.26414 167.688 9.42821 168.205 9.75633C168.725 10.0845 169.129 10.5452 169.418 11.1384C169.709 11.7317 169.855 12.4261 169.855 13.2215C169.855 14.0104 169.709 14.6997 169.418 15.2897C169.129 15.8797 168.725 16.3387 168.205 16.6668C167.688 16.995 167.084 17.159 166.395 17.159ZM166.395 16.1051C166.919 16.1051 167.349 15.9708 167.688 15.7024C168.026 15.4339 168.276 15.0809 168.438 14.6434C168.601 14.2059 168.682 13.7319 168.682 13.2215C168.682 12.7111 168.601 12.2355 168.438 11.7947C168.276 11.3539 168.026 10.9976 167.688 10.7258C167.349 10.454 166.919 10.3181 166.395 10.3181C165.871 10.3181 165.44 10.454 165.102 10.7258C164.764 10.9976 164.514 11.3539 164.352 11.7947C164.189 12.2355 164.108 12.7111 164.108 13.2215C164.108 13.7319 164.189 14.2059 164.352 14.6434C164.514 15.0809 164.764 15.4339 165.102 15.7024C165.44 15.9708 165.871 16.1051 166.395 16.1051ZM171.646 16.9999V9.36358H172.78V10.517H172.859C172.998 10.1391 173.25 9.83256 173.615 9.59724C173.979 9.36192 174.39 9.24426 174.848 9.24426C174.934 9.24426 175.042 9.24591 175.171 9.24923C175.3 9.25254 175.398 9.25751 175.464 9.26414V10.4573C175.425 10.4474 175.333 10.4325 175.191 10.4126C175.052 10.3894 174.904 10.3778 174.748 10.3778C174.377 10.3778 174.046 10.4557 173.754 10.6114C173.466 10.7639 173.237 10.976 173.068 11.2478C172.902 11.5163 172.819 11.8229 172.819 12.1676V16.9999H171.646Z",
+                                    fill: "#676767"
+                                }),
+                                /*#__PURE__*/ jsx("rect", {
+                                    width: "150",
+                                    height: "1",
+                                    transform: "translate(188 11.4999)",
+                                    fill: "#D6D6D6"
+                                })
+                            ]
+                        })
                     }),
-                    /*#__PURE__*/ jsx("defs", {
-                        children: /*#__PURE__*/ jsx("clipPath", {
-                            id: "clip0_3791_281943",
-                            children: /*#__PURE__*/ jsx("rect", {
-                                x: "59",
-                                y: "41.5",
-                                width: "44",
-                                height: "22",
-                                rx: "2",
-                                fill: "white"
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2 text-xs",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                id: "gp-img-to-layout-gallery-btn",
+                                className: "relative cursor-pointer text-[14px] font-medium text-[#3C67FF]",
+                                children: "Start with Generating from URL or image"
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "text-medium flex h-[20px] w-[58px] items-center justify-center rounded-[8px] bg-[#3C67FF1A] text-[#0008C9]",
+                                children: "AI Beta"
                             })
-                        })
+                        ]
                     })
                 ]
             })

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

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useBuilderPreviewStore, cls } from '@gem-sdk/core';
 import { DropElement } from './DropElement.js';
-import { ImageToLayoutInput } from './ImageToLayoutInput.js';
 
 const HEADER_HEIGHT = 40;
 const FOOTER_HEIGHT = 50;
@@ -22,15 +21,10 @@ const ImageToLayout = ({ editorImageToLayout })=>{
                 style: {
                     height: `calc(100vh - ${FOOTER_HEIGHT + HEADER_HEIGHT}px)`
                 },
-                children: /*#__PURE__*/ jsxs("div", {
+                children: /*#__PURE__*/ jsx("div", {
                     id: "gps-gem-ai-input-wrapper",
                     className: "mobile:px-[0px] flex h-full w-full flex-1 flex-col items-center justify-center rounded-[3px] bg-white px-[72px] py-[32px]",
-                    children: [
-                        /*#__PURE__*/ jsx(DropElement, {}),
-                        /*#__PURE__*/ jsx(ImageToLayoutInput, {
-                            totalSection: totalSection || 0
-                        })
-                    ]
+                    children: /*#__PURE__*/ jsx(DropElement, {})
                 })
             }),
             /*#__PURE__*/ jsx("div", {