@gem-sdk/core 1.48.0-dev.8 → 1.48.0-dev.80

package/dist/cjs/components/InteractionSuffix.js

@@ -46,7 +46,7 @@ const InteractionSuffix = ({ tag, uid })=>{
         isCurrentInteractionTarget
     ]);
     if (!isDisplay) {
-        return undefined;
+        return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [

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

@@ -219,7 +219,7 @@ const RenderCustomCode = (item)=>{
 };
 const appendAnimation = (props, liquid)=>{
     const { advanced, tag } = props;
-    const { animation, op: opacity } = advanced ?? {};
+    const { animation, op: opacity, hasAnimationInteraction } = advanced ?? {};
     const getAnimationType = (settings, type)=>{
         return settings?.triggerConfig?.[type]?.animation ?? 'none';
     };
@@ -233,7 +233,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'
@@ -249,7 +251,7 @@ const appendAnimation = (props, liquid)=>{
         config: animation,
         tag,
         opacity,
-        isEnableInit: enableAnimation
+        notEnableAnimationWhenInit: !enableAnimationWhenInit
     })}'
     style="${{
         display: 'contents'

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

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

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

@@ -28,6 +28,10 @@
   themePageCustomFonts {
     ...CustomFontSelect
   }
+  interaction {
+    id
+    value
+  }
 }
     `;
 const PreviewThemePageSelect = `
@@ -55,6 +59,10 @@ const PreviewThemePageSelect = `
     themePageCustomCode {
       ...CustomCodeSelect
     }
+    interaction {
+    id
+    value
+  }
   }
 `;
 

package/dist/cjs/helpers/animations.js

@@ -46,7 +46,7 @@ const animations = ()=>{
         });
         return cloneOptions;
     };
-    const slide = (target, options)=>{
+    const slide = (target, options, reverse)=>{
         const normalizedOptions = normalizeOptions(options);
         const { direction, distance } = normalizedOptions;
         const coordinate = [
@@ -67,11 +67,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 = [
             {
@@ -81,7 +81,7 @@ const animations = ()=>{
                 opacity: 1
             }
         ];
-        return generateAnimationInstance(target, preset, {
+        return generateAnimationInstance(target, reverse ? preset.reverse() : preset, {
             ...generateOptions(normalizedOptions, 500)
         });
     };
@@ -101,7 +101,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;
@@ -127,7 +127,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/cjs/helpers/background.js

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

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

@@ -101,6 +101,9 @@ function composeAdvanceStyle(data, tag, pageType) {
                         if (attr === 'rounded') {
                             Object.assign(styles, radius.composeRadius(value));
                         }
+                        if (attr === 'boxShadow') {
+                            Object.assign(styles, shadow.getResonsiveStyleShadow(value, 'box-shadow', hasBoxShadow));
+                        }
                         if (composeAttr === 'desktop') {
                             switch(attr){
                                 case 'padding':
@@ -215,20 +218,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/cjs/helpers/interaction/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const useInteraction = ()=>{
+    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
+        }));
+    };
+    return {
+        onListener,
+        trigger,
+        saveToElementInteractionData
+    };
+};
+
+exports.useInteraction = useInteraction;

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

@@ -36,7 +36,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/cjs/helpers/render.js

@@ -58,6 +58,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/cjs/helpers/shadow.js

@@ -27,10 +27,10 @@ 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)}${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'
     };
 };
-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)){
@@ -38,11 +38,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;
@@ -52,6 +63,7 @@ const composeShadowCss = ({ hasBoxShadow, boxShadowValue, important })=>{
 };
 
 exports.composeShadowCss = composeShadowCss;
+exports.getResonsiveStyleShadow = getResonsiveStyleShadow;
 exports.getStyleShadow = getStyleShadow;
 exports.getStyleShadowState = getStyleShadowState;
 exports.parseValueWithUnit = parseValueWithUnit;

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

@@ -72,16 +72,72 @@ const FastBundleBundlesDiscountsConfig = {
         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'
+    }
+};
 
