@treely/strapi-slices 5.3.1 → 5.3.2

package/dist/slices/FullWidthImageSlider/styles.d.ts

@@ -3,12 +3,6 @@
 export declare const SliderContainer: import("@emotion/styled").StyledComponent<import("@chakra-ui/system/dist/system.types").MergeWithAs<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, Omit<import("@chakra-ui/system/dist/system.types").ChakraProps, never>, import("@chakra-ui/system/dist/system.types").As> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-interface ButtonsContainerProps {
-    show: string;
-}
-export declare const ButtonsContainer: import("@emotion/styled").StyledComponent<(import("@chakra-ui/system/dist/system.types").MergeWithAs<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, any, Omit<import("@chakra-ui/system/dist/system.types").ChakraProps, never>, import("@chakra-ui/system/dist/system.types").As> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}) & ButtonsContainerProps, {}, {}>;
 interface SliderInnerContainerProps {
     imageCount: number;
 }

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

@@ -1418,12 +1418,12 @@ var LogoGridWithText = function LogoGridWithText(_ref) {
   })))));
 };
 
-var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5$1;
+var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1, _templateObject5;
 var MapHeroContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100vw;\n  height: var(--default-hero-height);\n  min-height: var(--boemly-sizes-3xl);\n  background-color: var(--boemly-colors-primary-50);\n  overflow: hidden;\n  z-index: var(--boemly-zIndices-base);\n\n  @media screen and (max-width: ", ") {\n    height: auto;\n  }\n"])), BREAKPOINT_LG);
 var MapHeroTextContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100vw;\n  top: 56%;\n  left: 0;\n  transform: translateY(-50%);\n  z-index: var(--boemly-zIndices-aboveBase);\n\n  @media screen and (max-width: ", ") {\n    position: relative;\n    transform: unset;\n\n    padding-top: var(--boemly-space-32);\n  }\n"])), BREAKPOINT_LG);
 var ShapeContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(var(--boemly-space-8) * -1);\n  left: 0;\n\n  width: var(--boemly-sizes-sm);\n  height: var(--boemly-sizes-sm);\n\n  border-top-right-radius: var(--boemly-radii-full);\n\n  & span,\n  div {\n    border-top-right-radius: var(--boemly-radii-full);\n  }\n\n  @media screen and (max-width: ", ") {\n    display: none;\n  }\n"])), BREAKPOINT_LG);
 var MapContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n\n  width: 50%;\n  height: 100%;\n\n  right: 0;\n  top: 0;\n\n  & img {\n    object-fit: cover !important;\n  }\n\n  @media screen and (max-width: ", ") {\n    width: 100%;\n    height: var(--boemly-sizes-4xl);\n    position: relative;\n    margin-top: calc(var(--boemly-space-72) * -1);\n    background-color: var(--boemly-colors-white);\n\n    & img {\n      object-fit: contain !important;\n    }\n  }\n"])), BREAKPOINT_LG);
