@gem-sdk/core 1.44.0-dev.72 → 1.44.0-dev.76

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -21,6 +21,7 @@ var useToolbarPostPurchase = require('../hooks/useToolbarPostPurchase.js');
 var constant = require('./constant.js');
 var AIContentGenerator = require('./ai-generator/AIContentGenerator.js');
 var AIGenContentLoading = require('./ai-generator/AIGenContentLoading.js');
+var InteractionSuffix = require('./InteractionSuffix.js');
 require('../helpers/convert.js');
 
 const SECTION_LIMIT = 25;
@@ -329,7 +330,6 @@ const ComponentToolbarPreview = (props)=>{
     const isEnableCreateThemeSection = ()=>{
         return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -594,6 +594,10 @@ const ComponentToolbarPreview = (props)=>{
                                 fill: "currentColor"
                             })
                         })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(InteractionSuffix.InteractionSuffix, {
+                        tag: props.tag,
+                        uid: props.uid
                     })
                 ]
             }, props.uid),

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var useInteraction = require('../hooks/useInteraction.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
 var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
@@ -32,6 +33,19 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
+    const currentProps = props;
+    const { getAnimationByUid } = useInteraction.useInteraction();
+    const animationByInteraction = getAnimationByUid(props.uid);
+    if (animationByInteraction) {
+        currentProps.advanced = {
+            ...currentProps.advanced,
+            animation: {
+                desktop: animationByInteraction,
+                tablet: animationByInteraction,
+                mobile: animationByInteraction
+            }
+        };
+    }
     const pageType = shop.usePageType();
     if (props.type === 'section') {
         return null;
@@ -136,7 +150,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx(ComponentAnimation.default, {
-                    ...props
+                    ...currentProps
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
                     uid: props.uid,
@@ -165,7 +179,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(ComponentAnimation.default, {
-                ...props
+                ...currentProps
             }),
             /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
                 uid: props.uid,

package/dist/cjs/components/InteractionSuffix.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+require('swr');
+var PageContext = require('../contexts/PageContext.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('swr/infinite');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('classnames');
+require('dayjs');
+require('../helpers/convert.js');
+
+const InteractionSuffix = ({ tag, uid })=>{
+    const currentInteraction = PageContext.usePageStore((s)=>s.interactionData?.item);
+    const isCurrentInteractionTarget = react.useMemo(()=>{
+        return currentInteraction?.targets?.find((t)=>t.uid === uid);
+    }, [
+        currentInteraction,
+        uid
+    ]);
+    const isCurrentInteractionTrigger = react.useMemo(()=>{
+        return currentInteraction?.self?.uid === uid;
+    }, [
+        currentInteraction,
+        uid
+    ]);
+    const isDisplay = react.useMemo(()=>{
+        return isCurrentInteractionTarget || isCurrentInteractionTrigger;
+    }, [
+        isCurrentInteractionTarget,
+        isCurrentInteractionTrigger
+    ]);
+    const positionOffset = react.useMemo(()=>{
+        if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
+            return 80;
+        }
+        return 40;
+    }, [
+        isCurrentInteractionTrigger,
+        isCurrentInteractionTarget
+    ]);
+    if (!isDisplay) {
+        return undefined;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
+                children: [
+                    isCurrentInteractionTrigger && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: `gp-h-8  gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center `,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
+                                fill: "#F9F9F9"
+                            })
+                        })
+                    }),
+                    isCurrentInteractionTarget && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center`,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                    d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                    fillRule: "evenodd",
+                                    clipRule: "evenodd",
+                                    d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                    d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
+                                    fill: "#F9F9F9"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.InteractionSuffix = InteractionSuffix;

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

@@ -39,7 +39,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
-        console.log('Miss component: ', item);
         return {
             liquid: '',
             extraFiles
@@ -221,7 +220,6 @@ const appendAnimation = (props, liquid)=>{
     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';
-    if (!enableAnimation) return liquid;
     const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
             'shake',
             'none'
@@ -236,7 +234,8 @@ const appendAnimation = (props, liquid)=>{
     gp-data='${JSON.stringify({
         config: animation,
         tag,
-        opacity
+        opacity,
+        isEnableInit: enableAnimation
     })}'
     style="${{
         display: 'contents'

package/dist/cjs/contexts/PageContext.js

@@ -31,6 +31,31 @@ const createPageStoreProvider = (data)=>zustand.createStore((set)=>({
                 set({
                     publicStoreFrontData: publicStoreFrontData
                 });
+            },
+            setInteractionIsSelectOnPage: (value)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            isSelectOnPage: value
+                        }
+                    }));
+            },
+            setInteractionItem: (item)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            item,
+                            isSelectOnPage: state.interactionData?.isSelectOnPage || false
+                        }
+                    }));
+            },
+            setInteractionSelectType: (selectType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            selectType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -38,7 +63,10 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData
+            publicStoreFrontData,
+            interactionData: {
+                selectType: 'element'
+            }
         }), [
         dynamicProduct,
         dynamicCollection,

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

@@ -5,6 +5,7 @@ var react = require('react');
 const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
     const previewAnimation = react.useCallback((e)=>{
         const { uid, isCancel } = e.detail;
+        console.log('props.uid !== uid', props.uid !== uid, props.uid, uid);
         if (props.uid !== uid) return;
         cancelAnimation();
         if (isCancel) {

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

@@ -8,6 +8,7 @@ var useAnimationTarget = require('./useAnimationTarget.js');
 var useAnimationConfig = require('./useAnimationConfig.js');
 var useAnimationActions = require('./useAnimationActions.js');
 var useAnimationPreview = require('./useAnimationPreview.js');
+require('../../types/custom.js');
 var animations = require('../../types/animations.js');
 
 const useApplyAnimation = ({ props })=>{
@@ -40,6 +41,7 @@ const useApplyAnimation = ({ props })=>{
                 setting,
                 target: item.target
             }));
+        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/cjs/hooks/useInteraction.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var PageContext = require('../contexts/PageContext.js');
+
+const useInteraction = ()=>{
+    const interactionData = PageContext.usePageStore((state)=>state.interactionData);
+    const { item } = interactionData || {};
+    const getAnimationByUid = (uid)=>{
+        const targets = item?.targets;
+        const targetByUid = targets?.find((target)=>target.uid === uid);
+        const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
+        return metaDataContainsAnimation?.condition?.metaData?.animation;
+    };
+    return {
+        getAnimationByUid
+    };
+};
+
+exports.useInteraction = useInteraction;

package/dist/cjs/index.js

@@ -98,6 +98,7 @@ 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');
 var globalStyle = require('./types/global-style.js');
@@ -355,6 +356,14 @@ 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; }
+});
+Object.defineProperty(exports, 'InteractionTriggerEvent', {
+	enumerable: true,
+	get: function () { return custom.InteractionTriggerEvent; }
+});
 exports.ShopType = shop$1;
 exports.AppAPIType = appAPI;
 exports.OptionNormalStyle = globalStyle.OptionNormalStyle;

package/dist/cjs/types/custom.js

@@ -0,0 +1,44 @@
+'use strict';
+
+exports.InteractionTargetEvent = void 0;
+(function(InteractionTargetEvent) {
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-background-color'] = 0] = 'gp:change-background-color';
+    InteractionTargetEvent[InteractionTargetEvent['gp:run-animation'] = 1] = 'gp:run-animation';
+    InteractionTargetEvent[InteractionTargetEvent['gp:toggle-element-visibility'] = 2] = 'gp:toggle-element-visibility';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-text'] = 3] = 'gp:change-text';
+    InteractionTargetEvent[InteractionTargetEvent['gp:scroll-to'] = 4] = 'gp:scroll-to';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-text-style'] = 5] = 'gp:change-text-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-content'] = 6] = 'gp:change-content';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-button-style'] = 7] = 'gp:change-button-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:copy-text'] = 8] = 'gp:copy-text';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-image'] = 9] = 'gp:change-image';
+    InteractionTargetEvent[InteractionTargetEvent['gp:toggle-video-play'] = 10] = 'gp:toggle-video-play';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-slider-ratio'] = 11] = 'gp:change-slider-ratio';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-icon-style'] = 12] = 'gp:change-icon-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-expanded-item'] = 13] = 'gp:change-expanded-item';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-active-item'] = 14] = 'gp:change-active-item';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-slide'] = 15] = 'gp:change-slide';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-image-step'] = 16] = 'gp:change-image-step';
+    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';
+})(exports.InteractionTargetEvent || (exports.InteractionTargetEvent = {}));
+exports.InteractionTriggerEvent = void 0;
+(function(InteractionTriggerEvent) {
+    InteractionTriggerEvent[InteractionTriggerEvent['click'] = 0] = 'click';
+    InteractionTriggerEvent[InteractionTriggerEvent["active"] = 1] = "active";
+    InteractionTriggerEvent[InteractionTriggerEvent['mouseover'] = 2] = 'mouseover';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:appear'] = 3] = 'gp:appear';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-selected'] = 4] = 'gp:item-selected';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-unselected'] = 5] = 'gp:item-unselected';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-hovered'] = 6] = 'gp:item-hovered';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-click'] = 7] = 'gp:item-click';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-submit'] = 8] = 'gp:after-submit';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:quantity-change'] = 9] = 'gp:quantity-change';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-checked-value'] = 10] = 'gp:after-checked-value';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-add-to-cart'] = 11] = 'gp:after-add-to-cart';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-open'] = 12] = 'gp:popup-open';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-close'] = 13] = 'gp:popup-close';
+    InteractionTriggerEvent[InteractionTriggerEvent['scroll-up'] = 14] = 'scroll-up';
+    InteractionTriggerEvent[InteractionTriggerEvent['scroll-down'] = 15] = 'scroll-down';
+})(exports.InteractionTriggerEvent || (exports.InteractionTriggerEvent = {}));

package/dist/esm/components/ComponentToolbarPreview.js

@@ -17,6 +17,7 @@ import { usePostPurchase } from '../hooks/useToolbarPostPurchase.js';
 import { ableGenerateContentElements } from './constant.js';
 import { AIContentGenerator } from './ai-generator/AIContentGenerator.js';
 import { AIGenContentLoading } from './ai-generator/AIGenContentLoading.js';
+import { InteractionSuffix } from './InteractionSuffix.js';
 import '../helpers/convert.js';
 
 const SECTION_LIMIT = 25;
@@ -325,7 +326,6 @@ const ComponentToolbarPreview = (props)=>{
     const isEnableCreateThemeSection = ()=>{
         return editingPageType !== 'STATIC' && editingPageType !== 'POST_PURCHASE';
     };
-    // if (!isActive) return null;
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !(props.tag == 'Section' && isThemeSectionEditor) && /*#__PURE__*/ jsxs("div", {
@@ -590,6 +590,10 @@ const ComponentToolbarPreview = (props)=>{
                                 fill: "currentColor"
                             })
                         })
+                    }),
+                    /*#__PURE__*/ jsx(InteractionSuffix, {
+                        tag: props.tag,
+                        uid: props.uid
                     })
                 ]
             }, props.uid),

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,6 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useEffect, isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
+import { useInteraction } from '../hooks/useInteraction.js';
 import { disableWrap, excludeApplyStyle } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
 import ComponentToolbarPreview from './ComponentToolbarPreview.js';
@@ -28,6 +29,19 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     }, [
         props.uid
     ]);
+    const currentProps = props;
+    const { getAnimationByUid } = useInteraction();
+    const animationByInteraction = getAnimationByUid(props.uid);
+    if (animationByInteraction) {
+        currentProps.advanced = {
+            ...currentProps.advanced,
+            animation: {
+                desktop: animationByInteraction,
+                tablet: animationByInteraction,
+                mobile: animationByInteraction
+            }
+        };
+    }
     const pageType = usePageType();
     if (props.type === 'section') {
         return null;
@@ -132,7 +146,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
         return /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(ComponentAnimation, {
-                    ...props
+                    ...currentProps
                 }),
                 /*#__PURE__*/ jsx(RenderCustomCode, {
                     uid: props.uid,
@@ -161,7 +175,7 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ComponentAnimation, {
-                ...props
+                ...currentProps
             }),
             /*#__PURE__*/ jsx(RenderCustomCode, {
                 uid: props.uid,

package/dist/esm/components/InteractionSuffix.js

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import 'zustand';
+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 '../helpers/convert.js';
+
+const InteractionSuffix = ({ tag, uid })=>{
+    const currentInteraction = usePageStore((s)=>s.interactionData?.item);
+    const isCurrentInteractionTarget = useMemo(()=>{
+        return currentInteraction?.targets?.find((t)=>t.uid === uid);
+    }, [
+        currentInteraction,
+        uid
+    ]);
+    const isCurrentInteractionTrigger = useMemo(()=>{
+        return currentInteraction?.self?.uid === uid;
+    }, [
+        currentInteraction,
+        uid
+    ]);
+    const isDisplay = useMemo(()=>{
+        return isCurrentInteractionTarget || isCurrentInteractionTrigger;
+    }, [
+        isCurrentInteractionTarget,
+        isCurrentInteractionTrigger
+    ]);
+    const positionOffset = useMemo(()=>{
+        if (isCurrentInteractionTrigger && isCurrentInteractionTarget) {
+            return 80;
+        }
+        return 40;
+    }, [
+        isCurrentInteractionTrigger,
+        isCurrentInteractionTarget
+    ]);
+    if (!isDisplay) {
+        return undefined;
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "hidden gp-left-[-40px] gp-left-[-80px] gp-right-[-40px] gp-right-[-80px]"
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `gp-hidden gp-absolute interaction-suffix gp-gap-[8px] ${tag == 'Section' ? `gp-left-[-${positionOffset}px]` : `gp-right-[-${positionOffset}px]`}`,
+                children: [
+                    isCurrentInteractionTrigger && /*#__PURE__*/ jsx("div", {
+                        className: `gp-h-8  gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center `,
+                        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", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M12.9196 5.80449C13.0989 5.80449 13.1876 6.02216 13.0595 6.14749L4.83569 14.1892C4.69517 14.3267 4.46149 14.2002 4.49967 14.0074L5.50422 8.93537C5.53483 8.7808 5.41656 8.6368 5.25898 8.6368H3.08019C2.92551 8.6368 2.82938 8.46874 2.90779 8.33541L6.72099 1.85154C6.75692 1.79045 6.8225 1.75293 6.89338 1.75293H12.5729C12.7386 1.75293 12.8324 1.94273 12.7319 2.07435L10.1891 5.40272C10.0634 5.56724 10.1807 5.80449 10.3877 5.80449H12.9196Z",
+                                fill: "#F9F9F9"
+                            })
+                        })
+                    }),
+                    isCurrentInteractionTarget && /*#__PURE__*/ jsx("div", {
+                        className: `gp-h-8 min-w-8 gp-rounded-[8px] gp-w-8 gp-bg-[#212121]  gp-flex gp-justify-center gp-items-center`,
+                        children: /*#__PURE__*/ jsxs("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M8.58987 2.11238C8.62815 2.66333 8.21254 3.141 7.66158 3.17928C6.73192 3.24386 5.84034 3.57396 5.09276 4.13034C4.34519 4.68673 3.77304 5.44602 3.44429 6.31801C3.11554 7.19 3.04401 8.13803 3.23821 9.04947C3.4324 9.96092 3.88415 10.7975 4.53978 11.4597C5.19541 12.122 6.02737 12.5821 6.93682 12.7854C7.84626 12.9888 8.79496 12.9268 9.67021 12.6068C10.5455 12.2869 11.3105 11.7224 11.8743 10.9804C12.4382 10.2385 12.7772 9.35025 12.8512 8.42129C12.895 7.87074 13.3768 7.45996 13.9273 7.50377C14.4779 7.54758 14.8887 8.0294 14.8449 8.57994C14.7406 9.8906 14.2622 11.1438 13.4667 12.1906C12.6711 13.2374 11.5918 14.0338 10.3569 14.4852C9.12204 14.9367 7.78353 15.0241 6.50041 14.7373C5.2173 14.4504 4.0435 13.8012 3.11848 12.8668C2.19345 11.9324 1.55609 10.7522 1.28211 9.46624C1.00813 8.1803 1.10905 6.84274 1.57287 5.61247C2.03669 4.3822 2.84393 3.31093 3.89867 2.52593C4.95342 1.74093 6.21133 1.27521 7.52297 1.18409C8.07393 1.14581 8.5516 1.56142 8.58987 2.11238Z",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    fillRule: "evenodd",
+                                    clipRule: "evenodd",
+                                    d: "M11.9757 1.25658C12.184 1.31428 12.3452 1.47958 12.3976 1.68929L12.7872 3.24774L14.3457 3.63736C14.5554 3.68978 14.7207 3.85096 14.7784 4.05928C14.8361 4.2676 14.7773 4.49085 14.6244 4.64371L12.7167 6.55141C12.5677 6.70044 12.3514 6.76035 12.1469 6.70924L10.5688 6.3147L8.42436 8.45912C8.19005 8.69344 7.81015 8.69344 7.57583 8.45912C7.34152 8.22481 7.34152 7.84491 7.57583 7.61059L9.72025 5.46617L9.32572 3.88804C9.2746 3.68357 9.33451 3.46728 9.48354 3.31825L11.3912 1.41054C11.5441 1.25769 11.7674 1.19888 11.9757 1.25658ZM10.8795 5.15545L12.1084 5.46267L13.0266 4.54451L12.1469 4.3246C11.9319 4.27086 11.7641 4.10301 11.7104 3.88804L11.4904 3.0084L10.5723 3.92656L10.8795 5.15545Z",
+                                    fill: "#F9F9F9"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M7.35783 6.45343C7.87208 6.25201 8.12568 5.67185 7.92426 5.15761C7.72284 4.64336 7.14268 4.38976 6.62844 4.59118C6.05705 4.81498 5.55049 5.17772 5.15453 5.64655C4.75858 6.11538 4.4857 6.67552 4.36055 7.27631C4.23539 7.87709 4.26189 8.49961 4.43764 9.08758C4.6134 9.67555 4.93289 10.2105 5.36727 10.6439C5.80165 11.0774 6.33722 11.3958 6.92556 11.5702C7.51391 11.7445 8.13643 11.7695 8.73683 11.6427C9.33723 11.5158 9.89652 11.2413 10.3641 10.8439C10.8318 10.4465 11.1929 9.93885 11.4151 9.36679C11.615 8.85196 11.3597 8.27254 10.8449 8.07262C10.3301 7.87269 9.75066 8.12797 9.55073 8.6428C9.44887 8.9051 9.28329 9.1378 9.06901 9.3199C8.85474 9.50199 8.59851 9.62774 8.32352 9.68582C8.04853 9.7439 7.76341 9.73249 7.49394 9.65262C7.22445 9.57274 6.97907 9.42691 6.78001 9.22825C6.58093 9.0296 6.43446 8.78439 6.35386 8.51478C6.27327 8.24517 6.26112 7.9597 6.31851 7.6842C6.37591 7.4087 6.50102 7.1519 6.68251 6.93702C6.86399 6.72214 7.0961 6.55595 7.35783 6.45343Z",
+                                    fill: "#F9F9F9"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { InteractionSuffix };

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

@@ -35,7 +35,6 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageConte
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
-        console.log('Miss component: ', item);
         return {
             liquid: '',
             extraFiles
@@ -217,7 +216,6 @@ const appendAnimation = (props, liquid)=>{
     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';
-    if (!enableAnimation) return liquid;
     const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
             'shake',
             'none'
@@ -232,7 +230,8 @@ const appendAnimation = (props, liquid)=>{
     gp-data='${JSON.stringify({
         config: animation,
         tag,
-        opacity
+        opacity,
+        isEnableInit: enableAnimation
     })}'
     style="${{
         display: 'contents'

package/dist/esm/contexts/PageContext.js

@@ -29,6 +29,31 @@ const createPageStoreProvider = (data)=>createStore((set)=>({
                 set({
                     publicStoreFrontData: publicStoreFrontData
                 });
+            },
+            setInteractionIsSelectOnPage: (value)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            isSelectOnPage: value
+                        }
+                    }));
+            },
+            setInteractionItem: (item)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            item,
+                            isSelectOnPage: state.interactionData?.isSelectOnPage || false
+                        }
+                    }));
+            },
+            setInteractionSelectType: (selectType)=>{
+                set((state)=>({
+                        interactionData: {
+                            ...state.interactionData,
+                            selectType
+                        }
+                    }));
             }
         }));
 const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffers, publicStoreFrontData, ...passProps })=>{
@@ -36,7 +61,10 @@ const PageProvider = ({ children, dynamicProduct, dynamicCollection, productOffe
             dynamicProduct,
             dynamicCollection,
             productOffers,
-            publicStoreFrontData
+            publicStoreFrontData,
+            interactionData: {
+                selectType: 'element'
+            }
         }), [
         dynamicProduct,
         dynamicCollection,

package/dist/esm/hooks/animation/useAnimationPreview.js

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
     const previewAnimation = useCallback((e)=>{
         const { uid, isCancel } = e.detail;
+        console.log('props.uid !== uid', props.uid !== uid, props.uid, uid);
         if (props.uid !== uid) return;
         cancelAnimation();
         if (isCancel) {

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

@@ -4,6 +4,7 @@ import { useAnimationTarget } from './useAnimationTarget.js';
 import { useAnimationConfig } from './useAnimationConfig.js';
 import { useAnimationActions } from './useAnimationActions.js';
 import { useAnimationPreview } from './useAnimationPreview.js';
+import '../../types/custom.js';
 import { AnimationType } from '../../types/animations.js';
 
 const useApplyAnimation = ({ props })=>{
@@ -36,6 +37,7 @@ const useApplyAnimation = ({ props })=>{
                 setting,
                 target: item.target
             }));
+        console.log('listAnimations', listAnimations);
         cancelAnimation();
         setAnimation(listAnimations);
     }, [

package/dist/esm/hooks/useInteraction.js

@@ -0,0 +1,17 @@
+import { usePageStore } from '../contexts/PageContext.js';
+
+const useInteraction = ()=>{
+    const interactionData = usePageStore((state)=>state.interactionData);
+    const { item } = interactionData || {};
+    const getAnimationByUid = (uid)=>{
+        const targets = item?.targets;
+        const targetByUid = targets?.find((target)=>target.uid === uid);
+        const metaDataContainsAnimation = targetByUid?.events?.find((it)=>it.condition?.metaData?.animation);
+        return metaDataContainsAnimation?.condition?.metaData?.animation;
+    };
+    return {
+        getAnimationByUid
+    };
+};
+
+export { useInteraction };

package/dist/esm/index.js

@@ -99,6 +99,7 @@ export { useProductList, useProductListProducts, useProductListSettings, useProd
 export { default as useSuspenseFetch } from './hooks/useSuspenseFetch.js';
 export { default as useSwatchesOptions } from './hooks/useSwatchesOptions.js';
 export { default as useInitialSwatchesOptions } from './hooks/useInitialSwatchesOptions.js';
+export { InteractionTargetEvent, InteractionTriggerEvent } from './types/custom.js';
 import * as shop from './types/shop.js';
 export { shop as ShopType };
 import * as appAPI from './types/appAPI.js';

package/dist/esm/types/custom.js

@@ -0,0 +1,44 @@
+var InteractionTargetEvent;
+(function(InteractionTargetEvent) {
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-background-color'] = 0] = 'gp:change-background-color';
+    InteractionTargetEvent[InteractionTargetEvent['gp:run-animation'] = 1] = 'gp:run-animation';
+    InteractionTargetEvent[InteractionTargetEvent['gp:toggle-element-visibility'] = 2] = 'gp:toggle-element-visibility';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-text'] = 3] = 'gp:change-text';
+    InteractionTargetEvent[InteractionTargetEvent['gp:scroll-to'] = 4] = 'gp:scroll-to';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-text-style'] = 5] = 'gp:change-text-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-content'] = 6] = 'gp:change-content';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-button-style'] = 7] = 'gp:change-button-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:copy-text'] = 8] = 'gp:copy-text';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-image'] = 9] = 'gp:change-image';
+    InteractionTargetEvent[InteractionTargetEvent['gp:toggle-video-play'] = 10] = 'gp:toggle-video-play';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-slider-ratio'] = 11] = 'gp:change-slider-ratio';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-icon-style'] = 12] = 'gp:change-icon-style';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-expanded-item'] = 13] = 'gp:change-expanded-item';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-active-item'] = 14] = 'gp:change-active-item';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-slide'] = 15] = 'gp:change-slide';
+    InteractionTargetEvent[InteractionTargetEvent['gp:change-image-step'] = 16] = 'gp:change-image-step';
+    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 = {}));
+var InteractionTriggerEvent;
+(function(InteractionTriggerEvent) {
+    InteractionTriggerEvent[InteractionTriggerEvent['click'] = 0] = 'click';
+    InteractionTriggerEvent[InteractionTriggerEvent["active"] = 1] = "active";
+    InteractionTriggerEvent[InteractionTriggerEvent['mouseover'] = 2] = 'mouseover';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:appear'] = 3] = 'gp:appear';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-selected'] = 4] = 'gp:item-selected';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-unselected'] = 5] = 'gp:item-unselected';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-hovered'] = 6] = 'gp:item-hovered';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:item-click'] = 7] = 'gp:item-click';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-submit'] = 8] = 'gp:after-submit';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:quantity-change'] = 9] = 'gp:quantity-change';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-checked-value'] = 10] = 'gp:after-checked-value';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:after-add-to-cart'] = 11] = 'gp:after-add-to-cart';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-open'] = 12] = 'gp:popup-open';
+    InteractionTriggerEvent[InteractionTriggerEvent['gp:popup-close'] = 13] = 'gp:popup-close';
+    InteractionTriggerEvent[InteractionTriggerEvent['scroll-up'] = 14] = 'scroll-up';
+    InteractionTriggerEvent[InteractionTriggerEvent['scroll-down'] = 15] = 'scroll-down';
+})(InteractionTriggerEvent || (InteractionTriggerEvent = {}));
+
+export { InteractionTargetEvent, InteractionTriggerEvent };

