@royaloperahouse/chord 0.5.3 → 0.5.7

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## [0.5.7]
+- Added Star icon to Iconography
+
+## [0.5.6]
+- Added Favourite and Favourite Full icons to Iconography
+
+## [0.5.5]
+- Export ImageAspectRatioWrapper component and AspectRatio enum
+
+## [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
 

package/dist/chord.cjs.development.js

@@ -742,6 +742,36 @@ var EditMyList = (function (_ref) {
   }));
 });
 
+var Favourite = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.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__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.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;
@@ -1606,6 +1636,21 @@ var Refresh = (function (_ref) {
   }));
 });
 
+var Star = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 48 46",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.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;
@@ -1905,6 +1950,8 @@ var IconLibrary = {
   Expand: Expand,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
+  Favourite: Favourite,
+  FavouriteFull: FavouriteFull,
   Filter: Filter,
   FindAScreening: FindAScreening,
   Forward10: Forward10,
@@ -1936,6 +1983,7 @@ var IconLibrary = {
   Settings: Settings,
   Shift: Shift,
   Space: Space,
+  Star: Star,
   Subscribe: Subscribe,
   Subtitles: Subtitles,
   Tick: Tick,
@@ -2424,19 +2472,17 @@ var SectionSplitter = function SectionSplitter(_ref) {
   }, /*#__PURE__*/React__default.createElement(Splitter, null)));
 };
 
-var AspectRatio;
-
 (function (AspectRatio) {
   AspectRatio["1:1"] = "1 / 1";
   AspectRatio["3:4"] = "3 / 4";
   AspectRatio["4:3"] = "4 / 3";
   AspectRatio["16:9"] = "16 / 9";
-})(AspectRatio || (AspectRatio = {}));
+})(exports.AspectRatio || (exports.AspectRatio = {}));
 
 var _templateObject$d;
 var ImageAspectRatioWrapper = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
-      aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
+      aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
 });
 
@@ -2541,7 +2587,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 +2603,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) {
@@ -2651,7 +2697,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: 'CarouselArrow',
-      direction: "left"
+      direction: "reverse"
     });
   };
 
@@ -3881,8 +3927,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,
@@ -3898,13 +3942,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;
@@ -3919,10 +3965,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() {
@@ -3937,6 +3984,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);
       }
     };
@@ -3945,34 +4010,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,
@@ -3997,27 +4075,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"
@@ -4043,7 +4123,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,
@@ -4060,11 +4140,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) {
@@ -4144,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,
@@ -4344,7 +4424,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, {
       key: image.key
     }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-      aspectRatio: AspectRatio['4:3']
+      aspectRatio: exports.AspectRatio['4:3']
     }, /*#__PURE__*/React__default.createElement("img", Object.assign({}, image))));
   }))));
 };
@@ -4468,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;
@@ -4482,10 +4562,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;
@@ -4609,7 +4690,7 @@ var Card = function Card(_ref) {
   }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     "data-testid": "hovercontainer"
   }), /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['4:3']
+    aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: "test"
@@ -4624,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: {
@@ -4711,7 +4794,7 @@ var Editorial = function Editorial(_ref) {
     "data-testid": "image-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['1:1']
+    aspectRatio: exports.AspectRatio['1:1']
   }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
     "data-testid": "text-wrapper",
     imageToLeft: imageToLeft
@@ -5008,7 +5091,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
     "data-testid": "image-wrapper",
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
-    aspectRatio: AspectRatio['4:3']
+    aspectRatio: exports.AspectRatio['4:3']
   }, children)), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
     "data-testid": "content-wrapper",
     imageToLeft: imageToLeft
@@ -5990,6 +6073,7 @@ exports.HighlightsCarouselCinema = HighlightsCinema;
 exports.HighlightsCarouselCore = HighlightsCore;
 exports.HighlightsCarouselStream = HighlightsStream;
 exports.Icon = Icon;
+exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
 exports.ImageWithCaption = ImageWithCaption;
 exports.Navigation = Navigation;
 exports.Overline = Overline;