@gem-sdk/core 1.23.0 → 1.23.1

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/src/product/helpers/variant-presets.js

@@ -0,0 +1,54 @@
+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

@@ -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/graphql/queries/product-value-label.generated.js

@@ -0,0 +1,9 @@
+const ProductOptionNameDocument = `
+  query productOptionName($limit: Int, $offset: Int) {
+    productOptionName(
+      limit: $limit,
+      offset: $offset
+    )
+  }`;
+
+export { ProductOptionNameDocument };

package/dist/esm/helpers/background.js

@@ -11,7 +11,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         ...getStyleBgPosition(background),
         ...getStyleBgSize(background),
         ...getStyleBgRepeat(background),
-        ...getStyleBgAttachment(background)
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };
 const getStyleBgColor = (background)=>{
@@ -36,10 +36,6 @@ const getColor = (color)=>{
 };
 const getStyleBgImage = (background, options)=>{
     const bgImage = {
-        // desktop:
-        //   background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
-        // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
-        // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
         desktop: getBgImageByDevice(background, 'desktop', options),
         tablet: getBgImageByDevice(background, 'tablet', options),
         mobile: getBgImageByDevice(background, 'mobile', options)
@@ -102,5 +98,67 @@ const getBgAttachmentByDevice = (background, device)=>{
 const composeBackgroundCss = (backgroundColor)=>{
     return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
 };
+const makeFixedBgAttachment = (background)=>{
+    if (!background) return;
+    background.tablet = background.tablet ? background.tablet : background.desktop;
+    background.mobile = background.mobile ? background.mobile : background.tablet;
+    const bgAttachment = {
+        desktop: getBgAttachmentByDevice(background, 'desktop'),
+        tablet: getBgAttachmentByDevice(background, 'tablet'),
+        mobile: getBgAttachmentByDevice(background, 'mobile')
+    };
+    const composeFixed = {
+        desktop: {
+            ...makeFixedBgAttachmentByDevice('desktop', bgAttachment.desktop)
+        },
+        tablet: {
+            ...makeFixedBgAttachmentByDevice('tablet', bgAttachment.tablet)
+        },
+        mobile: {
+            ...makeFixedBgAttachmentByDevice('mobile', bgAttachment.mobile)
+        }
+    };
+    return {
+        wrapper: {
+            ...composeFixed.desktop?.wrapper,
+            ...composeFixed.tablet?.wrapper,
+            ...composeFixed.mobile?.wrapper
+        },
+        content: {
+            ...composeFixed.desktop?.content,
+            ...composeFixed.tablet?.content,
+            ...composeFixed.mobile?.content
+        }
+    };
+};
+const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
+    const subfix = device === 'desktop' ? '' : `-${device}`;
+    if (bgAttachment === 'fixed') {
+        return {
+            wrapper: {
+                [`--pos${subfix}`]: 'absolute',
+                [`--top${subfix}`]: '0',
+                [`--left${subfix}`]: '0',
+                [`--w${subfix}`]: '100%',
+                [`--h${subfix}`]: '100%'
+            },
+            content: {
+                [`--pos${subfix}`]: 'fixed',
+                [`--w${subfix}`]: '100vw',
+                [`--h${subfix}`]: '100vh',
+                [`--bga${subfix}`]: 'unset'
+            }
+        };
+    }
+    return {
+        wrapper: {
+            [`--pos${subfix}`]: 'absolute'
+        },
+        content: {
+            [`--pos${subfix}`]: 'absolute',
+            [`--bga${subfix}`]: bgAttachment
+        }
+    };
+};
 
-export { composeBackgroundCss, getStyleBackgroundByDevice };
+export { composeBackgroundCss, getStyleBackgroundByDevice, makeFixedBgAttachment };

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 };