@digital-b2c/coreui-kit 0.29.1 → 0.29.3

package/dist/index.mjs

@@ -601,7 +601,7 @@ var BrandsStrip = ({
 }) => {
   const [show, setShow] = useState(false);
   const [shouldAnimate, setShouldAnimate] = useState(false);
-  const { is } = useViewPort_default();
+  const { is, device } = useViewPort_default();
   const isTabletBelow = is("tablet", "below");
   const containerRef = useRef(null);
   const marqueeRef = useRef(null);
@@ -659,33 +659,42 @@ var BrandsStrip = ({
   };
   useGSAP(
     () => {
+      let frameId;
       const refreshCalculations = () => {
+        var _a;
         if (!marqueeRef.current || !containerRef.current || logos.length === 0) return;
         const items = gsap.utils.toArray(marqueeRef.current.children);
         if (items.length === 0) return;
+        (_a = timeline.current) == null ? void 0 : _a.kill();
+        timeline.current = null;
+        gsap.set(items, { x: 0, xPercent: 0 });
         const itemWidth = items[0].clientWidth;
-        const calculatedTotalWidth = shouldAnimate ? itemWidth * items.length + 120 * (items.length - 1) / 2 : itemWidth * items.length + 120 * (items.length - 1);
         const containerWidth = containerRef.current.clientWidth;
         if (containerWidth === 0) {
-          requestAnimationFrame(refreshCalculations);
+          frameId = requestAnimationFrame(refreshCalculations);
           return;
         }
-        if (containerWidth < calculatedTotalWidth) {
-          setShouldAnimate(true);
-          const ctx = gsap.context(() => {
-            const loop = horizontalLoop(items, {
-              repeat: -1,
-              speed: 1,
-              paddingRight: 120
-            });
-            timeline.current = loop;
-          }, containerRef);
-          return () => ctx.revert();
+        const calculatedTotalWidth = itemWidth * logos.length + 120 * (logos.length - 1);
+        const needsAnimation = containerWidth < calculatedTotalWidth;
+        if (needsAnimation !== shouldAnimate) {
+          setShouldAnimate(needsAnimation);
+          return;
         }
+        timeline.current = needsAnimation ? horizontalLoop(items, {
+          repeat: -1,
+          speed: 1,
+          paddingRight: 120
+        }) : null;
       };
       refreshCalculations();
+      return () => {
+        var _a;
+        if (frameId) cancelAnimationFrame(frameId);
+        (_a = timeline.current) == null ? void 0 : _a.kill();
+        timeline.current = null;
+      };
     },
-    { scope: containerRef, dependencies: [logos] }
+    { scope: containerRef, dependencies: [logos, device, shouldAnimate] }
   );
   const handleMouseEnter = () => {
     setShow(true);
@@ -703,7 +712,7 @@ var BrandsStrip = ({
     if (logos.length === 0) return [];
     if (!shouldAnimate) return [...logos];
     return [...logos, ...logos];
-  }, [logos]);
+  }, [logos, shouldAnimate]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -718,7 +727,7 @@ var BrandsStrip = ({
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsxs("div", { className: clsx72(BrandsStrip_module_default.container, { [BrandsStrip_module_default.blurred]: show && logos.length > 1 }), children: [
-          title && logos.length === 1 && /* @__PURE__ */ jsx("h2", { className: clsx72("body", BrandsStrip_module_default.title), children: title }),
+          title && logos.length === 1 && /* @__PURE__ */ jsx("span", { className: clsx72("body", BrandsStrip_module_default.title), children: title }),
           logos.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {