@royaloperahouse/chord 0.4.4 → 0.5.3

package/CHANGELOG.md

@@ -1,11 +1,25 @@
 # CHANGELOG
 
+## [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
+
 ## [0.4.4]
 - AnchorTapBar a11y: added tabIndex to links
-  
+
 ## [0.4.3]
 - Prevent focus when navigation tab is clicked
-  
+
 ## [0.4.2]
 - Highlights Carousel Components
 - Keyboard navigation fix for Navigation Component

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();
     }
   };
@@ -2630,12 +2630,24 @@ 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',
@@ -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();
     }
   };
@@ -4158,7 +4174,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 +4187,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;
@@ -4226,28 +4242,50 @@ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_t
 var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
 var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 6 / 3 / 15;\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobile);
-var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n    }\n  }\n"])), devices.mobile);
+var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.mobile);
 
 var _excluded$8 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
-  var children = _ref.children,
-      logo = _ref.logo,
+  var logo = _ref.logo,
       carouselTitle = _ref.carouselTitle,
-      infoTitle = _ref.infoTitle,
-      infoTimeframe = _ref.infoTimeframe,
-      infoSubtitle = _ref.infoSubtitle,
-      infoText = _ref.infoText,
-      link = _ref.link;
+      slides = _ref.slides;
+  var images = React.useMemo(function () {
+    return slides.map(function (_ref2) {
+      var image = _ref2.image;
+      return image;
+    });
+  }, []);
 
   var _useState = React.useState(),
       swiper = _useState[0],
       setSwiper = _useState[1];
 
+  var _useState2 = React.useState(0),
+      currentSlide = _useState2[0],
+      setCurrentSlide = _useState2[1];
+
+  var _slides$currentSlide = slides[currentSlide],
+      link = _slides$currentSlide.link,
+      infoText = _slides$currentSlide.infoText,
+      infoTitle = _slides$currentSlide.infoTitle,
+      infoTimeframe = _slides$currentSlide.infoTimeframe,
+      infoSubtitle = _slides$currentSlide.infoSubtitle;
+
   var linkText = link.text,
       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);
@@ -4300,12 +4338,14 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   })), /*#__PURE__*/React__default.createElement(swiperReact_js.Swiper, {
     slidesPerView: "auto",
     loop: true,
-    loopedSlides: React__default.Children.count(children),
+    loopedSlides: images.length,
     onSwiper: onSwiper
-  }, React__default.Children.map(children, function (child) {
-    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  }, images.map(function (image) {
+    return /*#__PURE__*/React__default.createElement(swiperReact_js.SwiperSlide, {
+      key: image.key
+    }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
       aspectRatio: AspectRatio['4:3']
-    }, child));
+    }, /*#__PURE__*/React__default.createElement("img", Object.assign({}, image))));
   }))));
 };
 
@@ -4318,50 +4358,47 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _excluded$9 = ["children", "link", "logo"];
+var _excluded$9 = ["logo", "slides"];
 
 var HighlightsCinema = function HighlightsCinema(_ref) {
-  var children = _ref.children,
-      link = _ref.link,
-      logo = _ref.logo,
+  var logo = _ref.logo,
+      slides = _ref.slides,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
-  var cinemaLink = _extends({}, link, {
+  var cinemaLink = {
     color: exports.Colors.Cinema,
     bgColor: exports.Colors.White
+  };
+  var newSlides = slides.map(function (slide) {
+    return _extends({}, slide, {
+      link: _extends({}, slide.link, cinemaLink)
+    });
   });
-
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Cinema
   }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
-    link: cinemaLink,
+    slides: newSlides,
     logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, null) : null
-  }), children));
+  })));
 };
 
-var _excluded$a = ["children"];
-
-var HighlightsCore = function HighlightsCore(_ref) {
-  var children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-
+var HighlightsCore = function HighlightsCore(props) {
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Core
-  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest), children));
+  }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, props)));
 };
 
-var _excluded$b = ["children", "logo"];
+var _excluded$a = ["logo"];
 
 var HighlightsStream = function HighlightsStream(_ref) {
-  var children = _ref.children,
-      logo = _ref.logo,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var logo = _ref.logo,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Stream
   }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
     logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, null) : null
-  }), children));
+  })));
 };
 
 var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6;
@@ -4494,7 +4531,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 
-var _excluded$c = ["text"],
+var _excluded$b = ["text"],
     _excluded2$1 = ["text"];
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
@@ -4533,7 +4570,7 @@ var Card = function Card(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -4697,7 +4734,7 @@ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templ
 var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$d = ["text"];
+var _excluded$c = ["text"];
 
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
@@ -4709,7 +4746,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title.substring(0, 40);
@@ -4728,11 +4765,11 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
 };
 
-var _excluded$e = ["link"];
+var _excluded$d = ["link"];
 
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var coreLink = link && _extends({}, link, {
     color: exports.Colors.White,
@@ -4746,11 +4783,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$f = ["link"];
+var _excluded$e = ["link"];
 
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var cinemaLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -4765,7 +4802,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
 };
 
 var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-size: 100% 100%;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
   var bgUrlDesktop = _ref.bgUrlDesktop;
   return bgUrlDesktop;
 }, zIndexes.content, devices.mobile, function (_ref2) {
@@ -4780,7 +4817,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$a || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$g = ["text"];
+var _excluded$f = ["text"];
 
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
@@ -4795,7 +4832,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -4822,11 +4859,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _excluded$h = ["link"];
+var _excluded$g = ["link"];
 
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var streamLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -4927,7 +4964,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 ||
   return '';
 });
 
-var _excluded$i = ["text"],
+var _excluded$h = ["text"],
     _excluded2$2 = ["text"];
 var LENGTH_TEXT$1 = 28;
 
@@ -4954,7 +4991,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];