@gem-sdk/core 1.37.5 → 2.0.0-dev.832

package/dist/esm/helpers/spacing.js

@@ -1,40 +1 @@
-import { devicesMapping } from './constant.js';
-
-function getSpacingCSSByType(key, device) {
-    if (!key) return {};
-    const suffix = device ? devicesMapping?.[device] ?? '' : '';
-    return {
-        [`--p${suffix}`]: `var(--g-s-${key})`
-    };
-}
-function getSpacingVariable(key) {
-    if (!key) return '';
-    return `var(--g-s-${key})`;
-}
-const composeSpacing = (spacingValue)=>{
-    const style = {};
-    switch(spacingValue?.desktop){
-        case 'm':
-        case 'l':
-        case 's':
-            Object.assign(style, getSpacingCSSByType(spacingValue.desktop));
-            break;
-    }
-    switch(spacingValue?.tablet){
-        case 'm':
-        case 'l':
-        case 's':
-            Object.assign(style, getSpacingCSSByType(spacingValue.tablet, 'tablet'));
-            break;
-    }
-    switch(spacingValue?.mobile){
-        case 'm':
-        case 'l':
-        case 's':
-            Object.assign(style, getSpacingCSSByType(spacingValue.mobile, 'mobile'));
-            break;
-    }
-    return style;
-};
-
-export { composeSpacing, getSpacingVariable };
+import{devicesMapping as e}from"./constant.js";function getSpacingCSSByType(t,a){if(!t)return{};let s=a?e?.[a]??"":"";return{[`--p${s}`]:`var(--g-s-${t})`}}function getSpacingVariable(e){return e?`var(--g-s-${e})`:""}let composeSpacing=e=>{let t={};switch(e?.desktop){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.desktop))}switch(e?.tablet){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.tablet,"tablet"))}switch(e?.mobile){case"m":case"l":case"s":Object.assign(t,getSpacingCSSByType(e.mobile,"mobile"))}return t};export{composeSpacing,getSpacingVariable};

package/dist/esm/helpers/tracking/fpixel.js

@@ -1,24 +1 @@
-const pageview = ()=>{
-    if (!window.fbq) return;
-    window.fbq('track', 'PageView');
-};
-// https://developers.facebook.com/docs/facebook-pixel/advanced/
-const event = (name, options = {})=>{
-    if (!window.fbq) return;
-    window.fbq('track', name, options);
-};
-const addToCart = (product)=>{
-    if (!window.fbq) return;
-    window.fbq('track', 'AddToCart', {
-        content_ids: [
-            product.id
-        ],
-        content_name: product.name,
-        content_category: product.category,
-        content_type: 'product',
-        value: product.price,
-        currency: product.currency
-    });
-};
-
-export { addToCart, event, pageview };
+let pageview=()=>{window.fbq&&window.fbq("track","PageView")},event=(e,t={})=>{window.fbq&&window.fbq("track",e,t)},addToCart=e=>{window.fbq&&window.fbq("track","AddToCart",{content_ids:[e.id],content_name:e.name,content_category:e.category,content_type:"product",value:e.price,currency:e.currency})};export{addToCart,event,pageview};

package/dist/esm/helpers/tracking/gtag.js

@@ -1,87 +1 @@
-// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
-const pageview = (url, trackingId)=>{
-    // GA 4
-    if (window.gtag && trackingId) {
-        window.gtag('config', trackingId, {
-            page_path: url
-        });
-    }
-    // GA 3
-    if (window.ga) {
-        window.ga('send', 'pageview', url);
-    }
-};
-/** Addition to cart events
- * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
- */ const addToCart = (product)=>{
-    // GA 3
-    if (!window.ga || !product) {
-        return;
-    }
-    window.ga('ec:addProduct', {
-        ...product,
-        id: product.sku,
-        name: product.variant === 'Default Title' ? product.name : `${product.name} - ${product.variant}`,
-        variant: product.variant === 'Default Title' ? product.name : product.variant
-    });
-    window.ga('ec:setAction', 'add');
-    window.ga('send', 'event', {
-        eventCategory: 'EnhancedEcommerce',
-        eventAction: 'Added Product',
-        nonInteraction: true
-    });
-};
-/** Product clicked event
- * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#product-click
- */ const productClick = (product)=>{
-    if (!window.ga) {
-        return;
-    }
-    ga('ec:addProduct', {
-        id: product.id,
-        name: product.name,
-        category: product.category,
-        brand: product.brand,
-        variant: product.variant
-    });
-    ga('ec:setAction', 'click');
-    ga('send', 'event', {
-        eventAction: 'Click',
-        eventCategory: 'Product'
-    });
-};
-/** Product viewed event
- * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#measuring-actvities
- */ const productDetail = (product)=>{
-    if (!product || !window.ga) return;
-    ga('ec:addProduct', {
-        brand: product.brand,
-        category: product.category,
-        id: product.id,
-        name: product.name,
-        variant: product.variant
-    });
-    ga('ec:setAction', 'detail');
-    ga('send', 'event', {
-        eventAction: 'Detail',
-        eventCategory: 'Ecommerce',
-        nonInteraction: 1
-    });
-};
-/** Removal from cart events
- * https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce#add-remove-cart
- */ const removeFromCart = (product, price)=>{
-    if (!product || !window.ga) return;
-    ga('ec:addProduct', {
-        id: product.id,
-        name: product.name,
-        price
-    });
-    ga('ec:setAction', 'remove');
-    ga('send', 'event', {
-        eventAction: 'Click',
-        eventCategory: 'Remove from cart'
-    });
-};
-
-export { addToCart, pageview, productClick, productDetail, removeFromCart };
+let pageview=(e,a)=>{window.gtag&&a&&window.gtag("config",a,{page_path:e}),window.ga&&window.ga("send","pageview",e)},addToCart=e=>{window.ga&&e&&(window.ga("ec:addProduct",{...e,id:e.sku,name:"Default Title"===e.variant?e.name:`${e.name} - ${e.variant}`,variant:"Default Title"===e.variant?e.name:e.variant}),window.ga("ec:setAction","add"),window.ga("send","event",{eventCategory:"EnhancedEcommerce",eventAction:"Added Product",nonInteraction:!0}))},productClick=e=>{window.ga&&(ga("ec:addProduct",{id:e.id,name:e.name,category:e.category,brand:e.brand,variant:e.variant}),ga("ec:setAction","click"),ga("send","event",{eventAction:"Click",eventCategory:"Product"}))},productDetail=e=>{e&&window.ga&&(ga("ec:addProduct",{brand:e.brand,category:e.category,id:e.id,name:e.name,variant:e.variant}),ga("ec:setAction","detail"),ga("send","event",{eventAction:"Detail",eventCategory:"Ecommerce",nonInteraction:1}))},removeFromCart=(e,a)=>{e&&window.ga&&(ga("ec:addProduct",{id:e.id,name:e.name,price:a}),ga("ec:setAction","remove"),ga("send","event",{eventAction:"Click",eventCategory:"Remove from cart"}))};export{addToCart,pageview,productClick,productDetail,removeFromCart};

