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

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

@@ -1 +1,256 @@
-import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as n,useState as o,useCallback as a,useEffect as i}from"react";import"zustand";import{useBuilderPreviewStore as l}from"../../contexts/BuilderPreviewContext.js";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import{usePageType as u}from"../../hooks/shop.js";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"react-transition-group";import"@gem-sdk/core";import"classnames";import"../../helpers/convert.js";function Spacing(s){let c=l(t=>t.isThemeSectionEditor),d=u(),m=n(null),p=n(null),g=n(null),v=n(!1),b=n(0),f=n(0),w=n(null),[h,y]=o(0),[E,S]=o(!1),L=n(null),C=t=>{let e=t.clientY,r=Math.ceil(e-b.current),n=f.current||0,o=n+r>=0?`${n+r}px`:"0px";return{newValue:o}},x=t=>{if(m.current&&p.current){let{newValue:e}=C(t);p.current.style.height=e,m.current.style.top=e;let r=m.current.closest("[data-toolbar-wrap]");r&&(r.style.marginBottom=e,B(e))}},T=()=>{P()},z=()=>{g.current&&clearTimeout(g.current),g.current=setTimeout(()=>{v.current=!0;let t=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!0}});window.dispatchEvent(t),document.addEventListener("mousemove",x),document.addEventListener("mouseup",T)},100)},P=()=>{g.current&&clearTimeout(g.current),v.current=!1;let t=new CustomEvent("editor:toolbar:resize-spacing",{bubbles:!0,detail:{value:!1}});if(window.dispatchEvent(t),m.current){let t=getComputedStyle(m.current),e=t.top,r=new CustomEvent("editor:toolbar:change-margin-bottom",{bubbles:!0,detail:{componentUid:s.uid,marginBottom:e}});window.dispatchEvent(r)}let e=m.current?.closest("[data-toolbar-wrap]");e&&(e.style.marginBottom=""),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",T)},j=(t,e)=>{let r=t.children.length;if(r)for(let n=0;n<r;n++){let r=t.children[n];if(r){let t=r.getAttribute(e);if(t)return r}}},A=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},k=a(()=>{let t=m.current?.closest("[data-toolbar-wrap]");if(!t)return;let e=j(t,"data-toolbar");if(!e)return;let r=e.getAttribute("data-toolbar-active");if(!r)return;let n=getComputedStyle(t),o=j(t,"data-spacing"),a=o?.querySelector("[data-spacing-margin-bottom]")||null;if(a&&p.current&&m.current){let e=n.marginBottom;if(B(e),0>parseFloat(e)&&(e="0"),p.current.style.height=e,m.current.style.top=e,a.setAttribute("data-spacing-margin-bottom-active","true"),A(t))p.current.style.left="0";else{let t=n.paddingLeft,e=`-${t}`,r=`translate(${e}, -100%)`;p.current.style.left=e,m.current.style.transform=r}}},[]),B=t=>{let e=parseFloat(t);y(e),S(!0),L.current&&clearTimeout(L.current),L.current=setTimeout(()=>{S(!1)},2e3);let r=e<28&&e>=0?e/2+16:e>28?0:16;w.current&&(w.current.style.transform=`translateY(${r}px)`)},U=usePrevious(s.advanced?.["spacing-setting"]);i(()=>{JSON.stringify(U)!==JSON.stringify(s.advanced?.["spacing-setting"])&&k()},[U,s.advanced,k]);let $=a(()=>{k()},[k]);return i(()=>(window.addEventListener("editor:toolbar:update-margin-bottom",k),window.addEventListener("editor:toolbar:update-padding-left",k),window.addEventListener("resize",$),()=>{window.removeEventListener("editor:toolbar:update-margin-bottom",k),window.removeEventListener("editor:toolbar:update-padding-left",k),window.removeEventListener("resize",$)}),[$,k]),t(e,{children:"Section"!==s.tag&&"POST_PURCHASE"!==d&&t("div",{"data-spacing":!0,"data-spacing-theme-section":c,className:"gp-absolute gp-w-full gp-bottom-0",children:r("div",{"data-spacing-margin-bottom":!0,children:[r("div",{"data-spacing-margin-bottom-bg":!0,ref:p,children:[t("div",{"data-spacing-margin-bottom-value":!0}),t("div",{"data-active":E,"data-value-number":!0,ref:w,children:h})]}),t("div",{ref:m,"data-spacing-margin-bottom-drag":!0,onMouseDown:t=>{if(m.current){let e=getComputedStyle(m.current);b.current=t.clientY,f.current=parseFloat(e.top),z()}},onMouseUp:()=>{P()},role:"presentation"})]})})})}let usePrevious=t=>{let e=n();return i(()=>{e.current=t},[t]),e.current};export{Spacing as default};
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import 'zustand';
+import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'swr';
+import 'swr/infinite';
+import { usePageType } from '../../hooks/shop.js';
+import 'classnames';
+import 'dayjs';
+import '../../helpers/convert.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+
+function Spacing(props) {
+    const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const pageType = usePageType();
+    const $bottomDrag = useRef(null);
+    const $bottomBg = useRef(null);
+    const delayMouseMove = useRef(null);
+    const isDragging = useRef(false);
+    const startY = useRef(0);
+    const marginBottom = useRef(0);
+    const $visualNumberValue = useRef(null);
+    const [marginBottomValue, setMarginBottomValue] = useState(0);
+    const [isShowVisual, setIsShowVisual] = useState(false);
+    const hideVisualNumberValue = 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 = 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']);
+    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 = useCallback(()=>{
+        updateSpacing();
+    }, [
+        updateSpacing
+    ]);
+    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__*/ jsx(Fragment, {
+        children: props.tag !== 'Section' && pageType !== 'POST_PURCHASE' && /*#__PURE__*/ jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "gp-absolute gp-w-full gp-bottom-0",
+            children: /*#__PURE__*/ jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                "data-spacing-margin-bottom-value": true
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                "data-active": isShowVisual,
+                                "data-value-number": true,
+                                ref: $visualNumberValue,
+                                children: marginBottomValue
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+const usePrevious = (value)=>{
+    const ref = useRef();
+    useEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref.current;
+};
+
+export { Spacing as default };

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

@@ -1 +1,54 @@
-let 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"};export{colorPreset};
+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'
+};
+
+export { colorPreset };

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

@@ -1 +1,121 @@
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{useRef as o,useState as i}from"react";import{ThemeSectionTooltip as a}from"./ThemeSectionTooltip.js";import"zustand";import{useShopStore as n}from"../../contexts/ShopContext.js";import"@gem-sdk/adapter-shopify";import"swr";import"swr/mutation";import"vanilla-lazyload";import"../../hooks/useCartUI.js";import"classnames";import"../../helpers/convert.js";let SHOW_TOOLTIP_TIMEOUT=600,NUMBER_OF_THEME_SECTION_CREATED_TO_SHOW_TOOLTIP=1,LIMIT_PLANS=["starter","trial","trial2022"],CreateThemeSection=({...c})=>{let l=n(e=>e.plan),s=n(e=>e.createThemeSectionCount),d=LIMIT_PLANS.includes(l??""),m=d||void 0===s||s<1,p=o(),[h,u]=i(!1),C=()=>{m&&(p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{u(!0)},600))},T=()=>{m&&(p.current&&clearTimeout(p.current),u(!1))},v=(e,t)=>{e.preventDefault(),e.stopPropagation(),t?.disabled||(d?b():w(),p.current&&clearTimeout(p.current),u(!1))},b=()=>{let e=new CustomEvent("editor:toolbar:upgrade",{bubbles:!0});window.dispatchEvent(e)},w=()=>{let e=new CustomEvent("editor:toolbar:create-theme-section",{bubbles:!0,detail:{componentUid:c.uid}});window.dispatchEvent(e)};return e(t,{children:r(a,{isLimit:d,isShow:h,isRender:m,onActions:v,onMouseEnter:C,onMouseLeave:T,children:[m&&e("div",{"data-toolbar-create-theme-section":!0,children:"You can create reusable sections"}),e("div",{"data-toolbar-active-create-theme-section-wrapper":!0,children:r("div",{"data-toolbar-active-create-theme-section":!0,onClick:e=>v(e,{disabled:d}),"aria-hidden":"true",children:[r("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[e("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"}),e("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"}),e("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"})]}),e("p",{children:"Create Theme Section"})]})})]})})};export{CreateThemeSection};
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState } from 'react';
+import { ThemeSectionTooltip } from './ThemeSectionTooltip.js';
+import 'zustand';
+import { useShopStore } from '../../contexts/ShopContext.js';
+import 'swr';
+import 'swr/infinite';
+import 'classnames';
+import 'dayjs';
+import '../../helpers/convert.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../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 = useShopStore((s)=>s.plan);
+    const createThemeSectionCount = useShopStore((s)=>s.createThemeSectionCount);
+    const limitCreateThemeSection = 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 = useRef();
+    const [isShowTooltip, setIsShowTooltip] = 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__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(ThemeSectionTooltip, {
+            isFreeLimit: isFreeLimit,
+            limitCreateThemeSection: limitCreateThemeSection,
+            isShow: isShowTooltip,
+            isRender: isRenderTooltip,
+            onActions: onActions,
+            onMouseEnter: showTooltip,
+            onMouseLeave: hideTooltip,
+            children: [
+                isRenderTooltip && /*#__PURE__*/ jsx("div", {
+                    "data-toolbar-create-theme-section": true,
+                    children: "You can create reusable sections"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    "data-toolbar-active-create-theme-section-wrapper": true,
+                    children: /*#__PURE__*/ jsxs("div", {
+                        "data-toolbar-active-create-theme-section": true,
+                        onClick: (e)=>onActions(e, {
+                                disabled: !!isLimit
+                            }),
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ jsxs("svg", {
+                                width: "16",
+                                height: "16",
+                                viewBox: "0 0 16 16",
+                                fill: "none",
+                                children: [
+                                    /*#__PURE__*/ 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__*/ 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__*/ 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__*/ jsx("p", {
+                                children: "Create Theme Section"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { CreateThemeSection };

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

@@ -1 +1,43 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";let 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:s,status:a,isThemeSection:l})=>{let n="Section"===s&&l&&("DRAFT"===a||"NEED_PUBLISHING"===a),h=getStatusMessage(a);return e(t,{children:n&&i("div",{"data-theme-section-status":!0,children:[e("div",{"data-theme-section-status-icon":!0,children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("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"})})}),h&&e("span",{"data-theme-section-status-text":!0,children:h})]})})};export{ThemeSectionStatusWrapper};
+import { jsx, Fragment, jsxs } from '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__*/ jsx(Fragment, {
+        children: isRenderThemeSectionStatus && /*#__PURE__*/ jsxs("div", {
+            "data-theme-section-status": true,
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    "data-theme-section-status-icon": true,
+                    children: /*#__PURE__*/ jsx("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 16 16",
+                        fill: "none",
+                        children: /*#__PURE__*/ 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__*/ jsx("span", {
+                    "data-theme-section-status-text": true,
+                    children: statusMessage
+                })
+            ]
+        })
+    });
+};
+
+export { ThemeSectionStatusWrapper };

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

@@ -1 +1,124 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useRef as o}from"react";import{Transition as n}from"react-transition-group";import{cls as a}from"@gem-sdk/core";let 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:c,isLimit:r,isRender:l,children:s,onMouseEnter:m,onMouseLeave:h,onActions:d})=>{let p=o(null),u=r?"Upgrade to create Theme Section":"Create Theme Section",y=()=>{window.open("https://help.gempages.net/articles/theme-section","_blank")};return e(t,{children:i("div",{className:"theme-section-tooltip-wrapper",onMouseEnter:m,onMouseLeave:h,children:[s,l&&e(n,{in:c,timeout:350,nodeRef:p,unmountOnExit:!0,children:t=>i("div",{className:"theme-section-tooltip",ref:p,style:{...defaultStyles,...transitions[t]},children:[e("div",{className:"theme-section-tooltip__image",children:e("img",{src:"https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",alt:""})}),i("div",{className:"theme-section-tooltip__body",children:[e("div",{className:"theme-section-tooltip__body-title",children:"Create once, use everywhere with Theme Section"}),e("div",{className:"theme-section-tooltip__body-desc",children:"A global section that can be used on all your GemPages & Shopify pages."})]}),i("div",{className:a("theme-section-tooltip__action",{"theme-section-tooltip__action-limit":r}),children:[e("button",{onClick:e=>d(e),children:u}),r&&e("div",{onClick:y,"aria-hidden":!0,className:"theme-section-tooltip__action-learn-more",children:"Learn more about Theme Section"})]})]})})]})})};export{ThemeSectionTooltip};
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { Transition } from 'react-transition-group';
+import { cls } from '@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 = 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__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "theme-section-tooltip-wrapper",
+            onMouseEnter: onMouseEnter,
+            onMouseLeave: onMouseLeave,
+            children: [
+                children,
+                isRender && /*#__PURE__*/ jsx(Transition, {
+                    in: isShow,
+                    timeout: TRANSITION_DURATION,
+                    nodeRef: nodeRef,
+                    unmountOnExit: true,
+                    children: (state)=>/*#__PURE__*/ jsx("div", {
+                            className: "theme-section-tooltip",
+                            ref: nodeRef,
+                            style: {
+                                ...defaultStyles,
+                                ...transitions[state]
+                            },
+                            children: limitCreateThemeSection?.isLimit && !isFreeLimit ? /*#__PURE__*/ jsxs("div", {
+                                className: "theme-section-tooltip__body theme-section-tooltip__body-limit",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "theme-section-tooltip__body-title theme-section-tooltip__body-limit__title",
+                                        children: "Upgrade plan"
+                                    }),
+                                    /*#__PURE__*/ 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__*/ jsx("button", {
+                                        onClick: (e)=>onActions(e),
+                                        children: "Upgrade plan to create more"
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "theme-section-tooltip__image",
+                                        children: /*#__PURE__*/ jsx("img", {
+                                            src: "https://ucarecdn.com/6a9f408a-aa8c-434a-890b-81067a14aceb/-/format/auto/-/preview/1920x1920/-/quality/lighter/theme-section-illustration.png",
+                                            alt: ""
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "theme-section-tooltip__body",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "theme-section-tooltip__body-title",
+                                                children: "Create once, use everywhere with Theme Section"
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "theme-section-tooltip__body-desc",
+                                                children: "A global section that can be used on all your GemPages & Shopify pages."
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: cls('theme-section-tooltip__action', {
+                                            'theme-section-tooltip__action-limit': isFreeLimit
+                                        }),
+                                        children: [
+                                            /*#__PURE__*/ jsx("button", {
+                                                onClick: (e)=>onActions(e),
+                                                children: actionBtnLabel
+                                            }),
+                                            isFreeLimit && /*#__PURE__*/ jsx("div", {
+                                                onClick: openHelpCenter,
+                                                "aria-hidden": true,
+                                                className: "theme-section-tooltip__action-learn-more",
+                                                children: "Learn more about Theme Section"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                })
+            ]
+        })
+    });
+};
+
+export { ThemeSectionTooltip };

package/dist/esm/components/toolbar/Tooltip.js

@@ -1 +1,24 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";function Tooltip({children:i,enable:r,text:l="Tooltip Text",position:a="right",width:e,...d}){return t("div",{...d,"data-toolbar-tooltip-trigger":!0,children:[i,r&&o("div",{style:{width:e,zIndex:50},"data-toolbar-tooltip":!0,"data-toolbar-tooltip-position":a,dangerouslySetInnerHTML:{__html:l}})]})}export{Tooltip as default};
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', width, ...props }) {
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        "data-toolbar-tooltip-trigger": true,
+        children: [
+            children,
+            enable && /*#__PURE__*/ jsx("div", {
+                style: {
+                    width: width,
+                    zIndex: 50
+                },
+                "data-toolbar-tooltip": true,
+                "data-toolbar-tooltip-position": position,
+                dangerouslySetInnerHTML: {
+                    __html: text
+                }
+            })
+        ]
+    });
+}
+
+export { Tooltip as default };