@gem-sdk/core 1.44.0-dev.139 → 1.44.0-staging.47

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -562,7 +562,7 @@ const ComponentToolbarPreview = (props)=>{
                     })
                 ]
             }, props.uid),
-            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatusWrapper, {
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsxRuntime.jsx(ThemeSectionStatus.ThemeSectionStatus, {
                 ...props
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -625,6 +625,6 @@ const ComponentToolbarPreview = (props)=>{
         ]
     });
 };
-var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
+var ComponentToolbarPreview$1 = /*#__PURE__*/ react.memo(ComponentToolbarPreview);
 
 exports.default = ComponentToolbarPreview$1;

package/dist/cjs/components/RenderPreview.js

@@ -45,7 +45,6 @@ const RenderPreview = ({ uid, ...passProps })=>{
                     setting: item.settings,
                     ...passProps,
                     children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderPreviewMemo, {
-                            ...passProps,
                             uid: id
                         }, id))
                 }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {

package/dist/cjs/components/constant.js

@@ -36,11 +36,7 @@ const disableWrap = [
     'ProductImagesV2',
     'PostPurchaseProductImages',
     'Sticky',
-    'Heading',
-    'ProductBadge',
-    'Marquee',
-    'MarqueeItem',
-    'EstimateDate'
+    'Heading'
 ];
 const customRenderChildren = [
     'Accordion',
@@ -51,8 +47,7 @@ const customRenderChildren = [
 ];
 const excludeApplyStyle = [
     'IconListV2',
-    'IconList',
-    'ProductBadge'
+    'IconList'
 ];
 const postPurchaseRequiredElements = [
     'PostPurchaseProductOffer',

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

@@ -2,17 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 
-const getStatusMessage = (status)=>{
-    switch(status){
-        case 'DRAFT':
-            return 'This Theme Section is Draft. Publish page will also publish Theme Section.';
-        case 'NEED_PUBLISHING':
-            return 'Need to republish. Go to global edit and publish this section';
-    }
-};
-const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
-    const isRenderThemeSectionStatus = tag === 'Section' && isThemeSection && (status === 'DRAFT' || status === 'NEED_PUBLISHING');
-    const statusMessage = getStatusMessage(status);
+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,
@@ -33,13 +24,13 @@ const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
                         })
                     })
                 }),
-                statusMessage && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
                     "data-theme-section-status-text": true,
-                    children: statusMessage
+                    children: "Need to republish. Go to global edit and publish this section"
                 })
             ]
         })
     });
 };
 
-exports.ThemeSectionStatusWrapper = ThemeSectionStatusWrapper;
+exports.ThemeSectionStatus = ThemeSectionStatus;

package/dist/cjs/contexts/BuilderPreviewContext.js

@@ -254,11 +254,7 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>zus
                 }
             },
             getItem: (id)=>{
-                const item = get().state[id];
-                return {
-                    ...item,
-                    rawChildrens: item?.childrens?.map((v)=>get().state[v])
-                };
+                return get().state[id];
             },
             removeItem: (id)=>{
                 if (id === 'ROOT') {

package/dist/cjs/contexts/SectionContext.js

@@ -10,7 +10,6 @@ const SectionContext = /*#__PURE__*/ react.createContext(null);
 const createSectionProvider = (data)=>zustand.createStore((set, get)=>({
             data: data ?? {},
             getSection: (id)=>{
-                console.log('get().data', get().data);
                 const section = get().data[id];
                 return section ?? undefined;
             },

package/dist/cjs/contexts/ShopContext.js

@@ -53,7 +53,7 @@ const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps
     const store = react.useMemo(()=>createShopStoreProvider(storeOption), [
         storeOption
     ]);
-    const onUpdateLimitation = (e)=>{
+    const onUpdateLimitation = react.useCallback((e)=>{
         const isAllow = !!e.detail?.isAllow;
         const maxGenerateCount = e.detail?.maxGenerateCount;
         const nextQuota = e.detail?.nextQuota;
@@ -64,13 +64,17 @@ const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps
                 nextQuota
             }
         });
-    };
+    }, [
+        store
+    ]);
     react.useEffect(()=>{
         window.addEventListener('editor:ai-generate-content-update-limitation', onUpdateLimitation);
         return ()=>{
             window.removeEventListener('editor:ai-generate-content-update-limitation', onUpdateLimitation);
         };
-    }, []);
+    }, [
+        onUpdateLimitation
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(AddonContext.AddonProvider, {
         components: addons,
         children: /*#__PURE__*/ jsxRuntime.jsx(useSWR.SWRConfig, {

package/dist/cjs/helpers/background.js

@@ -9,9 +9,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         return {};
     }
     return {
-        ...!options?.ignoreBackgroundColor ? {
-            ...getStyleBgColor(background)
-        } : {},
+        ...getStyleBgColor(background),
         ...!options?.ignoreBackgroundImage ? {
             ...getStyleBgImage(background, options),
             ...getStyleBgPosition(background),
@@ -205,7 +203,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -216,7 +214,7 @@ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = fa
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             Object.assign(bgrStyle, {
                 [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
             });
         }
     });
@@ -229,5 +227,4 @@ exports.getBgImageByDevice = getBgImageByDevice;
 exports.getGradientBgrStyleByDevice = getGradientBgrStyleByDevice;
 exports.getGradientBgrStyleForButton = getGradientBgrStyleForButton;
 exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
-exports.getStyleBgColor = getStyleBgColor;
 exports.makeFixedBgAttachment = makeFixedBgAttachment;

package/dist/cjs/helpers/colors.js

@@ -119,7 +119,7 @@ const getGlobalColorStateStyle = (type, data)=>{
     return Object.fromEntries(Object.entries(data).map(([state, value])=>{
         if (state === 'active') return [];
         return [
-            `-${constant.stateMapping?.[state] || ''}-${type}`,
+            `-${constant.stateMapping?.[state]}-${type}`,
             getSingleColorVariable(value)
         ];
     }).filter(isDefined.isDefined));
@@ -156,7 +156,7 @@ const getSingleColorVariable = (color)=>{
 };
 function isColor(color) {
     if (!color || typeof color !== 'string') return false;
-    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
 }
 const getGlobalColorStyle = (data)=>{
     if (!data) return {};

package/dist/cjs/helpers/shadow.js

@@ -27,7 +27,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? constant.stateMapping?.[state] : ''}-${getShortname.getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${colors.getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{

package/dist/cjs/hooks/useFormatMoney.js

@@ -5,71 +5,70 @@ var shop = require('./shop.js');
 const shopifyPriceRounding = (amount, precision)=>{
     return parseFloat(`${amount}`).toFixed(Number(precision) + 1).slice(0, -1);
 };
-const formatMoney = function(cents, format) {
-    let value = '';
-    const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
-    const formatString = format || '${{amount}}';
-    /**
-   * check default
-   * @param opt opt
-   * @param def def
-   * @returns any
-   */ function defaultOption(opt, def) {
-        return typeof opt == 'undefined' ? def : opt;
-    }
-    /**
-   * formatWithDelimiters
-   * @param number number
-   * @param precision precision
-   * @param thousands thousands
-   * @param decimal decimal
-   * @returns any
-   */ // eslint-disable-next-line max-params
-    function formatWithDelimiters(number, precision, thousands, decimal) {
-        precision = defaultOption(precision, 2);
-        thousands = defaultOption(thousands, ',');
-        decimal = defaultOption(decimal, '.');
-        if (isNaN(number) || number == null) {
-            return 0;
-        }
-        // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
-        number = shopifyPriceRounding(number, Number(precision));
-        const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
-        return dollars + cents;
-    }
-    switch(formatString.match(placeholderRegex)[1]){
-        case 'amount':
-            value = formatWithDelimiters(cents, 2);
-            break;
-        case 'amount_no_decimals':
-            value = formatWithDelimiters(cents, 0);
-            break;
-        case 'amount_with_comma_separator':
-            value = formatWithDelimiters(cents, 2, '.', ',');
-            break;
-        case 'amount_no_decimals_with_comma_separator':
-            value = formatWithDelimiters(cents, 0, '.', ',');
-            break;
-        case 'amount_with_apostrophe_separator':
-            value = formatWithDelimiters(cents, 2, "'", '.');
-            break;
-        case 'amount_no_decimals_with_space_separator':
-            value = formatWithDelimiters(cents, 0, ' ');
-            break;
-        case 'amount_with_space_separator':
-            value = formatWithDelimiters(cents, 2, ' ', ',');
-            break;
-        case 'amount_with_period_and_space_separator':
-            value = formatWithDelimiters(cents, 2, ' ', '.');
-            break;
-    }
-    return formatString.replace(placeholderRegex, value);
-};
 const useFormatMoney = (amount, withCurrency)=>{
     const { moneyFormat, moneyWithCurrencyFormat } = shop.useMoneyFormat();
+    const formatMoney = function(cents, format) {
+        let value = '';
+        const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
+        const formatString = format || '${{amount}}';
+        /**
+     * check default
+     * @param opt opt
+     * @param def def
+     * @returns any
+     */ function defaultOption(opt, def) {
+            return typeof opt == 'undefined' ? def : opt;
+        }
+        /**
+     * formatWithDelimiters
+     * @param number number
+     * @param precision precision
+     * @param thousands thousands
+     * @param decimal decimal
+     * @returns any
+     */ // eslint-disable-next-line max-params
+        function formatWithDelimiters(number, precision, thousands, decimal) {
+            precision = defaultOption(precision, 2);
+            thousands = defaultOption(thousands, ',');
+            decimal = defaultOption(decimal, '.');
+            if (isNaN(number) || number == null) {
+                return 0;
+            }
+            // shopify làm tròn bằng cách cắt đi các số ở đằng sau chứ không sử dụng toFixed để làm tròn như toán học
+            number = shopifyPriceRounding(number, Number(precision));
+            const parts = number.split('.'), dollars = parts[0]?.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1' + thousands), cents = parts[1] ? decimal + parts[1] : '';
+            return dollars + cents;
+        }
+        switch(formatString.match(placeholderRegex)[1]){
+            case 'amount':
+                value = formatWithDelimiters(cents, 2);
+                break;
+            case 'amount_no_decimals':
+                value = formatWithDelimiters(cents, 0);
+                break;
+            case 'amount_with_comma_separator':
+                value = formatWithDelimiters(cents, 2, '.', ',');
+                break;
+            case 'amount_no_decimals_with_comma_separator':
+                value = formatWithDelimiters(cents, 0, '.', ',');
+                break;
+            case 'amount_with_apostrophe_separator':
+                value = formatWithDelimiters(cents, 2, "'", '.');
+                break;
+            case 'amount_no_decimals_with_space_separator':
+                value = formatWithDelimiters(cents, 0, ' ');
+                break;
+            case 'amount_with_space_separator':
+                value = formatWithDelimiters(cents, 2, ' ', ',');
+                break;
+            case 'amount_with_period_and_space_separator':
+                value = formatWithDelimiters(cents, 2, ' ', '.');
+                break;
+        }
+        return formatString.replace(placeholderRegex, value);
+    };
     return withCurrency ? formatMoney(`${amount}`, moneyWithCurrencyFormat || moneyFormat) : formatMoney(`${amount}`, moneyFormat);
 };
 
-exports.formatMoney = formatMoney;
 exports.shopifyPriceRounding = shopifyPriceRounding;
 exports.useFormatMoney = useFormatMoney;

package/dist/cjs/index.js

@@ -16,8 +16,6 @@ var ShopContext = require('./contexts/ShopContext.js');
 var PageContext = require('./contexts/PageContext.js');
 var CollectionContext = require('./contexts/CollectionContext.js');
 var ModalContext = require('./contexts/ModalContext.js');
-var ArticleListContext = require('./contexts/ArticleListContext.js');
-var ArticleContext = require('./contexts/ArticleContext.js');
 var pageViewUp_generated = require('./graphql/mutations/page-view-up.generated.js');
 var collectionDetailFilter_generated = require('./graphql/queries/collection-detail-filter.generated.js');
 var collection_generated = require('./graphql/queries/collection.generated.js');
@@ -60,7 +58,6 @@ var iconList = require('./helpers/icon-list.js');
 var isDefined = require('./helpers/is-defined.js');
 var layout = require('./helpers/layout.js');
 var makeStyle = require('./helpers/make-style.js');
-var align = require('./helpers/align.js');
 var product = require('./helpers/product.js');
 var query = require('./helpers/query.js');
 var radius = require('./helpers/radius.js');
@@ -92,7 +89,6 @@ var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
 var useLoadScript = require('./hooks/useLoadScript.js');
 var useMoney = require('./hooks/useMoney.js');
 var usePrevious = require('./hooks/usePrevious.js');
-var useArticlesQuery = require('./hooks/articles/useArticlesQuery.js');
 var useProduct = require('./hooks/useProduct.js');
 var useProductList = require('./hooks/useProductList.js');
 var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
@@ -140,10 +136,6 @@ exports.CollectionProvider = CollectionContext.CollectionProvider;
 exports.useCollectionStore = CollectionContext.useCollectionStore;
 exports.ModalProvider = ModalContext.ModalProvider;
 exports.useModalStore = ModalContext.useModalStore;
-exports.ArticleListProvider = ArticleListContext.ArticleListProvider;
-exports.useArticleListStore = ArticleListContext.useArticleListStore;
-exports.ArticleProvider = ArticleContext.ArticleProvider;
-exports.useArticleStore = ArticleContext.useArticleStore;
 exports.PageViewUpDocument = pageViewUp_generated.PageViewUpDocument;
 exports.CollectionDetailFilterDocument = collectionDetailFilter_generated.CollectionDetailFilterDocument;
 exports.CollectionDocument = collection_generated.CollectionDocument;
@@ -195,7 +187,6 @@ exports.getBgImageByDevice = background.getBgImageByDevice;
 exports.getGradientBgrStyleByDevice = background.getGradientBgrStyleByDevice;
 exports.getGradientBgrStyleForButton = background.getGradientBgrStyleForButton;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
-exports.getStyleBgColor = background.getStyleBgColor;
 exports.makeFixedBgAttachment = background.makeFixedBgAttachment;
 exports.composeTextColorCss = colors.composeTextColorCss;
 exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
@@ -241,7 +232,6 @@ exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
 exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
 exports.removeNullUndefined = makeStyle.removeNullUndefined;
-exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
 exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
 exports.getSelectedVariant = product.getSelectedVariant;
 exports.parseSelectedOption = product.parseSelectedOption;
@@ -315,7 +305,6 @@ exports.useProductQuery = useProductQuery.useProductQuery;
 exports.useProductsQuery = useProductsQuery.useProductsQuery;
 exports.useProductsQueryAll = useProductsQuery.useProductsQueryAll;
 exports.useCurrentDevice = useCurrentDevice.useCurrentDevice;
-exports.formatMoney = useFormatMoney.formatMoney;
 exports.shopifyPriceRounding = useFormatMoney.shopifyPriceRounding;
 exports.useFormatMoney = useFormatMoney.useFormatMoney;
 exports.useLazyVideo = useLazyVideo.useLazyVideo;
@@ -331,8 +320,6 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.default;
 exports.useLoadScript = useLoadScript.default;
 exports.useMoney = useMoney.default;
 exports.usePrevious = usePrevious.usePrevious;
-exports.useArticlesQuery = useArticlesQuery.useArticlesQuery;
-exports.useBlogsQuery = useArticlesQuery.useBlogsQuery;
 exports.useCheckAvailableVariantInStock = useProduct.useCheckAvailableVariantInStock;
 exports.useCurrentVariant = useProduct.useCurrentVariant;
 exports.useCurrentVariantInStock = useProduct.useCurrentVariantInStock;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -11,7 +11,7 @@ import 'vanilla-lazyload';
 import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
-import { ThemeSectionStatusWrapper } from './theme-section/ThemeSectionStatus.js';
+import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
 import Resize from './resize/Resize.js';
 import { usePostPurchase } from '../hooks/useToolbarPostPurchase.js';
 import { ableGenerateContentElements } from './constant.js';
@@ -558,7 +558,7 @@ const ComponentToolbarPreview = (props)=>{
                     })
                 ]
             }, props.uid),
-            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatusWrapper, {
+            isEnableCreateThemeSection() && getIndexSection() < SECTION_LIMIT && /*#__PURE__*/ jsx(ThemeSectionStatus, {
                 ...props
             }),
             /*#__PURE__*/ jsx("div", {
@@ -621,6 +621,6 @@ const ComponentToolbarPreview = (props)=>{
         ]
     });
 };
-var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview); /* gem-lint/disallow-import-from-package-path */
+var ComponentToolbarPreview$1 = /*#__PURE__*/ memo(ComponentToolbarPreview);
 
 export { ComponentToolbarPreview$1 as default };

package/dist/esm/components/RenderPreview.js

@@ -41,7 +41,6 @@ const RenderPreview = ({ uid, ...passProps })=>{
                     setting: item.settings,
                     ...passProps,
                     children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderPreviewMemo, {
-                            ...passProps,
                             uid: id
                         }, id))
                 }) : /*#__PURE__*/ jsx(Component, {

package/dist/esm/components/constant.js

@@ -34,11 +34,7 @@ const disableWrap = [
     'ProductImagesV2',
     'PostPurchaseProductImages',
     'Sticky',
-    'Heading',
-    'ProductBadge',
-    'Marquee',
-    'MarqueeItem',
-    'EstimateDate'
+    'Heading'
 ];
 const customRenderChildren = [
     'Accordion',
@@ -49,8 +45,7 @@ const customRenderChildren = [
 ];
 const excludeApplyStyle = [
     'IconListV2',
-    'IconList',
-    'ProductBadge'
+    'IconList'
 ];
 const postPurchaseRequiredElements = [
     'PostPurchaseProductOffer',

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

@@ -1,16 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-const getStatusMessage = (status)=>{
-    switch(status){
-        case 'DRAFT':
-            return 'This Theme Section is Draft. Publish page will also publish Theme Section.';
-        case 'NEED_PUBLISHING':
-            return 'Need to republish. Go to global edit and publish this section';
-    }
-};
-const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
-    const isRenderThemeSectionStatus = tag === 'Section' && isThemeSection && (status === 'DRAFT' || status === 'NEED_PUBLISHING');
-    const statusMessage = getStatusMessage(status);
+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,
@@ -31,13 +22,13 @@ const ThemeSectionStatusWrapper = ({ tag, status, isThemeSection })=>{
                         })
                     })
                 }),
