@treely/strapi-slices 7.1.0 → 7.1.2

package/dist/strapi-slices.esm.js

@@ -5376,35 +5376,39 @@ var CarouselInnerContainer = /*#__PURE__*/styled(motion.div)(_templateObject ||
 });
 var LogoGrid = /*#__PURE__*/styled(motion.div)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: var(--boemly-space-6);\n\n  @media screen and (max-width: ", ") {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--boemly-space-6);\n  }\n"])), BREAKPOINT_MD);
 
-var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
+// Separate component containing the actual logic
+var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
   var slice = _ref.slice;
+  var _useToken = useToken('colors', ['primary.50']),
+    primary50 = _useToken[0];
   var _useWindowSize = useWindowSize(),
     windowWidth = _useWindowSize.width;
-  var shouldDuplicateLogos = slice.logos.length < 5;
+  var hasEnoughLogosForLoop = slice.logos.length >= 5;
   var LOOP_ARRAY_LENGTH = windowWidth > 2000 ? 5 : 4;
   // Duplicate Logos to create a full loop
-  var logosToRender = shouldDuplicateLogos ? slice.logos : Array.from({
+  var logosToRender = hasEnoughLogosForLoop ? Array.from({
     length: LOOP_ARRAY_LENGTH
   }, function () {
     return slice.logos;
-  }).flat();
+  }).flat() : slice.logos;
   var _useMediaQuery = useMediaQuery(BREAKPOINT_MD_QUERY),
     isMobile = _useMediaQuery[0];
+  // Carousel setup
   var _useEmblaCarousel = useEmblaCarousel({
-      loop: shouldDuplicateLogos ? false : true,
+      loop: hasEnoughLogosForLoop,
       align: 'start',
       containScroll: 'trimSnaps',
       dragFree: true
-    }, shouldDuplicateLogos ? [] : [AutoScroll({
+    }, hasEnoughLogosForLoop ? [AutoScroll({
       playOnInit: true,
       speed: isMobile ? 0.5 : 1,
       stopOnInteraction: false,
       stopOnMouseEnter: false,
       stopOnFocusIn: false
-    })]),
+    })] : []),
     emblaRef = _useEmblaCarousel[0];
   var renderLogos = function renderLogos() {
-    if (slice.logos.length < 5) {
+    if (!hasEnoughLogosForLoop) {
       return React.createElement(LogoGrid, null, slice.logos.map(function (logo, index) {
         return React.createElement(Box, {
           key: logo.id + "-" + index,
@@ -5419,15 +5423,15 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
         }, React.createElement(Box, {
           position: "relative",
           maxHeight: "xl",
-          height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.img.data.attributes.width, logo.img.img.data.attributes.height) + ")",
+          height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")",
           width: isMobile ? '16' : '36',
           borderRadius: "xl"
         }, React.createElement(Image, {
-          src: strapiMediaUrl(logo.img.img, 'large'),
-          alt: logo.img.alt,
+          src: strapiMediaUrl(logo.img, 'large'),
+          alt: logo.alt,
           fill: true,
           style: {
-            objectFit: logo.img.objectFit || 'contain',
+            objectFit: logo.objectFit || 'contain',
             borderRadius: 'var(--boemly-radii-xl)'
           }
         }))));
@@ -5454,40 +5458,49 @@ var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref) {
       }, React.createElement(Box, {
         position: "relative",
         maxHeight: "xl",
-        height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.img.data.attributes.width, logo.img.img.data.attributes.height) + ")",
+        height: "calc(" + (isMobile ? 'var(--boemly-sizes-16)' : 'var(--boemly-sizes-36)') + " / " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")",
         width: isMobile ? '16' : '36',
         borderRadius: "xl"
       }, React.createElement(Image, {
-        src: strapiMediaUrl(logo.img.img, 'large'),
-        alt: logo.img.alt,
+        src: strapiMediaUrl(logo.img, 'large'),
+        alt: logo.alt,
         fill: true,
         style: {
-          objectFit: logo.img.objectFit || 'contain',
+          objectFit: logo.objectFit || 'contain',
           borderRadius: 'var(--boemly-radii-xl)'
         }
       }))));
     })));
   };
-  return React.createElement(DefaultSectionContainer, null, React.createElement(Box, {
-    maxWidth: "full",
-    margin: "auto",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    height: "2xs",
-    backgroundColor: "gray.50",
-    padding: "42px 0 56px"
-  }, slice.title ? React.createElement(React.Fragment, null, React.createElement(Flex, {
+  return React.createElement(DefaultSectionContainer, {
+    backgroundColor: primary50
+  }, React.createElement(React.Fragment, null, slice.title ? React.createElement(React.Fragment, null, React.createElement(Flex, {
     alignItems: "center",
     flexDirection: "column"
   }, React.createElement(Heading, {
     size: "md",
     fontWeight: "500"
   }, slice.title)), React.createElement(Spacer, {
-    height: "12"
+    height: "12",
+    minHeight: "12"
   })) : null, renderLogos()));
 };
+// Lazy-rendering the child component after client-side hydration
+var CarouselMarqueeBanner = function CarouselMarqueeBanner(_ref2) {
+  var slice = _ref2.slice;
+  var _useState = useState(false),
+    showChild = _useState[0],
+    setShowChild = _useState[1];
+  useEffect(function () {
+    setShowChild(true); // Hydrate the component after the client-side is ready
+  }, []);
+  if (!showChild) {
+    return React.createElement("div", null);
+  }
+  return React.createElement(CarouselMarqueeBannerContent, {
+    slice: slice
+  });
+};
 
 var Timeline = function Timeline(_ref) {
   var slice = _ref.slice;