@treely/strapi-slices 7.1.2 → 7.1.3

package/README.md

@@ -42,10 +42,10 @@ npm pack
 Go to the project which uses the strapi-slices package and remove the `node_modules` and the `.next` folder before installing the package there:
 
 ```bash
+cd ../path/to/your/project
 rm -r node_modules
 rm -r .next
 npm install
-cd ../path/to/your/project
 npm install ../path/to/strapi-slices-package.tgz
 ```
 

package/dist/strapi-slices.cjs.development.js

@@ -3541,7 +3541,7 @@ var ImageContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateO
   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]);
@@ -5384,14 +5384,14 @@ var Comparison = function Comparison(_ref) {
 };
 
 var _templateObject, _templateObject2;
-var CarouselInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.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__default.default(framerMotion.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__default.default(framerMotion.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__default.default(framerMotion.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) {
@@ -5429,7 +5429,6 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
       return React__default.default.createElement(LogoGrid, null, slice.logos.map(function (logo, index) {
         return React__default.default.createElement(boemly.Box, {
           key: logo.id + "-" + index,
-          width: isMobile ? '16' : '36',
           flexShrink: 0,
           transform: "translate3d(0, 0, 0)"
         }, React__default.default.createElement(boemly.Flex, {
@@ -5439,17 +5438,15 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
           alignItems: "center"
         }, React__default.default.createElement(boemly.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__default.default.createElement(Image__default.default, {
           src: strapiMediaUrl(logo.img, 'large'),
           alt: logo.alt,
           fill: true,
           style: {
             objectFit: logo.objectFit || 'contain',
-            borderRadius: 'var(--boemly-radii-xl)'
+            filter: 'grayscale(100%)'
           }
         }))));
       }));
@@ -5464,7 +5461,6 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
     }, logosToRender.map(function (logo, index) {
       return React__default.default.createElement(boemly.Box, {
         key: logo.id + "-" + index,
-        width: isMobile ? '16' : '36',
         flexShrink: 0,
         transform: "translate3d(0, 0, 0)"
       }, React__default.default.createElement(boemly.Flex, {
@@ -5474,17 +5470,15 @@ var CarouselMarqueeBannerContent = function CarouselMarqueeBannerContent(_ref) {
         alignItems: "center"
       }, React__default.default.createElement(boemly.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__default.default.createElement(Image__default.default, {
         src: strapiMediaUrl(logo.img, 'large'),
         alt: logo.alt,
         fill: true,
         style: {
           objectFit: logo.objectFit || 'contain',
-          borderRadius: 'var(--boemly-radii-xl)'
+          filter: 'grayscale(100%)'
         }
       }))));
     })));