@gem-sdk/core 1.53.0-dev.18 → 1.53.0-dev.185

package/dist/cjs/helpers/shadow.js

@@ -24,10 +24,11 @@ const getStyleShadow = (shadowStyle, isActiveState = false)=>{
     let { state } = shadowStyle || {};
     if (!state) state = 'normal';
     if (!styleAppliedFor || !value) return {};
-    if (typeof value.distance == 'undefined') return {};
+    const isNoneValue = value.type === 'none';
+    if (typeof value.distance == 'undefined' && !isNoneValue) return {};
     const { value: distance, unit: unitDistance } = parseValueWithUnit(`${value?.distance}`);
     return {
-        [`-${!isActiveState ? constant.stateMapping?.[state] || '' : ''}-${getShortname.getShortName(styleAppliedFor)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: 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)}${shadowStyle.screen ? `-${shadowStyle.screen}` : ''}`]: isEnableShadow && !isNoneValue ? `${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, screen)=>{
@@ -44,7 +45,7 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
     }
     return style;
 };
-const getResonsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
+const getResponsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
     if (!value) return undefined;
     if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
         return {
@@ -63,7 +64,7 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
 };
 
 exports.composeShadowCss = composeShadowCss;
-exports.getResonsiveStyleShadow = getResonsiveStyleShadow;
+exports.getResponsiveStyleShadow = getResponsiveStyleShadow;
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
 exports.parseValueWithUnit = parseValueWithUnit;

package/dist/cjs/helpers/third-party/appConfig.js

@@ -120,16 +120,64 @@ const WhatmoreShoppableVideosreelConfig = {
         appId: '20db8a72-315a-4364-8885-64219ee48303'
     }
 };
+const ProductOptionsCustomizerConfig = {
+    ProductOptionsCustomizer: {
+        appName: 'product-options-customizer',
+        appId: '6857ca6c-35eb-4b6f-9d58-a039f31d9406'
+    }
+};
+const AppointmentBookingCowlendarConfig = {
+    AppointmentBookingCowlendar: {
+        appName: 'cowlendar-booking',
+        appId: '6d8b8f6a-9b3c-42b8-b2e6-a758c38d45bf'
+    }
+};
+const SproutPlantTreesGrowSalesConfig = {
+    SproutPlantTreesGrowSales: {
+        appName: 'sprout-plant-trees',
+        appId: '7db5ee24-2195-4099-b98e-1547c600e4aa'
+    }
+};
+const InstasellShoppableInstagramConfig = {
+    InstasellShoppableInstagram: {
+        appName: 'instasell-instagram-gallery',
+        appId: '38d643ac-410a-4b2c-a727-6125ff08e444'
+    }
+};
+const BoldSubscriptionsConfig = {
+    BoldSubscriptions: {
+        appName: 'bold-subscriptions',
+        appId: '9ceb49f0-5fe5-4b5e-943d-f8af8985167d'
+    }
+};
+const GrowaveConfig = {
+    Growave: {
+        appName: 'growave-loyalty-wishlist',
+        appId: 'b3d2efbe-110a-4e27-84a8-1f2ed63996a4'
+    }
+};
+const KachingBundlesConfig = {
+    KachingBundles: {
+        appName: 'kaching-bundles',
+        appId: '6c637362-a106-4a32-94ac-94dcfd68cdb8'
+    }
+};
 
+exports.AppointmentBookingCowlendarConfig = AppointmentBookingCowlendarConfig;
+exports.BoldSubscriptionsConfig = BoldSubscriptionsConfig;
 exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
 exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
 exports.FastBundleBundlesDiscountsConfig = FastBundleBundlesDiscountsConfig;
 exports.FlyBundlesUpsellsFbtConfig = FlyBundlesUpsellsFbtConfig;
+exports.GrowaveConfig = GrowaveConfig;
+exports.InstasellShoppableInstagramConfig = InstasellShoppableInstagramConfig;
 exports.JunipProductReviewsUgcConfig = JunipProductReviewsUgcConfig;
+exports.KachingBundlesConfig = KachingBundlesConfig;
 exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
 exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
 exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
 exports.PreorderNowWodPresaleConfig = PreorderNowWodPresaleConfig;
+exports.ProductOptionsCustomizerConfig = ProductOptionsCustomizerConfig;
 exports.PumperBundlesVolumeDiscountConfig = PumperBundlesVolumeDiscountConfig;
 exports.RechargeSubscriptionsConfig = RechargeSubscriptionsConfig;
 exports.ReviewxpoProductReviewsAppConfig = ReviewxpoProductReviewsAppConfig;
@@ -137,6 +185,7 @@ exports.SelleasyConfig = SelleasyConfig;
 exports.ShopifyFormsConfig = ShopifyFormsConfig;
 exports.SimpleBundlesKitsConfig = SimpleBundlesKitsConfig;
 exports.SkioSubscriptionsYcS20Config = SkioSubscriptionsYcS20Config;
+exports.SproutPlantTreesGrowSalesConfig = SproutPlantTreesGrowSalesConfig;
 exports.SubifySubscriptionsConfig = SubifySubscriptionsConfig;
 exports.UnlimitedBundlesDiscountsConfig = UnlimitedBundlesDiscountsConfig;
 exports.WhatmoreShoppableVideosreelConfig = WhatmoreShoppableVideosreelConfig;

package/dist/cjs/helpers/third-party/appSetting.js

@@ -74,6 +74,13 @@ const ShopifyForms = {
         }
     }
 };
+const KachingBundles = {
+    KachingBundles: {
+        'app-block': {
+            product: '{{product}}'
+        }
+    }
+};
 const overrideSettings = (tag, currentSetting, appSetting)=>{
     switch(tag){
         case 'ShopifyForms':
@@ -95,6 +102,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                     selected_product: appSetting?.['productHandle'] || '{{ product }}'
                 };
             }
+        case 'WhatmoreShoppableVideosreel':
+            {
+                return {
+                    ...currentSetting,
+                    ['show-views']: appSetting?.showViews
+                };
+            }
         default:
             return currentSetting;
     }
@@ -217,50 +231,148 @@ const YotpoReviews = {
 const WhatmoreShoppableVideosreel = {
     WhatmoreShoppableVideosreel: {
         'app-block': {
-            "heading": "Watch and Buy",
-            "template-type": "template-f",
-            "show-views": "show",
-            "ui-theme": "round",
-            "color-primary": "#343434",
-            "color-secondary": "#343434",
-            "title-font": "poppins_n4",
-            "primary-font": "poppins_n4",
-            "title-font-size": 40,
-            "title-font-size-portrait": 24,
-            "landscape-padding": 40,
-            "top-bottom-padding": 20,
-            "scroll-video-tile-size": 80,
-            "scroll-video-tile-size-portrait": 80,
-            "min-height": 380
+            heading: 'Watch and Buy',
+            'template-type': 'template-f',
+            'show-views': 'show',
+            'ui-theme': 'round',
+            'color-primary': '#343434',
+            'color-secondary': '#343434',
+            'title-font': 'poppins_n4',
+            'primary-font': 'poppins_n4',
+            'title-font-size': 40,
+            'title-font-size-portrait': 24,
+            'landscape-padding': 40,
+            'top-bottom-padding': 20,
+            'scroll-video-tile-size': 80,
+            'scroll-video-tile-size-portrait': 80,
+            'min-height': 380
         },
         'app-block-banner': {
-            "template-type": "template-banner-a",
-            "ui-theme": "round",
-            "banner-video-tile-size": 80
+            'template-type': 'template-banner-a',
+            'ui-theme': 'round',
+            'banner-video-tile-size': 80
         },
         'app-block-collections': {
-            "collectionHeading": "W",
-            "template-type": "template-collections-b",
-            "ui-theme": "round",
-            "color-secondary": "#343434",
-            "primary-font": "poppins_n4",
-            "tile-size": 60,
-            "tile-size-portrait": 60,
-            "min-height": 250
+            collectionHeading: 'W',
+            'template-type': 'template-collections-b',
+            'ui-theme': 'round',
+            'color-secondary': '#343434',
+            'primary-font': 'poppins_n4',
+            'tile-size': 60,
+            'tile-size-portrait': 60,
+            'min-height': 250
         },
         'app-block-stories': {
-            "template-type": "template-stories-a",
-            "ui-theme": "round",
-            "color-primary": "#343434",
-            "color-secondary": "#343434",
-            "primary-font": "poppins_n4",
-            "stories-top-bottom-padding": 0,
-            "story-tile-size": 40,
-            "story-tile-size-desktop": 40
+            'template-type': 'template-stories-a',
+            'ui-theme': 'round',
+            'color-primary': '#343434',
+            'color-secondary': '#343434',
+            'primary-font': 'poppins_n4',
+            'stories-top-bottom-padding': 0,
+            'story-tile-size': 40,
+            'story-tile-size-desktop': 40
+        }
+    }
+};
+const ProductOptionsCustomizer = {
+    ProductOptionsCustomizer: {
+        'product-page-customizer': {
+            pc_container_size: 100,
+            pc_show_options_total: 'initial',
+            pc_customizations_total_text: 'Customizations Total:',
+            pc_show_preloader: 'hide',
+            pc_preloader_color: '',
+            pc_ignore_redirect_command: true,
+            pc_basic_label_text_color: '#000000',
+            pc_basic_label_font_size: 14,
+            pc_basic_label_bolden: 'unset',
+            pc_basic_label_space_above: 0,
+            pc_basic_option_background_color: '#FFFFFF',
+            pc_basic_option_text_color: '#000000',
+            pc_basic_option_border_color: '#000000',
+            pc_basic_option_border_style: 'solid',
+            pc_basic_option_border_width: 1,
+            pc_basic_option_curve_the_corners: 'none',
+            pc_basic_option_font_size: 14,
+            pc_basic_option_bolden: 'none',
+            pc_basic_option_width: 100,
+            pc_basic_option_space_above: 0,
+            pc_basic_option_space_below: 0,
+            pc_basic_option_space_inside: 10,
+            pc_advanced_custom_css: '',
+            pc_advanced_custom_js: '',
+            pc_show_image_swatch_preview: false
+        }
+    }
+};
+const AppointmentBookingCowlendar = {
+    AppointmentBookingCowlendar: {
+        'app-section': {
+            section_title: 'Services list',
+            section_type: 'services-list'
+        }
+    }
+};
+const SproutPlantTreesGrowSales = {
+    SproutPlantTreesGrowSales: {
+        badge: null,
+        'impact-banner': null
+    }
+};
+const InstasellShoppableInstagram = {
+    InstasellShoppableInstagram: {
+        'app-block': {
+            heading: 'InstaSell: Instagram Gallery+',
+            description: 'Showcase your Instagram Feed on your Shopify Storefront'
+        }
+    }
+};
+const BoldSubscriptions = {
+    BoldSubscriptions: {
+        'bsub-widget-block': {
+            default_subscribe: true,
+            primary_color: '#3b63ff',
+            secondary_color: '#7dba63',
+            background_color: '#f8f9f9',
+            border_radius: 4,
+            header_text: 'Purchase Options',
+            one_time_text: 'One-time Purchase',
+            recurring_text: 'Subscribe and Save',
+            prepaid_recurring_text: 'Prepaid Subscribe and Save',
+            discount_summary_text: '(Save {discount})',
+            discount_summary_plural_text: '(Save up to {discount})',
+            frequency_header: 'Delivery Frequency',
+            frequency_text: 'delivery',
+            prepaid_checkbox_label_text: 'Prepay for subscription',
+            billing_frequency_header: 'Billing Frequency',
+            billing_frequency_text: '{count} Orders',
+            delivery_frequency_discount_text: '({discount} off)',
+            billing_frequency_discount_text: '({discount} off)',
+            prepaid_total_text: 'Billed {price} today',
+            prepaid_continue_as_prepaid_text: 'Prepaid order will auto-renew after {count} orders',
+            prepaid_continue_as_standard_text: 'Becomes a regular subscription after {count} orders',
+            convertible_header: 'Converts to',
+            eligible_for_subscription_header: 'Eligible for Subscription',
+            initial_dynamic_discount_text: 'Save {initial_percent_discount}% ({initial_fixed_discount})',
+            subsequent_dynamic_discounts_text: '{subsequent_percent_discount}% ({subsequent_fixed_discount}) after {order_count} order(s)'
         }
     }
 };
+const Growave = {
+    Growave: {
+        'block.product.faveButton': {
+            option_button_class: ''
+        },
+        'block.product.reviewWidget': null,
+        'block.product.reviewAvgProfile': null,
+        'v2.product.reviewsMiniSlider': null
+    }
+};
 const composeSettingsByWidgetType = {
+    ...InstasellShoppableInstagram,
+    ...SproutPlantTreesGrowSales,
+    ...AppointmentBookingCowlendar,
+    ...ProductOptionsCustomizer,
     ...WhatmoreShoppableVideosreel,
     ...JunipProductReviewsUgc,
     ...FlyBundlesUpsellsFbt,
@@ -280,7 +392,10 @@ const composeSettingsByWidgetType = {
     ...LoyaltyRewardsReferrals,
     ...SubifySubscriptions,
     ...SelleasyWidget,
-    ...YotpoReviews
+    ...YotpoReviews,
+    ...BoldSubscriptions,
+    ...Growave,
+    ...KachingBundles
 };
 
 exports.composeSettingsByWidgetType = composeSettingsByWidgetType;

package/dist/cjs/helpers/third-party/constant.js

@@ -22,7 +22,14 @@ const mapShopifyAppMeta = {
     ...appConfig.JunipProductReviewsUgcConfig,
     ...appConfig.PreorderNowWodPresaleConfig,
     ...appConfig.YotpoReviewsV3UgcConfig,
-    ...appConfig.WhatmoreShoppableVideosreelConfig
+    ...appConfig.WhatmoreShoppableVideosreelConfig,
+    ...appConfig.ProductOptionsCustomizerConfig,
+    ...appConfig.AppointmentBookingCowlendarConfig,
+    ...appConfig.SproutPlantTreesGrowSalesConfig,
+    ...appConfig.InstasellShoppableInstagramConfig,
+    ...appConfig.BoldSubscriptionsConfig,
+    ...appConfig.GrowaveConfig,
+    ...appConfig.KachingBundlesConfig
 };
 const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
 

package/dist/cjs/helpers/third-party/getAppBlockConfig.js

@@ -3,10 +3,17 @@
 var appSetting = require('./appSetting.js');
 var getAppBlockType = require('./getAppBlockType.js');
 
+const listAppUpdateNewVersion = [
+    'Growave'
+];
 const getAppBlockConfig = (tag, appBlockId, settings)=>{
+    let widgetType = settings?.widgetType;
+    if (listAppUpdateNewVersion.includes(tag)) {
+        widgetType = settings?.widgetTypeV2;
+    }
     const appBlockType = getAppBlockType.getAppBlockType({
         tag,
-        widgetType: settings?.widgetType
+        widgetType
     });
     const settingByWidget = appSetting.composeSettingsByWidgetType[tag][settings?.widgetType];
     const appSettings = appSetting.overrideSettings(tag, settingByWidget, settings);

package/dist/cjs/helpers/typography.js

@@ -84,7 +84,7 @@ const composeFontFamilyTypographyV2 = (value)=>{
     if (typeof fontFamily === 'string') {
         return getFontUsedByTypographyV2({
             fontFamily,
-            fallbackFontFamily: value?.fallbackFontFamily
+            fallbackFontFamily: getFallbackFontFamily(value?.fallbackFontFamily, type)
         });
     }
     if (typeof fontFamily === 'object' && typeof fontFamily?.value === 'string') {
@@ -94,12 +94,15 @@ const composeFontFamilyTypographyV2 = (value)=>{
             default:
                 return getFontUsedByTypographyV2({
                     fontFamily: fontFamily.value,
-                    fallbackFontFamily: composeFallbackTypographyStyle(type ?? 'heading')
+                    fallbackFontFamily: getFallbackFontFamily(value?.fallbackFontFamily, type)
                 });
         }
     }
     return;
 };
+const getFallbackFontFamily = (fallbackFontFamilyDefault, type)=>{
+    return fallbackFontFamilyDefault || composeFallbackTypographyStyle(type ?? 'heading');
+};
 const getFontUsedByTypographyV2 = ({ fontFamily, fallbackFontFamily })=>{
     if (fontFamily) {
         return `var(--g-font-${fontFamily?.replace(/ /g, '-')}, '${fontFamily}'), ${fallbackFontFamily}`;

package/dist/cjs/hooks/animation/useAnimationConfig.js

@@ -11,10 +11,11 @@ const useAnimationConfig = (props)=>{
     ]);
     const getAnimationConfig = react.useCallback(()=>{
         const { trigger, triggerConfig } = configByDevices;
-        const { animation, setting } = triggerConfig[trigger];
+        const { animation, setting } = triggerConfig?.[trigger] ?? {};
         return {
             type: animation,
-            setting: setting[animation]
+            setting: setting?.[animation],
+            reverse: trigger === "hidden"
         };
     }, [
         configByDevices

package/dist/cjs/hooks/animation/useApplyAnimation.js

@@ -25,13 +25,13 @@ const useApplyAnimation = ({ props })=>{
         setAnimationOnFinish,
         setToolbarActive
     });
-    const generateAnimation = react.useCallback(({ target, setting, type })=>{
-        return animation[type](target, setting);
+    const generateAnimation = react.useCallback(({ target, setting, type, reverse })=>{
+        return animation[type](target, setting, reverse);
     }, [
         animation
     ]);
     const initListAnimations = react.useCallback(()=>{
-        const { type, setting } = getAnimationConfig();
+        const { type, setting, reverse } = getAnimationConfig();
         if (!type || type === animations.AnimationType.None || !targetObjects.current.length) {
             cancelAnimation();
             return;
@@ -39,9 +39,9 @@ const useApplyAnimation = ({ props })=>{
         const listAnimations = targetObjects.current.map((item)=>generateAnimation({
                 type,
                 setting,
-                target: item.target
+                target: item.target,
+                reverse
             }));
-        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ 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 publishedShopMetas = require('./graphql/queries/published-shop-metas.js');
 var collectionDetailFilter_generated = require('./graphql/queries/collection-detail-filter.generated.js');
 var collection_generated = require('./graphql/queries/collection.generated.js');
 var collections_generated = require('./graphql/queries/collections.generated.js');
@@ -62,6 +63,7 @@ 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 variant = require('./helpers/variant.js');
 var product = require('./helpers/product.js');
 var query = require('./helpers/query.js');
 var radius = require('./helpers/radius.js');
@@ -150,6 +152,7 @@ exports.useArticleListStore = ArticleListContext.useArticleListStore;
 exports.ArticleProvider = ArticleContext.ArticleProvider;
 exports.useArticleStore = ArticleContext.useArticleStore;
 exports.PageViewUpDocument = pageViewUp_generated.PageViewUpDocument;
+exports.PublishedShopMetasDocument = publishedShopMetas.PublishedShopMetasDocument;
 exports.CollectionDetailFilterDocument = collectionDetailFilter_generated.CollectionDetailFilterDocument;
 exports.CollectionDocument = collection_generated.CollectionDocument;
 exports.CollectionsDocument = collections_generated.CollectionsDocument;
@@ -249,6 +252,7 @@ exports.makeStyleState = makeStyle.makeStyleState;
 exports.makeWidth = makeStyle.makeWidth;
 exports.removeNullUndefined = makeStyle.removeNullUndefined;
 exports.convertTextAlignToJustify = align.convertTextAlignToJustify;
+exports.checkInStock = variant.checkInStock;
 exports.checkAvailableVariantInStock = product.checkAvailableVariantInStock;
 exports.getSelectedVariant = product.getSelectedVariant;
 exports.parseSelectedOption = product.parseSelectedOption;
@@ -270,7 +274,7 @@ exports.removeUndefinedValuesFromObject = render.removeUndefinedValuesFromObject
 exports.styles = render.styles;
 exports.template = render.template;
 exports.composeShadowCss = shadow.composeShadowCss;
-exports.getResonsiveStyleShadow = shadow.getResonsiveStyleShadow;
+exports.getResponsiveStyleShadow = shadow.getResponsiveStyleShadow;
 exports.getStyleShadow = shadow.getStyleShadow;
 exports.getStyleShadowState = shadow.getStyleShadowState;
 exports.parseValueWithUnit = shadow.parseValueWithUnit;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -56,7 +56,31 @@ const ComponentToolbarPreview = (props)=>{
         editingPageType
     ]);
     const isSelectOnPage = useMemo(()=>interactionData?.isSelectOnPage, [
-        interactionData
+        interactionData?.isSelectOnPage
+    ]);
+    const settingType = useMemo(()=>interactionData?.settingType, [
+        interactionData?.settingType
+    ]);
+    const isShowIconInteractionTarget = useMemo(()=>{
+        return interactionData?.item?.targets?.find((t)=>t.uid === props.uid && t?.type !== 'PAGE') && settingType === 'TARGET';
+    }, [
+        interactionData?.item?.targets,
+        props.uid,
+        settingType
+    ]);
+    const isShowIconInteractionTrigger = useMemo(()=>{
+        return interactionData?.item?.self?.uid === props.uid && interactionData?.item?.self.type !== 'PAGE' && settingType === 'TRIGGER';
+    }, [
+        interactionData?.item?.self?.type,
+        interactionData?.item?.self?.uid,
+        props.uid,
+        settingType
+    ]);
+    const isDisplayIconDrag = useMemo(()=>{
+        return !isShowIconInteractionTarget && !isShowIconInteractionTrigger;
+    }, [
+        isShowIconInteractionTarget,
+        isShowIconInteractionTrigger
     ]);
     const { checkDisableDelete, getTooltipText, checkDisableDuplicate } = usePostPurchase(props.uid, props.tag || '');
     const editProductElementList = [
@@ -334,7 +358,6 @@ const ComponentToolbarPreview = (props)=>{
         if (isShopifySection || isThemeSection && !isThemeSectionEditor) return false;
         return ableGenerateContentElements.includes(tag);
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -349,7 +372,39 @@ const ComponentToolbarPreview = (props)=>{
                         onClick: (e)=>onShowParent(e),
                         "aria-hidden": "true",
                         children: [
-                            /*#__PURE__*/ jsx("div", {
+                            isShowIconInteractionTrigger && /*#__PURE__*/ jsx("div", {
+                                className: "gp-hidden gp-w-[12px] interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsx("svg", {
+                                    width: "12",
+                                    height: "13",
+                                    viewBox: "0 0 12 13",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsx("path", {
+                                        "fill-rule": "evenodd",
+                                        "clip-rule": "evenodd",
+                                        d: "M4.36799 0.430523C4.51596 0.205675 4.76709 0.0703125 5.03626 0.0703125H9.88576C10.2042 0.0703125 10.395 0.424378 10.2198 0.69034L8.36968 3.4992C8.28209 3.63218 8.37747 3.80922 8.53671 3.80922H10.749C11.1111 3.80922 11.2869 4.25204 11.0233 4.50036L3.03971 12.0217C2.7572 12.2878 2.29932 12.0361 2.37262 11.655L3.27994 6.93698C3.30366 6.81364 3.20915 6.69921 3.08354 6.69921H0.984651C0.66625 6.69921 0.475479 6.34529 0.650515 6.07932L4.36799 0.430523Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isShowIconInteractionTarget && /*#__PURE__*/ jsx("div", {
+                                className: "gp-hidden gp-w-[14px] interaction-use-custom-element",
+                                children: /*#__PURE__*/ jsx("svg", {
+                                    width: "16",
+                                    height: "16",
+                                    viewBox: "0 0 16 16",
+                                    fill: "none",
+                                    xmlns: "http://www.w3.org/2000/svg",
+                                    children: /*#__PURE__*/ jsx("path", {
+                                        "fill-rule": "evenodd",
+                                        "clip-rule": "evenodd",
+                                        d: "M7.32785 3.66159C7.87459 3.58351 8.25451 3.077 8.17643 2.53026C8.09836 1.98353 7.59184 1.6036 7.0451 1.68168C3.92866 2.12673 1.5332 4.80488 1.5332 8.04424C1.5332 11.594 4.41085 14.4716 7.9606 14.4716C11.1706 14.4716 13.8294 12.1194 14.3105 9.04446C14.3959 8.49881 14.0227 7.98727 13.4771 7.9019C12.9314 7.81654 12.4199 8.18967 12.3345 8.73531C12.0034 10.852 10.1702 12.4716 7.9606 12.4716C5.51541 12.4716 3.5332 10.4894 3.5332 8.04424C3.5332 5.81431 5.18273 3.96793 7.32785 3.66159ZM10.3432 1.97548C10.6232 1.69551 11.102 1.83654 11.1855 2.22355L11.6106 4.19339C11.6313 4.28936 11.7063 4.36432 11.8023 4.38503L13.7721 4.81013C14.1591 4.89365 14.3001 5.37247 14.0202 5.65243L12.3432 7.32945C12.1244 7.54819 11.8168 7.65338 11.5099 7.61436L10.1528 7.44178C9.84592 7.40276 9.53827 7.50795 9.31953 7.72669L8.66719 8.37903C8.35477 8.69145 7.86633 8.70954 7.57623 8.41943C7.28613 8.12933 7.30421 7.64089 7.61663 7.32847L8.26898 6.67613C8.48771 6.45739 8.5929 6.14974 8.55388 5.84287L8.38131 4.48575C8.34228 4.17888 8.44748 3.87123 8.66621 3.6525L10.3432 1.97548ZM8.19853 5.1916C8.35319 5.72179 8.04877 6.27697 7.51858 6.43163C6.83078 6.63226 6.32988 7.2683 6.32988 8.01873C6.32988 8.9316 7.06991 9.67164 7.98279 9.67164C8.73014 9.67164 9.36406 9.17486 9.56743 8.49131C9.72492 7.96195 10.2817 7.6605 10.8111 7.81799C11.3404 7.97548 11.6419 8.53227 11.4844 9.06163C11.0356 10.57 9.63916 11.6716 7.98279 11.6716C5.96535 11.6716 4.32988 10.0362 4.32988 8.01873C4.32988 6.35558 5.44054 4.95445 6.95851 4.51165C7.4887 4.35699 8.04387 4.66141 8.19853 5.1916Z",
+                                        fill: "#F9F9F9"
+                                    })
+                                })
+                            }),
+                            isDisplayIconDrag && /*#__PURE__*/ jsx("div", {
                                 "data-toolbar-icon-drag": true,
                                 children: /*#__PURE__*/ jsxs("svg", {
                                     width: "16",
@@ -606,7 +661,6 @@ const ComponentToolbarPreview = (props)=>{
                         ]
                     }),
                     /*#__PURE__*/ jsx(InteractionSuffix, {
-                        tag: props.tag,
                         uid: props.uid
                     })
                 ]