package/dist/esm/helpers/tracking/tiktokpixel.js

@@ -1,15 +1 @@
-// @ts-nocheck
-const addToCart = (product)=>{
-    if (!window?.ttq?.track) return;
-    window.ttq.track('AddToCart', {
-        content_id: product.id,
-        content_type: 'product',
-        content_name: product.name,
-        quantity: product.quantity,
-        price: product.price,
-        value: (product.price ?? 0) * (product.quantity ?? 0),
-        currency: product.currency
-    });
-};
-
-export { addToCart };
+let addToCart=t=>{window?.ttq?.track&&window.ttq.track("AddToCart",{content_id:t.id,content_type:"product",content_name:t.name,quantity:t.quantity,price:t.price,value:(t.price??0)*(t.quantity??0),currency:t.currency})};export{addToCart};

package/dist/esm/helpers/typography.js

@@ -1,116 +1,17 @@
-import { getSingleColorVariable } from './colors.js';
-import { removeNullUndefined, makeStyle, makeStyleResponsive } from './make-style.js';
-
-const genTypoClass = (name)=>{
-    return `gp-g-${name}`;
-};
-const composeTypographyCss = (typography)=>{
-    const typographyCustom = typography?.custom;
-    const { fontFamily, fontSize, fontStyle, fontWeight, lineHeight, letterSpacing } = typographyCustom?.desktop ?? {};
-    return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily});` : ''}
-  ${fontSize ? `font-size: ${fontSize};` : ''}
-  ${fontStyle ? `font-style: ${fontStyle};` : ''}
-  ${fontWeight ? `font-weight: ${fontWeight};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight};` : ''}
-  `;
-};
-const composeTypographyV2Css = (typography, isImportant)=>{
-    const typographyCustom = typography?.custom;
-    const { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing } = typographyCustom ?? {};
-    const typographyAttrs = typography?.attrs;
-    const { bold, italic, underline, transform } = typographyAttrs ?? {};
-    const composeImportant = isImportant ? '!important' : '';
-    return `
-  ${fontFamily ? `font-family: var(--g-font-${fontFamily}, ${fontFamily}) ${composeImportant};` : ''}
-  ${fontSize?.desktop ? `font-size: ${fontSize?.desktop} ${composeImportant};` : ''}
-  ${bold ? `font-weight: bold ${composeImportant};` : fontWeight ? `font-weight: ${fontWeight} ${composeImportant};` : ''}
-  ${letterSpacing ? `letter-spacing: ${letterSpacing} ${composeImportant};` : ''}
-  ${lineHeight ? `line-height: ${lineHeight} ${composeImportant};` : ''}
-  ${italic ? `font-style: italic ${composeImportant};` : ''}
-  ${underline ? `text-decoration-line: underline ${composeImportant};` : ''}
-  ${transform ? `text-transform: ${transform} ${composeImportant};` : ''}
-  `;
-};
-function getCustomCSSByDevice(typography, device) {
-    if (!typography || !device) return {};
-    const suffix = device === 'desktop' || !device ? '' : `-${device}`;
-    const { fontFamily } = typography?.[device] ?? {};
-    return {
-        [`--size${suffix}`]: typography?.[device]?.fontSize,
-        [`--lh${suffix}`]: typography?.[device]?.lineHeight,
-        [`--fs${suffix}`]: typography?.[device]?.fontStyle,
-        [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
-        [`--weight${suffix}`]: typography?.[device]?.fontWeight,
-        [`--ls${suffix}`]: typography?.[device]?.letterSpacing
-    };
-}
-const composeTypography = (typography)=>{
-    if (!typography) return {};
-    return removeNullUndefined({
-        ...getCustomCSSByDevice(typography, 'desktop'),
-        ...getCustomCSSByDevice(typography, 'tablet'),
-        ...getCustomCSSByDevice(typography, 'mobile')
-    });
-};
-const composeTypographyV2 = (value, attrs)=>{
-    if (!value) return {};
-    return removeNullUndefined({
-        ...makeStyle({
-            fs: !attrs?.italic ? value?.fontStyle : undefined,
-            ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, '${value.fontFamily}'), ${value.fallbackFontFamily}` : undefined,
-            weight: !attrs?.bold ? value?.fontWeight : undefined,
-            ls: value?.letterSpacing,
-            lh: value?.lineHeight
-        }),
-        ...makeStyleResponsive('size', value?.fontSize)
-    });
-};
-const composeTypographyAttr = (attrs)=>{
-    if (!attrs) return {};
-    return removeNullUndefined({
-        ...makeStyle({
-            fs: attrs?.italic ? 'italic' : undefined,
-            weight: attrs?.bold ? 'bold' : undefined,
-            c: getSingleColorVariable(attrs?.color),
-            tt: attrs?.transform,
-            tdl: attrs?.underline ? 'underline' : undefined
-        })
-    });
-};
-const composeTypographyClassName = (typo, typography)=>{
-    return typo ? typo?.type && !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)) {
-        return 'var(--g-font-heading, heading)';
-    }
-    return 'var(--g-font-body, body)';
-};
-const composeTypographyStyle = (typo, typography, disableAttr)=>{
-    if (typo) {
-        const fallbackFontFamily = composeFallbackTypographyStyle(typo.type ?? 'heading');
-        const customTypo = {
-            ...typo.custom,
-            fallbackFontFamily: fallbackFontFamily
-        };
-        return {
-            ...composeTypographyV2(customTypo, typo.attrs),
-            ...!disableAttr && composeTypographyAttr(typo.attrs)
-        };
-    }
-    return {
-        ...!typography?.type ? composeTypography(typography?.custom) : {}
-    };
-};
-
-export { composeFallbackTypographyStyle, composeTypography, composeTypographyAttr, composeTypographyClassName, composeTypographyCss, composeTypographyStyle, composeTypographyV2, composeTypographyV2Css, genTypoClass };
+import{getSingleColorVariable as o}from"./colors.js";import{removeNullUndefined as e,makeStyle as t,makeStyleResponsive as p}from"./make-style.js";let genTypoClass=o=>`gp-g-${o}`,composeTypographyCss=o=>{let e=o?.custom,{fontFamily:t,fontSize:p,fontStyle:a,fontWeight:s,lineHeight:i,letterSpacing:y}=e?.desktop??{};return`
+  ${t?`font-family: var(--g-font-${t}, ${t});`:""}
+  ${p?`font-size: ${p};`:""}
+  ${a?`font-style: ${a};`:""}
+  ${s?`font-weight: ${s};`:""}
+  ${y?`letter-spacing: ${y};`:""}
+  ${i?`line-height: ${i};`:""}
+  `},composeTypographyV2Css=(o,e)=>{let t=o?.custom,{fontFamily:p,fontSize:a,fontWeight:s,lineHeight:i,letterSpacing:y}=t??{},l=o?.attrs,{bold:n,italic:r,underline:g,transform:$}=l??{},c=e?"!important":"";return`
+  ${p?`font-family: var(--g-font-${p}, ${p}) ${c};`:""}
+  ${a?.desktop?`font-size: ${a?.desktop} ${c};`:""}
+  ${n?`font-weight: bold ${c};`:s?`font-weight: ${s} ${c};`:""}
+  ${y?`letter-spacing: ${y} ${c};`:""}
+  ${i?.desktop?`line-height: ${i?.desktop} ${c};`:""}
+  ${r?`font-style: italic ${c};`:""}
+  ${g?`text-decoration-line: underline ${c};`:""}
+  ${$?`text-transform: ${$} ${c};`:""}
+  `};function getCustomCSSByDevice(o,e){if(!o||!e)return{};let t="desktop"!==e&&e?`-${e}`:"",{fontFamily:p}=o?.[e]??{};return{[`--size${t}`]:o?.[e]?.fontSize,[`--lh${t}`]:o?.[e]?.lineHeight,[`--fs${t}`]:o?.[e]?.fontStyle,[`--ff${t}`]:p?`var(--g-font-${p}, ${p})`:void 0,[`--weight${t}`]:o?.[e]?.fontWeight,[`--ls${t}`]:o?.[e]?.letterSpacing}}let composeTypography=o=>o?e({...getCustomCSSByDevice(o,"desktop"),...getCustomCSSByDevice(o,"tablet"),...getCustomCSSByDevice(o,"mobile")}):{},composeTypographyV2=(o,a)=>o?e({...t({fs:a?.italic?void 0:o?.fontStyle,ff:o?.fontFamily?`var(--g-font-${o.fontFamily.replace(/ /g,"-")}, '${o.fontFamily}'), ${o.fallbackFontFamily}`:void 0,weight:a?.bold?void 0:o?.fontWeight,ls:o?.letterSpacing}),...p("size",o?.fontSize),...p("lh",o?.lineHeight)}):{},composeTypographyAttr=p=>p?e({...t({fs:p?.italic?"italic":void 0,weight:p?.bold?"bold":void 0,c:o(p?.color),tt:p?.transform,tdl:p?.underline?"underline":void 0})}):{},composeTypographyClassName=(o,e)=>o?o?.type&&!o.custom?genTypoClass(o.type):"":e?.type&&genTypoClass(e?.type),composeFallbackTypographyStyle=o=>["heading","heading-1","heading-2","heading-3","heading-4","heading-5","heading-6"].includes(o)?"var(--g-font-heading, heading)":"var(--g-font-body, body)",composeTypographyStyle=(o,e,t)=>{if(o){let e=composeFallbackTypographyStyle(o.type??"heading"),p={...o.custom,fallbackFontFamily:e};return{...composeTypographyV2(p,o.attrs),...!t&&composeTypographyAttr(o.attrs)}}return{...e?.type?{}:composeTypography(e?.custom)}};export{composeFallbackTypographyStyle,composeTypography,composeTypographyAttr,composeTypographyClassName,composeTypographyCss,composeTypographyStyle,composeTypographyV2,composeTypographyV2Css,genTypoClass};

package/dist/esm/helpers/variant.js

@@ -1,9 +1 @@
-function checkInStock(variant, product) {
-    if (!variant) return false;
-    return variant?.inventoryQuantity && variant.inventoryQuantity > 0 && !isDefaultVariant(variant, product) || !variant?.manageInventory || variant.inventoryPolicy === 'CONTINUE';
-}
-function isDefaultVariant(variant, product) {
-    return Boolean(variant?.title === 'Default Title' && product?.options?.some((option)=>option.values.length > 1));
-}
-
-export { checkInStock };
+function checkInStock(t,n){return!!t&&(t?.inventoryQuantity&&t.inventoryQuantity>0&&!isDefaultVariant(t,n)||!t?.manageInventory||"CONTINUE"===t.inventoryPolicy)}function isDefaultVariant(t,n){return(n?.[0]?.selectedOptions.length??0)>1&&t?.title==="Default Title"}export{checkInStock};

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

@@ -0,0 +1 @@
+let EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let e=JSON.parse(JSON.stringify(t)),r=["delay","speed","scale","intensity"];return r.forEach(t=>{if(!e?.[t])return;if("scale"===t){if(!e?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[r,a]=e?.scale?.in??[1,1],[n,o]=e?.scale?.out??[1,1];e[t]={in:[Number(r)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let r=Number(e?.[t]);if("delay"===t?e[t]=1e3*r:e[t]=r,!isFinite(r))throw TypeError(`${t} must be a number`)}),e},e=(e,r)=>{let n=t(r),{direction:l,distance:s}=n,p=["left","right"].includes(l??"")?"X":"Y",u=["left","down"].includes(l??"")?"-":"",f=o(e),y=[{display:f,opacity:0,transform:`translate${p}(${u}${s??50}%)`},{display:f,opacity:i(e),transform:`translate${p}(0)`}];return c(e,y,{...a(n,500),fill:"forwards"})},r=(e,r)=>{let n=t(r),o=[{opacity:0},{opacity:i(e)}];return c(e,o,{...a(n,500)})},a=(t,e)=>{let r=t=>t?1.5/t*1e3:e,{loop:a,delay:n,speed:o,easing:i}=t??{},l=r(o),s=n??0,c=a?l+s:l;return{iterations:a?1/0:1,duration:c,delay:s,easing:EASING[i??"linear"]}},n=(e,r)=>{let n=t(r),{scale:l,zoomDirection:s,isFade:p}=n,[u,f]=l.in,[y,m]=l.out,d=o(e),b=i(e),$=[{display:d,transform:`scale(${u}, ${u})`,opacity:p?0:1},{display:d,transform:`scale(${f??1.2}, ${f??1.2})`,opacity:b}],w=[{display:d,transform:`scale(${y}, ${y})`,opacity:p?0:1},{display:d,transform:`scale(${m??.8}, ${m??.8})`,opacity:b}],x="in"===s?$:w;return c(e,x,{...a(n,700),fill:"forwards"})},o=t=>{let e="inline"===window.getComputedStyle(t,null).getPropertyValue("display");return e?"block":void 0},i=t=>window.getComputedStyle(t,null).getPropertyValue("opacity"),l=(t,e,r)=>{if(!e)return t;let a=e/r,n=[...t].pop();return[...t,{...n,offset:1-a}]},s=(e,r)=>{let n=t(r),{intensity:l}=n??{},s=o(e),p=i(e),u=[{transform:"translate3d(0, 0, 0)",opacity:p,display:s}],f=[{transform:"translate3d(4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(4px, 0, 0)",opacity:p,display:s}],y=[];Array.from(Array(l??1).keys()).forEach(()=>{y=[...y,...f]});let m=[{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},...y,{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s}];return c(e,l?m:u,{...a(n??{},820)})},c=(t,e,r)=>{let a=new KeyframeEffect(t,r.iterations&&1===r.iterations?e:l(e,r?.delay??0,r?.duration??0),{...r});return new Animation(a,document.timeline)};return{zoom:n,shake:s,fade:r,slide:e}};export{animations};

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

@@ -1,37 +1 @@
-import { useRef, useCallback } from 'react';
-
-const useAnimationActions = ()=>{
-    const listAnimations = useRef();
-    const setAnimation = useCallback((newListAnimations)=>{
-        listAnimations.current = newListAnimations;
-    }, [
-        listAnimations
-    ]);
-    const playAnimation = useCallback(()=>{
-        if (!listAnimations.current) return;
-        for (const animation of listAnimations.current){
-            animation.play();
-        }
-    }, []);
-    const cancelAnimation = useCallback(()=>{
-        if (!listAnimations.current) return;
-        for (const animation of listAnimations.current){
-            animation.cancel();
-        }
-    }, []);
-    const setAnimationOnFinish = useCallback((onFinish)=>{
-        if (!listAnimations.current) return;
-        for (const animation of listAnimations.current){
-            animation.onfinish = onFinish;
-        }
-    }, []);
-    return {
-        currentAnimation: listAnimations.current,
-        setAnimation,
-        playAnimation,
-        cancelAnimation,
-        setAnimationOnFinish
-    };
-};
-
-export { useAnimationActions };
+import{useRef as r,useCallback as t}from"react";let useAnimationActions=()=>{let n=r(),e=t(r=>{n.current=r},[n]),o=t(()=>{if(n.current)for(let r of n.current)r.play()},[]),c=t(()=>{if(n.current)for(let r of n.current)r.cancel()},[]),i=t(r=>{if(n.current)for(let t of n.current)t.onfinish=r},[]);return{currentAnimation:n.current,setAnimation:e,playAnimation:o,cancelAnimation:c,setAnimationOnFinish:i}};export{useAnimationActions};

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

@@ -1,27 +1 @@
-import { useMemo, useCallback } from 'react';
-import { useCurrentDevice } from '../use-current-device.js';
-
-const useAnimationConfig = (props)=>{
-    const currentDevice = useCurrentDevice();
-    const configByDevices = useMemo(()=>props?.advanced?.animation?.[currentDevice], [
-        currentDevice,
-        props?.advanced?.animation
-    ]);
-    const getAnimationConfig = useCallback(()=>{
-        const { trigger, triggerConfig } = configByDevices;
-        const { animation, setting } = triggerConfig[trigger];
-        return {
-            type: animation,
-            setting: setting[animation]
-        };
-    }, [
-        configByDevices
-    ]);
-    const isEnabledAnimation = configByDevices?.enabled;
-    return {
-        isEnabledAnimation,
-        getAnimationConfig
-    };
-};
-
-export { useAnimationConfig };
+import{useMemo as e,useCallback as n}from"react";import{useCurrentDevice as t}from"../use-current-device.js";let useAnimationConfig=i=>{let a=t(),r=e(()=>i?.advanced?.animation?.[a],[a,i?.advanced?.animation]),o=n(()=>{let{trigger:e,triggerConfig:n}=r,{animation:t,setting:i}=n[e];return{type:t,setting:i[t]}},[r]),m=r?.enabled;return{isEnabledAnimation:m,getAnimationConfig:o}};export{useAnimationConfig};

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

@@ -1,29 +1 @@
-import { useCallback } from 'react';
-
-const useAnimationPreview = ({ props, playAnimation, cancelAnimation, setAnimationOnFinish, setToolbarActive })=>{
-    const previewAnimation = useCallback((e)=>{
-        const { uid, isCancel } = e.detail;
-        if (props.uid !== uid) return;
-        cancelAnimation();
-        if (isCancel) {
-            setToolbarActive(true);
-            return;
-        }
-        playAnimation();
-        setToolbarActive(false);
-        setAnimationOnFinish(()=>{
-            setToolbarActive(true);
-        });
-    }, [
-        props.uid,
-        cancelAnimation,
-        playAnimation,
-        setToolbarActive,
-        setAnimationOnFinish
-    ]);
-    return {
-        previewAnimation
-    };
-};
-
-export { useAnimationPreview };
+import{useCallback as e}from"react";let useAnimationPreview=({props:i,playAnimation:t,cancelAnimation:r,setAnimationOnFinish:n,setToolbarActive:u})=>{let o=e(e=>{let{uid:o,isCancel:a}=e.detail;if(i.uid===o){if(r(),a){u(!0);return}t(),u(!1),n(()=>{u(!0)})}},[i.uid,r,t,u,n]);return{previewAnimation:o}};export{useAnimationPreview};

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

@@ -1,118 +1 @@
-import { useRef, useCallback } from 'react';
-import { useAnimationConfig } from './useAnimationConfig.js';
-
-const SPACING_ACTIVE_ATTRIBUTE = 'data-spacing';
-const TOOLBAR_ACTIVE_ATTRIBUTE = 'data-toolbar-active';
-const OUTLINE_ACTIVE_ATTRIBUTE = 'data-outline-active';
-const TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE = 'data-toolbar-add-active';
-const useAnimationTarget = (props)=>{
-    const { isEnabledAnimation } = useAnimationConfig(props);
-    const componentTag = props.tag;
-    const componentUid = props.uid;
-    const targets = useRef(null);
-    const targetObjects = useRef([]);
-    const setToolbarActive = (isActive)=>{
-        if (!targetObjects.current) return;
-        for (const item of targetObjects.current){
-            if (isActive) {
-                item.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE, 'true');
-                item.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE, 'true');
-                item.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE, 'true');
-                item.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
-                item.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE, 'true');
-            } else {
-                item.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE);
-                item.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE);
-                item.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE);
-                item.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
-                item.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE);
-            }
-        }
-    };
-    const getSectionProperties = (target)=>{
-        const sectionAddTop = target.querySelector('[data-toolbar-add-top]');
-        const sectionAddBottom = target.querySelector('[data-toolbar-add-bottom]');
-        const sectionChild = Array.from(target.children);
-        const sectionToolbar = sectionChild.find((child)=>child.getAttribute('data-toolbar') !== null);
-        const sectionOutline = sectionChild.find((child)=>child.getAttribute('data-outline') !== null);
-        return {
-            sectionToolbar,
-            sectionOutline,
-            sectionAddTop,
-            sectionAddBottom
-        };
-    };
-    const getUpdatedTargetObjects = useCallback((targets)=>{
-        return targets.reduce((accumulator, $rootTarget)=>{
-            let addSectionTop = null;
-            let addSectionBottom = null;
-            let target = $rootTarget;
-            let toolbar = $rootTarget.querySelector('[data-toolbar][data-toolbar-active]');
-            let outline = $rootTarget.querySelector('[data-outline][data-outline-active]');
-            const targetChild = Array.from(target.children);
-            const spacing = targetChild.find((child)=>child.getAttribute('data-spacing') !== null);
-            switch(componentTag){
-                case 'Button':
-                case 'SubmitButton':
-                case 'ProductButton':
-                case 'DynamicCheckout':
-                    target = $rootTarget.querySelector('.gp-button-base');
-                    break;
-                case 'ProductProperties':
-                    target = $rootTarget.querySelector('input');
-                    break;
-                case 'Icon':
-                    target = $rootTarget.firstElementChild;
-                    break;
-                case 'ProductTag':
-                    target = $rootTarget?.children[0]?.children[0];
-                    break;
-                case 'Section':
-                    {
-                        target = $rootTarget;
-                        const { sectionOutline, sectionToolbar, sectionAddTop, sectionAddBottom } = getSectionProperties(target);
-                        outline = sectionOutline;
-                        toolbar = sectionToolbar;
-                        addSectionTop = sectionAddTop;
-                        addSectionBottom = sectionAddBottom;
-                        break;
-                    }
-                default:
-                    target = $rootTarget;
-            }
-            const newTargetObject = {
-                target,
-                toolbar,
-                outline,
-                spacing,
-                addSectionTop,
-                addSectionBottom
-            };
-            accumulator.push(newTargetObject);
-            return accumulator;
-        }, []);
-    }, [
-        componentTag
-    ]);
-    const initListOfTargets = useCallback(()=>{
-        if (!isEnabledAnimation) return;
-        if (!targets.current) {
-            targets.current = document.querySelectorAll(`[data-uid="${componentUid}"]`);
-        }
-        const targetsArray = Array.from(targets.current);
-        if (!targetsArray.length) return;
-        const updatedTargetObjects = getUpdatedTargetObjects(targetsArray);
-        targetObjects.current = updatedTargetObjects;
-    }, [
-        componentUid,
-        getUpdatedTargetObjects,
-        isEnabledAnimation
-    ]);
-    return {
-        targetObjects,
-        setToolbarActive,
-        initListOfTargets
-    };
-};
-
-export { useAnimationTarget };
+import{useRef as t,useCallback as e}from"react";import{useAnimationConfig as r}from"./useAnimationConfig.js";let SPACING_ACTIVE_ATTRIBUTE="data-spacing-margin-bottom-active",TOOLBAR_ACTIVE_ATTRIBUTE="data-toolbar-active",OUTLINE_ACTIVE_ATTRIBUTE="data-outline-active",TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE="data-toolbar-add-active",useAnimationTarget=a=>{let{isEnabledAnimation:o}=r(a),T=a.tag,u=a.uid,i=t(null),A=t([]),n=t=>{if(A.current)for(let e of A.current)t?(e.toolbar?.setAttribute(TOOLBAR_ACTIVE_ATTRIBUTE,"true"),e.outline?.setAttribute(OUTLINE_ACTIVE_ATTRIBUTE,"true"),e.spacing?.setAttribute(SPACING_ACTIVE_ATTRIBUTE,"true"),e.addSectionTop?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true"),e.addSectionBottom?.setAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE,"true")):(e.toolbar?.removeAttribute(TOOLBAR_ACTIVE_ATTRIBUTE),e.outline?.removeAttribute(OUTLINE_ACTIVE_ATTRIBUTE),e.spacing?.removeAttribute(SPACING_ACTIVE_ATTRIBUTE),e.addSectionTop?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE),e.addSectionBottom?.removeAttribute(TOOLBAR_ADD_SECTION_ACTIVE_ATTRIBUTE))},l=t=>{let e=t.querySelector("[data-toolbar-add-top]"),r=t.querySelector("[data-toolbar-add-bottom]"),a=Array.from(t.children),o=a.find(t=>null!==t.getAttribute("data-toolbar")),T=a.find(t=>null!==t.getAttribute("data-outline"));return{sectionToolbar:o,sectionOutline:T,sectionAddTop:e,sectionAddBottom:r}},c=e(t=>t.reduce((t,e)=>{let r=null,a=null,o=e,u=e.querySelector("[data-toolbar][data-toolbar-active]"),i=e.querySelector("[data-outline][data-outline-active]"),A=Array.from(o.children),n=A.find(t=>{let e=t.getAttribute("data-spacing");return null!==e&&t.querySelector("[data-spacing-margin-bottom")});switch(T){case"Button":case"SubmitButton":case"ProductButton":case"DynamicCheckout":o=e.querySelector(".gp-button-base");break;case"ProductProperties":o=e.querySelector("input");break;case"Icon":o=e.firstElementChild;break;case"ProductTag":o=e?.children[0]?.children[0];break;case"Section":{o=e;let{sectionOutline:t,sectionToolbar:T,sectionAddTop:A,sectionAddBottom:n}=l(o);i=t,u=T,r=A,a=n;break}default:o=e}let c={target:o,toolbar:u,outline:i,spacing:n,addSectionTop:r,addSectionBottom:a};return t.push(c),t},[]),[T]),d=e(()=>{if(!o)return;i.current||(i.current=document.querySelectorAll(`[data-uid="${u}"]`));let t=Array.from(i.current);if(!t.length)return;let e=c(t);A.current=e},[u,c,o]);return{targetObjects:A,setToolbarActive:n,initListOfTargets:d}};export{useAnimationTarget};

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

@@ -1,83 +1 @@
-import { useCallback, useEffect } from 'react';
-import { useAnimations } from '../useAnimations.js';
-import { useAnimationTarget } from './useAnimationTarget.js';
-import { useAnimationConfig } from './useAnimationConfig.js';
-import { useAnimationActions } from './useAnimationActions.js';
-import { useAnimationPreview } from './useAnimationPreview.js';
-import { AnimationType } from '../../types/animations.js';
-
-const useApplyAnimation = ({ props })=>{
-    const currentProps = props;
-    const { uid: componentUid } = currentProps;
-    const animation = useAnimations();
-    const { initListOfTargets, targetObjects, setToolbarActive } = useAnimationTarget(currentProps);
-    const { isEnabledAnimation, getAnimationConfig } = useAnimationConfig(currentProps);
-    const { setAnimation, cancelAnimation, playAnimation, setAnimationOnFinish } = useAnimationActions();
-    const { previewAnimation } = useAnimationPreview({
-        props: currentProps,
-        playAnimation,
-        cancelAnimation,
-        setAnimationOnFinish,
-        setToolbarActive
-    });
-    const generateAnimation = useCallback(({ target, setting, type })=>{
-        return animation[type](target, setting);
-    }, [
-        animation
-    ]);
-    const initListAnimations = useCallback(()=>{
-        const { type, setting } = getAnimationConfig();
-        if (!type || type === AnimationType.None || !targetObjects.current.length) {
-            cancelAnimation();
-            return;
-        }
-        const listAnimations = targetObjects.current.map((item)=>generateAnimation({
-                type,
-                setting,
-                target: item.target
-            }));
-        cancelAnimation();
-        setAnimation(listAnimations);
-    }, [
-        getAnimationConfig,
-        targetObjects,
-        cancelAnimation,
-        setAnimation,
-        generateAnimation
-    ]);
-    useEffect(()=>{
-        if (isEnabledAnimation) {
-            initListOfTargets();
-            initListAnimations();
-        } else {
-            cancelAnimation();
-        }
-        return ()=>{
-            cancelAnimation();
-        };
-    }, [
-        componentUid,
-        initListAnimations,
-        cancelAnimation,
-        isEnabledAnimation,
-        initListOfTargets
-    ]);
-    useEffect(()=>{
-        window.addEventListener('preview-animation', previewAnimation);
-        return ()=>{
-            window.removeEventListener('preview-animation', previewAnimation);
-        };
-    }, [
-        previewAnimation
-    ]);
-    useEffect(()=>{
-        window.addEventListener('init-animation-target', initListOfTargets);
-        return ()=>{
-            window.removeEventListener('init-animation-target', initListOfTargets);
-        };
-    }, [
-        initListOfTargets
-    ]);
-};
-
-export { useApplyAnimation as default };
+import{useCallback as t,useEffect as i}from"react";import{useAnimations as e}from"../useAnimations.js";import{useAnimationTarget as n}from"./useAnimationTarget.js";import{useAnimationConfig as o}from"./useAnimationConfig.js";import{useAnimationActions as r}from"./useAnimationActions.js";import{useAnimationPreview as m}from"./useAnimationPreview.js";import{AnimationType as a}from"../../types/animations.js";let useApplyAnimation=({props:s})=>{let{uid:p}=s,u=e(),{initListOfTargets:w,targetObjects:d,setToolbarActive:f}=n(s),{isEnabledAnimation:A,getAnimationConfig:v}=o(s),{setAnimation:l,cancelAnimation:g,playAnimation:j,setAnimationOnFinish:c}=r(),{previewAnimation:E}=m({props:s,playAnimation:j,cancelAnimation:g,setAnimationOnFinish:c,setToolbarActive:f}),L=t(({target:t,setting:i,type:e})=>u[e](t,i),[u]),y=t(()=>{let{type:t,setting:i}=v();if(!t||t===a.None||!d.current.length){g();return}let e=d.current.map(e=>L({type:t,setting:i,target:e.target}));g(),l(e)},[v,d,g,l,L]);i(()=>(A?(w(),y()):g(),()=>{g()}),[p,y,g,A,w]),i(()=>(window.addEventListener("preview-animation",E),()=>{window.removeEventListener("preview-animation",E)}),[E]),i(()=>(window.addEventListener("init-animation-target",w),()=>{window.removeEventListener("init-animation-target",w)}),[w])};export{useApplyAnimation as default};

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

@@ -0,0 +1 @@
+import{useState as r,useRef as e,useCallback as t,useEffect as n}from"react";import{animations as u}from"./animations.js";let TAGS_SELECTOR={Button:".gp-button-base",ProductButton:".gp-button-base",Sticky:"gp-sticky",Dialog:"div[role=dialog]",Icon:"div div",ProductTag:"div div div",Product:"product-form form div"},useLivePageAnimation=(c,o,i)=>{let a=u(),[l,s]=r(!1),d=e(void 0),p=e(void 0),m=e(null),v=e("none"),g=e("none"),b=e(null),f=e(null),y=e(null),h=e("animation-wrapper-"),k=t(r=>{b.current&&(b.current.playbackRate=r??1,b.current.play())},[b]),E=t(r=>{f.current&&(f.current.playbackRate=r??1,f.current.play())},[f]),L=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="1")},[c]),S=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="0")},[c]),T=t(r=>{r&&r.stopPropagation(),"shake"!==v.current&&S(),b.current&&(f.current?.cancel(),k(),b.current.finished.then(()=>{m.current&&L()}),m.current&&d?.current?.unobserve(m.current))},[S,k,L]),P=t(()=>{L(),b.current&&b.current.cancel()},[L,b]),R=t(r=>{r&&r.stopPropagation(),f.current&&(P(),E())},[f,P,E]),C=t(()=>{if(f.current){if("zoom"===g.current){if(E(-1),!l)return;f.current.finished.then(()=>{clearTimeout(p.current),p.current=setTimeout(()=>{T()},100)});return}f.current.cancel(),l&&T()}},[E,l,T]),w=t(()=>{if("desktop"===y.current);else if("tablet"===y.current)return o?.tablet??o?.desktop;else if("mobile"===y.current)return o?.mobile??o?.tablet??o?.desktop;return o?.desktop},[o?.desktop,o?.mobile,o?.tablet]),A=(r,e)=>r?.triggerConfig?.[e]?.animation??"none",O=t(r=>{if("none"===v.current)return;let e=r?.triggerConfig?.appear?.setting?.[v.current];s(e.loop),b.current=a?.[v.current]?.(m.current,e)},[a]),B=t(r=>{if("none"===g.current)return;let e=r?.triggerConfig?.hover?.setting?.[g.current];f.current=a?.[g.current]?.(m.current,e)},[a]),$=t(()=>{b.current&&(b.current=null,m.current&&d.current?.unobserve(m.current)),f&&(f.current=null,m.current&&(m.current.removeEventListener("mouseenter",R),m.current.removeEventListener("mouseleave",C)))},[C,R]),q=t(r=>{if($(),m.current){if(!r?.enabled){L();return}v.current=A(r,"appear"),g.current=A(r,"hover"),"none"===v.current&&L(),"none"!==g.current&&"desktop"===y.current&&(B(r),m.current.addEventListener("mouseenter",R),m.current.addEventListener("mouseleave",C)),"none"!==v.current?(O(r),d.current=new IntersectionObserver(r=>{r.forEach(r=>{r.intersectionRatio>.1&&T()})},{root:null,rootMargin:"0px",threshold:[.1]}),d.current.observe(m.current)):L()}},[C,O,B,T,R,L,$]),x=t(()=>{let r=document.querySelector("html");if(!m.current||!r)return;let e=new ResizeObserver(([r])=>{let e;let t=r?.target.getBoundingClientRect().width??0;e=t>=1024?"desktop":t>=768?"tablet":"mobile",y.current!==e&&(y.current=e,q(w()))});return e.observe(r),()=>e.disconnect()},[w,q]);return n(()=>{setTimeout(()=>{if(o&&c.current)return h.current=`animation-wrapper-${Math.random().toString(36).substr(2,5)}`,c.current.setAttribute("data-animationid",h.current),m.current=document.querySelector(`[data-animationid='${h.current}'] ${TAGS_SELECTOR?.[i]??""}`),x()},100)},[x,o,i,c]),{initAnimation:q}};export{useLivePageAnimation};