@royaloperahouse/chord 0.5.3 → 0.5.7

package/dist/chord.esm.js

@@ -734,6 +734,36 @@ var EditMyList = (function (_ref) {
   }));
 });
 
+var Favourite = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M12 4.69994L13.88 8.51994L14.12 8.98994L14.64 9.06994L18.85 9.67994L15.8 12.6799L15.43 13.0499L15.51 13.5599L16.23 17.7599L12.47 15.7599L12 15.5099L11.53 15.7499L7.77 17.7499L8.49 13.5499L8.57 13.0399L8.2 12.6699L5.15 9.66994L9.36 9.05994L9.88 8.97994L10.12 8.50994L12 4.69994ZM12 2.43994L9.22 8.07994L3 8.99994L7.5 13.3899L6.44 19.5799L12 16.6399L17.56 19.5599L16.5 13.3699L21 8.99994L14.78 8.09994L12 2.43994Z",
+    fill: color
+  }));
+});
+
+var FavouriteFull = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M9.22 8.07994L12 2.43994L14.78 8.09994L21 8.99994L16.5 13.3699L17.56 19.5599L12 16.6399L6.44 19.5799L7.5 13.3899L3 8.99994L9.22 8.07994Z",
+    fill: color
+  }));
+});
+
 var Filter = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1598,6 +1628,21 @@ var Refresh = (function (_ref) {
   }));
 });
 
+var Star = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 48 46",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M24 0L30.0248 16.7076L47.7764 17.2746L33.7483 28.1674L38.6946 45.2254L24 35.25L9.30537 45.2254L14.2517 28.1674L0.223587 17.2746L17.9752 16.7076L24 0Z",
+    fill: color
+  }));
+});
+
 var AudioDescription = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1897,6 +1942,8 @@ var IconLibrary = {
   Expand: Expand,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
+  Favourite: Favourite,
+  FavouriteFull: FavouriteFull,
   Filter: Filter,
   FindAScreening: FindAScreening,
   Forward10: Forward10,
@@ -1928,6 +1975,7 @@ var IconLibrary = {
   Settings: Settings,
   Shift: Shift,
   Space: Space,
+  Star: Star,
   Subscribe: Subscribe,
   Subtitles: Subtitles,
   Tick: Tick,
@@ -2537,7 +2585,7 @@ var Tab = function Tab(_ref) {
 };
 
 var _templateObject$f, _templateObject2$3;
-var TabLinkWrapper = /*#__PURE__*/styled.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.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) {
@@ -2553,7 +2601,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$f || (_templateObject
   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) {
@@ -2647,7 +2695,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: 'CarouselArrow',
-      direction: "left"
+      direction: "reverse"
     });
   };
 
@@ -3877,8 +3925,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,
@@ -3894,13 +3940,15 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       tabsOverflow = _useState2[0],
       setTabsOverflow = _useState2[1];
 
-  var _useState3 = useState(0),
-      scroll = _useState3[0],
-      setScroll = _useState3[1];
+  var _useState3 = useState(false),
+      canScrollToLeft = _useState3[0],
+      setCanScrollToLeft = _useState3[1];
+
+  var _useState4 = 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;
@@ -3915,10 +3963,11 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   };
 
   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]);
   useEffect(function () {
     var scrollTriggerCheck = function scrollTriggerCheck() {
@@ -3933,6 +3982,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);
       }
     };
@@ -3941,34 +4008,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,
@@ -3993,27 +4073,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"
@@ -4041,7 +4123,7 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
     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,
@@ -4058,11 +4140,11 @@ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObj
     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(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.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.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.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) {
@@ -4142,7 +4224,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,
@@ -4466,7 +4548,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;
@@ -4480,10 +4562,11 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templat
   var fullWidth = _ref2.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$2 = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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;
@@ -4622,6 +4705,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: {
@@ -5968,5 +6053,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$N || (_templat
   return theme.grid.tablet.margin;
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTapBar, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, TypeTags, devices };
+export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, TypeTags, devices };
 //# sourceMappingURL=chord.esm.js.map