@gem-sdk/pages 1.56.0 → 1.57.0-dev.45

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

@@ -33,6 +33,11 @@ const Toolbox = ()=>{
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
     const changeLimitCreateThemeSection = useShopStore((s)=>s.changeLimitCreateThemeSection);
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
+    const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
+    const setSidebarMode = usePageStore((s)=>s.setSidebarMode);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -333,6 +338,37 @@ const Toolbox = ()=>{
     }, [
         changeLimitCreateThemeSection
     ]);
+    const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
+        const isSelectOnPage = e.detail.value;
+        const mode = e.detail.mode;
+        const settingType = e.detail.settingType;
+        setInteractionIsSelectOnPage(isSelectOnPage);
+        setInteractionSelectType(mode);
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionIsSelectOnPage,
+        setInteractionSelectType,
+        setInteractionSettingType
+    ]);
+    const onUpdateInteractionSettingType = useCallback((e)=>{
+        const settingType = e.detail.settingType;
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionSettingType
+    ]);
+    const onChangeSidebarMode = useCallback((e)=>{
+        const mode = e.detail.mode;
+        console.log(mode);
+        setSidebarMode(mode);
+    }, [
+        setSidebarMode
+    ]);
+    const onUpdateInteractionItem = useCallback((e)=>{
+        const interactionItem = e.detail;
+        setInteractionItem(interactionItem);
+    }, [
+        setInteractionItem
+    ]);
     useEffect(()=>{
         if (fonts) {
             setFontsToHead('google-font-element', fonts);
@@ -361,6 +397,10 @@ const Toolbox = ()=>{
         window.addEventListener('set-product-offer', onUpdateProductOffers);
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
+        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
+        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -381,6 +421,9 @@ const Toolbox = ()=>{
             window.removeEventListener('set-product-offer', onUpdateProductOffers);
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
             window.removeEventListener('limit-create-theme-section', onLimitCreateThemeSection);
+            window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
+            window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
+            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
         };
     }, [
         onAddEntity,
@@ -402,7 +445,11 @@ const Toolbox = ()=>{
         onUpdateItemAttribute,
         onUpdateProductOffers,
         onUpdateSalePageProductId,
-        onLimitCreateThemeSection
+        onLimitCreateThemeSection,
+        onUpdateInteractionItem,
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onChangeSidebarMode
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -0,0 +1,4 @@
+const TOOLBAR_HOVER_HEIGHT = 24;
+const TOOLBAR_ACTIVE_HEIGHT = 32;
+
+export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };

package/dist/esm/components/builder/toolbar/utils/findDOMClosest.js

@@ -0,0 +1,39 @@
+const findDOMClosest = ($target, selectors)=>{
+    const closestElements = {
+        $childrenSlot: null,
+        $productFeatureImg: null,
+        $section: null,
+        $component: null,
+        $disableIframeClick: null,
+        $stickyMinimize: null,
+        $toolbar: null,
+        $gpText: null,
+        $imageDetection: null,
+        $popupTriggerButton: null
+    };
+    let currentElement = $target;
+    while(currentElement){
+        // Check for stop conditions
+        if (currentElement.matches('[data-uid="ROOT"], .builder, #storefront')) {
+            break;
+        }
+        // Check if currentElement matches any of the selectors
+        for (const [key, selector] of Object.entries(selectors)){
+            if (!closestElements[key] && currentElement.matches(selector)) {
+                closestElements[key] = currentElement;
+            }
+        }
+        // If all closest elements are found, break the loop
+        if (Object.values(closestElements).every((el)=>el !== null)) {
+            break;
+        }
+        // Move up to the parent element
+        currentElement = currentElement.parentElement;
+    }
+    // Reset ram
+    currentElement = null;
+    // Return
+    return closestElements;
+};
+
+export { findDOMClosest };

package/dist/esm/components/builder/toolbar/utils/findOverflowParent.js

@@ -0,0 +1,18 @@
+import { isOverToolbarPosition } from './isOverToolbarPosition.js';
+import { isSection } from './isSection.js';
+import { notVisible } from './notVisible.js';
+
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
+
+export { findOverflowParent };

package/dist/esm/components/builder/toolbar/utils/getChildrenByAttrSelector.js

@@ -0,0 +1,16 @@
+const getChildrenByAttrSelector = ($el, attrSelector)=>{
+    const childLen = $el.children.length;
+    if (childLen) {
+        for(let i = 0; i < childLen; i++){
+            const children = $el.children[i];
+            if (children) {
+                const is = children.getAttribute(attrSelector);
+                if (is) {
+                    return children;
+                }
+            }
+        }
+    }
+};
+
+export { getChildrenByAttrSelector };

package/dist/esm/components/builder/toolbar/utils/getDOMElementParents.js

@@ -0,0 +1,30 @@
+const getDOMElementParents = ($el, selector, limit)=>{
+    // Set up a parent array
+    const parents = [];
+    // Push each parent $elms to the array
+    while($el){
+        $el = $el.parentElement ?? undefined;
+        if ($el) {
+            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
+                break;
+            }
+            if (selector) {
+                if ($el.matches(selector)) {
+                    parents.push($el);
+                    if (limit && parents.length == limit) {
+                        return parents;
+                    }
+                }
+                continue;
+            }
+            parents.push($el);
+            if (limit && parents.length == limit) {
+                return parents;
+            }
+        }
+    }
+    // Return our parent array
+    return parents;
+};
+
+export { getDOMElementParents };

package/dist/esm/components/builder/toolbar/utils/isOverParent.js

@@ -0,0 +1,14 @@
+import { TOOLBAR_HOVER_HEIGHT } from '../const.js';
+
+const isOverParent = ({ current, parent, index, revert })=>{
+    for(let i = 0; i < index; i++){
+        let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
+        if (revert) {
+            is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
+        }
+        if (is) return true;
+    }
+    return false;
+};
+
+export { isOverParent };

package/dist/esm/components/builder/toolbar/utils/isOverToolbarPosition.js

@@ -0,0 +1,10 @@
+import { TOOLBAR_ACTIVE_HEIGHT } from '../const.js';
+
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
+};
+
+export { isOverToolbarPosition };

package/dist/esm/components/builder/toolbar/utils/isSection.js

@@ -0,0 +1,6 @@
+const isSection = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Section';
+};
+
+export { isSection };

package/dist/esm/components/builder/toolbar/utils/notVisible.js

@@ -0,0 +1,6 @@
+const notVisible = (el)=>{
+    const overflow = getComputedStyle(el).overflow;
+    return overflow !== 'visible';
+};
+
+export { notVisible };

package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js

@@ -0,0 +1,25 @@
+const waitForElementToExist = (selector, timeout = 200)=>{
+    return new Promise((resolve)=>{
+        let intervalID = null;
+        let timeoutID = null;
+        const findEl = ()=>{
+            const el = document.body.querySelector('#storefront')?.querySelector(selector);
+            if (el) {
+                if (intervalID) clearInterval(intervalID);
+                if (timeoutID) clearTimeout(timeoutID);
+                resolve(el);
+            }
+        };
+        findEl();
+        intervalID = setInterval(()=>{
+            findEl();
+        }, 50);
+        timeoutID = setTimeout(()=>{
+            if (intervalID) clearInterval(intervalID);
+            if (timeoutID) clearTimeout(timeoutID);
+            resolve(null);
+        }, timeout);
+    });
+};
+
+export { waitForElementToExist };

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

@@ -104,11 +104,13 @@ const DropElement = ()=>{
                         className: "gp-flex gp-w-[291px] gp-justify-between",
                         children: [
                             /*#__PURE__*/ jsx("button", {
+                                "data-button-add-section": true,
                                 onClick: ()=>dispatchEventBuildWithSectionActiveTab(true),
                                 className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#1C1C1C] gp-text-[14px] gp-text-white hover:gp-bg-[#3B3B3B]",
                                 children: "Add sections"
                             }),
                             /*#__PURE__*/ jsx("button", {
+                                "data-button-add-elements": true,
                                 onClick: ()=>dispatchEventBuildWithSectionActiveTab(false),
                                 className: "gp-flex gp-h-[40px] gp-w-[136px] gp-items-center gp-font-medium gp-justify-center gp-rounded-[8px] gp-bg-[#f4f4f4] gp-text-[14px] gp-text-[#212121] hover:gp-bg-[#E2E2E2]",
                                 children: "Add elements"

package/dist/esm/libs/api/get-static-page-props-v2.js

@@ -139,7 +139,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 customCodeHeader: dataBuilder.themePageCustomCode?.header ?? null,
                 customCodeBody: dataBuilder.themePageCustomCode?.body ?? null,
                 pageHandle: dataBuilder.handle ?? null,
-                customFonts
+                customFonts,
+                interaction: dataBuilder?.interaction
             });
         } catch (err) {
             captureException(err);

package/dist/esm/pages/builder.js

@@ -1,17 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
+import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useState, useMemo, useEffect } from 'react';
 import Toolbox from '../components/builder/Toolbox.js';
 import Header from '../components/builder/Header.js';
 import Footer from '../components/builder/Footer.js';
-import CollectionGlobalProvider from './CollectionGlobalProvider.js';
 import PopupManager from '../components/builder/PopupManager.js';
 import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
 import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
 import Toolbar from '../components/builder/Toolbar.js';
 import Devices from '../components/builder/SwitchView.js';
+import Body from '../components/builder/Body.js';
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
@@ -81,16 +81,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                             isOriginTemplate: isOriginTemplate,
                                             openPageSetting: openPageSetting
                                         })),
-                                        /*#__PURE__*/ jsx("div", {
-                                            id: "storefront",
-                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
-                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
-                                                children: /*#__PURE__*/ jsx(RenderPreview, {
-                                                    uid: "ROOT"
-                                                })
-                                            }) : /*#__PURE__*/ jsx(RenderPreview, {
-                                                uid: "ROOT"
-                                            })
+                                        /*#__PURE__*/ jsx(Body, {
+                                            pageType: pageType,
+                                            isThemeSectionEditor: isThemeSectionEditor
                                         }),
                                         /*#__PURE__*/ jsx(ImageToLayout, {
                                             editorImageToLayout: editorImageToLayout || false

package/dist/esm/pages/static-v2.js

@@ -7,9 +7,11 @@ import { useTrackingView } from '../libs/hooks/use-tracking-view.js';
 import { parseHtml } from '../libs/parse-html.js';
 import Header from '../components/builder/Header.js';
 import FooterForPostPurchase from '../components/FooterForPostPurchase.js';
+import Script from 'next/script';
 
-const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview })=>{
+const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, fontStyle, elementFontStyle, customCodeHeader, shopToken, pageHandle, customFonts, isPostPurchase, shopName, productOffers, publicStoreFrontData, isPreview, interaction })=>{
     const router = useRouter();
+    const baseAssetURL = process.env.NEXT_GP_BASE_ASSET_URL || 'https://d3kbi0je7pp4lw.cloudfront.net';
     useTrackingView(shopToken, pageHandle, router.isFallback);
     if (router.isFallback) {
         return /*#__PURE__*/ jsx("div", {
@@ -79,17 +81,28 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                             isPostPurchase && /*#__PURE__*/ jsx(Header, {
                                 pageType: "POST_PURCHASE"
                             }),
+                            /*#__PURE__*/ jsx("div", {
+                                dangerouslySetInnerHTML: {
+                                    __html: `<div id="gp-interaction" style="display: none;">${JSON.stringify(interaction?.value || [])}</div>`
+                                }
+                            }),
                             /*#__PURE__*/ jsx(SectionProvider, {
                                 data: sectionData,
-                                children: builderData?.map((builder)=>/*#__PURE__*/ jsx(BuilderProvider, {
+                                children: builderData?.map((builder)=>/*#__PURE__*/ jsxs(BuilderProvider, {
                                         state: builder.data,
                                         lazy: builder.lazy,
                                         priority: builder.priority,
                                         isPostPurchase: isPostPurchase,
                                         isPreview: isPreview,
-                                        children: /*#__PURE__*/ jsx(Render, {
-                                            uid: builder.uid
-                                        })
+                                        children: [
+                                            /*#__PURE__*/ jsx(Render, {
+                                                uid: builder.uid
+                                            }),
+                                            /*#__PURE__*/ jsx(Script, {
+                                                defer: true,
+                                                src: `${baseAssetURL}/assets-v2/gp-flow-action-lip.js`
+                                            })
+                                        ]
                                     }, builder.uid))
                             }),
                             isPostPurchase && /*#__PURE__*/ jsx(FooterForPostPurchase, {

package/dist/types/index.d.ts

@@ -40,6 +40,7 @@ type PageBuilderProps = {
     customCodeBody?: string | null;
     isStorefront?: boolean;
     customFonts?: string | null;
+    interaction?: ShopType.Maybe<Pick<ShopType.PublishedPageInteraction, "id" | "value">>;
 };
 type PageBuilderPropsV2 = {
     builderData?: {

package/package.json

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

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

@@ -1,110 +0,0 @@
-'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;

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

@@ -1,106 +0,0 @@
-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 };