@treely/strapi-slices 5.3.0 → 5.3.2

package/dist/strapi-slices.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, Fragment, createRef, createContext, useContext, useCallback, useMemo } from 'react';
+import React, { useState, useRef, useEffect, Fragment, createRef, createContext, useContext, useMemo, useCallback } from 'react';
 import Head from 'next/head';
 import { Box, BoemlyModal, Flex, IconButton, useMediaQuery, DefaultSectionContainer, Wrapper, DefaultSectionHeader, Button, Gradient, Spacer, SimpleGrid, Heading, Text, useToken, Grid, GridItem, BoemlyList, PortfolioCard, RichText, BoemlyAccordion, HeroCard, Shape, QuoteCard, Center, ShapesCard, TextCardWithIcon, ContactArea, ProjectCard, Tag, Link as Link$1, DatePersonPair, BoemlyThemeProvider, Badge, useDisclosure, Container, AvatarWithName, Divider, LabelNumberPair, BoemlyFormControl, InputRightAddon, LabelTextPair } from 'boemly';
 import Image from 'next/image';
@@ -1405,12 +1405,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(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(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(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(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(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(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;
@@ -1974,18 +1974,15 @@ var TextCardGrid = function TextCardGrid(_ref) {
 };
 
 var _templateObject$5, _templateObject2$2, _templateObject3$1;
-var CarouselContainer = /*#__PURE__*/styled(Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-size-full);\n  }\n\n  width: var(--boemly-size-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
-var CarouselInnerContainer = /*#__PURE__*/styled(motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-16)) *\n      ", " +\n      var(--boemly-space-16)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
-  var numberofitems = _ref.numberofitems;
-  return numberofitems;
+var CarouselContainer = /*#__PURE__*/styled(Box)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--boemly-space-6);\n  padding: var(--boemly-space-8) 0;\n\n  @media screen and (max-width: ", ") {\n    margin-top: var(--boemly-space-4);\n    width: var(--boemly-sizes-full);\n  }\n\n  width: var(--boemly-sizes-full);\n\n  overflow-x: hidden;\n\n  @media screen and (max-width: ", ") {\n    overflow-x: scroll;\n  }\n"])), BREAKPOINT_MD, BREAKPOINT_MD);
+var CarouselInnerContainer = /*#__PURE__*/styled(motion.div)(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--boemly-space-6);\n  justify-content: center;\n\n  width: calc(\n    (var(--boemly-sizes-sm) + var(--boemly-space-6)) *\n      ", " +\n      var(--boemly-space-6)\n  );\n  min-width: var(--boemly-sizes-full);\n\n  @media screen and (max-width: ", ") {\n    justify-content: flex-start;\n    width: calc(\n      (var(--boemly-sizes-2xs) + var(--boemly-space-4)) *\n        ", " +\n        var(--boemly-space-6)\n    );\n  }\n"])), function (_ref) {
+  var numberOfItems = _ref.numberOfItems;
+  return numberOfItems;
 }, BREAKPOINT_MD, function (_ref2) {
-  var numberofitems = _ref2.numberofitems;
-  return numberofitems;
+  var numberOfItems = _ref2.numberOfItems;
+  return numberOfItems;
 });
-var CardContainer = /*#__PURE__*/styled(Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n\n  margin-right: var(--boemly-space-6);\n\n  &:first-of-type {\n    margin-left: var(--boemly-space-6);\n  }\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), function (_ref3) {
-  var numberofitems = _ref3.numberofitems;
-  return numberofitems === 3 ? 'var(--boemly-sizes-xl)' : 'var(--boemly-sizes-sm)';
-}, BREAKPOINT_MD);
+var CardContainer = /*#__PURE__*/styled(Box)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--boemly-sizes-sm);\n\n  @media screen and (max-width: ", ") {\n    width: var(--boemly-sizes-2xs);\n\n    margin-right: var(--boemly-space-4);\n\n    &:first-of-type {\n      margin-left: var(--boemly-space-6);\n    }\n  }\n"])), BREAKPOINT_MD);
 
 var messagesDe$f = {
   'sections.comparison.backgroundShapes': 'Hintergrundformen'
@@ -2241,24 +2238,42 @@ var ContextProvider = function ContextProvider(_ref) {
   }, children));
 };
 