package/dist/types/index.d.ts

@@ -8218,6 +8218,75 @@ type PublicStoreFrontData = {
     token?: string;
     endpoint?: string;
 };
+type InteractionElement<E, T> = {
+    uid?: string;
+    event?: E;
+    condition?: T;
+    elementTag?: string;
+    targetOutsideSelector?: string;
+    targetInsideSelector?: string;
+};
+declare enum InteractionTargetEvent {
+    'gp:change-background-color' = 0,
+    'gp:run-animation' = 1,
+    'gp:toggle-element-visibility' = 2,
+    'gp:change-text' = 3,
+    'gp:scroll-to' = 4,
+    'gp:change-text-style' = 5,
+    'gp:change-content' = 6,
+    'gp:change-button-style' = 7,
+    'gp:copy-text' = 8,
+    'gp:change-image' = 9,
+    'gp:toggle-video-play' = 10,
+    'gp:change-slider-ratio' = 11,
+    'gp:change-icon-style' = 12,
+    'gp:change-expanded-item' = 13,
+    'gp:change-active-item' = 14,
+    'gp:change-slide' = 15,
+    'gp:change-image-step' = 16,
+    'gp:change-text-value' = 17,
+    'gp:toggle-popup-open' = 18,
+    'gp:show-or-hide' = 19
+}
+declare enum InteractionTriggerEvent {
+    'click' = 0,
+    active = 1,
+    'mouseover' = 2,
+    'gp:appear' = 3,
+    'gp:item-selected' = 4,
+    'gp:item-unselected' = 5,
+    'gp:item-hovered' = 6,
+    'gp:item-click' = 7,
+    'gp:after-submit' = 8,
+    'gp:quantity-change' = 9,
+    'gp:after-checked-value' = 10,
+    'gp:after-add-to-cart' = 11,
+    'gp:popup-open' = 12,
+    'gp:popup-close' = 13,
+    'scroll-up' = 14,
+    'scroll-down' = 15
+}
+type InteractionCondition = {
+    type?: 'equal' | 'greater' | 'less' | 'greater-or-equal' | 'less-or-equal' | 'distance-to-top' | 'selected-item' | 'between' | 'out-of-stock' | 'out-of-time' | 'delay';
+    data?: unknown;
+    metaData?: any;
+};
+type Interaction = {
+    self?: InteractionElement<InteractionTriggerEvent, InteractionCondition>;
+    targets?: InteractionTarget[];
+};
+type InteractionTarget = {
+    uid?: string;
+    elementTag?: string;
+    targetOutsideSelector?: string;
+    targetInsideSelector?: string;
+    events?: InteractionTargetEventObject[];
+};
+type InteractionTargetEventObject = {
+    event: InteractionTargetEvent;
+    eventName: string;
+    condition: InteractionCondition;
+};
 
 type Maybe<T> = T | undefined;
 type InputMaybe<T> = T | undefined;
