@royaloperahouse/chord 0.5.0 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # CHANGELOG
 
+## [0.5.4]
+- Fix Card typography
+- Fix Carousel title typography
+- Fix Image Carousel size
+- Fix focus style in rotator buttons (Safari)
+- Anchor tab links hover style only for desktop
+- Fix Anchor bar internal navigation
+
+## [0.5.3]
+- Handle keyboard events using key attribute
+
+## [0.5.2]
+- Highlights Carousel: info change swiping slide
+- Fix RotatorButtons a11y
+
+## [0.5.1]
+- Highlights Carousel: fix box-sizing
+
 ## [0.5.0]
 - Highlights Carousel: new slides props (breaking change)
 - Fix in PageHeadingImpact image

package/dist/chord.cjs.development.js

@@ -2515,9 +2515,9 @@ var Tab = function Tab(_ref) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       clickHandler();
-    } else if (e.code === 'Escape') {
+    } else if (e.key === 'Escape') {
       onReset == null ? void 0 : onReset();
     }
   };
@@ -2541,7 +2541,7 @@ var Tab = function Tab(_ref) {
 };
 
 var _templateObject$f, _templateObject2$3;
-var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  :hover {\n    color: var(--base-color-", ");\n    border-bottom: 1px solid var(--base-color-", ");\n\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--base-color-", ");\n      border-bottom: 1px solid var(--base-color-", ");\n\n      && svg path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
@@ -2557,7 +2557,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$f || (_templ
   var selected = _ref4.selected,
       hoverColor = _ref4.hoverColor;
   return selected ? "&& svg path {\n    fill: var(--base-color-" + hoverColor + ");\n  }" : '';
-}, function (_ref5) {
+}, devices.desktop, devices.largeDesktop, function (_ref5) {
   var hoverColor = _ref5.hoverColor;
   return hoverColor;
 }, function (_ref6) {
@@ -2630,16 +2630,28 @@ var RotatorButtons = function RotatorButtons(_ref) {
     }
   };
 
+  var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
+    if (e.key === 'Enter') {
+      onClickLeftHandler();
+    }
+  };
+
   var onClickRightHandler = function onClickRightHandler() {
     if (onClickNext) {
       onClickNext();
     }
   };
 
+  var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
+    if (e.key === 'Enter') {
+      onClickRightHandler();
+    }
+  };
+
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: 'CarouselArrow',
-      direction: "left"
+      direction: "reverse"
     });
   };
 
@@ -2651,11 +2663,15 @@ var RotatorButtons = function RotatorButtons(_ref) {
 
   return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
     onClick: onClickLeftHandler,
+    onKeyDown: onPrevKeyDownHandler,
+    tabIndex: 0,
     "data-testid": "iconprev"
   }, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconprevnoavailable"
   }, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
     onClick: onClickRightHandler,
+    onKeyDown: onNextKeyDownHandler,
+    tabIndex: 0,
     "data-testid": "iconnext"
   }, renderNextIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconnextnoavailable"
@@ -2860,7 +2876,7 @@ var Basket$1 = function Basket(_ref) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClickHandler();
     }
   };
@@ -2910,7 +2926,7 @@ var Search$1 = function Search(_ref) {
       colorPrimary = _ref$colorPrimary === void 0 ? 'primary' : _ref$colorPrimary;
 
   var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClick == null ? void 0 : onClick();
     }
   };
@@ -3069,9 +3085,9 @@ var Dropdown = function Dropdown(_ref) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(e, link) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       handleChange(link);
-    } else if (e.code === 'Escape') {
+    } else if (e.key === 'Escape') {
       onResetHandler();
     }
   };
@@ -3266,17 +3282,17 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
   }, [ref, resetHandler, active]);
 
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onOptionClick == null ? void 0 : onOptionClick(link);
-    } else if (e.code === 'Escape') {
+    } else if (e.key === 'Escape') {
       resetHandler();
     }
   };
 
   var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClick == null ? void 0 : onClick();
-    } else if (e.code === 'Escape') {
+    } else if (e.key === 'Escape') {
       resetHandler();
     }
   };
