@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/marquee/components/Marquee.liquid.js

@@ -1,233 +1,28 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-var MarqueeBase_liquid = require('./MarqueeBase.liquid.js');
-
-const Marquee = ({ children, style, builderAttrs, rawChildren, advanced, ...props })=>{
-    const { styles, setting, builderProps } = props;
-    const { itemSpacing, sizeSetting, iconSeparatorSize, iconSeparatorColor, backgroundColor } = styles || {};
-    const { iconSeparatorSvg, isShowIconSeparator, itemWidthType } = setting || {};
-    const styleHeight = core.makeStyleResponsive('h', core.getHeightByShapeGlobalSize(sizeSetting));
-    const styleWidth = core.makeStyleWithDefault('w', core.getWidthByShapeGlobalSize(sizeSetting, true), {
-        desktop: '--g-ct-w',
-        tablet: '--g-ct-w',
-        mobile: '--g-ct-w'
-    });
-    const getItemSpacingValue = (currentDevice)=>{
-        const itemSpacingValueByScreen = core.getResponsiveValueByScreen(itemSpacing, currentDevice);
-        return itemSpacingValueByScreen || '0px';
-    };
-    const getIconPosition = ()=>{
-        return {
-            ...core.makeStyleResponsive('ml', {
-                desktop: getItemSpacingValue('desktop'),
-                tablet: getItemSpacingValue('tablet'),
-                mobile: getItemSpacingValue('mobile')
-            }),
-            ...core.makeStyleResponsive('mr', {
-                desktop: getItemSpacingValue('desktop'),
-                tablet: getItemSpacingValue('tablet'),
-                mobile: getItemSpacingValue('mobile')
-            })
-        };
-    };
-    const getSpacingResponsive = (key)=>{
-        return core.makeStyleResponsive(key, {
-            desktop: hasIcon ? '0px' : getItemSpacingValue('desktop'),
-            tablet: hasIcon ? '0px' : getItemSpacingValue('tablet'),
-            mobile: hasIcon ? '0px' : getItemSpacingValue('mobile')
-        });
-    };
-    const getWidthOfIconSeparatorSize = ()=>{
-        return {
-            ...core.makeStyleResponsive('w', {
-                desktop: `${core.getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-                tablet: `${core.getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-                mobile: `${core.getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-            }),
-            ...core.makeStyleResponsive('minw', {
-                desktop: `${core.getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-                tablet: `${core.getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-                mobile: `${core.getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-            })
-        };
-    };
-    const getHeightOfIconSeparatorSize = ()=>{
-        return core.makeStyleResponsive('h', {
-            desktop: `${core.getValueByDevice(iconSeparatorSize, 'desktop') || 0}px`,
-            tablet: `${core.getValueByDevice(iconSeparatorSize, 'tablet') || 0}px`,
-            mobile: `${core.getValueByDevice(iconSeparatorSize, 'mobile') || 0}px`
-        });
-    };
-    const itemSize = rawChildren.length;
-    const getIsFullWidthValue = (currentDevice)=>{
-        const itemWidthTypeValue = core.getResponsiveValueByScreen(itemWidthType, currentDevice);
-        if (itemWidthTypeValue === 'FIT_CONTENT') {
-            return false;
-        }
-        if (itemWidthTypeValue === 'BASE_ON_NUMBER_OF_ITEMS') {
-            return true;
-        }
-        const itemMaxWidthValue = core.getResponsiveValueByScreen(styles?.itemMaxWidth, currentDevice);
-        return itemMaxWidthValue?.includes('%');
-    };
-    const getItemMaxWidthValueByScreen = (device)=>{
-        let value = core.getResponsiveValueByScreen(styles?.itemMaxWidth, device);
-        const itemWidthTypeValue = core.getResponsiveValueByScreen(itemWidthType, device);
-        if (itemWidthTypeValue === 'FIT_CONTENT') {
-            value = 'auto';
-        }
-        if (itemWidthTypeValue === 'BASE_ON_NUMBER_OF_ITEMS') {
-            value = `calc(100% / ${itemSize})`;
-        }
-        return value;
-    };
-    const getMaxWidth = (device)=>{
-        return getItemMaxWidthValueByScreen(device) === 'auto' ? 'unset' : getItemMaxWidthValueByScreen(device);
-    };
-    const getWidthForWrapperItem = ()=>{
-        return {
-            ...core.makeStyleResponsive('w', {
-                desktop: getItemMaxWidthValueByScreen('desktop'),
-                tablet: getItemMaxWidthValueByScreen('tablet'),
-                mobile: getItemMaxWidthValueByScreen('mobile')
-            }),
-            ...core.makeStyleResponsive('minw', {
-                desktop: getItemMaxWidthValueByScreen('desktop'),
-                tablet: getItemMaxWidthValueByScreen('tablet'),
-                mobile: getItemMaxWidthValueByScreen('mobile')
-            }),
-            ...core.makeStyleResponsive('maxw', {
-                desktop: getMaxWidth('desktop'),
-                tablet: getMaxWidth('tablet'),
-                mobile: getMaxWidth('mobile')
-            })
-        };
-    };
-    const isFullWidthResponsive = ()=>{
-        return {
-            desktop: getIsFullWidthValue('desktop'),
-            tablet: getIsFullWidthValue('tablet'),
-            mobile: getIsFullWidthValue('mobile')
-        };
-    };
-    const getWidthForItem = ()=>{
-        return core.makeStyleResponsive('w', {
-            desktop: `calc(100%)`,
-            tablet: `calc(100%)`,
-            mobile: `calc(100%)`
-        });
-    };
-    const getFullWidthForItemByDevice = (device)=>{
-        const isFullWidth = getIsFullWidthValue(device);
-        return isFullWidth ? '100%' : 'unset';
-    };
-    const getFullWidthForItem = ()=>{
-        return core.makeStyleResponsive('w', {
-            desktop: getFullWidthForItemByDevice('desktop'),
-            tablet: getFullWidthForItemByDevice('tablet'),
-            mobile: getFullWidthForItemByDevice('mobile')
-        });
-    };
-    const hasIcon = isShowIconSeparator && iconSeparatorSvg;
-    const wrapperStyle = {
-        '--z': style?.['--z'],
-        '--pos': style?.['--pos'],
-        '--top': style?.['--top'],
-        '--right': style?.['--right'],
-        '--bottom': style?.['--bottom'],
-        '--left': style?.['--left']
-    };
-    return core.template` 
-  ${core.RenderIf(core.isLocalEnv, `<script src="{{ 'gp-marquee.js' | asset_url }}" defer="defer"></script>`, `<script src="${core.baseAssetURL}/assets-v2/gp-marquee.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  <gp-marquee
-   data-id="${builderProps?.uid}"
-    style="${wrapperStyle}"
-  gp-data='${JSON.stringify({
-        setting: {
-            ...setting,
-            uid: builderProps?.uid
-        },
-        styles
-    })}'
-  class="${core.cls(builderProps?.uid, advanced?.cssClass)}"
-  >
-   <div
-      class="gp-flex gp-w-full gp-relative"
-      style="${{
-        ...core.makeStyleResponsive('jc', styles?.align)
-    }}"
-    >
-  <div class="!gp-relative gp-overflow-hidden" style="${{
-        ...styleHeight,
-        ...styleWidth,
-        ...core.getGlobalColorResponsiveStyle('bg', backgroundColor),
-        ...style
-    }}">
-        <div
-    class="gem-marquee gp-overflow-hidden gp-w-full gp-h-full"
-     
-    >
-     <div class="gp-overflow-hidden gp-w-full gp-h-full">
-       ${MarqueeBase_liquid.default({
-        speed: props.setting?.speed,
-        autoFill: true,
-        direction: props.setting?.direction,
-        play: (props.setting?.speed || 0) > 0,
-        isFullWidthResponsive: isFullWidthResponsive(),
-        pauseOnHover: props.setting?.stopOnHover,
-        children: ` <div class="gp-flex gem-child-marquee-item gp-items-center" style="${getFullWidthForItem()}">
-      ${rawChildren?.length ? core.WrapRenderChildren({
-            uid: builderProps?.uid || '',
-            customProps: rawChildren[0]?.customProps
-        }, rawChildren.map((child, index)=>{
-            if (child) {
-                return core.template` <div
-                  class="gp-inline-flex gp-items-center gp-relative"
-                  style="${{
-                    ...index < itemSize ? getSpacingResponsive('pr') : {},
-                    'text-wrap': 'wrap',
-                    ...getWidthForWrapperItem()
-                }}"
-                >
-                  ${core.RenderChildren({
-                    ...child,
-                    index,
-                    itemBorderStyle: styles?.itemBorderStyle,
-                    itemCorner: styles?.itemCorner,
-                    itemBackgroundColor: styles?.itemBackgroundColor,
-                    hasItemShadow: setting?.hasItemShadow,
-                    itemShadow: styles?.itemShadow,
-                    itemStyles: getWidthForItem()
-                })}
-                   ${isShowIconSeparator && iconSeparatorSvg ? core.template`<span
-                      style="${{
-                    ...core.makeStyle({
-                        c: iconSeparatorColor
-                    }),
-                    ...getWidthOfIconSeparatorSize(),
-                    ...getHeightOfIconSeparatorSize(),
-                    ...index < itemSize ? getIconPosition() : {}
-                }}"
-                      class="gp-flex gp-items-center gp-justify-center [&>svg]:gp-h-full [&>svg]:gp-w-full"
-                     
-                    >
-                    ${iconSeparatorSvg}
-                    </span>` : ''}
-                </div>`;
-            }
-        })) : children}
-    </div>`
-    })}
-     </div>
-    </div>
-  
-  </div>
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),MarqueeBase_liquid=require("./MarqueeBase.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Marquee=({children:e,style:s,builderAttrs:t,rawChildren:r,advanced:a,...l})=>{let{styles:i,setting:c,builderProps:d}=l,{iconSeparatorColor:o,backgroundColor:n}=i||{},{iconSeparatorSvg:u,isShowIconSeparator:m}=c||{},y=r.length,{isFullWidth:p,getIsFullWidthValue:g}=helpers.useMarqueeLiquidStyles(c,i),{styleHeight:C,styleWidth:q,getWidthForWrapperItem:S,getHeightOfIconSeparatorSize:v,getWidthOfIconSeparatorSize:$,getIconPosition:h,getItemPaddingRightSpacingValue:M,getWidthForItem:f}=styles.getMarqueeStyles({itemSize:y,setting:c,styles:i}),j=()=>({desktop:g("desktop"),tablet:g("tablet"),mobile:g("mobile")}),B=system.createClass(classes.getAlignClasses),F=system.createStyle(styles.getAlignStyles(i)),I=system.createStyle(styles.getContentStyles({style:s,backgroundColor:n,styleWidth:q,styleHeight:C})),b=system.createClass(classes.getContentClasses),k=system.createClass(classes.getWrapperClasses(d?.uid)),w=system.createClass(classes.getFastMarqueeContentClasses),O=system.createClass(classes.getFastMarqueeClasses),R=system.createClass(classes.getFastMarqueeContentChildrenClasses(p)),_=e=>system.createStyle(styles.getFastMarqueeChildrenIconStyles({index:e,itemSize:y,iconSeparatorColor:o,getHeightOfIconSeparatorSize:v,getWidthOfIconSeparatorSize:$,getIconPosition:h})),A=system.createClass(classes.getFastMarqueeChildrenIconClasses),E=e=>system.createStyle({...M(e),"text-wrap":"wrap",...S()}),x=system.createStyle(f()),P=system.createStateOrContext({setting:{...c,uid:d?.uid},styles:i}),L=()=>core.RenderIf(core.isLocalEnv,'<script src="{{ \'gp-marquee-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${core.baseAssetURL}/assets-v2/gp-marquee-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
+  ${L()}
+  <gp-marquee data-id="${d?.uid}" gp-data='${JSON.stringify(P)}'
+   class="${core.cls(d?.uid,a?.cssClass)}">
+   <div class="${B}" style="${F}">
+      <div class="${b}" style="${I}">
+         <div class="${k}">
+            <div class="${O}">
+               ${MarqueeBase_liquid.default({speed:l.setting?.speed,autoFill:!0,direction:l.setting?.direction,play:(l.setting?.speed??0)>0,pauseOnHover:l.setting?.stopOnHover,isFullWidthResponsive:j(),children:`
+               <div class="${w}">
+                  ${r?.length?core.WrapRenderChildren({uid:d?.uid??"",customProps:r[0]?.customProps},r.map((e,s)=>{if(e)return core.template`
+                  <div class="${R}"
+                     style="${E(s)}">
+                     ${core.RenderChildren({...e,index:s,itemBorderStyle:i?.itemBorderStyle,itemCorner:i?.itemCorner,itemBackgroundColor:i?.itemBackgroundColor,hasItemShadow:c?.hasItemShadow,itemShadow:i?.itemShadow,itemStyles:x})}
+                     ${system.If(!!(m&&u),core.template`<span style="${_(s)}"
+                        class="${A}">
+                        ${u}
+                     </span>`)}
+                  </div>
+                  `})):e}
+               </div>
+               `})}
+            </div>
+         </div>
+      </div>
    </div>
-  </gp-marquee>
-`;
-};
-
-exports.default = Marquee;
+</gp-marquee>
+`};exports.default=Marquee;

package/dist/cjs/marquee/components/MarqueeBase.js

@@ -1,216 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var React = require('react');
-
-const Marquee = /*#__PURE__*/ React.forwardRef(function Marquee({ style = {}, className = '', autoFill = false, play = true, pauseOnHover = false, pauseOnClick = false, direction = 'left', speed = 50, delay = 0, loop = 0, onFinish, onCycleComplete, onMount, children, isFullWidth, uniqueId }, ref) {
-    const mode = core.useEditorMode();
-    // React Hooks
-    const [containerWidth, setContainerWidth] = React.useState(0);
-    const [marqueeWidth, setMarqueeWidth] = React.useState(0);
-    const [multiplier, setMultiplier] = React.useState(1);
-    const [isMounted, setIsMounted] = React.useState(false);
-    const rootRef = React.useRef(null);
-    const containerRef = ref || rootRef;
-    const marqueeRef = React.useRef(null);
-    const timeout = React.useRef(null);
-    // Calculate width of container and marquee and set multiplier
-    const calculateWidth = React.useCallback(()=>{
-        if (marqueeRef.current && containerRef.current) {
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const marqueeRect = marqueeRef.current.getBoundingClientRect();
-            let containerWidth = containerRect.width;
-            let marqueeWidth = marqueeRect.width;
-            if (marqueeWidth < 40) {
-                return;
-            }
-            if (isFullWidth) {
-                marqueeWidth = containerWidth;
-                marqueeRef.current.style.width = `${marqueeWidth}px`;
-            } else {
-                marqueeRef.current.style.width = 'auto';
-            }
-            // Swap width and height if direction is up or down
-            if (direction === 'up' || direction === 'down') {
-                containerWidth = containerRect.height;
-                marqueeWidth = marqueeRect.height;
-            }
-            if (autoFill && containerWidth && marqueeWidth) {
-                setMultiplier(Math.min(60, marqueeWidth < containerWidth ? Math.ceil(containerWidth / marqueeWidth) + 1 : 1));
-            } else {
-                setMultiplier(2);
-            }
-            setContainerWidth(containerWidth);
-            setMarqueeWidth(marqueeWidth);
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        autoFill,
-        containerRef,
-        direction,
-        isFullWidth,
-        children
-    ]);
-    // Calculate width and multiplier on mount and on window resize
-    React.useEffect(()=>{
-        if (!isMounted) return;
-        if (marqueeRef.current && containerRef.current) {
-            const resizeObserver = new ResizeObserver(()=>{
-                timeout.current && clearTimeout(timeout.current);
-                timeout.current = setTimeout(()=>{
-                    calculateWidth();
-                }, 600);
-            });
-            resizeObserver.observe(marqueeRef.current);
-            resizeObserver.observe(containerRef.current);
-            return ()=>{
-                if (!resizeObserver) return;
-                resizeObserver.disconnect();
-            };
-        }
-    }, [
-        calculateWidth,
-        containerRef,
-        isMounted
-    ]);
-    // Recalculate width when children change
-    React.useEffect(()=>{
-        if (mode === 'edit') {
-            timeout.current = setTimeout(()=>{
-                calculateWidth();
-            }, 500);
-        }
-    }, [
-        children,
-        calculateWidth,
-        mode
-    ]);
-    React.useEffect(()=>{
-        setIsMounted(true);
-        return ()=>{
-            timeout.current && clearTimeout(timeout.current);
-        };
-    }, []);
-    // Runs the onMount callback, if it is a function, when Marquee is mounted.
-    React.useEffect(()=>{
-        if (typeof onMount === 'function') {
-            onMount();
-        }
-    }, [
-        onMount
-    ]);
-    // Animation duration
-    const duration = React.useMemo(()=>{
-        if (autoFill) {
-            return marqueeWidth * multiplier / speed;
-        } else {
-            return marqueeWidth < containerWidth ? containerWidth / speed : marqueeWidth / speed;
-        }
-    }, [
-        autoFill,
-        containerWidth,
-        marqueeWidth,
-        multiplier,
-        speed
-    ]);
-    const containerStyle = React.useMemo(()=>({
-            ...style,
-            marginLeft: '1px',
-            ['--pause-on-hover']: !play || pauseOnHover ? 'paused' : 'running',
-            ['--pause-on-click']: !play || pauseOnHover && !pauseOnClick || pauseOnClick ? 'paused' : 'running',
-            ['--width']: direction === 'up' || direction === 'down' ? `100vh` : '100%',
-            ['--transform']: direction === 'up' ? 'rotate(-90deg)' : direction === 'down' ? 'rotate(90deg)' : 'none'
-        }), [
-        style,
-        play,
-        pauseOnHover,
-        pauseOnClick,
-        direction
-    ]);
-    const marqueeStyle = React.useMemo(()=>({
-            ['--play']: play ? 'running' : 'paused',
-            ['--direction']: direction === 'left' ? 'normal' : 'reverse',
-            ['--duration']: `${duration}s`,
-            ['--delay']: `${delay}s`,
-            ['--iteration-count']: loop ? `${loop}` : 'infinite',
-            ['--min-width']: autoFill ? `auto` : '100%',
-            width: isFullWidth ? '100%' : 'auto'
-        }), [
-        play,
-        direction,
-        duration,
-        delay,
-        loop,
-        autoFill,
-        isFullWidth
-    ]);
-    const childStyle = React.useMemo(()=>({
-            ['--transform']: direction === 'up' ? 'rotate(90deg)' : direction === 'down' ? 'rotate(-90deg)' : 'none',
-            width: isFullWidth ? '100%' : 'auto',
-            minWidth: isFullWidth ? '100%' : 'unset'
-        }), [
-        direction,
-        isFullWidth
-    ]);
-    // Render {multiplier} number of children
-    const multiplyChildren = React.useCallback((multiplier)=>{
-        return [
-            ...Array(Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0)
-        ].map((_, i)=>/*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
-                children: React.Children.map(children, (child)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        "marquee-item-key": `${uniqueId}-${i + 100}`,
-                        style: childStyle,
-                        className: "rfm-child",
-                        children: child
-                    });
-                })
-            }, i));
-    }, [
-        childStyle,
-        children,
-        uniqueId
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ref: containerRef,
-        style: {
-            ...containerStyle,
-            overflow: 'unset'
-        },
-        className: 'rfm-marquee-container ' + className,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "rfm-marquee",
-                style: marqueeStyle,
-                onAnimationIteration: onCycleComplete,
-                onAnimationEnd: onFinish,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `rfm-initial-child-container`,
-                        ref: marqueeRef,
-                        children: React.Children.map(children, (child)=>{
-                            return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                style: childStyle,
-                                "marquee-item-key": `${uniqueId}-0`,
-                                className: `rfm-child ${isFullWidth ? 'gp-w-full' : ''}`,
-                                children: child
-                            }, String(child));
-                        })
-                    }),
-                    multiplyChildren(multiplier - 1)
-                ]
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "rfm-marquee",
-                style: marqueeStyle,
-                children: multiplyChildren(multiplier)
-            })
-        ]
-    });
-});
-var FastMarquee = /*#__PURE__*/ React.memo(Marquee);
-
-exports.default = FastMarquee;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),useMarqueeBase=require("../hooks/useMarqueeBase.js"),system=require("@gem-sdk/system");const Marquee=React.forwardRef(function(e,s){let{className:r="",onFinish:a,onCycleComplete:t,children:i,isFullWidth:m,uniqueId:n}=e,{containerRef:u,containerStyle:l,childStyle:c,marqueeStyle:d,marqueeRef:o,multiplier:j}=useMarqueeBase.useMarqueeBase(e,s),x=React.useCallback(e=>[...Array(Number.isFinite(e)&&e>=0?e:0)].map((e,s)=>jsxRuntime.jsx(React.Fragment,{children:React.Children.map(i,e=>jsxRuntime.jsx("div",{"marquee-item-key":`${n}-${s+100}`,style:c,className:"rfm-child",children:e}))},s)),[c,i,n]),q=system.createStyle(l),y=system.createStyle(c),R=system.createStyle(d);return jsxRuntime.jsxs("div",{ref:u,style:{...q,overflow:"unset"},className:"rfm-marquee-container "+r,children:[jsxRuntime.jsxs("div",{className:"rfm-marquee",style:R,onAnimationIteration:t,onAnimationEnd:a,children:[jsxRuntime.jsx("div",{className:"rfm-initial-child-container",ref:o,children:React.Children.map(i,e=>jsxRuntime.jsx("div",{style:y,"marquee-item-key":`${n}-0`,className:`rfm-child ${m?"gp-w-full":""}`,children:e},String(e)))}),x(j-1)]}),jsxRuntime.jsx("div",{className:"rfm-marquee",style:d,children:x(j)})]})});var MarqueeBase=React.memo(Marquee);exports.default=MarqueeBase;

package/dist/cjs/marquee/components/MarqueeBase.liquid.js

@@ -1,72 +1,14 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@gem-sdk/core');
-
-const MarqueeBase = ({ style = {}, autoFill = false, play = true, pauseOnHover = false, pauseOnClick = false, direction = 'left', delay = 0, loop = 0, isFullWidthResponsive, children })=>{
-    const containerStyle = ()=>({
-            ...style,
-            ['--pause-on-hover']: !play || pauseOnHover ? 'paused' : 'running',
-            ['--pause-on-click']: !play || pauseOnHover && !pauseOnClick || pauseOnClick ? 'paused' : 'running',
-            ['--width']: '100%',
-            ['--transform']: 'none',
-            overflow: 'hidden',
-            'min-width': '100%'
-        });
-    const marqueeStyle = ()=>({
-            ['--play']: play ? 'running' : 'paused',
-            ['--direction']: direction === 'left' ? 'normal' : 'reverse',
-            ['--delay']: `${delay}s`,
-            ['--iteration-count']: loop ? `${loop}` : 'infinite',
-            ['--min-width']: autoFill ? `auto` : '100%',
-            ...getWidthMarquee()
-        });
-    const childStyle = ()=>({
-            ['--transform']: direction === 'up' ? 'rotate(90deg)' : direction === 'down' ? 'rotate(-90deg)' : 'none',
-            ...getWidthMarquee()
-        });
-    const getWidthValue = (currentDevice)=>{
-        const isFullWidthByScreen = core.getResponsiveValueByScreen(isFullWidthResponsive, currentDevice);
-        return isFullWidthByScreen ? '100%' : 'auto';
-    };
-    const getWidthMarquee = ()=>{
-        return {
-            ...core.makeStyleResponsive('w', {
-                desktop: getWidthValue('desktop'),
-                tablet: getWidthValue('tablet'),
-                mobile: getWidthValue('mobile')
-            }),
-            ...core.makeStyleResponsive('minw', {
-                desktop: getWidthValue('desktop'),
-                tablet: getWidthValue('tablet'),
-                mobile: getWidthValue('mobile')
-            })
-        };
-    };
-    return core.template`
-   <div
-      style="${containerStyle()}"
-      class="rfm-marquee-container"
-    >
-      <div
-        class="rfm-marquee"
-        style="${marqueeStyle()}"
-      >
-        <div class="rfm-initial-child-container">
-          ${core.template`
-            <div style="${childStyle()}" class="${`rfm-child`}">
-              ${children}
-            </div>
-          `}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),styles=require("../common/styles.js"),system=require("@gem-sdk/system");const MarqueeBase=e=>{let{style:s={},autoFill:t=!1,play:r=!0,pauseOnHover:l=!1,pauseOnClick:a=!1,direction:i="left",delay:c=0,loop:y=0,children:m,isFullWidthResponsive:d}=e??{},o=system.createStyle(styles.getContainerBaseStyle({style:s,play:r,pauseOnHover:l,pauseOnClick:a})),u=system.createStyle(styles.getMarqueeBaseStyle({play:r,direction:i,delay:c,loop:y,autoFill:t,isFullWidthResponsive:d})),v=system.createStyle(styles.getChildBaseStyle(i,d));return core.template`
+  <div style="${o}" class="rfm-marquee-container">
+    <div class="rfm-marquee" style="${u}">
+      <div class="rfm-initial-child-container">
+        ${core.template`
+        <div style="${v}" class="${"rfm-child"}">
+          ${m}
         </div>
+        `}
       </div>
-      <div
-        class="rfm-marquee placeholder-marquee"
-        style="${marqueeStyle()}"
-      ></div>
     </div>
-  `;
-};
-
-exports.default = MarqueeBase;
+    <div class="rfm-marquee placeholder-marquee" style="${u}"></div>
+  </div>
+  `};exports.default=MarqueeBase;

package/dist/cjs/marquee/components/MarqueeItem.js

@@ -1,99 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var ChildrenDroppable = require('../../grid/components/ChildrenDroppable.js');
-var React = require('react');
-
-let timeout = null;
-const MarqueeItem = ({ children, builderAttrs, builderProps, itemBackgroundColor, itemBorderStyle, itemCorner, hasItemShadow, itemShadow, index, activeItem, hoverItem, timeToScroll, setHoverItem, setActiveItem, ...passProps })=>{
-    const first = React.useRef(true);
-    const [isActive, setIsActive] = React.useState(false);
-    const isRunActive = React.useRef(false);
-    React.useEffect(()=>{
-        if (hoverItem === index?.toString()) {
-            setIsActive(true);
-            timeout && clearTimeout(timeout);
-            timeout = setTimeout(()=>{
-                if (isRunActive.current) return;
-                setIsActive(false);
-                setHoverItem();
-            }, 1000);
-        } else {
-            setIsActive(false);
-        }
-    }, [
-        hoverItem
-    ]);
-    React.useEffect(()=>{
-        if (first.current) {
-            timeout = setTimeout(()=>{
-                first.current = false;
-            }, 500);
-            return;
-        }
-        if (activeItem === index?.toString()) {
-            setIsActive(true);
-            isRunActive.current = true;
-            timeout && clearTimeout(timeout);
-            timeout = setTimeout(()=>{
-                setIsActive(false);
-                isRunActive.current = false;
-                setActiveItem();
-            }, timeToScroll + 1000);
-        } else {
-            setIsActive(false);
-        }
-        return ()=>{
-            timeout && clearTimeout(timeout);
-        };
-    }, [
-        activeItem
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        ...builderAttrs,
-        ...passProps,
-        className: core.cls(builderProps?.uid, 'gp-relative gp-overflow-hidden', passProps.className),
-        style: {
-            ...core.getGlobalColorResponsiveStyle('bg', itemBackgroundColor),
-            ...core.getRadiusStyleActiveState({
-                ...itemCorner,
-                active: {
-                    ...itemCorner || {},
-                    radiusType: 'custom'
-                }
-            }),
-            ...passProps.itemStyle,
-            ...core.getStyleShadow({
-                value: itemShadow,
-                styleAppliedFor: 'box-shadow',
-                isEnableShadow: hasItemShadow
-            }),
-            ...core.makeStyle({
-                b: itemBorderStyle?.border,
-                bw: itemBorderStyle?.width,
-                bc: core.getSingleColorVariable(itemBorderStyle?.color)
-            })
-        },
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "first-block gp-w-[0.01px]"
-            }),
-            core.isEmptyChildren(children) ? /*#__PURE__*/ jsxRuntime.jsx(ChildrenDroppable.default, {}) : React.Children.toArray(children).map((child)=>/*#__PURE__*/ React.cloneElement(child, {
-                    maxWidthWithEmptyChildren: '400px',
-                    isNotFullWidth: true,
-                    options: {
-                        uniqueId: `${builderProps?.uid}-${index}`
-                    }
-                })),
-            isActive && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "gp-w-full gp-h-full gp-bg-[#3C67FF26] gp-absolute gp-top-0 gp-left-0 gp-z-10"
-            })
-        ]
-    });
-};
-var MarqueeItem$1 = /*#__PURE__*/ React.memo(MarqueeItem);
-
-exports.default = MarqueeItem$1;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),React=require("react"),useMarqueeItem=require("../hooks/useMarqueeItem.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const MarqueeItem=({children:e,builderAttrs:s,builderProps:t,itemBackgroundColor:r,itemBorderStyle:a,itemCorner:l,itemShadow:m,index:u,activeItem:i,hoverItem:c,timeToScroll:o,setHoverItem:p,setActiveItem:n,hasItemShadow:d,...y})=>{let{isActive:q}=useMarqueeItem.useMarqueeItem({index:u,activeItem:i,hoverItem:c,timeToScroll:o,setHoverItem:p,setActiveItem:n}),j=system.createStyle(styles.getItemWrapperStyles({itemBackgroundColor:r,itemBorderStyle:a,itemCorner:l,itemShadow:m,hasItemShadow:d,itemStyle:y.itemStyle})),g=system.createClass(core.composeClasses("gp-w-full gp-h-full gp-bg-[#3C67FF26] gp-absolute gp-top-0 gp-left-0 gp-z-10")),x=system.createClass(classes.getItemWrapperClasses(t?.uid,y.className)),C=system.createClass(classes.getPlaceHolderWrapperClasses);return jsxRuntime.jsxs("div",{...s,...y,className:x,style:j,children:[jsxRuntime.jsx("div",{className:C}),core.isEmptyChildren(e)?jsxRuntime.jsx(ChildrenDroppable.default,{}):React.Children.toArray(e).map(e=>React.cloneElement(e,{maxWidthWithEmptyChildren:"400px",isNotFullWidth:!0,options:{uniqueId:`${t?.uid}-${u}`}})),system.If(q,jsxRuntime.jsx("div",{className:g}))]})};var MarqueeItem$1=React.memo(MarqueeItem);exports.default=MarqueeItem$1;