@gem-sdk/core 1.48.0-dev.0 → 1.48.0-dev.102

package/dist/cjs/helpers/typography.js

@@ -28,7 +28,8 @@ const composeTypographyV2Css = (typography, isImportant)=>{
     const composeImportant = isImportant ? '!important' : '';
     return `
   ${fontFamily ? `font-family: ${composeFontFamilyTypographyV2({
-        fontFamily
+        fontFamily,
+        type: typography?.type
     })} ${composeImportant}` : ''};
   ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant}` : ''};
   ${bold ? `font-weight: bold ${composeImportant}` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant}` : ''};
@@ -76,8 +77,10 @@ const composeTypographyV2 = (value, attrs)=>{
     });
 };
 const composeFontFamilyTypographyV2 = (value)=>{
-    const fontFamily = value?.fontFamily;
-    if (!fontFamily) return;
+    const { fontFamily, isCustom, fallbackFontFamily, type } = value || {};
+    if (!fontFamily) {
+        return isCustom ? fallbackFontFamily : undefined;
+    }
     if (typeof fontFamily === 'string') {
         return getFontUsedByTypographyV2({
             fontFamily,
@@ -91,7 +94,7 @@ const composeFontFamilyTypographyV2 = (value)=>{
             default:
                 return getFontUsedByTypographyV2({
                     fontFamily: fontFamily.value,
-                    fallbackFontFamily: value?.fallbackFontFamily
+                    fallbackFontFamily: composeFallbackTypographyStyle(type ?? 'heading')
                 });
         }
     }
@@ -116,18 +119,10 @@ const composeTypographyAttr = (attrs)=>{
     });
 };
 const composeTypographyClassName = (typo, typography)=>{
-    return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
+    return typo ? typo?.type && !isCustomTypo(typo.custom) ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
 };
 const composeFallbackTypographyStyle = (tag)=>{
-    if ([
-        'heading',
-        'heading-1',
-        'heading-2',
-        'heading-3',
-        'heading-4',
-        'heading-5',
-        'heading-6'
-    ].includes(tag)) {
+    if (tag.toLocaleLowerCase().includes('heading')) {
         return 'var(--g-font-heading, heading)';
     }
     return 'var(--g-font-body, body)';
@@ -137,7 +132,8 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
         const fallbackFontFamily = composeFallbackTypographyStyle(typo.type ?? 'heading');
         const customTypo = {
             ...typo.custom,
-            fallbackFontFamily: fallbackFontFamily
+            fallbackFontFamily: fallbackFontFamily,
+            isCustom: isCustomTypo(typo.custom)
         };
         return {
             ...composeTypographyV2(customTypo, typo.attrs),
@@ -148,6 +144,13 @@ const composeTypographyStyle = (typo, typography, disableAttr)=>{
         ...!typography?.type ? composeTypography(typography?.custom) : {}
     };
 };
+const isCustomTypo = (customTypo)=>{
+    return customTypo && Object.keys(customTypo).length > 1 || customTypo && Object.keys(customTypo).length === 1 && !customTypo.fontSize;
+};
+const getSeoTagFromTypo = (typo)=>{
+    if (!typo?.attrs?.seoTagValue) return 'div';
+    return typo?.attrs?.seoTagValue;
+};
 
 exports.composeFallbackTypographyStyle = composeFallbackTypographyStyle;
 exports.composeFontFamilyTypographyV2 = composeFontFamilyTypographyV2;
@@ -159,3 +162,4 @@ exports.composeTypographyStyle = composeTypographyStyle;
 exports.composeTypographyV2 = composeTypographyV2;
 exports.composeTypographyV2Css = composeTypographyV2Css;
 exports.genTypoClass = genTypoClass;
+exports.getSeoTagFromTypo = getSeoTagFromTypo;

package/dist/cjs/index.js

@@ -30,6 +30,7 @@ var LibraryTemplate_generated = require('./graphql-app-api/queries/LibraryTempla
 var ThemePage_generated = require('./graphql-app-api/queries/ThemePage.generated.js');
 var SaleFunnelDiscounts_generated = require('./graphql-app-api/queries/SaleFunnelDiscounts.generated.js');
 var LibrarySaleFunnelDiscount_generated = require('./graphql-app-api/queries/LibrarySaleFunnelDiscount.generated.js');
+var ShopLibraryPage_generated = require('./graphql-app-api/queries/ShopLibraryPage.generated.js');
 var borders = require('./helpers/borders.js');
 var carousel = require('./helpers/carousel.js');
 var cls = require('./helpers/cls.js');
@@ -108,6 +109,7 @@ var getProduct = require('./helpers/queries/get-product.js');
 var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
 var getAppBlocks = require('./helpers/third-party/getAppBlocks.js');
 var addAppBlockId = require('./helpers/third-party/addAppBlockId.js');
+var index = require('./helpers/interaction/index.js');
 
 
 
@@ -159,6 +161,7 @@ exports.LibraryTemplateDocument = LibraryTemplate_generated.LibraryTemplateDocum
 exports.ThemePageDocument = ThemePage_generated.ThemePageDocument;
 exports.SaleFunnelDiscountsDocument = SaleFunnelDiscounts_generated.SaleFunnelDiscountsDocument;
 exports.LibrarySaleFunnelDocument = LibrarySaleFunnelDiscount_generated.LibrarySaleFunnelDocument;
+exports.ShopLibraryPageDocument = ShopLibraryPage_generated.ShopLibraryPageDocument;
 exports.composeBorderCss = borders.composeBorderCss;
 exports.getBorderRadiusStyle = borders.getBorderRadiusStyle;
 exports.getBorderStyle = borders.getBorderStyle;
@@ -267,6 +270,7 @@ exports.removeUndefinedValuesFromObject = render.removeUndefinedValuesFromObject
 exports.styles = render.styles;
 exports.template = render.template;
 exports.composeShadowCss = shadow.composeShadowCss;
+exports.getResonsiveStyleShadow = shadow.getResonsiveStyleShadow;
 exports.getStyleShadow = shadow.getStyleShadow;
 exports.getStyleShadowState = shadow.getStyleShadowState;
 exports.parseValueWithUnit = shadow.parseValueWithUnit;
@@ -293,6 +297,7 @@ exports.composeTypographyStyle = typography.composeTypographyStyle;
 exports.composeTypographyV2 = typography.composeTypographyV2;
 exports.composeTypographyV2Css = typography.composeTypographyV2Css;
 exports.genTypoClass = typography.genTypoClass;
+exports.getSeoTagFromTypo = typography.getSeoTagFromTypo;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;
@@ -403,3 +408,4 @@ exports.getProduct = getProduct.getProduct;
 exports.getProductBySlug = getProductBySlug.getProductBySlug;
 exports.getAppBlocks = getAppBlocks.getAppBlocks;
 exports.addAppBlockId = addAppBlockId.addAppBlockId;
+exports.useInteraction = index.useInteraction;

package/dist/cjs/types/animations.js

@@ -32,6 +32,8 @@ exports.AnimationTriggerType = void 0;
 (function(AnimationTriggerType) {
     AnimationTriggerType["Appear"] = 'appear';
     AnimationTriggerType["Hover"] = 'hover';
+    AnimationTriggerType["Hidden"] = 'hidden';
+    AnimationTriggerType["AppearByTrigger"] = 'appearByTrigger';
 })(exports.AnimationTriggerType || (exports.AnimationTriggerType = {}));
 exports.AnimationZoomDirectionType = void 0;
 (function(AnimationZoomDirectionType) {

package/dist/cjs/types/custom.js

@@ -22,6 +22,7 @@ exports.InteractionTargetEvent = void 0;
     InteractionTargetEvent[InteractionTargetEvent['gp:change-text-value'] = 17] = 'gp:change-text-value';
     InteractionTargetEvent[InteractionTargetEvent['gp:toggle-popup-open'] = 18] = 'gp:toggle-popup-open';
     InteractionTargetEvent[InteractionTargetEvent['gp:show-or-hide'] = 19] = 'gp:show-or-hide';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-banner'] = 20] = 'gp:change-banner';
 })(exports.InteractionTargetEvent || (exports.InteractionTargetEvent = {}));
 exports.InteractionTriggerEvent = void 0;
 (function(InteractionTriggerEvent) {

package/dist/esm/components/ComponentToolbarPreview.js

@@ -450,6 +450,7 @@ const ComponentToolbarPreview = (props)=>{
                         }
                         return /*#__PURE__*/ jsxs("div", {
                             "data-toolbar-parent": true,
+                            "data-component-tag": parent.tag,
                             "data-parent-uid": parent.uid,
                             "data-toolbar-theme-section": isThemeSectionEditor,
                             "data-toolbar-parent-revert": isShowParentRevert,

package/dist/esm/components/InteractionSuffix.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import 'zustand';
 import 'swr';
@@ -12,10 +12,13 @@ import 'react-transition-group';
 import '@gem-sdk/core';
 import 'classnames';
 import 'dayjs';
+import { useInteraction } from '../helpers/interaction/index.js';
 import '../helpers/convert.js';
 
 const InteractionSuffix = ({ tag, uid })=>{
+    const { closeSelectOnPage } = useInteraction();
     const currentInteraction = usePageStore((s)=>s.interactionData?.item);
+    const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const isCurrentInteractionTarget = useMemo(()=>{
         return currentInteraction?.targets?.find((t)=>t.uid === uid);
     }, [
@@ -44,10 +47,15 @@ const InteractionSuffix = ({ tag, uid })=>{
         isCurrentInteractionTarget
     ]);
     if (!isDisplay) {
-        return undefined;
+        return /*#__PURE__*/ jsx(Fragment, {});
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
+            isSelectOnPage && /*#__PURE__*/ jsx("button", {
+                className: "gp-bg-[#F4F4F4]  gp-px-2  gp-py-0.5 gp-rounded-lg gp-text-[#212121] gp-text-sm gp-font-medium gp-hidden interaction-use-element-btn",
+                onClick: closeSelectOnPage,
+                children: "Use element"
+            }),
             /*#__PURE__*/ jsx("div", {
                 className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
             }),

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

@@ -72,8 +72,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     pageContext,
                     ...passProps,
                     builderAttrs: {
-                        ...passProps.builderAttrs,
-                        'data-id': uid
+                        ...passProps.builderAttrs
                     },
                     rawChildren: item.childrens.map((id)=>{
                         return {
@@ -112,8 +111,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     pageContext,
                     ...passProps,
                     builderAttrs: {
-                        ...passProps.builderAttrs,
-                        'data-id': uid
+                        ...passProps.builderAttrs
                     }
                 });
             });
@@ -134,8 +132,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     pageContext,
                     ...passProps,
                     builderAttrs: {
-                        ...passProps.builderAttrs,
-                        'data-id': uid
+                        ...passProps.builderAttrs
                     },
                     rawChildren: item.childrens.map((id)=>{
                         return {
@@ -175,8 +172,7 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
                     style: componentIconList.includes(item.tag) ? style : null,
                     ...passProps,
                     builderAttrs: {
-                        ...passProps.builderAttrs,
-                        'data-id': uid
+                        ...passProps.builderAttrs
                     }
                 });
             })}
@@ -215,7 +211,7 @@ const RenderCustomCode = (item)=>{
 };
 const appendAnimation = (props, liquid)=>{
     const { advanced, tag } = props;
-    const { animation, op: opacity } = advanced ?? {};
+    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction = true } = advanced ?? {};
     const getAnimationType = (settings, type)=>{
         return settings?.triggerConfig?.[type]?.animation ?? 'none';
     };
@@ -229,7 +225,9 @@ const appendAnimation = (props, liquid)=>{
     const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
     const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
     const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
-    const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
+    const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none' || !!hasAnimationInteraction;
+    const enableAnimationWhenInit = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
+    if (!enableAnimation) return liquid;
     const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
             'shake',
             'none'
@@ -241,11 +239,12 @@ const appendAnimation = (props, liquid)=>{
     };
     return template`
   <gp-animation