@@ -28889,11 +28958,19 @@ type PageContextProps = {
     productOffers?: ProductOffer[];
     salePageProductId?: string;
     publicStoreFrontData?: PublicStoreFrontData | null;
+    interactionData?: {
+        item?: Interaction;
+        isSelectOnPage?: boolean;
+        selectType?: 'element' | 'page';
+    };
     setDynamicProduct: (data: DynamicProduct) => void;
     setDynamicCollection: (data: DynamicCollection) => void;
     setPostPurchaseProductOffers: (productOffers: ProductOffer[]) => void;
     setSalePageProductId: (id: string) => void;
     setPublicStoreFrontData: (publicStoreFrontData: PublicStoreFrontData | null) => void;
+    setInteractionItem: (item: Interaction) => void;
+    setInteractionIsSelectOnPage: (value: boolean) => void;
+    setInteractionSelectType: (selectType: 'element' | 'page') => void;
 };
 type PageProviderProps = Pick<PageContextProps, 'dynamicProduct' | 'dynamicCollection' | 'productOffers'> & {
     children: React.ReactNode;
@@ -30177,6 +30254,15 @@ declare const filterAttrInStyle: (style?: React.CSSProperties, filterKeys?: stri
     '--z-mobile'?: csstype.Property.ZIndex | undefined;
     '--hvr-z-mobile'?: csstype.Property.ZIndex | undefined;
     '--focus-z-mobile'?: csstype.Property.ZIndex | undefined;
+    '--wm'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm'?: csstype.Property.WritingMode | undefined;
+    '--wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-mobile'?: csstype.Property.WritingMode | undefined;
     accentColor?: csstype.Property.AccentColor | undefined;
     alignContent?: csstype.Property.AlignContent | undefined;
     alignItems?: csstype.Property.AlignItems | undefined;
@@ -31672,6 +31758,15 @@ declare const removeAttrInStyle: (style?: React.CSSProperties, filterKeys?: stri
     '--z-mobile'?: csstype.Property.ZIndex | undefined;
     '--hvr-z-mobile'?: csstype.Property.ZIndex | undefined;
     '--focus-z-mobile'?: csstype.Property.ZIndex | undefined;
+    '--wm'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm'?: csstype.Property.WritingMode | undefined;
+    '--wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-mobile'?: csstype.Property.WritingMode | undefined;
     accentColor?: csstype.Property.AccentColor | undefined;
     alignContent?: csstype.Property.AlignContent | undefined;
     alignItems?: csstype.Property.AlignItems | undefined;
@@ -33167,6 +33262,15 @@ declare const filterCornerInStyle: (style?: React.CSSProperties) => {
     '--z-mobile'?: csstype.Property.ZIndex | undefined;
     '--hvr-z-mobile'?: csstype.Property.ZIndex | undefined;
     '--focus-z-mobile'?: csstype.Property.ZIndex | undefined;
+    '--wm'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm'?: csstype.Property.WritingMode | undefined;
+    '--wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-mobile'?: csstype.Property.WritingMode | undefined;
     accentColor?: csstype.Property.AccentColor | undefined;
     alignContent?: csstype.Property.AlignContent | undefined;
     alignItems?: csstype.Property.AlignItems | undefined;
@@ -34662,6 +34766,15 @@ declare const removePaddingYInStyle: (style?: React.CSSProperties) => {
     '--z-mobile'?: csstype.Property.ZIndex | undefined;
     '--hvr-z-mobile'?: csstype.Property.ZIndex | undefined;
     '--focus-z-mobile'?: csstype.Property.ZIndex | undefined;
+    '--wm'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm'?: csstype.Property.WritingMode | undefined;
+    '--wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-mobile'?: csstype.Property.WritingMode | undefined;
     accentColor?: csstype.Property.AccentColor | undefined;
     alignContent?: csstype.Property.AlignContent | undefined;
     alignItems?: csstype.Property.AlignItems | undefined;
@@ -36297,6 +36410,15 @@ declare const composeTypographyStyle: (typo?: TypographySettingV2, typography?:
     '--z-mobile'?: csstype.Property.ZIndex | undefined;
     '--hvr-z-mobile'?: csstype.Property.ZIndex | undefined;
     '--focus-z-mobile'?: csstype.Property.ZIndex | undefined;
+    '--wm'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm'?: csstype.Property.WritingMode | undefined;
+    '--wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-tablet'?: csstype.Property.WritingMode | undefined;
+    '--wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--hvr-wm-mobile'?: csstype.Property.WritingMode | undefined;
+    '--focus-wm-mobile'?: csstype.Property.WritingMode | undefined;
     accentColor?: csstype.Property.AccentColor | undefined;
     alignContent?: csstype.Property.AlignContent | undefined;
     alignItems?: csstype.Property.AlignItems | undefined;
@@ -37408,4 +37530,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage$1, 'id' | 'name'
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAspectRatioGlobalSize, getBgImageByDevice, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBgColor, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AdvancedType, AliReviewsWidgetType, AlignItemProp, AlignProp, AnimationBaseSetting, AnimationConfig, AnimationDirectionType, AnimationEasingType, AnimationFadeSettingType, AnimationSetting, AnimationSettingType, AnimationShakeSettingType, AnimationSlideSettingType, AnimationTrigger, AnimationTriggerType, AnimationType, AnimationZoomDirectionType, AnimationZoomSettingType, appAPI as AppAPIType, ArticleListProvider, ArticleListProviderProps, ArticleProvider, ArticleProviderProps, Background, BaseProps, BasePropsWrap, BlockEntity, BogosWidgetType, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlTriggerAction, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, DynamicCollection, DynamicProduct, ExtractState, FeraReviewsV3WidgetType, FeraReviewsWidgetType, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GRADIENT_BGR_KEY, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, GrowaveWidgetType, HSLAColorType, HSLColorType, HexColorType, ImageShape$1 as ImageShape, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, Interaction, InteractionCondition, InteractionElement, InteractionTarget, InteractionTargetEvent, InteractionTargetEventObject, InteractionTriggerEvent, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LaiProductReviewsAdvancedWidgetType, LaiProductReviewsWidgetType, LibrarySaleFunnelDocument, LibrarySaleFunnelQueryResponse, LibrarySaleFunnelQueryVariables, LibraryTemplateDocument, LibraryTemplateQueryResponse, LibraryTemplateQueryVariables, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices$1 as NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OmnisendWidgetType, OnlyOne, OpinewDesignWidgetType, OpinewWidgetType, OptionNormalStyle, OptionSpecialStyle, Options, PageContext, PageProvider, PageProviderProps, PageType, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PostPurchaseTypo, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductOffer, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublicStoreFrontData, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, Ratio$1 as Ratio, RawChild, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveKey, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SaleFunnelDiscount$1 as SaleFunnelDiscount, SaleFunnelDiscountEdge$1 as SaleFunnelDiscountEdge, SaleFunnelDiscountObjectType$1 as SaleFunnelDiscountObjectType, SaleFunnelDiscountType$1 as SaleFunnelDiscountType, SaleFunnelDiscountValueType$1 as SaleFunnelDiscountValueType, SaleFunnelDiscountsDocument, SaleFunnelDiscountsQueryResponse, SaleFunnelDiscountsQueryVariables, Scalars$1 as Scalars, ScaleByDirection, SectionData, SectionEntity, SectionProvider, SectionProviderProps, SettingByAnimationType, SettingByAnimationValues, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeSettingGlobal, SizeType, SpacingType, StampedWidgetType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, ThemePageDocument, ThemePageQueryResponse, ThemePageQueryVariables, ThemeSectionStatus$1 as ThemeSectionStatus, TransformProp, TriggerConfig, TrustooWidgetType, TypographyProps, TypographySetting, TypographySettingV2, TypographyType, TypographyV2Attrs, TypographyV2Props, UltimateSalesBoostWidgetType, VariantSelectFragment, VitalsWidgetType, WiserV2WidgetType, WiserWidgetType, WrapRenderChildren, YotpoReviewsWidgetType, animations, baseAssetURL, calculateFirstProduct, checkAvailableVariantInStock, cls, composeAdvanceStyle, composeAdvanceStyleForPostPurchase, composeBackgroundCss, composeBorderCss, composeCornerCss, composeFallbackTypographyStyle, composeFontFamilyTypographyV2, composeGridLayout, composeMemo, composePositionLineHeight, composePostionIconList, composeRadius, composeRadiusResponsive, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, convertHTML, convertOldLayout, convertTextAlignToJustify, dataStringify, fetchMedias, fetchVariants, filterAttrInStyle, filterCornerInStyle, filterToolbarPreview, flattenConnection, formatMoney, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getAspectRatioGlobalSize, getBgImageByDevice, getBorderStyle, getCarouselContainerHeight, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getGlobalSizeGap, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getHeightByShapeGlobalSize, getPaddingGlobalSize, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleBgColor, getStyleShadow, getStyleShadowState, getValueByDevice, getWidthByShapeGlobalSize, getWidthHeightGlobalSize, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isColumnDirectionExist, isDefined, isEmptyChildren, isLocalEnv, isSafari, loadScript, makeAspectRatio, makeContainerWidthOrHeight, makeDotGapToCarouselStyle, makeFixedBgAttachment, makeGlobalSize, makeGlobalSizeHeightResponsive, makeGlobalSizeIcon, makeGlobalSizeWidthResponsive, makeHeight, makeLineClamp, makeStyle, makeStyleKey, makeStyleResponsive, makeStyleResponsiveByScreen, makeStyleResponsiveState, makeStyleState, makeStyleWithDefault, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, removeAttrInStyle, removeNullUndefined, removePaddingYInStyle, removeUndefinedValuesFromObject, shopifyPriceRounding, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useArticleListStore, useArticleStore, useArticlesQuery, useBlogsQuery, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useInitialSwatchesOptions, useIsSampleProduct, useIsStorefrontProduct, useIsSyncProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, useMoneyFormat, usePageStore, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductOfferDiscount, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useProductsQueryAll, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.44.0-dev.72",
+  "version": "1.44.0-dev.76",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.44.0-dev.70",
-    "@gem-sdk/styles": "1.44.0-dev.70",
+    "@gem-sdk/styles": "1.44.0-dev.76",
     "@types/classnames": "^2.3.1"
   },
   "dependencies": {