@@ -3540,7 +3556,7 @@ var SearchBar = function SearchBar(_ref) {
   };
 
   var handleKeypress = function handleKeypress(e, value) {
-    if (e.code === 'Enter' && showSearchLink) {
+    if (e.key === 'Enter' && showSearchLink) {
       onSearchHandler(value);
     }
   };
@@ -3563,7 +3579,7 @@ var SearchBar = function SearchBar(_ref) {
   };
 
   var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onCloseHandler();
     }
   };
@@ -3865,8 +3881,6 @@ var _excluded$7 = ["text"],
     _excluded3 = ["id", "text"];
 
 var AnchorTapBar = function AnchorTapBar(_ref) {
-  var _tabListRef$current, _tabListRef$current2;
-
   var tabs = _ref.tabs,
       title = _ref.title,
       links = _ref.links,
@@ -3882,13 +3896,15 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       tabsOverflow = _useState2[0],
       setTabsOverflow = _useState2[1];
 
-  var _useState3 = React.useState(0),
-      scroll = _useState3[0],
-      setScroll = _useState3[1];
+  var _useState3 = React.useState(false),
+      canScrollToLeft = _useState3[0],
+      setCanScrollToLeft = _useState3[1];
+
+  var _useState4 = React.useState(tabsOverflow),
+      canScrollToRight = _useState4[0],
+      setCanScrollToRight = _useState4[1];
 
   var hasTitleOrLinks = title || links;
-  var scrollStart = 0 === scroll;
-  var scrollEnd = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) - (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0) <= scroll;
 
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
@@ -3903,10 +3919,11 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   };
 
   React.useEffect(function () {
-    var _tabListRef$current3, _tabListRef$current4;
+    var _tabListRef$current, _tabListRef$current2;
 
-    var tabsIsOverflowed = (((_tabListRef$current3 = tabListRef.current) == null ? void 0 : _tabListRef$current3.scrollWidth) || 0) > (((_tabListRef$current4 = tabListRef.current) == null ? void 0 : _tabListRef$current4.clientWidth) || 0);
+    var tabsIsOverflowed = (((_tabListRef$current = tabListRef.current) == null ? void 0 : _tabListRef$current.scrollWidth) || 0) > (((_tabListRef$current2 = tabListRef.current) == null ? void 0 : _tabListRef$current2.clientWidth) || 0);
     setTabsOverflow(tabsIsOverflowed);
+    setCanScrollToRight(tabsIsOverflowed);
   }, [tabListRef]);
   React.useEffect(function () {
     var scrollTriggerCheck = function scrollTriggerCheck() {
@@ -3921,6 +3938,24 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       if (window.scrollY === 0) {
         setSelectedItem(onTabClick ? selectedItem : '');
       } else if (reachedItem) {
+        var _ref2 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+            _ref2$scrollLeft = _ref2.scrollLeft,
+            scrollLeft = _ref2$scrollLeft === void 0 ? 0 : _ref2$scrollLeft,
+            _ref2$clientWidth = _ref2.clientWidth,
+            clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
+
+        var tabLinkElement = document.getElementById("tablink-" + reachedItem.id) || {
+          offsetLeft: 0,
+          offsetWidth: 0
+        };
+        var offsetLeft = tabLinkElement.offsetLeft,
+            offsetWidth = tabLinkElement.offsetWidth;
+        var isInView = offsetLeft >= scrollLeft && offsetLeft + offsetWidth < scrollLeft + clientWidth;
+
+        if (!isInView && tabListRef != null && tabListRef.current) {
+          tabListRef.current.scrollLeft = offsetLeft;
+        }
+
         setSelectedItem(reachedItem.id);
       }
     };
@@ -3929,34 +3964,47 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     return function () {
       return document.removeEventListener('scroll', scrollTriggerCheck);
     };
-  }, [tabs, selectedItem, hasTitleOrLinks]);
-  var tabsColumnStart = tabsOverflow ? scrollStart ? 2 : 1 : 3;
-  var tabsColumnSpan = tabsOverflow ? scrollStart ? 14 : 15 : 13;
+  }, [tabs, selectedItem, hasTitleOrLinks, tabListRef]);
+  var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
+  var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
 
