@royaloperahouse/chord 0.5.2 → 0.5.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # CHANGELOG
 
+## [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
+
 ## [0.5.2]
 - Highlights Carousel: info change swiping slide
 - Fix RotatorButtons a11y

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;
@@ -1905,6 +1935,8 @@ var IconLibrary = {
   Expand: Expand,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
+  Favourite: Favourite,
+  FavouriteFull: FavouriteFull,
   Filter: Filter,
   FindAScreening: FindAScreening,
   Forward10: Forward10,
@@ -2424,19 +2456,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;
 });
 
@@ -2515,9 +2545,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 +2571,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 +2587,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) {
@@ -2631,7 +2661,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   };
 
   var onPrevKeyDownHandler = function onPrevKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClickLeftHandler();
     }
   };
@@ -2643,7 +2673,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   };
 
   var onNextKeyDownHandler = function onNextKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClickRightHandler();
     }
   };
@@ -2651,7 +2681,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   var renderPrevIcon = function renderPrevIcon() {
     return /*#__PURE__*/React__default.createElement(Icon, {
       iconName: 'CarouselArrow',
-      direction: "left"
+      direction: "reverse"
     });
   };
 
@@ -2876,7 +2906,7 @@ var Basket$1 = function Basket(_ref) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onClickHandler();
     }
   };
@@ -2926,7 +2956,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();
     }
   };
@@ -3085,9 +3115,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();
     }
   };
@@ -3282,17 +3312,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();
     }
   };
@@ -3556,7 +3586,7 @@ var SearchBar = function SearchBar(_ref) {
   };
 
   var handleKeypress = function handleKeypress(e, value) {
-    if (e.code === 'Enter' && showSearchLink) {
+    if (e.key === 'Enter' && showSearchLink) {
       onSearchHandler(value);
     }
   };
@@ -3579,7 +3609,7 @@ var SearchBar = function SearchBar(_ref) {
   };
 
   var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
-    if (e.code === 'Enter') {
+    if (e.key === 'Enter') {
       onCloseHandler();
     }
   };
@@ -3881,8 +3911,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 +3926,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 +3949,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 +3968,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 +3994,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 +4059,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 +4107,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 +4124,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 +4208,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 +4408,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 +4532,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 +4546,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 +4674,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 +4689,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 +4778,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 +5075,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 +6057,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;