@gem-sdk/core 1.23.0 → 1.23.1

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

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

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

@@ -0,0 +1,11 @@
+'use strict';
+
+const ProductOptionNameDocument = `
+  query productOptionName($limit: Int, $offset: Int) {
+    productOptionName(
+      limit: $limit,
+      offset: $offset
+    )
+  }`;
+
+exports.ProductOptionNameDocument = ProductOptionNameDocument;

package/dist/cjs/helpers/background.js

@@ -13,7 +13,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         ...getStyleBgPosition(background),
         ...getStyleBgSize(background),
         ...getStyleBgRepeat(background),
-        ...getStyleBgAttachment(background)
+        ...!options?.ignoreBgAttachment ? getStyleBgAttachment(background) : {}
     };
 };
 const getStyleBgColor = (background)=>{
@@ -38,10 +38,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)
@@ -104,6 +100,69 @@ const getBgAttachmentByDevice = (background, device)=>{
 const composeBackgroundCss = (backgroundColor)=>{
     return `${backgroundColor ? `background-color: ${colors.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
+        }
+    };
+};
 
 exports.composeBackgroundCss = composeBackgroundCss;
 exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
+exports.makeFixedBgAttachment = makeFixedBgAttachment;

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;