-  var _ref2 = (links == null ? void 0 : links[0]) || {},
-      primaryButtonText = _ref2.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$7);
+  var _ref3 = (links == null ? void 0 : links[0]) || {},
+      primaryButtonText = _ref3.text,
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
 
-  var _ref3 = (links == null ? void 0 : links[1]) || {},
-      secondaryButtonText = _ref3.text,
-      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  var _ref4 = (links == null ? void 0 : links[1]) || {},
+      secondaryButtonText = _ref4.text,
+      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
 
   var scrollToRight = function scrollToRight() {
     if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
       var newScroll = Math.min(tabListRef.current.clientWidth, tabListRef.current.scrollWidth - scroll);
       tabListRef.current.scrollLeft += newScroll;
-      setScroll(tabListRef.current.scrollLeft + newScroll);
     }
   };
 
   var scrollToLeft = function scrollToLeft() {
     if (tabListRef.current) {
+      var scroll = tabListRef.current.scrollLeft;
       var newScroll = Math.max(0, scroll - tabListRef.current.clientWidth);
       tabListRef.current.scrollLeft = newScroll;
-      setScroll(newScroll);
     }
   };
 
+  var onTabsScroll = function onTabsScroll() {
+    var _ref5 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+        _ref5$scrollLeft = _ref5.scrollLeft,
+        scrollLeft = _ref5$scrollLeft === void 0 ? 0 : _ref5$scrollLeft,
+        _ref5$clientWidth = _ref5.clientWidth,
+        clientWidth = _ref5$clientWidth === void 0 ? 0 : _ref5$clientWidth,
+        _ref5$scrollWidth = _ref5.scrollWidth,
+        scrollWidth = _ref5$scrollWidth === void 0 ? 0 : _ref5$scrollWidth;
+
+    setCanScrollToLeft(scrollLeft > 0);
+    setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
+  };
+
   return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, title || links ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 2,
     columnSpanDesktop: 9,
@@ -3981,27 +4029,29 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     "data-testid": "anchor-tabs"
   }, /*#__PURE__*/React__default.createElement(TabsList, {
     ref: tabListRef,
-    tabsOverflow: tabsOverflow
-  }, tabs.map(function (_ref4) {
-    var id = _ref4.id,
-        text = _ref4.text,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    tabsOverflow: tabsOverflow,
+    onScroll: onTabsScroll
+  }, tabs.map(function (_ref6) {
+    var id = _ref6.id,
+        text = _ref6.text,
+        rest = _objectWithoutPropertiesLoose(_ref6, _excluded3);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
       selected: isSelectedItem(id),
+      id: "tablink-" + id,
       onClick: function onClick(e) {
         return onClicktab(e, id);
       },
       tabIndex: 0
     }, rest), text));
-  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, !scrollStart ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
+  })), tabsOverflow ? /*#__PURE__*/React__default.createElement(ArrowsContainer, null, canScrollToLeft ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
     onClick: scrollToLeft
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow",
     direction: "reverse"
-  })) : null, !scrollEnd ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
+  })) : null, canScrollToRight ? /*#__PURE__*/React__default.createElement(ArrowWrapper, {
     onClick: scrollToRight
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow"
@@ -4027,7 +4077,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
     var calcColumns = "calc(calc(80% - " + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
     return "\n      & {\n        .swiper-slide {\n          width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n        }\n      }\n    ";
   } else {
-    return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: " + imagesHeightDesktop + "px;\n          }\n        }\n      }\n    ";
+    return "\n      & {\n        .swiper-slide {\n          height: fit-content;\n          width: auto;\n          margin-right: var(--grid-column-gap);\n          -webkit-transform: translate3d(0, 0, 0);\n\n          > div {\n            height: calc(" + imagesHeightDesktop + "px + var(--line-height-body-2) + 12px);\n          }\n        }\n      }\n    ";
   }
 }, devices.mobile, function (_ref2) {
   var active = _ref2.active,
@@ -4044,11 +4094,11 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_te
     var marginRight = active ? "calc(calc(var(--grid-column-gap) * 2) + " + columnWidth + ")" : "calc(calc(" + columnWidth + " * 2) + var(--grid-column-gap))";
     return "\n        && {\n          .swiper-slide {\n            width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n            margin-right: " + marginRight + ";\n            -webkit-transform: translate3d(0, 0, 0);\n          }\n        }";
   } else {
-    return "\n        &&& {\n          .swiper-slide > div{\n            height: " + imagesHeightDevice + "px;\n          }\n        }";
+    return "\n        &&& {\n          .swiper-slide > div{\n            height: calc(" + imagesHeightDevice + "px + var(--line-height-body-2) + 12px);\n          }\n        }";
   }
 });
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
-var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h3 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n  user-select: text;\n\n  h4 {\n    padding: 0;\n    margin: 0;\n  }\n"])));
 var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: start;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var Carousel = function Carousel(_ref) {
@@ -4128,7 +4178,7 @@ var Carousel = function Carousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(TitleWrapper, {
     "data-testid": "carousel-title-wrapper"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 3
+    level: 4
   }, title))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 14,
     columnSpanDesktop: 2,