-var MapGradient = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n\n  background: linear-gradient(\n    90deg,\n    var(--boemly-colors-primary-50) 0%,\n    var(--boemly-colors-primary-50) 10%,\n    rgba(243, 246, 245, 0.6) 28%,\n    rgba(243, 246, 245, 0) 40%,\n    rgba(243, 246, 245, 0) 100%\n  );\n\n  @media screen and (max-width: ", ") {\n    background: linear-gradient(\n      180deg,\n      var(--boemly-colors-primary-50) 0%,\n      var(--boemly-colors-primary-50) 36%,\n      rgba(243, 246, 245, 0.12) 46%,\n      rgba(243, 246, 245, 0) 100%\n    );\n  }\n"])), BREAKPOINT_LG);
+var MapGradient = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n\n  background: linear-gradient(\n    90deg,\n    var(--boemly-colors-primary-50) 0%,\n    var(--boemly-colors-primary-50) 10%,\n    rgba(243, 246, 245, 0.6) 28%,\n    rgba(243, 246, 245, 0) 40%,\n    rgba(243, 246, 245, 0) 100%\n  );\n\n  @media screen and (max-width: ", ") {\n    background: linear-gradient(\n      180deg,\n      var(--boemly-colors-primary-50) 0%,\n      var(--boemly-colors-primary-50) 36%,\n      rgba(243, 246, 245, 0.12) 46%,\n      rgba(243, 246, 245, 0) 100%\n    );\n  }\n"])), BREAKPOINT_LG);
 
 var MapHero = function MapHero(_ref) {
   var slice = _ref.slice;
@@ -2251,8 +2251,8 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
-var ITEM_GAP = 24;
-var MAX_OFFSET_RIGHT = 55;
+var ITEM_GAP$1 = 24;
+var MAX_OFFSET_RIGHT$1 = 55;
 var TextCarousel = function TextCarousel(_ref) {
   var slice = _ref.slice;
   var containerRef = React.useRef(null);
@@ -2272,17 +2272,17 @@ var TextCarousel = function TextCarousel(_ref) {
     return slice.slides.length;
   }, [slice.slides.length]);
   var sliderItemsWidth = React.useMemo(function () {
-    return numberOfItems * (itemWidth + ITEM_GAP) - ITEM_GAP;
+    return numberOfItems * (itemWidth + ITEM_GAP$1) - ITEM_GAP$1;
   }, [itemWidth, numberOfItems]);
   var offsetLeft = React.useMemo(function () {
-    return sliderIndex * (itemWidth + ITEM_GAP) * -1;
+    return sliderIndex * (itemWidth + ITEM_GAP$1) * -1;
   }, [sliderIndex, itemWidth]);
   var allowScroll = React.useMemo(function () {
-    return sliderItemsWidth + ITEM_GAP * 2 > windowWidth;
+    return sliderItemsWidth + ITEM_GAP$1 * 2 > windowWidth;
   }, [sliderItemsWidth, windowWidth]);
   var canMoveRight = React.useMemo(function () {
     var offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
-    return offsetRight < MAX_OFFSET_RIGHT;
+    return offsetRight < MAX_OFFSET_RIGHT$1;
   }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
   var canMoveLeft = React.useMemo(function () {
     return sliderIndex !== 0;
@@ -3180,19 +3180,15 @@ var FullWidthHighlightQuote = function FullWidthHighlightQuote(_ref) {
   })));
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var SliderContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  --mobile-image-width: calc(100vw - var(--boemly-space-24));\n  --desktop-image-width: var(--boemly-sizes-md);\n\n  width: var(--boemly-size-full);\n\n  overflow-x: hidden;\n\n  padding-left: max(\n    var(--boemly-space-8),\n    calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-6))\n  );\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n    padding-left: max(\n      var(--boemly-space-8),\n      calc(50vw - var(--boemly-sizes-7xl) / 2 + var(--boemly-space-8))\n    );\n  }\n"])), BREAKPOINT_MD);
-var ButtonsContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  pointer-events: none;\n\n  // Place at 50% of height of tallest image minus size of button\n  position: absolute;\n  top: calc(50% - var(--boemly-sizes-12));\n  left: 0;\n  width: var(--boemly-sizes-full);\n\n  padding: 0 var(--boemly-sizes-32);\n  justify-content: space-between;\n\n  @media screen and (max-width: ", ") {\n    display: none;\n  }\n"])), function (_ref) {
-  var show = _ref.show;
-  return show ? 'flex' : 'none';
-}, BREAKPOINT_MD);
-var SliderInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n\n  width: fit-content;\n"])));
-var ItemContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--desktop-image-width);\n\n  :last-of-type {\n    margin-right: var(--boemly-space-8);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--mobile-image-width);\n  }\n"])), BREAKPOINT_MD);
-var ImageContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  max-height: var(--boemly-sizes-xl);\n  height: calc(\n    var(--desktop-image-width) /\n      ", "\n  );\n  width: var(--desktop-image-width);\n\n  border-radius: var(--boemly-radii-xl);\n\n  & img {\n    border-radius: var(--boemly-radii-xl);\n  }\n\n  @media screen and (max-width: ", ") {\n    height: calc(\n      var(--mobile-image-width) /\n        ", "\n    );\n    width: var(--mobile-image-width);\n  }\n"])), function (_ref2) {
-  var aspectRatio = _ref2.aspectRatio;
+var SliderInnerContainer = /*#__PURE__*/styled__default.default(framerMotion.motion.div)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n\n  width: fit-content;\n"])));
+var ItemContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--desktop-image-width);\n\n  :last-of-type {\n    margin-right: var(--boemly-space-8);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--mobile-image-width);\n  }\n"])), BREAKPOINT_MD);
+var ImageContainer = /*#__PURE__*/styled__default.default(boemly.Box)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  max-height: var(--boemly-sizes-xl);\n  height: calc(\n    var(--desktop-image-width) /\n      ", "\n  );\n  width: var(--desktop-image-width);\n\n  border-radius: var(--boemly-radii-xl);\n\n  & img {\n    border-radius: var(--boemly-radii-xl);\n  }\n\n  @media screen and (max-width: ", ") {\n    height: calc(\n      var(--mobile-image-width) /\n        ", "\n    );\n    width: var(--mobile-image-width);\n  }\n"])), function (_ref) {
+  var aspectRatio = _ref.aspectRatio;
   return aspectRatio;
