@treely/strapi-slices 7.1.2 → 7.1.4

package/dist/strapi-slices.esm.js

@@ -3524,7 +3524,7 @@ var ImageContainer = /*#__PURE__*/styled(Box)(_templateObject4 || (_templateObje
   return aspectRatio;
 });
 
-var ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2];
+var ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2, 2 / 1, 3 / 1, 4 / 1, 5 / 1]; // width / height
 var getClosestRatio = function getClosestRatio(width, height) {
   var ratio = width / height;
   var minDiff = Math.abs(ratio - ALLOWED_RATIOS[0]);
@@ -3611,7 +3611,9 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
         if (!isMobile) setIsOpen(true);
       }
     })), React.createElement(Text, {
-      height: "6"
+      noOfLines: 3,
+      height: "72px",
+      fontSize: "md"
     }, image.caption)));
   }))), React.createElement(Box, {
     display: ['none', null, null, !!allowScroll ? 'flex' : 'none'],
@@ -5367,14 +5369,14 @@ var Comparison = function Comparison(_ref) {
 };
 
 var _templateObject, _templateObject2;
-var CarouselInnerContainer = /*#__PURE__*/styled(motion.div)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: ", ";\n  gap: var(--boemly-space-6);\n\n  @media screen and (max-width: ", ") {\n    width: calc(\n      ", " *\n        (var(--boemly-sizes-16) + var(--boemly-space-6))\n    );\n    justify-content: ", ";\n  }\n"])), function (props) {
+var CarouselInnerContainer = /*#__PURE__*/styled(motion.div)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: ", ";\n  gap: var(--boemly-space-24);\n  padding-right: var(--boemly-space-24);\n  padding-left: var(--boemly-space-24);\n\n  @media screen and (max-width: ", ") {\n    width: calc(\n      ", " *\n        (var(--boemly-sizes-16) + var(--boemly-space-6))\n    );\n    justify-content: ", ";\n  }\n"])), function (props) {
   return props.logoCount < 5 ? 'center' : 'flex-start';
 }, BREAKPOINT_MD, function (props) {
   return props.logoCount;
 }, function (props) {
   return props.logoCount < 5 ? 'center' : 'flex-start';
 });
-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 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-24);\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);
 
 // Separate component containing the actual logic
 var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
@@ -5412,7 +5414,6 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
       return React.createElement(LogoGrid, null, slice.logos.map(function (logo, index) {
         return React.createElement(Box, {
           key: logo.id + "-" + index,
-          width: isMobile ? '16' : '36',
           flexShrink: 0,
           transform: "translate3d(0, 0, 0)"
         }, React.createElement(Flex, {
@@ -5422,17 +5423,15 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
           alignItems: "center"
         }, React.createElement(Box, {
           position: "relative",
-          maxHeight: "xl",
-          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"
+          height: isMobile ? '16' : '36',
+          width: "calc(var(--boemly-sizes-10)\n                      * " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")"
         }, React.createElement(Image, {
           src: strapiMediaUrl(logo.img, 'large'),
           alt: logo.alt,
           fill: true,
           style: {
             objectFit: logo.objectFit || 'contain',
-            borderRadius: 'var(--boemly-radii-xl)'
+            filter: 'grayscale(100%)'
           }
         }))));
       }));
@@ -5447,7 +5446,6 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
     }, logosToRender.map(function (logo, index) {
       return React.createElement(Box, {
         key: logo.id + "-" + index,
-        width: isMobile ? '16' : '36',
         flexShrink: 0,
         transform: "translate3d(0, 0, 0)"
       }, React.createElement(Flex, {
@@ -5457,17 +5455,15 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
         alignItems: "center"
       }, React.createElement(Box, {
         position: "relative",
-        maxHeight: "xl",
-        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"
+        height: isMobile ? '16' : '36',
+        width: "calc(var(--boemly-sizes-10) * " + getClosestRatio(logo.img.data.attributes.width, logo.img.data.attributes.height) + ")"
       }, React.createElement(Image, {
         src: strapiMediaUrl(logo.img, 'large'),
         alt: logo.alt,
         fill: true,
         style: {
           objectFit: logo.objectFit || 'contain',
-          borderRadius: 'var(--boemly-radii-xl)'
+          filter: 'grayscale(100%)'
         }
       }))));
     })));