+    display-init="${!displayInitInteraction ? 'hide' : 'show'}"
     gp-data='${JSON.stringify({
         config: animation,
         tag,
         opacity,
-        isEnableInit: enableAnimation
+        notEnableAnimationWhenInit: !enableAnimationWhenInit
     })}'
     style="${{
         display: 'contents'

package/dist/esm/graphql/fragments/product-little.generated.js

@@ -4,6 +4,7 @@
   title
   description
   descriptionHtml
+  createdAt
   handle
   averageRating
   isStorefront

package/dist/esm/graphql/fragments/published-theme-page.generated.js

@@ -26,6 +26,10 @@
   themePageCustomFonts {
     ...CustomFontSelect
   }
+  interaction {
+    id
+    value
+  }
 }
     `;
 const PreviewThemePageSelect = `
@@ -53,6 +57,10 @@ const PreviewThemePageSelect = `
     themePageCustomCode {
       ...CustomCodeSelect
     }
+    interaction {
+    id
+    value
+  }
   }
 `;
 

package/dist/esm/graphql-app-api/queries/ShopLibraryPage.generated.js

@@ -0,0 +1,15 @@
+/* eslint-disable */ const ShopLibraryPageDocument = `
+    query ShopLibraryPage($shopLibraryPageId: ID!) {
+  shopLibraryPage(id: $shopLibraryPageId) {
+    id
+    name
+    sectionPosition
+    shopLibrarySections {
+      id
+      component
+    }
+  }
+}
+    `;
+
+export { ShopLibraryPageDocument };

