@gem-sdk/core 1.24.4 → 1.25.0

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

@@ -0,0 +1,132 @@
+'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('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('../../helpers/convert.js');
+
+function Spacing(props) {
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    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 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;
+            }
+        }
+    };
+    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();
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            "data-spacing-margin-bottom-value": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+
+exports.default = Spacing;

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

@@ -0,0 +1,117 @@
+'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('@gem-sdk/adapter-shopify');
+require('swr');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+require('../../helpers/convert.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 isLimit = LIMIT_PLANS.includes(shopPlan ?? '');
+    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, {
+            isLimit: isLimit,
+            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

@@ -0,0 +1,36 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const ThemeSectionStatus = ({ ...props })=>{
+    const isRenderThemeSectionStatus = props.tag === 'Section' && props?.isThemeSection && props?.needPublishing;
+    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"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    "data-theme-section-status-text": true,
+                    children: "Need to republish. Go to global edit and publish this section"
+                })
+            ]
+        })
+    });
+};
+
+exports.ThemeSectionStatus = ThemeSectionStatus;

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

@@ -0,0 +1,102 @@
+'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, isLimit, isRender, children, onMouseEnter, onMouseLeave, onActions })=>{
+    const nodeRef = react.useRef(null);
+    const actionBtnLabel = isLimit ? '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.jsxs("div", {
+                            className: "theme-section-tooltip",
+                            ref: nodeRef,
+                            style: {
+                                ...defaultStyles,
+                                ...transitions[state]
+                            },
+                            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': isLimit
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            onClick: (e)=>onActions(e),
+                                            children: actionBtnLabel
+                                        }),
+                                        isLimit && /*#__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;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ...props,
+        "data-toolbar-tooltip-trigger": true,
+        children: [
+            children,
+            enable && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                "data-toolbar-tooltip": true,
+                "data-toolbar-tooltip-position": position,
+                children: text
+            })
+        ]
+    });
+}
+
+exports.default = Tooltip;

package/dist/cjs/contexts/BuilderPreviewContext.js

@@ -28,9 +28,12 @@ const root = {
     label: 'Root',
     childrens: []
 };
-const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
+const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>zustand.createStore((set, get)=>({
             state: args,
             loaded: false,
+            isThemeSectionEditor: !!isThemeSectionEditor,
+            dynamicProduct: null,
+            dynamicCollection: null,
             addItem: (args)=>{
                 const { position, data } = args;
                 const state = get().state;
@@ -390,14 +393,43 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
                         ROOT: cloneDeep.cloneDeep(ROOT)
                     }
                 });
+            },
+            getParents: (id, limit)=>{
+                const state = get().state;
+                const parents = [];
+                let index = 0;
+                let currentId = id;
+                // eslint-disable-next-line no-constant-condition
+                while(true){
+                    if (limit && index >= limit) break;
+                    const parent = Object.entries(state).find(([, value])=>value.type !== 'section' && value.childrens?.includes(currentId));
+                    if (!parent) break;
+                    const [, parentItem] = parent;
+                    if (!parentItem) break;
+                    parents.push(parentItem);
+                    currentId = parentItem.uid;
+                    index++;
+                }
+                return parents;
+            },
+            setDynamicProduct: (data)=>{
+                set({
+                    dynamicProduct: data
+                });
+            },
+            setDynamicCollection: (data)=>{
+                set({
+                    dynamicCollection: data
+                });
             }
         }));
-const BuilderPreviewProvider = ({ children, state, lazy, ...passProps })=>{
+const BuilderPreviewProvider = ({ children, state, isThemeSectionEditor, lazy, ...passProps })=>{
     const Component = lazy ? react.Suspense : react.Fragment;
     const value = react.useMemo(()=>{
-        return createBuilderPreviewProvider(state);
+        return createBuilderPreviewProvider(state, isThemeSectionEditor);
     }, [
-        state
+        state,
+        isThemeSectionEditor
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(Component, {
         children: /*#__PURE__*/ jsxRuntime.jsx(BuilderPreviewContext.Provider, {

package/dist/cjs/contexts/ShopContext.js

@@ -37,6 +37,16 @@ const createShopStoreProvider = (data)=>zustand.createStore((set)=>({
                     storefrontUrl: url,
                     storefrontToken: token
                 });
+            },
+            changeCreateThemeSectionCount: (count)=>{
+                set({
+                    createThemeSectionCount: count
+                });
+            },
+            changeShopPlan: (plan)=>{
+                set({
+                    plan
+                });
             }
         }));
 const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps })=>{

package/dist/cjs/helpers/filter-toolbar-preview.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
+
+const filterToolbarPreview = (children, keep = false)=>{
+    const arrChild = react.Children.toArray(children);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview.ComponentToolbarPreview : child?.type == ComponentToolbarPreview.ComponentToolbarPreview);
+};
+
+exports.default = filterToolbarPreview;
+exports.filterToolbarPreview = filterToolbarPreview;

package/dist/cjs/helpers/is-empty-children.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
+var ComponentToolbarPreview = require('../components/ComponentToolbarPreview.js');
 
 const isEmptyChildren = (children)=>{
-    return react.Children.count(children) < 1 || !children;
+    let arrChild = react.Children.toArray(children);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview.ComponentToolbarPreview);
+    return react.Children.count(arrChild) < 1 || !children;
 };
 
 exports.default = isEmptyChildren;

package/dist/cjs/helpers/make-style.js

@@ -75,6 +75,13 @@ const makeWidth = (widthValue, fullWidthValue)=>{
         mobile: getVal('mobile', widthValue, fullWidthValue)
     };
 };