+exports.AssortionUpsellBundlesConfig = AssortionUpsellBundlesConfig;
 exports.BonLoyaltyRewardsReferralsConfig = BonLoyaltyRewardsReferralsConfig;
+exports.EasyBundleBuilderSkailamaConfig = EasyBundleBuilderSkailamaConfig;
 exports.FastBundleBundlesDiscountsConfig = FastBundleBundlesDiscountsConfig;
+exports.FlyBundlesUpsellsFbtConfig = FlyBundlesUpsellsFbtConfig;
+exports.JunipProductReviewsUgcConfig = JunipProductReviewsUgcConfig;
+exports.KPreorderNowPartialPaymentConfig = KPreorderNowPartialPaymentConfig;
 exports.KiteFreeGiftDiscountConfig = KiteFreeGiftDiscountConfig;
 exports.LoopSubscriptionsConfig = LoopSubscriptionsConfig;
+exports.PreorderNowPreOrderPqConfig = PreorderNowPreOrderPqConfig;
+exports.PreorderNowWodPresaleConfig = PreorderNowWodPresaleConfig;
 exports.PumperBundlesVolumeDiscountConfig = PumperBundlesVolumeDiscountConfig;
 exports.RechargeSubscriptionsConfig = RechargeSubscriptionsConfig;
 exports.ReviewxpoProductReviewsAppConfig = ReviewxpoProductReviewsAppConfig;
 exports.SelleasyConfig = SelleasyConfig;
 exports.ShopifyFormsConfig = ShopifyFormsConfig;
+exports.SimpleBundlesKitsConfig = SimpleBundlesKitsConfig;
 exports.SkioSubscriptionsYcS20Config = SkioSubscriptionsYcS20Config;
 exports.SubifySubscriptionsConfig = SubifySubscriptionsConfig;
 exports.UnlimitedBundlesDiscountsConfig = UnlimitedBundlesDiscountsConfig;

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

@@ -81,6 +81,13 @@ const overrideSettings = (tag, currentSetting, appSetting)=>{
                 ...currentSetting,
                 form_id: appSetting['formId']
             };
+        case 'FlyBundlesUpsellsFbt':
+            {
+                return {
+                    ...currentSetting,
+                    bundle_id: appSetting?.['customBundleId']
+                };
+            }
         default:
             return currentSetting;
     }
@@ -124,10 +131,96 @@ const FastBundleBundlesDiscounts = {
         volume_position: null
     }
 };
