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

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

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

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

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