@@ -4158,7 +4208,7 @@ var Carousel = function Carousel(_ref) {
 
 var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$1;
 var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
-var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  width: calc(100% + var(--grid-column-gap) - 86px);\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      width: calc(100% - 78px + var(--grid-column-gap));\n      grid-area: 1 / 1 / 1 / 6;\n      padding-top: 32px;\n      padding-right: 28px;\n\n      h4 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: calc(100% - 20px);\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
+var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 1 / 6;\n      padding-top: 32px;\n      padding-right: 28px;\n\n      h4 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
   return theme.fonts.mobile.sizes.altHeaders[4];
 }, function (_ref2) {
@@ -4171,7 +4221,7 @@ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$i |
   var theme = _ref4.theme;
   return theme.fonts.mobile.lineHeights.altHeaders[4];
 }, devices.mobile);
-var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  width: calc(100% + var(--grid-column-gap) - 86px);\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 6;\n      width: calc(100% + var(--grid-column-gap) - 78px);\n      padding: 28px 28px 28px 50px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: calc(100% - 40px);\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 2 / 1 / 2 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  align-self: center;\n  padding: 36px 36px 36px 50px;\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 2 / 6;\n      padding: 28px 28px 28px 50px;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 3 / 1 / 4 / 15;\n      width: 100%;\n      padding: 0 20px;\n      margin: 24px 0;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n  width: 132px;\n  height: 36px;\n\n  @media ", " {\n    & {\n      margin-bottom: 20px;\n      width: 102px;\n      height: 28px;\n    }\n  }\n"])), devices.mobile);
 var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  h6 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref5) {
   var theme = _ref5.theme;
@@ -4260,6 +4310,16 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
       restLink = _objectWithoutPropertiesLoose(link, _excluded$8);
 
   var description = infoText == null ? void 0 : infoText.substring(0, 130);
+  React.useEffect(function () {
+    var slideChangeHandler = function slideChangeHandler(s) {
+      return setCurrentSlide(s.realIndex);
+    };
+
+    swiper == null ? void 0 : swiper.on('slideChangeTransitionStart', slideChangeHandler);
+    return function () {
+      return swiper == null ? void 0 : swiper.off('slideChangeTransitionStart', slideChangeHandler);
+    };
+  }, [swiper]);
 
   var onSwiper = function onSwiper(s) {
     setSwiper(s);
@@ -4268,14 +4328,12 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var onNext = function onNext() {
     if (swiper && !swiper.animating) {
       swiper.slideNext();
-      setCurrentSlide(swiper.realIndex);
     }
   };
 
   var onPrev = function onPrev() {
     if (swiper && !swiper.animating) {
       swiper.slidePrev();
-      setCurrentSlide(swiper.realIndex);
     }
   };
 
@@ -4444,7 +4502,7 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$B, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4;
+var _templateObject$B, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -4458,10 +4516,11 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$b ||
   var fullWidth = _ref2.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n"])));
-var TextContainer = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
+var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
+var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
   var size = _ref3.size,
       primaryButtonTextLength = _ref3.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
@@ -4600,6 +4659,8 @@ var Card = function Card(_ref) {
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
   }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement(Header, {
+    level: size === 'small' ? 6 : 5
+  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
     level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {