@royaloperahouse/chord 1.21.0-chord-development → 1.21.1-chord-development

package/CHANGELOG.md

@@ -1,8 +1,13 @@
+## [1.21.1]
+- Compact PageHeading: Refactored to support iOS devices
 
 ## [1.21.0]
 - TextLogo: add new component
 - Compact PageHeading: swap logo with TextLogo to fix iOS issues
 
+## [1.20.2-a]
+- Made select state reset behaviour opt-in
+
 ## [1.20.2]
 - Card: change cursor to default for cards without buttons
 - HighlightsCarousel: hide button in case there are no text for them
@@ -12,19 +17,6 @@
 
 ## [1.20.0]
 - Tickbox: Add black-on-white option
-
-## [1.19.0-a]
-- Tickbox: Add black-on-white option
-
-## [1.18.2-n]
-- Reset the select component's selected value to the first option if options change
-
-## [1.18.2-n]
-- Reset the select component's selected value to the first option if options change
-
-## [1.18.1]
-## [1.19.0]
-
 ## [1.19.0]
 - Add timer to navigation basket
 ## [1.18.3]

package/dist/chord.cjs.development.js

@@ -3534,44 +3534,21 @@ var VideoPlayButton = /*#__PURE__*/styled__default.button(_templateObject$r || (
 var VideoControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50px;\n  bottom: 24px;\n  display: flex;\n  align-items: center;\n  @media ", " {\n    left: 20px;\n    bottom: 12px;\n  }\n"])), devices.mobile);
 var VideoVolume = /*#__PURE__*/styled__default.input(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100px;\n  margin-left: 24px;\n"])));
 var VideoMute = /*#__PURE__*/styled__default.button(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 17px;\n  height: 17px;\n  background: none;\n  border: none;\n  padding: 0;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  border: none;\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: none;\n  transform: translateY(-25%);\n"])));
+var thumbStyes = /*#__PURE__*/styled.css(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  appearance: none;\n  border: none;\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: none;\n  transform: translateY(-25%);\n"])));
 var trackStyles = /*#__PURE__*/styled.css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  height: 4px;\n  cursor: pointer;\n  background: rgb(241, 241, 241, 0.5);\n  border-radius: 1.3px;\n  border: none;\n"])));
-var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 12px 12px;\n  padding: 0;\n  background-color: rgb(26, 26, 26, 0.6);\n  height: 36px;\n  width: ", ";\n  align-items: center;\n  justify-content: center;\n\n  /* Range slider overrides */\n  input[type='range' i] {\n    -webkit-appearance: none;\n    width: 42px;\n    margin: 0;\n    margin-left: 7px;\n    background: transparent; /* Otherwise white in Chrome */\n\n    ::-webkit-slider-runnable-track {\n      ", "\n    }\n    ::-moz-range-track {\n      ", "\n    }\n    ::-ms-track {\n      ", "\n    }\n    ::-ms-fill-lower {\n      ", "\n    }\n    ::-ms-fill-upper {\n      ", "\n    }\n\n    ::-webkit-slider-thumb {\n      ", "\n    }\n    ::-moz-range-thumb {\n      ", "\n    }\n    ::-ms-thumb {\n      ", "\n    }\n  }\n"])), function (_ref) {
+var VolumeControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 12px 12px;\n  padding: 0;\n  background-color: rgb(26, 26, 26, 0.6);\n  height: 36px;\n  width: ", ";\n  align-items: center;\n  justify-content: center;\n\n  /* Range slider overrides */\n  input[type='range' i] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 42px;\n    margin: 0;\n    margin-left: 7px;\n    background: transparent; /* Otherwise white in Chrome */\n\n    ::-webkit-slider-runnable-track {\n      ", "\n    }\n    ::-moz-range-track {\n      ", "\n    }\n    ::-ms-track {\n      ", "\n    }\n    ::-ms-fill-lower {\n      ", "\n    }\n    ::-ms-fill-upper {\n      ", "\n    }\n\n    ::-webkit-slider-thumb {\n      ", "\n    }\n    ::-moz-range-thumb {\n      ", "\n    }\n    ::-ms-thumb {\n      ", "\n    }\n  }\n"])), function (_ref) {
   var volumeHidden = _ref.volumeHidden;
   return volumeHidden ? '40px' : '100px';
 }, trackStyles, trackStyles, trackStyles, trackStyles, trackStyles, thumbStyes, thumbStyes, thumbStyes);
 
-var isIOS = function isIOS() {
-  try {
-    console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === 'undefined') return false;
-    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
-    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-  } catch (e) {
-    console.warn('Error checking if device is iOS.');
-    return false;
-  }
-}; // React hook version of isIOS
-
-
-var useIOS = function useIOS() {
-  var _useState = React.useState(false),
-      IOS = _useState[0],
-      setIOS = _useState[1];
-
-  React.useEffect(function () {
-    if (typeof navigator === 'undefined') return;
-    setIOS(isIOS());
-  }, []);
-  return IOS;
-};
-
 var VideoControls = function VideoControls(_ref) {
   var videoElementId = _ref.videoElementId,
       _ref$defaultMuted = _ref.defaultMuted,
       defaultMuted = _ref$defaultMuted === void 0 ? true : _ref$defaultMuted,
       _ref$defaultPlaying = _ref.defaultPlaying,
-      defaultPlaying = _ref$defaultPlaying === void 0 ? false : _ref$defaultPlaying;
+      defaultPlaying = _ref$defaultPlaying === void 0 ? false : _ref$defaultPlaying,
+      _ref$hideVolume = _ref.hideVolume,
+      hideVolume = _ref$hideVolume === void 0 ? false : _ref$hideVolume;
 
   var _React$useState = React__default.useState(defaultPlaying),
       playing = _React$useState[0],
@@ -3585,8 +3562,6 @@ var VideoControls = function VideoControls(_ref) {
       volume = _React$useState3[0],
       setVolume = _React$useState3[1];
 
-  var isIOS = useIOS();
-
   var getVideoElement = function getVideoElement() {
     return document.querySelector("#" + videoElementId);
   };
@@ -3643,7 +3618,7 @@ var VideoControls = function VideoControls(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: !playing ? 'Play' : 'Pause'
   })), /*#__PURE__*/React__default.createElement(VolumeControlsWrapper, {
-    volumeHidden: isIOS
+    volumeHidden: hideVolume
   }, /*#__PURE__*/React__default.createElement(VideoMute, {
     id: "mute",
     className: "video-mute-button",
@@ -3654,7 +3629,7 @@ var VideoControls = function VideoControls(_ref) {
     "data-testid": "mute-icon",
     iconName: muted ? 'Muted' : 'Volume',
     color: "white"
-  })), !isIOS && /*#__PURE__*/React__default.createElement(VideoVolume, {
+  })), !hideVolume && /*#__PURE__*/React__default.createElement(VideoVolume, {
     id: "vol-control",
     type: "range",
     min: "0",
@@ -6738,11 +6713,20 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
 };
 
+var BrandingStyle;
+
+(function (BrandingStyle) {
+  BrandingStyle["BlockText"] = "BlockText";
+  BrandingStyle["BodyText"] = "BodyText";
+  BrandingStyle["StreamLogo"] = "StreamLogo";
+  BrandingStyle["CinemaLogo"] = "CinemaLogo";
+})(BrandingStyle || (BrandingStyle = {}));
+
 var _templateObject$X, _templateObject2$E, _templateObject3$x, _templateObject5$k, _templateObject6$e, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.p(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
 var BrandingTextBody = /*#__PURE__*/styled__default.p(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
-var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  @media ", " {\n    height: 85vw;\n  }\n"])), devices.mobile);
+var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
 var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
       theme = _ref.theme;
@@ -6781,24 +6765,24 @@ var renderBranding = function renderBranding(brandingStyle, brandingText, invert
   var color = invert ? exports.Colors.Black : exports.Colors.White;
 
   switch (brandingStyle) {
-    case 'BlockText':
+    case BrandingStyle.BlockText:
       return /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
 
-    case 'BodyText':
+    case BrandingStyle.BodyText:
       return /*#__PURE__*/React__default.createElement(BrandingTextBody, {
         dangerouslySetInnerHTML: {
           __html: truncateHtmlString(brandingText, 65)
         }
       });
 
-    case 'StreamLogo':
+    case BrandingStyle.StreamLogo:
       return /*#__PURE__*/React__default.createElement(Logo, {
         color: color,
         fontSize: 12,
         productName: TextLogoProduct.Stream
       });
 
-    case 'CinemaLogo':
+    case BrandingStyle.CinemaLogo:
       return /*#__PURE__*/React__default.createElement(Logo, {
         color: color,
         fontSize: 12,
@@ -6806,7 +6790,7 @@ var renderBranding = function renderBranding(brandingStyle, brandingText, invert
       });
 
     default:
-      return /*#__PURE__*/React__default.createElement("p", null, "Royal Opera House");
+      return null;
   }
 };
 
@@ -6818,70 +6802,194 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, brandingText, invert));
 };
 
+var isIOS = function isIOS() {
+  try {
+    console.warn('Do not use this on server side rendering, it may throw an error.');
+    if (typeof navigator === 'undefined') return false;
+    return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
+    navigator.userAgent.includes('Mac') && 'ontouchend' in document;
+  } catch (e) {
+    console.warn('Error checking if device is iOS.');
+    return false;
+  }
+}; // React hook version of isIOS
+
+
+var useIOS = function useIOS() {
+  var _useState = React.useState(false),
+      IOS = _useState[0],
+      setIOS = _useState[1];
+
+  React.useEffect(function () {
+    if (typeof navigator === 'undefined') return;
+    setIOS(isIOS());
+  }, []);
+  return IOS;
+}; // Checks device size based on window width
+
+var isMobile = function isMobile() {
+  try {
+    if (typeof window === undefined) return false;
+    return window.innerWidth < breakpoints.sm;
+  } catch (e) {
+    console.warn('Error checking if device is mobile.');
+    return false;
+  }
+}; // React hook version of isMobile
+
+var useMobile = function useMobile() {
+  var _useState2 = React.useState(false),
+      mobile = _useState2[0],
+      setMobile = _useState2[1];
+
+  React.useEffect(function () {
+    if (typeof window === undefined) return;
+    setMobile(isMobile());
+  }, []);
+  return mobile;
+};
+
 var _excluded$k = ["text"];
 
-var PageHeadingCompact = function PageHeadingCompact(_ref) {
-  var title = _ref.title,
-      link = _ref.link,
-      _ref$sponsor = _ref.sponsor,
-      sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
-      customSponsorImage = _ref.customSponsorImage,
-      bgUrlDesktop = _ref.bgUrlDesktop,
-      bgUrlDevice = _ref.bgUrlDevice,
-      videoUrlDesktop = _ref.videoUrlDesktop,
-      _ref$bgImageAltText = _ref.bgImageAltText,
-      bgImageAltText = _ref$bgImageAltText === void 0 ? '' : _ref$bgImageAltText,
-      _ref$invert = _ref.invert,
-      invert = _ref$invert === void 0 ? false : _ref$invert,
-      _ref$brandingStyle = _ref.brandingStyle,
-      brandingStyle = _ref$brandingStyle === void 0 ? 'BlockText' : _ref$brandingStyle,
-      _ref$brandingText = _ref.brandingText,
-      brandingText = _ref$brandingText === void 0 ? 'Royal Opera House' : _ref$brandingText;
+var useResponsiveVideo = function useResponsiveVideo(video, poster) {
+  var mobileVideo = video.mobile || video.desktop;
+  var desktopVideo = video.desktop || video.mobile;
+  var mobilePoster = poster.mobile || poster.desktop;
+  var desktopPoster = poster.desktop || poster.mobile;
 
-  var _ref2 = link || {},
-      linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+  var _useState = React.useState(desktopPoster),
+      posterUrl = _useState[0],
+      setPoster = _useState[1];
+
+  var _useState2 = React.useState(desktopVideo),
+      videoUrl = _useState2[0],
+      setVideoUrl = _useState2[1];
+
+  var isMobile = useMobile();
+  React.useEffect(function () {
+    setPoster(isMobile ? mobilePoster : desktopPoster);
+    setVideoUrl(isMobile ? mobileVideo : desktopVideo);
+  }, [isMobile]);
+  return {
+    posterUrl: posterUrl,
+    videoUrl: videoUrl
+  };
+};
+
+var VideoWithControls = function VideoWithControls(_ref) {
+  var video = _ref.video,
+      poster = _ref.poster;
+
+  var _useResponsiveVideo = useResponsiveVideo(video, poster),
+      posterUrl = _useResponsiveVideo.posterUrl,
+      videoUrl = _useResponsiveVideo.videoUrl;
 
-  var titleSize = title && title.length > 20 ? 4 : 3;
-  var videoElementId = 'compact-header-video';
   var isIOS = useIOS();
-  return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
-    "data-testid": "compact-sponsor"
-  }, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
-    "data-testid": "compact-custom-sponsor"
-  }, customSponsorImage, {
-    isCustomImage: true
-  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, !isIOS && videoUrlDesktop ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
-    loop: true,
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
+    id: video.elementId,
+    width: "100%",
+    height: "100%",
     muted: true,
-    playsInline: true,
+    loop: true,
+    poster: posterUrl,
+    src: videoUrl,
     "data-testid": "compact-video",
-    id: videoElementId
+    playsInline: true
   }, /*#__PURE__*/React__default.createElement("source", {
-    src: videoUrlDesktop
+    src: videoUrl
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
-    alt: bgImageAltText,
+    src: posterUrl,
+    alt: poster.alt,
     "data-testid": "compact-image"
   })), /*#__PURE__*/React__default.createElement(VideoControls, {
-    videoElementId: videoElementId,
+    videoElementId: video.elementId,
     defaultMuted: true,
-    defaultPlaying: false
-  })) : /*#__PURE__*/React__default.createElement("picture", {
+    defaultPlaying: false,
+    hideVolume: isIOS
+  }));
+};
+
+var CompactHeaderImage = function CompactHeaderImage(_ref2) {
+  var mobile = _ref2.mobile,
+      desktop = _ref2.desktop,
+      alt = _ref2.alt;
+  return /*#__PURE__*/React__default.createElement("picture", {
     "data-testid": "compact-picture"
-  }, bgUrlDevice && /*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDevice,
+  }, mobile && /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
     media: "" + devices.mobile,
     "data-testid": "compact-mobile-image-source"
   }), /*#__PURE__*/React__default.createElement("source", {
-    srcSet: bgUrlDesktop,
+    srcSet: desktop,
     media: "" + devices.desktop,
     "data-testid": "compact-desktop-image-source"
   }), /*#__PURE__*/React__default.createElement("img", {
-    src: bgUrlDesktop,
-    alt: bgImageAltText,
+    src: desktop,
+    alt: alt,
     "data-testid": "compact-image"
-  }))), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
+  }));
+};
+
+var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
+  var video = _ref3.video,
+      poster = _ref3.poster;
+  // Renders fallback image if no video supplied
+  console.warn('video', video);
+
+  if (!video.desktop && !video.mobile) {
+    return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
+  }
+
+  return /*#__PURE__*/React__default.createElement(VideoWithControls, {
+    video: video,
+    poster: poster
+  });
+};
+
+var PageHeadingCompact = function PageHeadingCompact(_ref4) {
+  var title = _ref4.title,
+      link = _ref4.link,
+      _ref4$sponsor = _ref4.sponsor,
+      sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
+      customSponsorImage = _ref4.customSponsorImage,
+      bgUrlDesktop = _ref4.bgUrlDesktop,
+      bgUrlDevice = _ref4.bgUrlDevice,
+      videoUrlDesktop = _ref4.videoUrlDesktop,
+      videoUrlMobile = _ref4.videoUrlMobile,
+      _ref4$bgImageAltText = _ref4.bgImageAltText,
+      bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
+      _ref4$invert = _ref4.invert,
+      invert = _ref4$invert === void 0 ? false : _ref4$invert,
+      _ref4$brandingStyle = _ref4.brandingStyle,
+      brandingStyle = _ref4$brandingStyle === void 0 ? BrandingStyle.BlockText : _ref4$brandingStyle,
+      _ref4$brandingText = _ref4.brandingText,
+      brandingText = _ref4$brandingText === void 0 ? 'Royal Opera House' : _ref4$brandingText;
+
+  var _ref5 = link || {},
+      linkText = _ref5.text,
+      restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$k);
+
+  var titleSize = title && title.length > 20 ? 4 : 3;
+  var video = {
+    elementId: 'compact-header-video',
+    desktop: videoUrlDesktop,
+    mobile: videoUrlMobile
+  };
+  var poster = {
+    desktop: bgUrlDesktop,
+    mobile: bgUrlDevice,
+    alt: bgImageAltText
+  };
+  return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? /*#__PURE__*/React__default.createElement(SponsorWrapper, {
+    "data-testid": "compact-sponsor"
+  }, customSponsorImage ? /*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
+    "data-testid": "compact-custom-sponsor"
+  }, customSponsorImage, {
+    isCustomImage: true
+  })) : /*#__PURE__*/React__default.createElement(Sponsorship, null)) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
+    video: video,
+    poster: poster
+  })), /*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
     className: "page-heading-compact__background",
     invert: invert
   }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
@@ -7764,6 +7872,8 @@ function Select(_ref3) {
       onSelect = _ref3.onSelect,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      _ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
+      resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
       _ref3$width = _ref3.width,
       width = _ref3$width === void 0 ? 'default' : _ref3$width,
       _ref3$height = _ref3.height,
@@ -7820,13 +7930,15 @@ function Select(_ref3) {
     };
   }, []);
   React.useEffect(function () {
+    if (!resetWhenOptionsUpdate) return;
+
     if (options.length === 0) {
       setSelectedValue(null);
       return;
     }
 
     setSelectedValue(options[0]);
-  }, [options]);
+  }, [options, resetWhenOptionsUpdate]);
   return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",
@@ -7986,6 +8098,7 @@ var Quote = function Quote(_ref) {
 var UpsellSection = function UpsellSection(_ref) {
   var title = _ref.title,
       richText = _ref.richText,
+      link = _ref.link,
       upsellCards = _ref.upsellCards,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? exports.ThemeType.Core : _ref$theme;
@@ -8011,7 +8124,7 @@ var UpsellSection = function UpsellSection(_ref) {
     columnSpanDesktop: 14,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  })), /*#__PURE__*/React__default.createElement(UpsellCards, {
+  }), link && /*#__PURE__*/React__default.createElement(TextLink, null, link.text)), /*#__PURE__*/React__default.createElement(UpsellCards, {
     upsellCards: themedUpsellCards
   })))));
 };