+var ITEM_GAP$1 = 24;
+var MAX_OFFSET_RIGHT$1 = 55;
 var TextCarousel = function TextCarousel(_ref) {
   var slice = _ref.slice;
+  var containerRef = useRef(null);
   var _useToken = useToken('colors', ['primary.50']),
     primary50 = _useToken[0];
   var _useMeasure = useMeasure(),
-    slideRef = _useMeasure[0],
-    slideWidth = _useMeasure[1].width;
+    itemRef = _useMeasure[0],
+    itemWidth = _useMeasure[1].width;
   var _useContext = useContext(IntlContext),
     formatMessage = _useContext.formatMessage;
-  var containerRef = useRef(null);
   var _useWindowSize = useWindowSize(),
     windowWidth = _useWindowSize.width;
   var _useState = useState(0),
     sliderIndex = _useState[0],
     setSliderIndex = _useState[1];
-  var allowScroll = windowWidth / 2 / slideWidth < slice.slides.length;
-  var canMoveRight = sliderIndex < slice.slides.length - 1;
-  var canMoveLeft = sliderIndex !== 0;
+  var numberOfItems = useMemo(function () {
+    return slice.slides.length;
+  }, [slice.slides.length]);
+  var sliderItemsWidth = useMemo(function () {
+    return numberOfItems * (itemWidth + ITEM_GAP$1) - ITEM_GAP$1;
+  }, [itemWidth, numberOfItems]);
+  var offsetLeft = useMemo(function () {
+    return sliderIndex * (itemWidth + ITEM_GAP$1) * -1;
+  }, [sliderIndex, itemWidth]);
+  var allowScroll = useMemo(function () {
+    return sliderItemsWidth + ITEM_GAP$1 * 2 > windowWidth;
+  }, [sliderItemsWidth, windowWidth]);
+  var canMoveRight = useMemo(function () {
+    var offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+    return offsetRight < MAX_OFFSET_RIGHT$1;
+  }, [itemWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+  var canMoveLeft = useMemo(function () {
+    return sliderIndex !== 0;
+  }, [sliderIndex]);
   return React.createElement(DefaultSectionContainer, {
     backgroundColor: primary50,
     title: slice.title
@@ -2285,9 +2300,9 @@ var TextCarousel = function TextCarousel(_ref) {
     position: "relative",
     width: "full"
   }, React.createElement(CarouselInnerContainer, {
-    numberofitems: slice.slides.length,
+    numberOfItems: slice.slides.length,
     animate: {
-      x: slideWidth * -sliderIndex
+      x: offsetLeft
     },
     transition: {
       duration: 0.3,
@@ -2300,8 +2315,7 @@ var TextCarousel = function TextCarousel(_ref) {
       icon = _ref2.icon;
     return React.createElement(CardContainer, {
       key: id,
-      ref: slideRef,
-      numberofitems: slice.slides.length
+      ref: itemRef
     }, React.createElement(TextCardWithIcon, {
       title: title,
       text: text,
@@ -3153,19 +3167,15 @@ var FullWidthHighlightQuote = function FullWidthHighlightQuote(_ref) {
   })));
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var SliderContainer = /*#__PURE__*/styled(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(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(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(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(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(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(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(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;
 });
 
@@ -3183,6 +3193,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 = useRef(null);
@@ -3199,9 +3211,25 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
   var _useState2 = 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 = useMemo(function () {
+    return slice.images.length;
+  }, [slice.images.length]);
+  var sliderItemsWidth = useMemo(function () {
+    return numberOfItems * (imageWidth + ITEM_GAP) - ITEM_GAP;
+  }, [imageWidth, numberOfItems]);
+  var offsetLeft = useMemo(function () {
+    return sliderIndex * (imageWidth + ITEM_GAP) * -1;
+  }, [sliderIndex, imageWidth]);
+  var allowScroll = useMemo(function () {
+    return sliderItemsWidth + ITEM_GAP * 3 > windowWidth;
+  }, [sliderItemsWidth, windowWidth]);
+  var canMoveRight = useMemo(function () {
+    var offsetRight = windowWidth - (sliderItemsWidth + offsetLeft);
+    return offsetRight < MAX_OFFSET_RIGHT;
+  }, [imageWidth, sliderIndex, sliderItemsWidth, windowWidth]);
+  var canMoveLeft = useMemo(function () {
+    return sliderIndex !== 0;
+  }, [sliderIndex]);
   return React.createElement(DefaultSectionContainer, null, React.createElement(SliderContainer, {
     ref: containerRef
   }, React.createElement(SliderInnerContainer, {
@@ -3240,8 +3268,16 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
     })), React.createElement(Text, {
       height: "6"
     }, image.caption)));
-  }))), React.createElement(ButtonsContainer, {
-    show: (allowScroll && !isOpen).toString()
+  }))), React.createElement(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.createElement(Box, null, React.createElement(AnimatePresence, null, canMoveLeft && React.createElement(IconButton, {
     key: "leftButton",
     as: motion.button,