@gem-sdk/pages 1.36.6 → 2.0.0-dev.832

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

@@ -1,380 +1 @@
-import { jsx } from 'react/jsx-runtime';
-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';
-import { genCSS } from '../../libs/helpers/gen-css.js';
-import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
-import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
-
-const globalStyleId = 'global-style';
-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 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);
-    const clearModal = useModalStore((s)=>s.clearModal);
-    const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
-        state
-    ]);
-    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\//, {
-            revalidate: true
-        });
-    }, [
-        matchMutate
-    ]);
-    // Update shop info
-    const onChangeShopInfo = useCallback((e)=>{
-        const detail = e.detail;
-        changeStorefrontInfo({
-            url: detail.shopHandle ? getStorefrontApi(detail.shopHandle, provider) : undefined,
-            token: detail.shopToken
-        });
-    }, [
-        changeStorefrontInfo,
-        provider
-    ]);
-    const onChangeGlobalStyle = useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                const themeStyle = genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
-                    if (item.type == 'custom') {
-                        const isGoogleFont = shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
-                        if (isGoogleFont) {
-                            return isGoogleFont;
-                        }
-                    }
-                    return item;
-                });
-                const globalStyle = document.getElementById(globalStyleId);
-                setFontsToHead('google-font-builder', font);
-                if (globalStyle) {
-                    globalStyle.innerHTML = themeStyle;
-                } else {
-                    const style = document.createElement('style');
-                    style.id = globalStyleId;
-                    style.innerHTML = themeStyle;
-                    document.head.appendChild(style);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, []);
-    // Init builder data
-    const onInitBuilder = useCallback((e)=>{
-        clearModal();
-        try {
-            const detail = e.detail;
-            if (detail.data) {
-                if (detail.type === 'flat') {
-                    initNormalizeState(detail.data);
-                } else {
-                    initState(detail.data);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        initNormalizeState,
-        initState,
-        clearModal
-    ]);
-    // Add new entity
-    const onAddEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.entity) {
-                addItem({
-                    data: detail.entity,
-                    id: detail.id,
-                    position: detail.position,
-                    type: detail.type ?? 'component'
-                });
-                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
-                    addSection(detail.entity.uid, detail.entity);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        addItem,
-        addSection
-    ]);
-    // Update props of entity
-    const onUpdateEntityProp = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid && detail.propName) {
-                changeItemPropByKey({
-                    id: detail.uid,
-                    key: detail.propName,
-                    data: detail.propValue,
-                    group: detail.group
-                });
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeItemPropByKey
-    ]);
-    // Update props of entity
-    const onForceUpdateEntityProps = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                forceChangeItemProp(detail.uid, detail.data, detail.group);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        forceChangeItemProp
-    ]);
-    // Move entity
-    const onMoveEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.to && detail.uid) {
-                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        moveItem
-    ]);
-    // Remove entity
-    const onRemoveEntity = useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                removeItem(detail.uid);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        removeItem
-    ]);
-    // Change Swatches Data
-    const onChangeSwatchesData = useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                changeSwatches(detail.data);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeSwatches
-    ]);
-    const onChangeLayoutSettingData = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeLayoutSettings(detail);
-    }, [
-        changeLayoutSettings
-    ]);
-    const onUpdateCreateThemeSectionCount = useCallback((e)=>{
-        const count = e.detail;
-        if (!count) return;
-        changeCreateThemeSectionCount(count);
-    }, [
-        changeCreateThemeSectionCount
-    ]);
-    const onUpdateShopPlan = useCallback((e)=>{
-        const shopPlan = e.detail;
-        if (!shopPlan) return;
-        changeShopPlan(shopPlan);
-    }, [
-        changeShopPlan
-    ]);
-    const onUpdateDynamicProduct = useCallback((e)=>{
-        const product = e.detail;
-        if (!product) return;
-        setDynamicProduct(product);
-    }, [
-        setDynamicProduct
-    ]);
-    const onUpdateDynamicCollection = useCallback((e)=>{
-        const collection = e.detail;
-        if (!collection) return;
-        setDynamicCollection(collection);
-    }, [
-        setDynamicCollection
-    ]);
-    useEffect(()=>{
-        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 || '');
-        }
-    }, [
-        updateItemAttribute
-    ]);
-    useEffect(()=>{
-        if (fonts) {
-            setFontsToHead('google-font-element', fonts);
-        }
-    }, [
-        fonts
-    ]);
-    useEffect(()=>{
-        window.addEventListener('update-shop-info', onChangeShopInfo);
-        window.addEventListener('revalidate-query', onRevalidateQuery);
-        window.addEventListener('init-builder', onInitBuilder);
-        window.addEventListener('add-entity', onAddEntity);
-        window.addEventListener('remove-entity', onRemoveEntity);
-        window.addEventListener('move-entity', onMoveEntity);
-        window.addEventListener('force-update-entity-props', onForceUpdateEntityProps);
-        window.addEventListener('update-entity-prop', onUpdateEntityProp);
-        window.addEventListener('set-global-style', onChangeGlobalStyle);
-        window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
-        window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
-        window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
-        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);
-            window.removeEventListener('init-builder', onInitBuilder);
-            window.removeEventListener('add-entity', onAddEntity);
-            window.removeEventListener('remove-entity', onRemoveEntity);
-            window.removeEventListener('move-entity', onMoveEntity);
-            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
-            window.removeEventListener('set-global-style', onChangeGlobalStyle);
-            window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
-            window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
-            window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
-            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,
-        onUpdateShopPlan,
-        onForceUpdateEntityProps,
-        onUpdateEntityProp,
-        onInitBuilder,
-        onMoveEntity,
-        onRemoveEntity,
-        onChangeGlobalStyle,
-        onChangeSwatchesData,
-        onRevalidateQuery,
-        onChangeShopInfo,
-        onChangeLayoutSettingData,
-        onUpdateCreateThemeSectionCount,
-        onUpdateDynamicProduct,
-        onUpdateDynamicCollection,
-        onUpdateItemName,
-        onUpdateItemAttribute
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        className: "toolbox"
-    });
-};
-var Toolbox$1 = /*#__PURE__*/ memo(Toolbox);
-
-export { Toolbox$1 as default };
+import{jsx as e}from"react/jsx-runtime";import{useMatchMutate as t,useShopStore as n,usePageStore as o,useBuilderPreviewStore as i,useSectionStore as a,useModalStore as d}from"@gem-sdk/core";import{memo as r,useMemo as l,useCallback as s,useEffect as m}from"react";import{getStorefrontApi as c}from"../../libs/get-storefront-api.js";import{createFontUrl as p}from"../../libs/google-fonts.js";import{genCSS as u}from"../../libs/helpers/gen-css.js";import{getFontsFromDataBuilder as v}from"../../libs/helpers/gen-fonts.js";import{shopifyCdnWithGoogleFonts as w}from"../../libs/shopify-cdn-with-google-fonts.js";let globalStyleId="global-style",Toolbox=()=>{let r=t(),f=n(e=>e.provider),y=n(e=>e.changeStorefrontInfo),h=o(e=>e.setDynamicProduct),g=o(e=>e.setPostPurchaseProductOffers),E=o(e=>e.setSalePageProductId),L=o(e=>e.setDynamicCollection),b=i(e=>e.initState),S=i(e=>e.state),I=i(e=>e.forceChangeState),P=i(e=>e.forceChangeItemProp),N=i(e=>e.changeItemPropByKey),T=i(e=>e.addItem),j=i(e=>e.moveItem),x=i(e=>e.removeItem),A=a(e=>e.addSection),C=n(e=>e.changeSwatches),$=i(e=>e.updateItemName),q=i(e=>e.updateItemAttribute),k=n(e=>e.changeLayoutSettings),O=n(e=>e.changeCreateThemeSectionCount),H=n(e=>e.changeShopPlan),M=d(e=>e.clearModal),B=l(()=>v(S),[S]),D=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let n=document.querySelectorAll(`.${e}`);for(let o of(n.forEach(e=>{let n=e.getAttribute("data-font"),o=e.getAttribute("data-font-variant");if(n&&o){let i=t.find(e=>e.family==n&&e.variants.includes(o));i||e.remove()}else e.remove()}),t))if("custom"!==o.type&&o.variants?.length)for(let t of o.variants){let n=JSON.parse(JSON.stringify(o));n.variants=[t];let i=n.family,a=p([n]);if(a){let n=document.querySelector(`.${e}[data-font="${i}"][data-font-variant="${t}"]`);if(n)continue;{let n=document.createElement("link");n.className=e,n.dataset.font=i,n.dataset.fontVariant=t,n.href=a,n.rel="stylesheet",document.head.appendChild(n)}}}},J=s(()=>{r(/query\//,{revalidate:!0})},[r]),V=s(e=>{let t=e.detail;y({url:t.shopHandle?c(t.shopHandle,f):void 0,token:t.shopToken})},[y,f]),K=s(e=>{let t=e.detail;try{if(t.data){let e=u(t.data,t.mobileOnly),n=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=w.find(t=>t.family==e.family);if(t)return t}return e}),o=document.getElementById(globalStyleId);if(D("google-font-builder",n),o)o.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),z=s(e=>{M();try{let t=e.detail;t.data&&("flat"===t.type?I(t.data):b(t.data))}catch{}},[I,b,M]),F=s(e=>{try{let t=e.detail;t.entity&&(T({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||A(t.entity.uid,t.entity))}catch{}},[T,A]),G=s(e=>{try{let t=e.detail;t.uid&&t.propName&&N({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[N]),Q=s(e=>{try{let t=e.detail;t.uid&&P(t.uid,t.data,t.group)}catch{}},[P]),R=s(e=>{try{let t=e.detail;t.to&&t.uid&&j(t.uid,t.to,Number(t.position)??0)}catch{}},[j]),U=s(e=>{try{let t=e.detail;t.uid&&x(t.uid)}catch{}},[x]),W=s(e=>{let t=e.detail;try{t.data&&C(t.data)}catch{}},[C]),X=s(e=>{let t=e.detail;t&&k(t)},[k]),Y=s(e=>{let t=e.detail;t&&O(t)},[O]),Z=s(e=>{let t=e.detail;t&&H(t)},[H]),_=s(e=>{let t=e.detail;t&&h(t)},[h]),ee=s(e=>{let t=e.detail;t&&L(t)},[L]);m(()=>{B&&D("google-font-element",B)},[B]);let et=s(e=>{let t=e.detail;t.uid&&$(t.uid,t.name||"")},[$]),en=s(e=>{let t=e.detail;t.uid&&q(t.uid,t.value||"",t.attr||"")},[q]),eo=s(e=>{let t=e.detail;t?.length&&g(t)},[g]),ei=s(e=>{let t=e.detail;t&&E(t)},[E]);return m(()=>{B&&D("google-font-element",B)},[B]),m(()=>(window.addEventListener("update-shop-info",V),window.addEventListener("revalidate-query",J),window.addEventListener("init-builder",z),window.addEventListener("add-entity",F),window.addEventListener("remove-entity",U),window.addEventListener("move-entity",R),window.addEventListener("force-update-entity-props",Q),window.addEventListener("update-entity-prop",G),window.addEventListener("set-global-style",K),window.addEventListener("update-global-swatches-data",W),window.addEventListener("on-off-header-footer",X),window.addEventListener("update-create-theme-section-count",Y),window.addEventListener("update-shop-plan",Z),window.addEventListener("set-dynamic-product",_),window.addEventListener("set-dynamic-collection",ee),window.addEventListener("update-item-name",et),window.addEventListener("update-item-attribute",en),window.addEventListener("set-product-offer",eo),window.addEventListener("update-sale-page-product-id",ei),()=>{window.removeEventListener("update-shop-info",V),window.removeEventListener("revalidate-query",J),window.removeEventListener("init-builder",z),window.removeEventListener("add-entity",F),window.removeEventListener("remove-entity",U),window.removeEventListener("move-entity",R),window.removeEventListener("update-entity-prop",G),window.removeEventListener("set-global-style",K),window.removeEventListener("update-global-swatches-data",W),window.removeEventListener("on-off-header-footer",X),window.removeEventListener("update-create-theme-section-count",Y),window.removeEventListener("update-shop-plan",Z),window.removeEventListener("set-dynamic-product",_),window.removeEventListener("set-dynamic-collection",ee),window.removeEventListener("update-item-name",et),window.removeEventListener("update-item-attribute",en),window.removeEventListener("set-product-offer",eo),window.removeEventListener("update-sale-page-product-id",ei)}),[F,Z,Q,G,z,R,U,K,W,J,V,X,Y,_,ee,et,en,eo,ei]),e("div",{className:"toolbox"})};var Toolbox$1=r(Toolbox);export{Toolbox$1 as default};

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

@@ -1,106 +1 @@
-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: "gp-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 };
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as o}from"react";let Onboarding=({enable:d,position:n,onCloseOnboarding:l})=>{let r=()=>{l()},a=()=>t("video",{width:"100%",className:"gp-w-full",loop:!0,muted:!0,autoPlay:!0,playsInline:!0,children:[e("source",{src:"https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/",type:"video/mp4"}),"Sorry, your browser doesn‘t support embedded videos."]}),h=o(a);return e("div",{"data-toolbar-onboarding":!0,"data-toolbar-onboarding-position":n,children:d&&t(i,{children:[e("span",{"data-icon":!0,"data-position":n,children:"bottom"===n?e("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",fill:"white"})}):e("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",fill:"white"})})}),t("div",{"data-onboarding-wrapper":!0,children:[e("button",{"data-close":!0,type:"button",onClick:r,children:t("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("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"}),e("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"})]})}),e(h,{}),t("div",{"data-content":!0,children:[e("h3",{children:"New way to select parent element"}),e("p",{children:"Select parent from here in case you can‘t find yours at times."})]})]})]})})};var Onboarding$1=o(Onboarding);export{Onboarding$1 as default};