@gem-sdk/core 1.24.4 → 1.25.0

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

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

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

@@ -0,0 +1,115 @@
+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 '@gem-sdk/adapter-shopify';
+import 'swr';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import '../../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 = useShopStore((s)=>s.plan);
+    const createThemeSectionCount = 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 = 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, {
+            isLimit: isLimit,
+            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

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

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

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

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Tooltip({ children, enable, text = 'Tooltip Text', position = 'right', ...props }) {
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        "data-toolbar-tooltip-trigger": true,
+        children: [
+            children,
+            enable && /*#__PURE__*/ jsx("div", {
+                "data-toolbar-tooltip": true,
+                "data-toolbar-tooltip-position": position,
+                children: text
+            })
+        ]
+    });
+}
+
+export { Tooltip as default };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -26,9 +26,12 @@ const root = {
     label: 'Root',
     childrens: []
 };
-const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
+const createBuilderPreviewProvider = (args, isThemeSectionEditor)=>createStore((set, get)=>({
             state: args,
             loaded: false,
+            isThemeSectionEditor: !!isThemeSectionEditor,
+            dynamicProduct: null,
+            dynamicCollection: null,
             addItem: (args)=>{
                 const { position, data } = args;
                 const state = get().state;
@@ -388,14 +391,43 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
                         ROOT: 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 ? Suspense : Fragment;
     const value = useMemo(()=>{
-        return createBuilderPreviewProvider(state);
+        return createBuilderPreviewProvider(state, isThemeSectionEditor);
     }, [
-        state
+        state,
+        isThemeSectionEditor
     ]);
     return /*#__PURE__*/ jsx(Component, {
         children: /*#__PURE__*/ jsx(BuilderPreviewContext.Provider, {

package/dist/esm/contexts/ShopContext.js

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

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

@@ -0,0 +1,9 @@
+import { Children } from 'react';
+import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
+
+const filterToolbarPreview = (children, keep = false)=>{
+    const arrChild = Children.toArray(children);
+    return arrChild.filter((child)=>!keep ? child?.type != ComponentToolbarPreview : child?.type == ComponentToolbarPreview);
+};
+
+export { filterToolbarPreview as default, filterToolbarPreview };

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

@@ -1,7 +1,10 @@
 import { Children } from 'react';
+import { ComponentToolbarPreview } from '../components/ComponentToolbarPreview.js';
 
 const isEmptyChildren = (children)=>{
-    return Children.count(children) < 1 || !children;
+    let arrChild = Children.toArray(children);
+    arrChild = arrChild.filter((child)=>child?.type != ComponentToolbarPreview);
+    return Children.count(arrChild) < 1 || !children;
 };
 
 export { isEmptyChildren as default, isEmptyChildren };

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

@@ -73,6 +73,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];
@@ -125,4 +132,4 @@ const makeLineClamp = (lineClampValue, hasLineClampValue)=>{
     };
 };
 
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };
+export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined };

package/dist/esm/helpers/size.js

@@ -1,3 +1,4 @@
+import { makeStyleResponsive } from './make-style.js';
 import { devicesMapping } from './constant.js';
 
 function getCustomSizeCSSByDevice(size, device) {
@@ -27,5 +28,54 @@ 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: 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 = 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'));
+};
 
-export { composeSize, composeSizeCss, genSizeClass };
+export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault };

package/dist/esm/helpers/typography.js

@@ -16,20 +16,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/esm/hooks/useProduct.js

@@ -1,10 +1,18 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useProductStore } from '../contexts/ProductContext.js';
 import { flattenConnection } from '../helpers/flatten-connection.js';
+import 'react/jsx-runtime';
+import 'zustand';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import './useCartUI.js';
+import { checkInStock } from '../helpers/variant.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
 import { getSelectedVariant } from '../helpers/product.js';
 import '../helpers/convert.js';
-import { checkInStock } from '../helpers/variant.js';
 
 const useUniqProductID = ()=>{
     return useProductStore((s)=>s.uiqueId);

package/dist/esm/index.js

@@ -30,7 +30,8 @@ export { default as globalEvent } from './helpers/GlobalEvent.js';
 export { default as isBrowser } from './helpers/is-browser.js';
 export { default as isSafari } from './helpers/is-safari.js';
 export { isEmptyChildren } from './helpers/is-empty-children.js';
-export { makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
+export { filterToolbarPreview } from './helpers/filter-toolbar-preview.js';
+export { makeAspectRatio, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, removeNullUndefined } from './helpers/make-style.js';
 export { normalizeBuilderData } from './helpers/normalize-builder-data.js';
 export { prefetchQueries } from './helpers/prefetch-queries.js';
 export { composeSpacing, getSpacingVariable } from './helpers/spacing.js';
@@ -51,7 +52,7 @@ import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
 export { RenderIf, composeMemo, dataStringify, props, styles, template } from './helpers/render.js';
 export { baseAssetURL, isLocalEnv } from './helpers/convert.js';
-export { composeSize, composeSizeCss, genSizeClass } from './helpers/size.js';
+export { composeSize, composeSizeCss, genSizeClass, getPaddingGlobalSize, getWidthHeightGlobalSize, makeGlobalSize, makeStyleWithDefault } from './helpers/size.js';
 export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
 export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
 export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';