@gem-sdk/core 1.58.0-dev.13 → 1.58.0-dev.133

package/dist/cjs/hooks/useFormatMoney.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var shop = require('./shop.js');

package/dist/cjs/hooks/useInitialSwatchesOptions.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/useInteraction.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var PageContext = require('../contexts/PageContext.js');

package/dist/cjs/hooks/useIsomorphicLayoutEffect.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/useLoadScript.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/useMoney.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/usePrevious.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');

package/dist/cjs/hooks/useProduct.js

@@ -1,17 +1,19 @@
+'use client';
 'use strict';
 
 var react = require('react');
 var ProductContext = require('../contexts/ProductContext.js');
 require('react/jsx-runtime');
 require('zustand');
-require('swr');
 var PageContext = require('../contexts/PageContext.js');
+require('swr');
 require('@gem-sdk/adapter-shopify');
 require('swr/mutation');
 require('swr/infinite');
 require('vanilla-lazyload');
 require('./useCartUI.js');
 var variant = require('../helpers/variant.js');
+var useShopifyLink = require('./shop/useShopifyLink.js');
 require('react-transition-group');
 require('@gem-sdk/core');
 require('classnames');
@@ -35,6 +37,29 @@ const useProductProperties = ()=>{
 const useIsSyncProduct = ()=>{
     return ProductContext.useProductStore((s)=>s.isSyncProduct);
 };
+const useProductBundleDiscount = ()=>{
+    const useProductCompareAtPrice = ProductContext.useProductStore((s)=>s.useProductCompareAtPrice);
+    const seUseProductCompareAtPrice = ProductContext.useProductStore((s)=>s.setUseProductCompareAtPrice);
+    return {
+        useProductCompareAtPrice,
+        seUseProductCompareAtPrice
+    };
+};
+const useProductShopifyEditLink = ()=>{
+    const product = ProductContext.useProductStore((s)=>s.product);
+    const productId = product?.baseID?.replace('gid://shopify/Product/', '');
+    const { linkEditProduct } = useShopifyLink.useShopifyLink({
+        productId
+    });
+    const redirectProductShopifyLink = ()=>{
+        if (!linkEditProduct) return;
+        window.open(linkEditProduct, '_blank');
+    };
+    return {
+        linkEditProduct,
+        redirectProductShopifyLink
+    };
+};
 const useQuantity = ()=>{
     const quantity = ProductContext.useProductStore((s)=>s.quantity);
     const hasUpdatePrice = ProductContext.useProductStore((s)=>s.updatePrice);
@@ -226,8 +251,10 @@ exports.useFeaturedImageGlobal = useFeaturedImageGlobal;
 exports.useHasPreSelected = useHasPreSelected;
 exports.useIsSyncProduct = useIsSyncProduct;
 exports.useProduct = useProduct;
+exports.useProductBundleDiscount = useProductBundleDiscount;
 exports.useProductOfferDiscount = useProductOfferDiscount;
 exports.useProductProperties = useProductProperties;
+exports.useProductShopifyEditLink = useProductShopifyEditLink;
 exports.useQuantity = useQuantity;
 exports.useSelectedOption = useSelectedOption;
 exports.useUniqProductID = useUniqProductID;

package/dist/cjs/hooks/useProductList.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var ProductListContext = require('../contexts/ProductListContext.js');

package/dist/cjs/hooks/useSuspenseFetch.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/useSwatchesOptions.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/dist/cjs/hooks/useToolbarPostPurchase.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var constant = require('../components/constant.js');

package/dist/cjs/index.js

@@ -27,6 +27,7 @@ var publishedThemePages_generated = require('./graphql/queries/published-theme-p
 var products_generated = require('./graphql/queries/products.generated.js');
 var storeProperty_generated = require('./graphql/queries/store-property.generated.js');
 var previewPage_generated = require('./graphql/queries/preview-page.generated.js');
+var shopShopify_generated = require('./graphql/queries/shop-shopify.generated.js');
 var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTemplate.generated.js');
 var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
 var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
@@ -54,6 +55,7 @@ var fpixel = require('./helpers/tracking/fpixel.js');
 var gtag = require('./helpers/tracking/gtag.js');
 var tiktokpixel = require('./helpers/tracking/tiktokpixel.js');
 var background = require('./helpers/background.js');
+var backgroundImage = require('./helpers/backgroundImage.js');
 var colors = require('./helpers/colors.js');
 var composeAdvanceStyle = require('./helpers/compose-advance-style.js');
 var convert = require('./helpers/convert.js');
@@ -71,6 +73,7 @@ var render = require('./helpers/render.js');
 var shadow = require('./helpers/shadow.js');
 var size = require('./helpers/size.js');
 var typography = require('./helpers/typography.js');
+var useArticlesQuery = require('./hooks/articles/useArticlesQuery.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
@@ -84,23 +87,23 @@ var useCollectionsQuery = require('./hooks/shop/use-collections-query.js');
 var useProductQuery = require('./hooks/shop/use-product-query.js');
 var useProductsQuery = require('./hooks/shop/use-products-query.js');
 var useCurrentDevice = require('./hooks/use-current-device.js');
-var useFormatMoney = require('./hooks/useFormatMoney.js');
 var useLazyVideo = require('./hooks/use-lazy-video.js');
 var useCartId = require('./hooks/useCartId.js');
 var useCartLine = require('./hooks/useCartLine.js');
 var useCartUI = require('./hooks/useCartUI.js');
 var useCollection = require('./hooks/useCollection.js');
+var useFormatMoney = require('./hooks/useFormatMoney.js');
 var react = require('react');
+var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 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 useShopifyLink = require('./hooks/shop/useShopifyLink.js');
 var useProductList = require('./hooks/useProductList.js');
 var useSuspenseFetch = require('./hooks/useSuspenseFetch.js');
 var useSwatchesOptions = require('./hooks/useSwatchesOptions.js');
-var useInitialSwatchesOptions = require('./hooks/useInitialSwatchesOptions.js');
 var custom = require('./types/custom.js');
 var shop$1 = require('./types/shop.js');
 var appAPI = require('./types/appAPI.js');
@@ -159,7 +162,8 @@ exports.CollectionsDocument = collections_generated.CollectionsDocument;
 exports.PublishedThemePagesDocument = publishedThemePages_generated.PublishedThemePagesDocument;
 exports.ProductsDocument = products_generated.ProductsDocument;
 exports.StorePropertyDocument = storeProperty_generated.StorePropertyDocument;
-exports.PreviewPageDocument = previewPage_generated.PreviewPageDocument;
+exports.PreviewThemePageDocument = previewPage_generated.PreviewThemePageDocument;
+exports.ShopShopifyDocument = shopShopify_generated.ShopShopifyDocument;
 exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocument;
 exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
 exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
@@ -208,6 +212,10 @@ exports.getGradientBgrStyleForButton = background.getGradientBgrStyleForButton;
 exports.getStyleBackgroundByDevice = background.getStyleBackgroundByDevice;
 exports.getStyleBgColor = background.getStyleBgColor;
 exports.makeFixedBgAttachment = background.makeFixedBgAttachment;
+exports.composeBackgroundImageCss = backgroundImage.composeBackgroundImageCss;
+exports.getBgImageSourceByDevice = backgroundImage.getBgImageSourceByDevice;
+exports.getStyleBackgroundImageByDevice = backgroundImage.getStyleBackgroundImageByDevice;
+exports.getStyleBgImageSource = backgroundImage.getStyleBgImageSource;
 exports.composeTextColorCss = colors.composeTextColorCss;
 exports.getGlobalColorCSSProp = colors.getGlobalColorCSSProp;
 exports.getGlobalColorClass = colors.getGlobalColorClass;
@@ -237,6 +245,7 @@ exports.composePostionIconList = iconList.composePostionIconList;
 exports.isDefined = isDefined.isDefined;
 exports.composeGridLayout = layout.composeGridLayout;
 exports.convertOldLayout = layout.convertOldLayout;
+exports.getLayoutClasses = layout.getLayoutClasses;
 exports.gridToArrayRegex = layout.gridToArrayRegex;
 exports.optionLayoutStyle = layout.optionLayoutStyle;
 exports.makeAspectRatio = makeStyle.makeAspectRatio;
@@ -253,6 +262,7 @@ exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
 exports.removeNullUndefined = makeStyle.removeNullUndefined;
 exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
+exports.getAlignmentClasses = align.getAlignmentClasses;
 exports.checkInStock = variant.checkInStock;
 exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
 exports.getSelectedVariant = product.getSelectedVariant;
@@ -276,6 +286,7 @@ exports.styles = render.styles;
 exports.template = render.template;
 exports.composeShadowCss = shadow.composeShadowCss;
 exports.getResponsiveStyleShadow = shadow.getResponsiveStyleShadow;
+exports.getResponsiveStyleShadowWithoutState = shadow.getResponsiveStyleShadowWithoutState;
 exports.getStyleShadow = shadow.getStyleShadow;
 exports.getStyleShadowState = shadow.getStyleShadowState;
 exports.parseValueWithUnit = shadow.parseValueWithUnit;
@@ -286,6 +297,8 @@ exports.getAspectRatioGlobalSize = size.getAspectRatioGlobalSize;
 exports.getGlobalSizeGap = size.getGlobalSizeGap;
 exports.getHeightByShapeGlobalSize = size.getHeightByShapeGlobalSize;
 exports.getPaddingGlobalSize = size.getPaddingGlobalSize;
+exports.getPaddingStyleByDevice = size.getPaddingStyleByDevice;
+exports.getResponsiveStylePadding = size.getResponsiveStylePadding;
 exports.getValueByDevice = size.getValueByDevice;
 exports.getWidthByShapeGlobalSize = size.getWidthByShapeGlobalSize;
 exports.getWidthHeightGlobalSize = size.getWidthHeightGlobalSize;
@@ -294,6 +307,7 @@ exports.makeGlobalSizeIcon = size.makeGlobalSizeIcon;
 exports.makeStyleWithDefault = size.makeStyleWithDefault;
 exports.composeFallbackTypographyStyle = typography.composeFallbackTypographyStyle;
 exports.composeFontFamilyTypographyV2 = typography.composeFontFamilyTypographyV2;
+exports.composeTextHoverColorCss = typography.composeTextHoverColorCss;
 exports.composeTypography = typography.composeTypography;
 exports.composeTypographyAttr = typography.composeTypographyAttr;
 exports.composeTypographyClassName = typography.composeTypographyClassName;
@@ -302,6 +316,8 @@ exports.composeTypographyStyle = typography.composeTypographyStyle;
 exports.composeTypographyV2 = typography.composeTypographyV2;
 exports.composeTypographyV2Css = typography.composeTypographyV2Css;
 exports.genTypoClass = typography.genTypoClass;
+exports.useArticlesQuery = useArticlesQuery.useArticlesQuery;
+exports.useBlogsQuery = useArticlesQuery.useBlogsQuery;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;
@@ -323,30 +339,30 @@ exports.usePageType = shop.usePageType;
 exports.usePluginEnable = shop.usePluginEnable;
 exports.useStoreFront = shop.useStoreFront;
 exports.useSwatches = shop.useSwatches;
+exports.useTimezone = shop.useTimezone;
 exports.useCollectionQuery = useCollectionQuery.useCollectionQuery;
 exports.useCollectionsQuery = useCollectionsQuery.useCollectionsQuery;
 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;
 exports.useCartId = useCartId.default;
 exports.useCartLine = useCartLine.default;
 exports.useCartUI = useCartUI.default;
 exports.useCollection = useCollection.useCollection;
+exports.formatMoney = useFormatMoney.formatMoney;
+exports.shopifyPriceRounding = useFormatMoney.shopifyPriceRounding;
+exports.useFormatMoney = useFormatMoney.useFormatMoney;
 Object.defineProperty(exports, 'useId', {
 	enumerable: true,
 	get: function () { return react.useId; }
 });
+exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 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;
@@ -354,21 +370,23 @@ exports.useFeaturedImageGlobal = useProduct.useFeaturedImageGlobal;
 exports.useHasPreSelected = useProduct.useHasPreSelected;
 exports.useIsSyncProduct = useProduct.useIsSyncProduct;
 exports.useProduct = useProduct.useProduct;
+exports.useProductBundleDiscount = useProduct.useProductBundleDiscount;
 exports.useProductOfferDiscount = useProduct.useProductOfferDiscount;
 exports.useProductProperties = useProduct.useProductProperties;
+exports.useProductShopifyEditLink = useProduct.useProductShopifyEditLink;
 exports.useQuantity = useProduct.useQuantity;
 exports.useSelectedOption = useProduct.useSelectedOption;
 exports.useUniqProductID = useProduct.useUniqProductID;
 exports.useVariant = useProduct.useVariant;
 exports.useVariantOutStock = useProduct.useVariantOutStock;
 exports.useVariants = useProduct.useVariants;
+exports.useShopifyLink = useShopifyLink.useShopifyLink;
 exports.useProductList = useProductList.useProductList;
 exports.useProductListProducts = useProductList.useProductListProducts;
 exports.useProductListSettings = useProductList.useProductListSettings;
 exports.useProductListStyles = useProductList.useProductListStyles;
 exports.useSuspenseFetch = useSuspenseFetch.default;
 exports.useSwatchesOptions = useSwatchesOptions.default;
-exports.useInitialSwatchesOptions = useInitialSwatchesOptions.default;
 Object.defineProperty(exports, 'InteractionTargetEvent', {
 	enumerable: true,
 	get: function () { return custom.InteractionTargetEvent; }

package/dist/esm/components/AddOn.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useAddon } from '../contexts/AddonContext.js';
 import { usePluginEnable } from '../hooks/shop.js';

package/dist/esm/components/ComponentAnimation.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { memo } from 'react';
 import useApplyAnimation from '../hooks/animation/useApplyAnimation.js';

package/dist/esm/components/ComponentToolbarPreview.js

@@ -1,11 +1,12 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useState, useMemo, useCallback, useEffect } from 'react';
 import 'zustand';
 import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
-import { useShopStore } from '../contexts/ShopContext.js';
 import { usePageStore } from '../contexts/PageContext.js';
-import '@gem-sdk/adapter-shopify';
+import { useShopStore } from '../contexts/ShopContext.js';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'swr/infinite';
 import 'vanilla-lazyload';
@@ -32,7 +33,7 @@ const isSection = (el)=>{
 };
 const ComponentToolbarPreview = (props)=>{
     const isThemeSection = props.isThemeSection;
-    const isShopifySection = props.isShopifySection;
+    const isShopifySection = !!props.isShopifySection;
     const storefrontUrl = useShopStore((s)=>s.storefrontUrl);
     const editingPageType = useShopStore((s)=>s.pageType);
     const getParents = useBuilderPreviewStore((s)=>s.getParents);
@@ -43,7 +44,7 @@ const ComponentToolbarPreview = (props)=>{
     const [isShowParentRevert, setIsShowParentRevert] = useState(false);
     const [parents, setParents] = useState([]);
     const [deleteTooltipPosition, setDeleteTooltipPosition] = useState('top');
-    const [isDisableDelete, setIsUnableDelete] = useState(false);
+    const [isDisableDeleteInSaleFunelPage, setIsDisableDeleteInSaleFunelPage] = useState(false);
     const [isActiveToolbarComponent, setIsActiveToolbarComponent] = useState(false);
     const [productId, setProductId] = useState('');
     const [articleUid, setArticleUid] = useState('');
@@ -51,7 +52,7 @@ const ComponentToolbarPreview = (props)=>{
         width: '',
         text: ''
     });
-    const [isDisableDuplicate, setIsDisableDuplicate] = useState(false);
+    const [isDisableDuplicateInSaleFunnelPage, setIsDisableDuplicateInSaleFunnelPage] = useState(false);
     const interactionData = usePageStore((s)=>s.interactionData);
     const isSaleFunnelPage = useMemo(()=>editingPageType === 'POST_PURCHASE', [
         editingPageType
@@ -95,6 +96,9 @@ const ComponentToolbarPreview = (props)=>{
             return;
         }
     };
+    const getSectionNumber = ()=>{
+        return root?.childrens?.length || 0;
+    };
     const getDeleteTooltipPosition = useCallback(()=>{
         if (props.tag == 'Section') return 'bottom';
         const $toolbar = document.body.querySelector('#storefront')?.querySelector('[data-toolbar-active="true"]');
@@ -159,6 +163,20 @@ const ComponentToolbarPreview = (props)=>{
         isShowIconInteractionTarget,
         isShowIconInteractionTrigger
     ]);
+    const isDisableDelete = useMemo(()=>{
+        return isDisableDeleteInSaleFunelPage || isShopifySection;
+    }, [
+        isDisableDeleteInSaleFunelPage,
+        isShopifySection
+    ]);
+    const isDisableDuplicate = useMemo(()=>{
+        return isDisableDuplicateInSaleFunnelPage || isShopifySection || getSectionNumber() > SECTION_LIMIT && props.tag === 'Section';
+    }, [
+        getSectionNumber,
+        isDisableDuplicateInSaleFunnelPage,
+        isShopifySection,
+        props.tag
+    ]);
     // Get parents
     const onActiveComponent = useCallback((e)=>{
         const detail = e.detail;
@@ -172,9 +190,9 @@ const ComponentToolbarPreview = (props)=>{
             setIsActiveToolbarComponent(true);
             getDeleteTooltipPosition();
             if (isSaleFunnelPage) {
-                setIsUnableDelete(checkDisableDelete());
+                setIsDisableDeleteInSaleFunelPage(checkDisableDelete());
                 setTooltipText(getTooltipText());
-                setIsDisableDuplicate(checkDisableDuplicate());
+                setIsDisableDuplicateInSaleFunnelPage(checkDisableDuplicate());
             }
             const currentParents = getParents(props.uid).filter((parent)=>{
                 if (parent.uid === 'ROOT') return false;
@@ -214,9 +232,6 @@ const ComponentToolbarPreview = (props)=>{
     if (props.editorConfigs?.toolbar?.hide) {
         return null;
     }
-    const getSectionNumber = ()=>{
-        return root?.childrens?.length || 0;
-    };
     const getIndexSection = ()=>{
         if (props.tag !== 'Section') {
             return -1;
@@ -284,9 +299,6 @@ const ComponentToolbarPreview = (props)=>{
     const onDuplicate = (e)=>{
         e.preventDefault();
         e.stopPropagation();
-        if (getSectionNumber() >= SECTION_LIMIT && props.tag == 'Section') {
-            return false;
-        }
         const event = new CustomEvent('editor:toolbar:duplicate-component', {
             bubbles: true,
             detail: {
@@ -444,7 +456,7 @@ const ComponentToolbarPreview = (props)=>{
                                 "data-toolbar-name": true,
                                 children: [
                                     getSectionName(),
-                                    isActiveToolbarComponent && props.isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
+                                    isActiveToolbarComponent && isShopifySection && !props.isShopifyVisibility && /*#__PURE__*/ jsxs("svg", {
                                         "data-toolbar-visibility": true,
                                         width: "20",
                                         height: "20",
@@ -617,11 +629,12 @@ const ComponentToolbarPreview = (props)=>{
                                 })
                             }),
                             /*#__PURE__*/ jsx(Tooltip, {
-                                enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT,
-                                text: "Page has reached Shopify’s 25 section-limit",
+                                enable: props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isShopifySection,
+                                text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : 'Page has reached Shopify’s 25 section-limit',
                                 position: "bottom",
+                                width: "200px",
                                 "data-toolbar-duplicate": true,
-                                "data-toolbar-disable": props.tag == 'Section' && getSectionNumber() >= SECTION_LIMIT || isDisableDuplicate,
+                                "data-toolbar-disable": isDisableDuplicate,
                                 onClick: isDisableDuplicate ? undefined : (e)=>onDuplicate(e),
                                 "aria-hidden": "true",
                                 className: isDisableDuplicate ? '!gp-cursor-not-allowed' : '',
@@ -643,10 +656,11 @@ const ComponentToolbarPreview = (props)=>{
                                 onClick: (e)=>isDisableDelete ? null : onDelete(e),
                                 enable: isDisableDelete,
                                 "data-toolbar-disable": isDisableDelete,
+                                text: isShopifySection ? 'Disabled. Please edit in Shopify Editor' : tooltipText.text,
                                 width: tooltipText.width,
-                                text: tooltipText.text,
-                                position: deleteTooltipPosition,
+                                position: isShopifySection ? 'bottom' : deleteTooltipPosition,
                                 "aria-hidden": "true",
+                                className: isDisableDelete ? '!gp-cursor-not-allowed' : '',
                                 children: /*#__PURE__*/ jsx("svg", {
                                     width: "16",
                                     height: "16",

package/dist/esm/components/ComponentWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useEffect, isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';

package/dist/esm/components/Empty.js

@@ -1,3 +1,4 @@
+'use client';
 const Empty = ()=>null;
 
 export { Empty as default };

package/dist/esm/components/InteractionSuffix.js

@@ -1,8 +1,9 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import 'zustand';
 import 'react';
-import 'swr';
 import { usePageStore } from '../contexts/PageContext.js';
+import 'swr';
 import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'swr/infinite';

package/dist/esm/components/Render.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';

package/dist/esm/components/Render.liquid.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyleResponsive } from '../helpers/make-style.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -31,7 +32,7 @@ const componentIconList = [
 const componentUsingAdvanced = [
     'IconList'
 ];
-const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
+const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, additionalSettings, ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
@@ -70,6 +71,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     advanced: item.advanced,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     pageContext,
+                    ...additionalSettings,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
@@ -81,7 +83,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             builder,
                             components,
                             customProps,
-                            pageContext
+                            pageContext,
+                            ...additionalSettings
                         };
                     }),
                     children: !customRenderChildren.includes(item.tag) ? WrapRenderChildren({
@@ -93,7 +96,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             components,
                             customProps,
                             parentTag: item.tag,
-                            pageContext
+                            pageContext,
+                            ...additionalSettings
                         }))) : ''
                 });
             }, ()=>{
@@ -109,6 +113,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     pageContext,
+                    ...additionalSettings,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
@@ -130,6 +135,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                         cssClass: item?.advanced?.cssClass
                     },
                     pageContext,
+                    ...additionalSettings,
                     ...passProps,
                     builderAttrs: {
                         ...passProps.builderAttrs
@@ -141,7 +147,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             builder,
                             components,
                             customProps,
-                            pageContext
+                            pageContext,
+                            ...additionalSettings
                         };
                     }),
                     children: !customRenderChildren.includes(item.tag) ? WrapRenderChildren({
@@ -153,7 +160,8 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                             components,
                             customProps,
                             parentTag: item.tag,
-                            pageContext
+                            pageContext,
+                            ...additionalSettings
                         }))) : ''
                 });
             }, ()=>{
@@ -168,6 +176,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                         cssClass: item?.advanced?.cssClass
                     },
                     pageContext,
+                    ...additionalSettings,
                     isText: componentTexts.includes(item.tag) ? true : null,
                     style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps,

package/dist/esm/components/RenderBlock.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';

package/dist/esm/components/RenderCustomCode.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Head from 'next/head';
 import Script from 'next/script';

package/dist/esm/components/RenderPreview.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';

package/dist/esm/components/RenderSection.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { memo } from 'react';
 import { BuilderProvider } from '../contexts/BuilderContext.js';

package/dist/esm/components/ai-generator/AIContentGenerator.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AIIcon } from './icons/AIIcon.js';
@@ -14,8 +15,8 @@ import { useFlipPopup } from './hooks/useFlipPopup.js';
 import { useCheckingProductInside } from './hooks/useCheckingProductInside.js';
 import 'zustand';
 import { useShopStore } from '../../contexts/ShopContext.js';
-import '@gem-sdk/adapter-shopify';
 import 'swr';
+import '@gem-sdk/adapter-shopify';
 import 'swr/mutation';
 import 'swr/infinite';
 import 'vanilla-lazyload';

package/dist/esm/components/ai-generator/AIGenContentLoading.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { AIIcon } from './icons/AIIcon.js';

package/dist/esm/components/ai-generator/components/PickProduct.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useMemo, useEffect } from 'react';
 import { SearchIcon } from '../icons/SearchIcon.js';

package/dist/esm/components/ai-generator/components/ToneAndVoice.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { DropdownIcon, TickIcon } from '../icons/DropdownIcon.js';

package/dist/esm/components/ai-generator/icons/AIIcon.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 const AIIcon = ()=>{