-}, BREAKPOINT_MD, function (_ref3) {
-  var aspectRatio = _ref3.aspectRatio;
+}, BREAKPOINT_MD, function (_ref2) {
+  var aspectRatio = _ref2.aspectRatio;
   return aspectRatio;
 });
 
@@ -3210,6 +3206,8 @@ var getClosestRatio = function getClosestRatio(width, height) {
   return ALLOWED_RATIOS[posMinDiff];
 };
 
+var ITEM_GAP = 24;
+var MAX_OFFSET_RIGHT = 162;
 var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
   var slice = _ref.slice;
   var containerRef = React.useRef(null);
@@ -3226,9 +3224,25 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
   var _useState2 = React.useState(false),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
-  var allowScroll = windowWidth / 2 / imageWidth < slice.images.length;
-  var canMoveRight = sliderIndex < slice.images.length - 1;
-  var canMoveLeft = sliderIndex !== 0;
+  var numberOfItems = React.useMemo(function () {
+    return slice.images.length;
+  }, [slice.images.length]);
+  var sliderItemsWidth = React.useMemo(function () {
+    return numberOfItems * (imageWidth + ITEM_GAP) - ITEM_GAP;
+  }, [imageWidth, numberOfItems]);
+  var offsetLeft = React.useMemo(function () {
+    return sliderIndex * (imageWidth + ITEM_GAP) * -1;
+  }, [sliderIndex, imageWidth]);
+  var allowScroll = React.useMemo(function () {
+    return sliderItemsWidth + ITEM_GAP * 3 > windowWidth;
+  }, [sliderItemsWidth, windowWidth]);
+  var canMoveRight = React.useMemo(function () {
+    var offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+    return offsetRight < MAX_OFFSET_RIGHT;
+  }, [imageWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+  var canMoveLeft = React.useMemo(function () {
+    return sliderIndex !== 0;
+  }, [sliderIndex]);
   return React__default.default.createElement(boemly.DefaultSectionContainer, null, React__default.default.createElement(SliderContainer, {
     ref: containerRef
   }, React__default.default.createElement(SliderInnerContainer, {
@@ -3267,8 +3281,16 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
     })), React__default.default.createElement(boemly.Text, {
       height: "6"
     }, image.caption)));
-  }))), React__default.default.createElement(ButtonsContainer, {
-    show: (allowScroll && !isOpen).toString()
+  }))), React__default.default.createElement(boemly.Box, {
+    display: ['none', null, null, !!allowScroll ? 'flex' : 'none'],
+    pointerEvents: "none",
+    position: "absolute",
+    top: "calc(50% - var(--boemly-sizes-12))",
+    left: "0",
+    width: "full",
+    py: "0",
+    px: "32",
+    justifyContent: "space-between"
   }, React__default.default.createElement(boemly.Box, null, React__default.default.createElement(framerMotion.AnimatePresence, null, canMoveLeft && React__default.default.createElement(boemly.IconButton, {
     key: "leftButton",
     as: framerMotion.motion.button,