package/dist/esm/helpers/animations.js

@@ -44,7 +44,7 @@ const animations = ()=>{
         });
         return cloneOptions;
     };
-    const slide = (target, options)=>{
+    const slide = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { direction, distance } = normalizedOptions;
         const coordinate = [
@@ -65,11 +65,11 @@ const animations = ()=>{
                 transform: `translate${coordinate}(0)`
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
-    const fade = (target, options)=>{
+    const fade = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const preset = [
             {
@@ -79,7 +79,7 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
@@ -99,7 +99,7 @@ const animations = ()=>{
             easing: EASING[easing ?? 'linear']
         };
     };
-    const zoom = (target, options)=>{
+    const zoom = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { scale, zoomDirection, isFade } = normalizedOptions;
         const [i1, i2] = scale.in;
@@ -125,7 +125,7 @@ const animations = ()=>{
             }
         ];
         const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
-        return generateAnimationInstance(target, zoomPreset, {
+        return generateAnimationInstance(target, reverse ? zoomPreset.reverse() : zoomPreset, {
             ...generateOptions(normalizedOptions, 700)
         });
     };

package/dist/esm/helpers/background.js

@@ -119,7 +119,7 @@ const getBgAttachmentByDevice = (background, device)=>{
     return background?.[device]?.attachment;
 };
 const composeBackgroundCss = (backgroundColor)=>{
-    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)} !important;` : undefined}`;
+    return `${backgroundColor ? `background-color: ${getSingleColorVariable(backgroundColor)};` : undefined}`;
 };
 const makeFixedBgAttachment = (background)=>{
     if (!background) return;

package/dist/esm/helpers/colors.js

@@ -112,9 +112,9 @@ const getGlobalColorResponsiveStyle = (type, data)=>{
         }
     }));
 };
-const getGlobalColorStateStyle = (type, data)=>{
+const getGlobalColorStateStyle = (type, data, states)=>{
     if (!data) return {};
-    return Object.fromEntries(Object.entries(data).map(([state, value])=>{
+    return Object.fromEntries(Object.entries(data).filter(([state])=>states?.length ? states?.includes(state) : true).map(([state, value])=>{
         if (state === 'active') return [];
         return [
             `-${stateMapping?.[state] || ''}-${type}`,

package/dist/esm/helpers/compose-advance-style.js

@@ -3,7 +3,7 @@ import { isColor } from './colors.js';
 import { layoutComponent } from './constant.js';
 import { makeStyleKey } from './make-style.js';
 import { composeRadius, getCornerCSSFromGlobal } from './radius.js';
-import { getStyleShadowState, getStyleShadow } from './shadow.js';
+import { getResonsiveStyleShadow, getStyleShadowState, getStyleShadow } from './shadow.js';
 
 const composeSpacing = ({ source, spacing, type, suffix = '' })=>{
     const { top, left, bottom, right } = spacing;
@@ -99,6 +99,9 @@ function composeAdvanceStyle(data, tag, pageType) {
                         if (attr === 'rounded') {
                             Object.assign(styles, composeRadius(value));
                         }
+                        if (attr === 'boxShadow') {
+                            Object.assign(styles, getResonsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                        }
                         if (composeAttr === 'desktop') {
                             switch(attr){
                                 case 'padding':
@@ -213,20 +216,20 @@ function composeAdvanceStyle(data, tag, pageType) {
                 }));
             }
         }
-        if (attr === 'blockPadding' && pageType === "POST_PURCHASE") {
+        if (attr === 'blockPadding' && pageType === 'POST_PURCHASE') {
             const valueMapped = postPurchasePaddingMapping[value];
             styles[`--pb`] = getAttrValue(attr, valueMapped, tag);
             styles[`--pt`] = getAttrValue(attr, valueMapped, tag);
             styles[`--mb`] = '0px';
             styles[`--mt`] = '0px';
         }
-        if (attr === 'inlinePadding' && pageType === "POST_PURCHASE") {
+        if (attr === 'inlinePadding' && pageType === 'POST_PURCHASE') {
             const valueMapped = postPurchasePaddingMapping[value];
             styles[`--pl`] = getAttrValue(attr, valueMapped, tag);
             styles[`--pr`] = getAttrValue(attr, valueMapped, tag);
         }
     });
-    const advancedPostPurchaseStyles = pageType === "POST_PURCHASE" ? composeAdvanceStyleForPostPurchase(data, tag) : {};
+    const advancedPostPurchaseStyles = pageType === 'POST_PURCHASE' ? composeAdvanceStyleForPostPurchase(data, tag) : {};
     return {
         ...styles,
         ...advancedPostPurchaseStyles

package/dist/esm/helpers/interaction/index.js

@@ -0,0 +1,64 @@
+import 'react/jsx-runtime';
+import 'zustand';
+import 'react';
+import 'swr';
+import { usePageStore } from '../../contexts/PageContext.js';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'swr/infinite';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import 'classnames';
+import 'dayjs';
+import '../convert.js';
+
+const useInteraction = ()=>{
+    const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
+    const onListener = ({ event, selector }, callback)=>{
+        const element = document.querySelector(selector);
+        if (!element) return;
+        element.addEventListener(event, (e)=>{
+            const event = e;
+            const params = event.detail;
+            if (callback) callback(params);
+        });
+    };
+    const trigger = ({ event, data, selector })=>{
+        const element = document.querySelector(selector);
+        if (!element) return;
+        const eventDispatch = new CustomEvent(event, {
+            bubbles: false,
+            cancelable: true,
+            detail: {
+                data
+            }
+        });
+        element.dispatchEvent(eventDispatch);
+    };
+    const saveToElementInteractionData = (element, key, value)=>{
+        const interactionData = element.getAttribute('gp-data-interaction');
+        const interactionDataJson = JSON.parse(interactionData || '{}');
+        element.setAttribute('gp-data-interaction', JSON.stringify({
+            ...interactionDataJson,
+            [key]: value
+        }));
+    };
+    const closeSelectOnPage = ()=>{
+        setInteractionIsSelectOnPage(false);
+        const event = new CustomEvent('editor:interaction:change-select-on-page', {
+            bubbles: true,
+            detail: false
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        onListener,
+        trigger,
+        saveToElementInteractionData,
+        closeSelectOnPage
+    };
+};
+
+export { useInteraction };

package/dist/esm/helpers/queries/get-product.js

@@ -34,7 +34,7 @@ const getProduct = async (fetcher, { id, isSample, isStorefront })=>{
     };
 };
 const orderBy = {
-    field: 'CREATED_AT',
+    field: 'PLATFORM_CREATED_AT',
     direction: 'DESC'
 };
 const fetchProduct = async (fetcher, { id, isSample, isStorefront })=>{

package/dist/esm/helpers/render.js

@@ -56,6 +56,8 @@ const template = (strings, ...keys)=>{
             }
         }
     });
+    str = str.replaceAll(`style=""`, '');
+    str = str.replaceAll(`class=""`, '');
     return str;
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/dist/esm/helpers/shadow.js

@@ -25,10 +25,10 @@ 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)}${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 + ' ' : ''}${getSingleColorVariable(value?.color)}` : 'none'
     };
 };
-const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
+const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow, screen)=>{
     if (!shadow || !styleAppliedFor) return {};
     const style = {};
     for (const [key, value] of Object.entries(shadow)){
@@ -36,11 +36,22 @@ const getStyleShadowState = (shadow, styleAppliedFor, isEnableShadow)=>{
             value: value,
             state: key,
             styleAppliedFor,
-            isEnableShadow: isEnableShadow?.[key]
+            isEnableShadow: isEnableShadow?.[key],
+            screen: screen ?? ''
         }));
     }
     return style;
 };
+const getResonsiveStyleShadow = (value, styleAppliedFor, isEnableShadow)=>{
+    if (!value) return undefined;
+    if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
+        return {
+            ...getStyleShadowState(value.desktop, styleAppliedFor, isEnableShadow.desktop),
+            ...value.tablet && (isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadowState(value.tablet, styleAppliedFor, isEnableShadow.tablet ?? isEnableShadow.desktop, 'tablet') : undefined,
+            ...value.mobile && (isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop) ? getStyleShadowState(value.mobile, styleAppliedFor, isEnableShadow.mobile ?? isEnableShadow.tablet ?? isEnableShadow.desktop, 'mobile') : undefined
+        };
+    }
+};
 const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     if (!hasBoxShadow) return undefined;
     if (!boxShadowValue) return undefined;
@@ -49,4 +60,4 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
     return `box-shadow: ${Math.cos(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${Math.sin(parseFloat(`${boxShadowValue?.angle}`) * Math.PI / 180) * parseFloat(`${distance}`)}${unitDistance} ${boxShadowValue?.blur} ${boxShadowValue?.spread + ' '}${getSingleColorVariable(boxShadowValue?.color)}${sub};`;
 };
 
-export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit };
+export { composeShadowCss, getResonsiveStyleShadow, getStyleShadow, getStyleShadowState, parseValueWithUnit };

package/dist/esm/helpers/third-party/addAppBlockId.js

@@ -11,7 +11,7 @@ const addAppBlockId = (component)=>{
 };
 const handleSetBlockId = (component)=>{
     const { tag, uid } = component;
-    if (component.settings.appBlockId === undefined) return component;
+    if (component.settings?.appBlockId === undefined) return component;
     component.settings.appBlockId = composeAppBlockId(tag, uid);
 };
 

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

@@ -52,5 +52,71 @@ const PumperBundlesVolumeDiscountConfig = {
         appId: '0856870d-2aca-4b1e-a662-cf1797f61270'
     }
 };
+const UnlimitedBundlesDiscountsConfig = {
+    UnlimitedBundlesDiscounts: {
+        appName: 'unlimited-bundles',
+        appId: 'd33d0f48-dee0-42a0-b156-2a5dce91814a'
+    }
+};
+const KiteFreeGiftDiscountConfig = {
+    KiteFreeGiftDiscount: {
+        appName: 'kite-free-gift-discounts',
+        appId: '2c7302c4-455d-4078-a829-48563ba26089'
+    }
+};
+const FastBundleBundlesDiscountsConfig = {
+    FastBundleBundlesDiscounts: {
+        appName: 'fast-bundle',
+        appId: '9e87fbe2-9041-4c23-acf5-322413994cef'
+    }
+};
+const SimpleBundlesKitsConfig = {
+    SimpleBundlesKits: {
+        appName: 'simple-bundles-kits',
+        appId: 'e553276b-36b2-446d-b80a-aa47fe5f96ac'
+    }
+};
+const EasyBundleBuilderSkailamaConfig = {
+    EasyBundleBuilderSkailama: {
+        appName: 'easy-bundles',
+        appId: '05b1325c-6303-4da5-8e2f-b13ab2a50e1a'
+    }
+};
+const AssortionUpsellBundlesConfig = {
+    AssortionUpsellBundles: {
+        appName: 'assortion',
+        appId: '5588d7f9-a5bc-4f4a-9c54-39b7e081dd23'
+    }
+};
+const PreorderNowPreOrderPqConfig = {
+    PreorderNowPreOrderPq: {
+        appName: 'preorder-now-pre-order-pq',
+        appId: '551fab2c-3af6-4a8f-ba21-736a71cb4540'
+    }
+};
+const KPreorderNowPartialPaymentConfig = {
+    KPreorderNowPartialPayment: {
+        appName: 'k-preorder-now-partial-payment',
+        appId: '65705a60-a3b0-43ae-9dc8-15db78d76b3b'
+    }
+};
+const FlyBundlesUpsellsFbtConfig = {
+    FlyBundlesUpsellsFbt: {
+        appName: 'fly-bundles-upsell',
+        appId: '26807bdc-c2ed-4a25-afb2-06e6b1ebf843'
+    }
+};
+const PreorderNowWodPresaleConfig = {
+    PreorderNowWodPresale: {
+        appName: 'preorder-now-wod-presale',
+        appId: 'fdf17d17-ef12-4a7b-8383-20cc1fc2a4b6'
+    }
+};
+const JunipProductReviewsUgcConfig = {
+    JunipProductReviewsUgc: {
+        appName: 'junip-product-reviews-ugc',
+        appId: 'dc14f5a8-ed15-41b1-ad08-cfba23f9789b'
+    }
+};
 
-export { BonLoyaltyRewardsReferralsConfig, LoopSubscriptionsConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig };
+export { AssortionUpsellBundlesConfig, BonLoyaltyRewardsReferralsConfig, EasyBundleBuilderSkailamaConfig, FastBundleBundlesDiscountsConfig, FlyBundlesUpsellsFbtConfig, JunipProductReviewsUgcConfig, KPreorderNowPartialPaymentConfig, KiteFreeGiftDiscountConfig, LoopSubscriptionsConfig, PreorderNowPreOrderPqConfig, PreorderNowWodPresaleConfig, PumperBundlesVolumeDiscountConfig, RechargeSubscriptionsConfig, ReviewxpoProductReviewsAppConfig, SelleasyConfig, ShopifyFormsConfig, SimpleBundlesKitsConfig, SkioSubscriptionsYcS20Config, SubifySubscriptionsConfig, UnlimitedBundlesDiscountsConfig };