@gem-sdk/core 2.0.0-dev.896 → 2.0.0

package/dist/cjs/components/resize/Spacing.js

@@ -1 +1,260 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react");require("zustand");var BuilderPreviewContext=require("../../contexts/BuilderPreviewContext.js");require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation");var shop=require("../../hooks/shop.js");function Spacing(e){let t=BuilderPreviewContext.useBuilderPreviewStore(e=>e.isThemeSectionEditor),r=shop.usePageType(),n=react.useRef(null),a=react.useRef(null),i=react.useRef(null),u=react.useRef(!1),o=react.useRef(0),s=react.useRef(0),c=react.useRef(null),[l,d]=react.useState(0),[m,p]=react.useState(!1),g=react.useRef(null),v=e=>{let t=e.clientY,r=Math.ceil(t-o.current),n=s.current||0,a=n+r>=0?`${n+r}px`:"0px";return{newValue:a}},f=e=>{if(n.current&&a.current){let{newValue:t}=v(e);a.current.style.height=t,n.current.style.top=t;let r=n.current.closest("[data-toolbar-wrap]");r&&(r.style.marginBottom=t,y(t))}},b=()=>{h()},w=()=>{i.current&&clearTimeout(i.current),i.current=setTimeout(()=>{u.current=!0;let e=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!0}});window.dispatchEvent(e),document.addEventListener("mousemove",f),document.addEventListener("mouseup",b)},100)},h=()=>{i.current&&clearTimeout(i.current),u.current=!1;let t=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!1}});if(window.dispatchEvent(t),n.current){let t=getComputedStyle(n.current),r=t.top,a=new CustomEvent("editor:toolbar:change-margin-bottom",{bubbles:!0,detail:{componentUid:e.uid,marginBottom:r}});window.dispatchEvent(a)}let r=n.current?.closest("[data-toolbar-wrap]");r&&(r.style.marginBottom=""),document.removeEventListener("mousemove",f),document.removeEventListener("mouseup",b)},x=(e,t)=>{let r=e.children.length;if(r)for(let n=0;n<r;n++){let r=e.children[n];if(r){let e=r.getAttribute(t);if(e)return r}}},j=e=>{let t=e.getAttribute("data-component-tag");return"Row"===t||"Product"===t},E=react.useCallback(()=>{let e=n.current?.closest("[data-toolbar-wrap]");if(!e)return;let t=x(e,"data-toolbar");if(!t)return;let r=t.getAttribute("data-toolbar-active");if(!r)return;let i=getComputedStyle(e),u=x(e,"data-spacing"),o=u?.querySelector("[data-spacing-margin-bottom]")||null;if(o&&a.current&&n.current){let t=i.marginBottom;if(y(t),0>parseFloat(t)&&(t="0"),a.current.style.height=t,n.current.style.top=t,o.setAttribute("data-spacing-margin-bottom-active","true"),j(e))a.current.style.left="0";else{let e=i.paddingLeft,t=`-${e}`,r=`translate(${t}, -100%)`;a.current.style.left=t,n.current.style.transform=r}}},[]),y=e=>{let t=parseFloat(e);d(t),p(!0),g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{p(!1)},2e3);let r=t<28&&t>=0?t/2+16:t>28?0:16;c.current&&(c.current.style.transform=`translateY(${r}px)`)},R=usePrevious(e.advanced?.["spacing-setting"]);react.useEffect(()=>{JSON.stringify(R)!==JSON.stringify(e.advanced?.["spacing-setting"])&&E()},[R,e.advanced,E]);let q=react.useCallback(()=>{E()},[E]);return react.useEffect(()=>(window.addEventListener("editor:toolbar:update-margin-bottom",E),window.addEventListener("editor:toolbar:update-padding-left",E),window.addEventListener("resize",q),()=>{window.removeEventListener("editor:toolbar:update-margin-bottom",E),window.removeEventListener("editor:toolbar:update-padding-left",E),window.removeEventListener("resize",q)}),[q,E]),jsxRuntime.jsx(jsxRuntime.Fragment,{children:"Section"!==e.tag&&"POST_PURCHASE"!==r&&jsxRuntime.jsx("div",{"data-spacing":!0,"data-spacing-theme-section":t,className:"gp-absolute gp-w-full gp-bottom-0",children:jsxRuntime.jsxs("div",{"data-spacing-margin-bottom":!0,children:[jsxRuntime.jsxs("div",{"data-spacing-margin-bottom-bg":!0,ref:a,children:[jsxRuntime.jsx("div",{"data-spacing-margin-bottom-value":!0}),jsxRuntime.jsx("div",{"data-active":m,"data-value-number":!0,ref:c,children:l})]}),jsxRuntime.jsx("div",{ref:n,"data-spacing-margin-bottom-drag":!0,onMouseDown:e=>{if(n.current){let t=getComputedStyle(n.current);o.current=e.clientY,s.current=parseFloat(t.top),w()}},onMouseUp:()=>{h()},role:"presentation"})]})})})}require("vanilla-lazyload"),require("../../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core"),require("classnames"),require("../../helpers/convert.js");const usePrevious=e=>{let t=react.useRef();return react.useEffect(()=>{t.current=e},[e]),t.current};exports.default=Spacing;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('swr');
+require('swr/infinite');
+var shop = require('../../hooks/shop.js');
+require('classnames');
+require('dayjs');
+require('../../helpers/convert.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+
+function Spacing(props) {
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const pageType = shop.usePageType();
+    const $bottomDrag = react.useRef(null);
+    const $bottomBg = react.useRef(null);
+    const delayMouseMove = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const startY = react.useRef(0);
+    const marginBottom = react.useRef(0);
+    const $visualNumberValue = react.useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = react.useState(0);
+    const [isShowVisual, setIsShowVisual] = react.useState(false);
+    const hideVisualNumberValue = react.useRef(null);
+    const getNewValueMargin = (event)=>{
+        const top = event.clientY;
+        const diffY = Math.ceil(top - startY.current);
+        const currentValue = marginBottom.current || 0;
+        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
+        return {
+            newValue
+        };
+    };
+    const onMouseMoveDocument = (event)=>{
+        if ($bottomDrag.current && $bottomBg.current) {
+            // $bottomDrag.current.
+            const { newValue } = getNewValueMargin(event);
+            $bottomBg.current.style.height = newValue;
+            $bottomDrag.current.style.top = newValue;
+            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
+            if ($component) {
+                $component.style.marginBottom = newValue;
+                onShowMarginBottomNumber(newValue);
+            }
+        }
+    };
+    const onMouseUpDocument = ()=>{
+        endDrag();
+    };
+    const startDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        delayMouseMove.current = setTimeout(()=>{
+            isDragging.current = true;
+            const event = new CustomEvent('editor:toolbar:resize-spacing', {
+                bubbles: true,
+                detail: {
+                    value: true
+                }
+            });
+            window.dispatchEvent(event);
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        const event = new CustomEvent('editor:toolbar:resize-spacing', {
+            bubbles: true,
+            detail: {
+                value: false
+            }
+        });
+        window.dispatchEvent(event);
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            const marginBottom = style.top;
+            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    marginBottom
+                }
+            });
+            window.dispatchEvent(event);
+        }
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            $component.style.marginBottom = '';
+        }
+        document.removeEventListener('mousemove', onMouseMoveDocument);
+        document.removeEventListener('mouseup', onMouseUpDocument);
+    };
+    const onMouseDown = (event)=>{
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+    };
+    const onMouseUp = ()=>{
+        endDrag();
+    };
+    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;
+                    }
+                }
+            }
+        }
+    };
+    const isLayoutElement = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Row' || tag === 'Product';
+    };
+    const updateSpacing = react.useCallback((isShowVisualize)=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if (!$component) return;
+        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        if (!toolbar) return;
+        const isActive = toolbar.getAttribute('data-toolbar-active');
+        if (!isActive) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            if ($bottomBg.current && $bottomDrag.current) {
+                let value = style.marginBottom;
+                isShowVisualize && onShowMarginBottomNumber(value);
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
+                $bottomBg.current.style.height = value;
+                $bottomDrag.current.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bottomBg.current.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bottomBg.current.style.left = leftValue;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    const onShowMarginBottomNumber = (value)=>{
+        const parsedValue = parseFloat(value);
+        setMarginBottomValue(parsedValue);
+        setIsShowVisual(true);
+        if (hideVisualNumberValue.current) clearTimeout(hideVisualNumberValue.current);
+        hideVisualNumberValue.current = setTimeout(()=>{
+            setIsShowVisual(false);
+        }, 2000);
+        // break point 28px
+        const topPosition = parsedValue <= 28 && parsedValue >= 0 ? parsedValue / 2 + 16 : parsedValue > 28 ? 0 : 16;
+        if ($visualNumberValue.current) {
+            $visualNumberValue.current.style.transform = `translateY(${topPosition}px)`;
+        }
+    };
+    const previousAdvanced = usePrevious(props.advanced?.['spacing-setting']);
+    react.useEffect(()=>{
+        // validate margin bottom setting changed
+        const isShowVisualize = verifyMarginBottomChanged(previousAdvanced, props.advanced?.['spacing-setting']);
+        updateSpacing(isShowVisualize);
+    }, [
+        previousAdvanced,
+        props.advanced,
+        updateSpacing
+    ]);
+    const verifyMarginBottomChanged = (prevValue, newValue)=>{
+        const listDevices = [
+            'desktop',
+            'tablet',
+            'mobile'
+        ];
+        return listDevices.some((device)=>JSON.stringify(prevValue?.[device]?.margin?.bottom) !== JSON.stringify(newValue?.[device]?.margin?.bottom));
+    };
+    const onWindowResize = react.useCallback(()=>{
+        updateSpacing();
+    }, [
+        updateSpacing
+    ]);
+    react.useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
+        window.addEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
+        window.addEventListener('resize', onWindowResize);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', ()=>updateSpacing);
+            window.removeEventListener('editor:toolbar:update-padding-left', ()=>updateSpacing);
+            window.removeEventListener('resize', onWindowResize);
+        };
+    }, [
+        onWindowResize,
+        updateSpacing
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: props.tag !== 'Section' && pageType !== 'POST_PURCHASE' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "gp-absolute gp-w-full gp-bottom-0",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+const usePrevious = (value)=>{
+    const ref = react.useRef();
+    react.useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+
+exports.default = Spacing;

package/dist/cjs/components/src/product/helpers/variant-presets.js

@@ -1 +1,56 @@
-"use strict";const colorPreset={black:"#000000",white:"#FFFFFF",gray:"#808080",red:"#FF0000",blue:"#0000FF",green:"#008000",yellow:"#FFFF00",orange:"#FFA500",pink:"#FFC0CB",purple:"#800080",brown:"#A52A2A",cyan:"#00FFFF",magenta:"#FF00FF",teal:"#008080",navy:"#000080",maroon:"#800000",gold:"#FFD700",silver:"#C0C0C0",beige:"#F5F5DC",ivory:"#FFFFF0",lavender:"#E6E6FA",indigo:"#4B0082",coral:"#FF7F50",mint:"#98FF98","sky blue":"#87CEEB",salmon:"#FA8072",olive:"#808000",lilac:"#C8A2C8",peach:"#FFDAB9",turquoise:"#40E0D0",ruby:"#E0115F",bronze:"#CD7F32",slate:"#708090",charcoal:"#36454F",sand:"#C2B280",mauve:"#E0B0FF",tangerine:"#FF4500","mint green":"#00FF99","forest green":"#228B22","ruby red":"#9B111E",marigold:"#FFB928",eggplant:"#990066","coral pink":"#F88379",mustard:"#FFDB58","sky gray":"#B0C4DE","dusty rose":"#FF9BAE","olive green":"#556B2F",coffee:"#6F4E37","lilac gray":"#C8A2C8","steel blue":"#4682B4"};exports.colorPreset=colorPreset;
+'use strict';
+
+const colorPreset = {
+    black: '#000000',
+    white: '#FFFFFF',
+    gray: '#808080',
+    red: '#FF0000',
+    blue: '#0000FF',
+    green: '#008000',
+    yellow: '#FFFF00',
+    orange: '#FFA500',
+    pink: '#FFC0CB',
+    purple: '#800080',
+    brown: '#A52A2A',
+    cyan: '#00FFFF',
+    magenta: '#FF00FF',
+    teal: '#008080',
+    navy: '#000080',
+    maroon: '#800000',
+    gold: '#FFD700',
+    silver: '#C0C0C0',
+    beige: '#F5F5DC',
+    ivory: '#FFFFF0',
+    lavender: '#E6E6FA',
+    indigo: '#4B0082',
+    coral: '#FF7F50',
+    mint: '#98FF98',
+    'sky blue': '#87CEEB',
+    salmon: '#FA8072',
+    olive: '#808000',
+    lilac: '#C8A2C8',
+    peach: '#FFDAB9',
+    turquoise: '#40E0D0',
+    ruby: '#E0115F',
+    bronze: '#CD7F32',
+    slate: '#708090',
+    charcoal: '#36454F',
+    sand: '#C2B280',
+    mauve: '#E0B0FF',
+    tangerine: '#FF4500',
+    'mint green': '#00FF99',
+    'forest green': '#228B22',
+    'ruby red': '#9B111E',
+    marigold: '#FFB928',
+    eggplant: '#990066',
+    'coral pink': '#F88379',
+    mustard: '#FFDB58',
+    'sky gray': '#B0C4DE',
+    'dusty rose': '#FF9BAE',
+    'olive green': '#556B2F',
+    coffee: '#6F4E37',
+    'lilac gray': '#C8A2C8',
+    'steel blue': '#4682B4'
+};
+
+exports.colorPreset = colorPreset;

package/dist/cjs/components/theme-section/CreateThemeSection.js

@@ -1 +1,123 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),ThemeSectionTooltip=require("./ThemeSectionTooltip.js");require("zustand");var ShopContext=require("../../contexts/ShopContext.js");require("@gem-sdk/adapter-shopify"),require("swr"),require("swr/mutation"),require("vanilla-lazyload"),require("../../hooks/useCartUI.js"),require("classnames"),require("../../helpers/convert.js");const SHOW_TOOLTIP_TIMEOUT=600,NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP=1,LIMIT_PLANS=["starter","trial","trial2022"],CreateThemeSection=({...e})=>{let t=ShopContext.useShopStore(e=>e.plan),r=ShopContext.useShopStore(e=>e.createThemeSectionCount),i=LIMIT_PLANS.includes(t??""),o=i||void 0===r||r<1,n=react.useRef(),[s,a]=react.useState(!1),u=()=>{o&&(n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{a(!0)},600))},c=()=>{o&&(n.current&&clearTimeout(n.current),a(!1))},l=(e,t)=>{e.preventDefault(),e.stopPropagation(),t?.disabled||(i?d():h(),n.current&&clearTimeout(n.current),a(!1))},d=()=>{let e=new CustomEvent("editor:toolbar:upgrade",{bubbles:!0});window.dispatchEvent(e)},h=()=>{let t=new CustomEvent("editor:toolbar:create-theme-section",{bubbles:!0,detail:{componentUid:e.uid}});window.dispatchEvent(t)};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(ThemeSectionTooltip.ThemeSectionTooltip,{isLimit:i,isShow:s,isRender:o,onActions:l,onMouseEnter:u,onMouseLeave:c,children:[o&&jsxRuntime.jsx("div",{"data-toolbar-create-theme-section":!0,children:"You can create reusable sections"}),jsxRuntime.jsx("div",{"data-toolbar-active-create-theme-section-wrapper":!0,children:jsxRuntime.jsxs("div",{"data-toolbar-active-create-theme-section":!0,onClick:e=>l(e,{disabled:i}),"aria-hidden":"true",children:[jsxRuntime.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[jsxRuntime.jsx("path",{d:"M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",fill:"#F9F9F9"}),jsxRuntime.jsx("path",{d:"M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",fill:"#F9F9F9"}),jsxRuntime.jsx("path",{d:"M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",fill:"#F9F9F9"})]}),jsxRuntime.jsx("p",{children:"Create Theme Section"})]})})]})})};exports.CreateThemeSection=CreateThemeSection;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ThemeSectionTooltip = require('./ThemeSectionTooltip.js');
+require('zustand');
+var ShopContext = require('../../contexts/ShopContext.js');
+require('swr');
+require('swr/infinite');
+require('classnames');
+require('dayjs');
+require('../../helpers/convert.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+
+const SHOW_TOOLTIP_TIMEOUT = 600;
+const NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP = 1;
+const LIMIT_PLANS = [
+    'starter',
+    'trial',
+    'trial2022'
+];
+const CreateThemeSection = ({ ...props })=>{
+    const shopPlan = ShopContext.useShopStore((s)=>s.plan);
+    const createThemeSectionCount = ShopContext.useShopStore((s)=>s.createThemeSectionCount);
+    const limitCreateThemeSection = ShopContext.useShopStore((s)=>s.limitCreateThemeSection);
+    const isFreeLimit = LIMIT_PLANS.includes(shopPlan ?? '');
+    const isLimit = isFreeLimit || limitCreateThemeSection?.isLimit;
+    const isRenderTooltip = isLimit || createThemeSectionCount === undefined || createThemeSectionCount < NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP;
+    const timeoutRef = react.useRef();
+    const [isShowTooltip, setIsShowTooltip] = react.useState(false);
+    const showTooltip = ()=>{
+        if (!isRenderTooltip) return;
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            setIsShowTooltip(true);
+        }, SHOW_TOOLTIP_TIMEOUT);
+    };
+    const hideTooltip = ()=>{
+        if (!isRenderTooltip) return;
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setIsShowTooltip(false);
+    };
+    const onActions = (e, options)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        if (options?.disabled) return;
+        isLimit ? onUpgrade() : onCreate();
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        setIsShowTooltip(false);
+    };
+    const onUpgrade = ()=>{
+        const eventUpgrade = new CustomEvent('editor:toolbar:upgrade', {
+            bubbles: true
+        });
+        window.dispatchEvent(eventUpgrade);
+    };
+    const onCreate = ()=>{
+        const eventCreate = new CustomEvent('editor:toolbar:create-theme-section', {
+            bubbles: true,
+            detail: {
+                componentUid: props.uid
+            }
+        });
+        window.dispatchEvent(eventCreate);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(ThemeSectionTooltip.ThemeSectionTooltip, {
+            isFreeLimit: isFreeLimit,
+            limitCreateThemeSection: limitCreateThemeSection,
+            isShow: isShowTooltip,
+            isRender: isRenderTooltip,
+            onActions: onActions,
+            onMouseEnter: showTooltip,
+            onMouseLeave: hideTooltip,
+            children: [
+                isRenderTooltip && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "data-toolbar-create-theme-section": true,
+                    children: "You can create reusable sections"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "data-toolbar-active-create-theme-section-wrapper": true,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        "data-toolbar-active-create-theme-section": true,
+                        onClick: (e)=>onActions(e, {
+                                disabled: !!isLimit
+                            }),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 16 16",
+                                fill: "none",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        d: "M1 2C1 1.44772 1.44772 1 2 1H6C6.55228 1 7 1.44772 7 2V6C7 6.55228 6.55228 7 6 7H2C1.44772 7 1 6.55228 1 6V2Z",
+                                        fill: "#F9F9F9"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        d: "M9 10C9 9.44772 9.44772 9 10 9H14C14.5523 9 15 9.44772 15 10V14C15 14.5523 14.5523 15 14 15H10C9.44772 15 9 14.5523 9 14V10Z",
+                                        fill: "#F9F9F9"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        d: "M2 9C1.44772 9 1 9.44772 1 10V14C1 14.5523 1.44772 15 2 15H6C6.55228 15 7 14.5523 7 14V10C7 9.44772 6.55228 9 6 9H2Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                children: "Create Theme Section"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.CreateThemeSection = CreateThemeSection;

package/dist/cjs/components/theme-section/ThemeSectionStatus.js

@@ -1 +1,45 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime");const getStatusMessage=e=>{switch(e){case"DRAFT":return"This Theme Section is Draft. Publish page will also publish Theme Section.";case"NEED_PUBLISHING":return"Need to republish. Go to global edit and publish this section"}},ThemeSectionStatusWrapper=({tag:e,status:t,isThemeSection:s})=>{let i="Section"===e&&s&&("DRAFT"===t||"NEED_PUBLISHING"===t),n=getStatusMessage(t);return jsxRuntime.jsx(jsxRuntime.Fragment,{children:i&&jsxRuntime.jsxs("div",{"data-theme-section-status":!0,children:[jsxRuntime.jsx("div",{"data-theme-section-status-icon":!0,children:jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",fill:"#9144DA"})})}),n&&jsxRuntime.jsx("span",{"data-theme-section-status-text":!0,children:n})]})})};exports.ThemeSectionStatusWrapper=ThemeSectionStatusWrapper;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const getStatusMessage = (status)=>{
+    switch(status){
+        case 'DRAFT':
+            return 'This Theme Section is Draft. Publish page will also publish Theme Section.';
+        case 'NEED_PUBLISHING':
+            return 'Need to republish. Go to global edit and publish this section';
+    }
+};
+const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
+    const isRenderThemeSectionStatus = tag === 'Section' && isThemeSection && (status === 'DRAFT' || status === 'NEED_PUBLISHING');
+    const statusMessage = getStatusMessage(status);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: isRenderThemeSectionStatus && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            "data-theme-section-status": true,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    "data-theme-section-status-icon": true,
+                    children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 16 16",
+                        fill: "none",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            fillRule: "evenodd",
+                            clipRule: "evenodd",
+                            d: "M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM8.4668 4.61597C8.4668 4.89211 8.24294 5.11597 7.9668 5.11597C7.69065 5.11597 7.4668 4.89211 7.4668 4.61597C7.4668 4.33982 7.69065 4.11597 7.9668 4.11597C8.24294 4.11597 8.4668 4.33982 8.4668 4.61597ZM6.91309 5.48633C6.63694 5.48633 6.41309 5.71019 6.41309 5.98633C6.41309 6.26247 6.63694 6.48633 6.91309 6.48633H7.56006V10.3839C7.56006 10.9362 8.00777 11.3839 8.56006 11.3839H9.57144C9.84758 11.3839 10.0714 11.1601 10.0714 10.8839C10.0714 10.6078 9.84758 10.3839 9.57144 10.3839H8.56006V6.48633C8.56006 5.93404 8.11234 5.48633 7.56006 5.48633H6.91309Z",
+                            fill: "#9144DA"
+                        })
+                    })
+                }),
+                statusMessage && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    "data-theme-section-status-text": true,
+                    children: statusMessage
+                })
+            ]
+        })
+    });
+};
+
+exports.ThemeSectionStatusWrapper = ThemeSectionStatusWrapper;