-                statusMessage && /*#__PURE__*/ jsx("span", {
+                /*#__PURE__*/ jsx("span", {
                     "data-theme-section-status-text": true,
-                    children: statusMessage
+                    children: "Need to republish. Go to global edit and publish this section"
                 })
             ]
         })
     });
 };
 
-export { ThemeSectionStatusWrapper };
+export { ThemeSectionStatus };

package/dist/esm/contexts/BuilderPreviewContext.js

@@ -252,11 +252,7 @@ const createBuilderPreviewProvider = (args, pageName, isThemeSectionEditor)=>cre
                 }
             },
             getItem: (id)=>{
-                const item = get().state[id];
-                return {
-                    ...item,
-                    rawChildrens: item?.childrens?.map((v)=>get().state[v])
-                };
+                return get().state[id];
             },
             removeItem: (id)=>{
                 if (id === 'ROOT') {

package/dist/esm/contexts/SectionContext.js

@@ -8,7 +8,6 @@ const SectionContext = /*#__PURE__*/ createContext(null);
 const createSectionProvider = (data)=>createStore((set, get)=>({
             data: data ?? {},
             getSection: (id)=>{
-                console.log('get().data', get().data);
                 const section = get().data[id];
                 return section ?? undefined;
             },

package/dist/esm/contexts/ShopContext.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { SWRConfig } from 'swr';
 import { useStore, createStore } from 'zustand';
-import { useMemo, useEffect, useContext, createContext } from 'react';
+import { useMemo, useCallback, useEffect, useContext, createContext } from 'react';
 import { AddonProvider } from './AddonContext.js';
 import { ModalProvider } from './ModalContext.js';
 
@@ -51,7 +51,7 @@ const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps
     const store = useMemo(()=>createShopStoreProvider(storeOption), [
         storeOption
     ]);
-    const onUpdateLimitation = (e)=>{
+    const onUpdateLimitation = useCallback((e)=>{
         const isAllow = !!e.detail?.isAllow;
         const maxGenerateCount = e.detail?.maxGenerateCount;
         const nextQuota = e.detail?.nextQuota;
@@ -62,13 +62,17 @@ const ShopProvider = ({ children, addons, storeOption, queryOption, ...passProps
                 nextQuota
             }
         });
-    };
+    }, [
+        store
+    ]);
     useEffect(()=>{
         window.addEventListener('editor:ai-generate-content-update-limitation', onUpdateLimitation);
         return ()=>{
             window.removeEventListener('editor:ai-generate-content-update-limitation', onUpdateLimitation);
         };
-    }, []);
+    }, [
+        onUpdateLimitation
+    ]);
     return /*#__PURE__*/ jsx(AddonProvider, {
         components: addons,
         children: /*#__PURE__*/ jsx(SWRConfig, {

package/dist/esm/helpers/background.js

@@ -7,9 +7,7 @@ const getStyleBackgroundByDevice = (background, options)=>{
         return {};
     }
     return {
-        ...!options?.ignoreBackgroundColor ? {
-            ...getStyleBgColor(background)
-        } : {},
+        ...getStyleBgColor(background),
         ...!options?.ignoreBackgroundImage ? {
             ...getStyleBgImage(background, options),
             ...getStyleBgPosition(background),
@@ -203,7 +201,7 @@ const getGradientBgrStyleForButton = (backgroundStyle)=>{
     });
     return bgrStyle;
 };
-const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = false)=>{
+const getGradientBgrStyleByDevice = (backgroundStyle)=>{
     if (!backgroundStyle) return;
     const bgrStyle = {};
     [
@@ -214,11 +212,11 @@ const getGradientBgrStyleByDevice = (backgroundStyle, ignoreBackgroundImage = fa
         if (backgroundStyle[device]?.color?.includes(GRADIENT_BGR_KEY)) {
             Object.assign(bgrStyle, {
                 [`--bgc${device !== 'desktop' ? '-' + device : ''}`]: 'transparent',
-                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: ignoreBackgroundImage ? `${backgroundStyle[device]?.color}` : `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
+                [`--bgi${device !== 'desktop' ? '-' + device : ''}`]: `${getBgImageByDevice(backgroundStyle, device) || 'url()'}, ${backgroundStyle[device]?.color}`
             });
         }
     });
     return bgrStyle;
 };
 
-export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, getStyleBgColor, makeFixedBgAttachment };
+export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, makeFixedBgAttachment };

package/dist/esm/helpers/colors.js

@@ -117,7 +117,7 @@ const getGlobalColorStateStyle = (type, data)=>{
     return Object.fromEntries(Object.entries(data).map(([state, value])=>{
         if (state === 'active') return [];
         return [
-            `-${stateMapping?.[state] || ''}-${type}`,
+            `-${stateMapping?.[state]}-${type}`,
             getSingleColorVariable(value)
         ];
     }).filter(isDefined));
@@ -154,7 +154,7 @@ const getSingleColorVariable = (color)=>{
 };
 function isColor(color) {
     if (!color || typeof color !== 'string') return false;
-    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent') || color?.startsWith('linear-gradient');
+    return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
 }
 const getGlobalColorStyle = (data)=>{
     if (!data) return {};

package/dist/esm/helpers/shadow.js

@@ -25,7 +25,7 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     if (typeof value.distance == 'undefined') return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? stateMapping?.[state] || '' : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
+        [`-${!isActiveState ? stateMapping?.[state] : ''}-${getShortName(styleAppliedFor)}`]: isEnableShadow ? `${Math.cos(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${value?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${value?.blur} ${styleAppliedFor === 'box-shadow' ? value?.spread + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
 const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{