+const SimpleBundlesKits = {
+    SimpleBundlesKits: {
+        'infinite-options-selector': null
+    }
+};
+const EasyBundleBuilderSkailama = {
+    EasyBundleBuilderSkailama: {
+        'app-block-bundlePage': null
+    }
+};
+const AssortionUpsellBundles = {
+    AssortionUpsellBundles: {
+        volume: null,
+        bundle: null,
+        addon: null
+    }
+};
+const PreorderNowPreOrderPq = {
+    PreorderNowPreOrderPq: {
+        'app-block-notifyapp-block-notify': null,
+        'app-block-partial': null,
+        'app-block-timer': null,
+        'app-block': null
+    }
+};
+const KPreorderNowPartialPayment = {
+    KPreorderNowPartialPayment: {
+        'kaktus-bundle': null
+    }
+};
+const FlyBundlesUpsellsFbt = {
+    FlyBundlesUpsellsFbt: {
+        'app-block-volume': null,
+        'app-block-upsell-block': null,
+        'app-block-fbt': null,
+        'app-block-custom': {
+            bundle_id: ''
+        }
+    }
+};
+const PreorderNowWodPresale = {
+    PreorderNowWodPresale: {
+        'app-block': null,
+        'popups-block': null
+    }
+};
+const JunipProductReviewsUgc = {
+    JunipProductReviewsUgc: {
+        'junip-review-carousel': {
+            reviewsType: 'product_reviews',
+            showSummary: true,
+            title: 'Reviews',
+            paddingTop: 48,
+            paddingBottom: 48,
+            containerClass: ''
+        },
+        'junip-ugc-gallery': {
+            layout: 'scroll',
+            title: '',
+            paddingTop: 48,
+            paddingBottom: 48,
+            containerClass: ''
+        },
+        'junip-product-review': {
+            product: '{{product}}'
+        },
+        'junip-product-summary': {
+            product: '{{product}}'
+        },
+        'junip-reviews': {
+            layout: 'list',
+            reviewsType: 'all',
+            showSummary: true,
+            reviewsCount: 10,
+            containerClass: ''
+        }
+    }
+};
 const composeSettingsByWidgetType = {
+    ...JunipProductReviewsUgc,
+    ...FlyBundlesUpsellsFbt,
+    ...PreorderNowWodPresale,
+    ...KPreorderNowPartialPayment,
+    ...PreorderNowPreOrderPq,
+    ...AssortionUpsellBundles,
+    ...EasyBundleBuilderSkailama,
     ...FastBundleBundlesDiscounts,
     ...KiteFreeGiftDiscount,
     ...UnlimitedBundlesDiscounts,
+    ...SimpleBundlesKits,
     ...PumperBundlesVolumeDiscount,
     ...ReviewxpoProductReviewsApp,
     ...ShopifyForms,

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

@@ -14,7 +14,15 @@ const mapShopifyAppMeta = {
     ...appConfig.PumperBundlesVolumeDiscountConfig,
     ...appConfig.UnlimitedBundlesDiscountsConfig,
     ...appConfig.KiteFreeGiftDiscountConfig,
-    ...appConfig.FastBundleBundlesDiscountsConfig
+    ...appConfig.FastBundleBundlesDiscountsConfig,
+    ...appConfig.SimpleBundlesKitsConfig,
+    ...appConfig.EasyBundleBuilderSkailamaConfig,
+    ...appConfig.AssortionUpsellBundlesConfig,
+    ...appConfig.PreorderNowPreOrderPqConfig,
+    ...appConfig.KPreorderNowPartialPaymentConfig,
+    ...appConfig.FlyBundlesUpsellsFbtConfig,
+    ...appConfig.PreorderNowWodPresaleConfig,
+    ...appConfig.JunipProductReviewsUgcConfig
 };
 const THIRD_PARTY_APP_BLOCK_ID_PREFIX = 'gp_app';
 

package/dist/cjs/helpers/typography.js

@@ -76,8 +76,10 @@ const composeTypographyV2 = (value, attrs)=>{
     });
 };
 const composeFontFamilyTypographyV2 = (value)=>{
-    const fontFamily = value?.fontFamily;
-    if (!fontFamily) return;
+    const { fontFamily, isCustom, fallbackFontFamily } = value || {};
+    if (!fontFamily) {
+        return isCustom ? fallbackFontFamily : undefined;
+    }
     if (typeof fontFamily === 'string') {
         return getFontUsedByTypographyV2({
             fontFamily,
@@ -116,18 +118,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 +131,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 +143,9 @@ 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;
+};
 
 exports.composeFallbackTypographyStyle = composeFallbackTypographyStyle;
 exports.composeFontFamilyTypographyV2 = composeFontFamilyTypographyV2;

package/dist/cjs/index.js

@@ -108,6 +108,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');
 
 
 
@@ -267,6 +268,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;
@@ -403,3 +405,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/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';
@@ -44,7 +44,7 @@ const InteractionSuffix = ({ tag, uid })=>{
         isCurrentInteractionTarget
     ]);
     if (!isDisplay) {
-        return undefined;
+        return /*#__PURE__*/ jsx(Fragment, {});
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [

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

@@ -215,7 +215,7 @@ const RenderCustomCode = (item)=>{
 };
 const appendAnimation = (props, liquid)=>{
     const { advanced, tag } = props;
-    const { animation, op: opacity } = advanced ?? {};
+    const { animation, op: opacity, hasAnimationInteraction } = advanced ?? {};
     const getAnimationType = (settings, type)=>{
         return settings?.triggerConfig?.[type]?.animation ?? 'none';
     };
@@ -229,7 +229,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'
@@ -245,7 +247,7 @@ const appendAnimation = (props, liquid)=>{
         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
+  }
   }
 `;