+const makeGlobalSizeWidthResponsive = (globalSize)=>{
+    return {
+        '--w': globalSize?.desktop?.width,
+        '--w-tablet': globalSize?.tablet?.width,
+        '--w-mobile': globalSize?.mobile?.width
+    };
+};
 const makeHeight = (heighValue, autoHeight)=>{
     const getVal = (deviceValue, heighValue, autoHeight)=>{
         const heightVal = heighValue?.[deviceValue];
@@ -128,6 +135,7 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
 };
 
 exports.makeAspectRatio = makeAspectRatio;
+exports.makeGlobalSizeWidthResponsive = makeGlobalSizeWidthResponsive;
 exports.makeHeight = makeHeight;
 exports.makeLineClamp = makeLineClamp;
 exports.makeStyle = makeStyle;

package/dist/cjs/helpers/size.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var makeStyle = require('./make-style.js');
 var constant = require('./constant.js');
 
 function getCustomSizeCSSByDevice(size, device) {
@@ -29,7 +30,60 @@ const composeSizeCss = (spacing)=>{
   ${sizeVerti ? `padding-top: ${sizeVerti}; padding-bottom: ${sizeVerti};` : undefined}
   `;
 };
+const makeGlobalSize = (globalSize)=>{
+    return {
+        width: makeStyleWithDefault('w', getWidthHeightGlobalSize('width', globalSize), {
+            desktop: '--g-ct-w',
+            tablet: '--g-ct-w',
+            mobile: '--g-ct-w'
+        }),
+        height: makeStyle.makeStyleResponsive('h', getWidthHeightGlobalSize('height', globalSize)),
+        padding: getPaddingGlobalSize(globalSize)
+    };
+};
+const makeStyleWithDefault = (name, value, defaultVal)=>{
+    return {
+        [`--${name}`]: value?.desktop === 'default' ? `var(${defaultVal?.desktop})` : value?.desktop,
+        [`--${name}-tablet`]: value?.tablet === 'default' ? `var(${defaultVal?.tablet})` : value?.tablet,
+        [`--${name}-mobile`]: value?.mobile === 'default' ? `var(${defaultVal?.mobile})` : value?.mobile
+    };
+};
+const getWidthHeightGlobalSize = (type, globalSize)=>{
+    if (!globalSize) return {};
+    const data = {
+        desktop: globalSize?.desktop?.[type],
+        tablet: globalSize?.tablet?.[type],
+        mobile: globalSize?.mobile?.[type]
+    };
+    if (data.desktop === undefined) {
+        data.desktop = 'auto';
+    }
+    if (data.tablet === undefined) {
+        data.tablet = data.desktop;
+    }
+    if (data.mobile === undefined) {
+        data.mobile = data.tablet;
+    }
+    return data;
+};
+function getCustomPaddingSizeCSSByDevice(globalSize, device) {
+    if (!globalSize || !device) return {};
+    const suffix = constant.devicesMapping[device] ?? '';
+    return {
+        [`--pl${suffix}`]: globalSize?.[device]?.padding?.left,
+        [`--pr${suffix}`]: globalSize?.[device]?.padding?.right,
+        [`--pt${suffix}`]: globalSize?.[device]?.padding?.top,
+        [`--pb${suffix}`]: globalSize?.[device]?.padding?.bottom
+    };
+}
+const getPaddingGlobalSize = (globalSize)=>{
+    return Object.assign({}, getCustomPaddingSizeCSSByDevice(globalSize, 'desktop'), getCustomPaddingSizeCSSByDevice(globalSize, 'tablet'), getCustomPaddingSizeCSSByDevice(globalSize, 'mobile'));
+};
 
 exports.composeSize = composeSize;
 exports.composeSizeCss = composeSizeCss;
 exports.genSizeClass = genSizeClass;
+exports.getPaddingGlobalSize = getPaddingGlobalSize;
+exports.getWidthHeightGlobalSize = getWidthHeightGlobalSize;
+exports.makeGlobalSize = makeGlobalSize;
+exports.makeStyleWithDefault = makeStyleWithDefault;

package/dist/cjs/helpers/typography.js

@@ -18,20 +18,21 @@ const composeTypographyCss = (typography)=>{
   ${lineHeight ? `line-height: ${lineHeight};` : ''}
   `;
 };
-const composeTypographyV2Css = (typography)=>{
+const composeTypographyV2Css = (typography, isImportant)=>{
     const typographyCustom = typography?.custom;
     const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
     const typographyAttrs = typography?.attrs;
     const { bold, italic, underline, transform } = typographyAttrs ?? {};
+    const composeImportant = isImportant ? '!important' : '';
     return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
-  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop};` : ''}
-  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight};` : ''}
-  ${italic ? `font-style: italic;` : ''}
-  ${underline ? `text-decoration-line: underline;` : ''}
-  ${transform ? `text-transform: ${transform};` : ''}
+  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
+  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
+  ${bold ? `font-weight: bold;` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
+  ${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
+  ${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
+  ${italic ? `font-style: italic${composeImportant};` : ''}
+  ${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
+  ${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
   `;
 };
 function getCustomCSSByDevice(typography, device) {

package/dist/cjs/hooks/useProduct.js

@@ -3,10 +3,18 @@
 var react = require('react');
 var ProductContext = require('../contexts/ProductContext.js');
 var flattenConnection = require('../helpers/flatten-connection.js');
+require('react/jsx-runtime');
+require('zustand');
 require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('./useCartUI.js');
+var variant = require('../helpers/variant.js');
+require('react-transition-group');
+require('@gem-sdk/core');
 var product = require('../helpers/product.js');
 require('../helpers/convert.js');
-var variant = require('../helpers/variant.js');
 
 const useUniqProductID = ()=>{
     return ProductContext.useProductStore((s)=>s.uiqueId);