package/dist/cjs/components/theme-section/ThemeSectionTooltip.js

@@ -1 +1,126 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactTransitionGroup=require("react-transition-group"),core=require("@gem-sdk/core");const TRANSITION_DURATION=350,defaultStyles={transition:"opacity 350ms ease-out",opacity:0},transitions={entering:{opacity:1},entered:{opacity:1},exiting:{opacity:0},exited:{opacity:0},unmounted:{opacity:0}},ThemeSectionTooltip=({isShow:e,isLimit:t,isRender:i,children:o,onMouseEnter:n,onMouseLeave:s,onActions:a})=>{let c=react.useRef(null),r=t?"Upgrade to create Theme Section":"Create Theme Section",l=()=>{window.open("https://help.gempages.net/articles/theme-section","_blank")};return jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs("div",{className:"theme-section-tooltip-wrapper",onMouseEnter:n,onMouseLeave:s,children:[o,i&&jsxRuntime.jsx(reactTransitionGroup.Transition,{in:e,timeout:350,nodeRef:c,unmountOnExit:!0,children:e=>jsxRuntime.jsxs("div",{className:"theme-section-tooltip",ref:c,style:{...defaultStyles,...transitions[e]},children:[jsxRuntime.jsx("div",{className:"theme-section-tooltip__image",children:jsxRuntime.jsx("img",{src:"https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",alt:""})}),jsxRuntime.jsxs("div",{className:"theme-section-tooltip__body",children:[jsxRuntime.jsx("div",{className:"theme-section-tooltip__body-title",children:"Create once, use everywhere with Theme Section"}),jsxRuntime.jsx("div",{className:"theme-section-tooltip__body-desc",children:"A global section that can be used on all your GemPages & Shopify pages."})]}),jsxRuntime.jsxs("div",{className:core.cls("theme-section-tooltip__action",{"theme-section-tooltip__action-limit":t}),children:[jsxRuntime.jsx("button",{onClick:e=>a(e),children:r}),t&&jsxRuntime.jsx("div",{onClick:l,"aria-hidden":!0,className:"theme-section-tooltip__action-learn-more",children:"Learn more about Theme Section"})]})]})})]})})};exports.ThemeSectionTooltip=ThemeSectionTooltip;
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactTransitionGroup = require('react-transition-group');
+var core = require('@gem-sdk/core');
+
+const TRANSITION_DURATION = 350;
+const defaultStyles = {
+    transition: `opacity ${TRANSITION_DURATION}ms ease-out`,
+    opacity: 0
+};
+const transitions = {
+    entering: {
+        opacity: 1
+    },
+    entered: {
+        opacity: 1
+    },
+    exiting: {
+        opacity: 0
+    },
+    exited: {
+        opacity: 0
+    },
+    unmounted: {
+        opacity: 0
+    }
+};
+const ThemeSectionTooltip = ({ isShow, isFreeLimit, isRender, children, limitCreateThemeSection, onMouseEnter, onMouseLeave, onActions })=>{
+    const nodeRef = react.useRef(null);
+    const actionBtnLabel = isFreeLimit ? 'Upgrade to create Theme Section' : 'Create Theme Section';
+    const openHelpCenter = ()=>{
+        const url = 'https://help.gempages.net/articles/theme-section';
+        window.open(url, '_blank');
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "theme-section-tooltip-wrapper",
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            children: [
+                children,
+                isRender && /*#__PURE__*/ jsxRuntime.jsx(reactTransitionGroup.Transition, {
+                    in: isShow,
+                    timeout: TRANSITION_DURATION,
+                    nodeRef: nodeRef,
+                    unmountOnExit: true,
+                    children: (state)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "theme-section-tooltip",
+                            ref: nodeRef,
+                            style: {
+                                ...defaultStyles,
+                                ...transitions[state]
+                            },
+                            children: limitCreateThemeSection?.isLimit && !isFreeLimit ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "theme-section-tooltip__body theme-section-tooltip__body-limit",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "theme-section-tooltip__body-title theme-section-tooltip__body-limit__title",
+                                        children: "Upgrade plan"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                        className: "theme-section-tooltip__body-desc theme-section-tooltip__body-limit__desc",
+                                        children: [
+                                            "You’ve reached the maximum number of theme sections on your plan (",
+                                            limitCreateThemeSection.total,
+                                            "/",
+                                            limitCreateThemeSection.limit,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                        onClick: (e)=>onActions(e),
+                                        children: "Upgrade plan to create more"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "theme-section-tooltip__image",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx("img", {
+                                            src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
+                                            alt: ""
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                        className: "theme-section-tooltip__body",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "theme-section-tooltip__body-title",
+                                                children: "Create once, use everywhere with Theme Section"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "theme-section-tooltip__body-desc",
+                                                children: "A global section that can be used on all your GemPages & Shopify pages."
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                        className: core.cls('theme-section-tooltip__action', {
+                                            'theme-section-tooltip__action-limit': isFreeLimit
+                                        }),
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                onClick: (e)=>onActions(e),
+                                                children: actionBtnLabel
+                                            }),
+                                            isFreeLimit && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                onClick: openHelpCenter,
+                                                "aria-hidden": true,
+                                                className: "theme-section-tooltip__action-learn-more",
+                                                children: "Learn more about Theme Section"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                })
+            ]
+        })
+    });
+};
+
+exports.ThemeSectionTooltip = ThemeSectionTooltip;