@royaloperahouse/chord 1.13.2 → 1.14.0-a-chord-development

package/dist/chord.cjs.development.js

@@ -8,6 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var moment = _interopDefault(require('moment'));
 var swiperReact_js = require('swiper/react/swiper-react.js');
 require('swiper/swiper-bundle.css');
 var reactRouterDom = require('react-router-dom');
@@ -96,11 +97,7 @@ var commonColors = {
   medium: '#D79233',
   good: '#4EAA33',
   progress: '#1866DC',
-  navigation: '#C8102E',
-  lemonChiffon: '#fffbbe',
-  lapisLazuli: '#0060a0',
-  blue: '#1866DC',
-  red: '#C8102E'
+  navigation: '#C8102E'
 };
 var fontFamilies = {
   adobeGaramondPro: 'adobe-garamond-pro',
@@ -573,11 +570,44 @@ var cinema = /*#__PURE__*/_extends({}, common, {
     primaryButtonReverse: colors.cinema
   })
 });
+var schools = /*#__PURE__*/_extends({}, common, {
+  colors: /*#__PURE__*/_extends({}, commonColors, colors, {
+    primary: colors.core,
+    primaryButton: colors.core,
+    secondaryButton: commonColors.white,
+    tertiaryButton: 'transparent',
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white
+  }),
+  fonts: /*#__PURE__*/_extends({}, common.fonts, {
+    desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    }),
+    mobile: /*#__PURE__*/_extends({}, common.fonts.mobile, {
+      transforms: {
+        headers: 'none',
+        altHeaders: 'none',
+        overline: 'none',
+        subtitles: 'none',
+        body: 'none',
+        navigation: 'uppercase'
+      }
+    })
+  })
+});
 var themes = {
   core: core,
   stream: stream,
   cinema: cinema,
-  fontFamilies: fontFamilies
+  fontFamilies: fontFamilies,
+  schools: schools
 };
 
 var _templateObject$2;
@@ -2101,6 +2131,7 @@ var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$
   ThemeType["Core"] = "core";
   ThemeType["Stream"] = "stream";
   ThemeType["Cinema"] = "cinema";
+  ThemeType["Schools"] = "schools";
 })(exports.ThemeType || (exports.ThemeType = {}));
 
 (function (CarouselType) {
@@ -2898,125 +2929,24 @@ var TabLink = function TabLink(_ref) {
   })) : null, children);
 };
 
-var _templateObject$i, _templateObject2$7, _templateObject3$2, _templateObject4$1, _templateObject5;
-var TextFieldContainer = /*#__PURE__*/styled__default.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var textStyles = /*#__PURE__*/styled.css(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.fonts.desktop.weights.body[1];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fonts.desktop.sizes.altHeaders[6];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.spacing[7];
-});
-var Input = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: 196px;\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.darkgrey;
-}, function (_ref5) {
-  var error = _ref5.error,
-      theme = _ref5.theme;
-  if (!error) return;
-  return "\n      border: 1px solid " + theme.colors.error + ";\n    ";
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.lightgrey;
-}, function (_ref7) {
-  var darkMode = _ref7.darkMode,
-      theme = _ref7.theme;
-  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
-  return "3px solid " + theme.colors.lapisLazuli;
-});
-var TextLabel = /*#__PURE__*/styled__default.p(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref8) {
-  var darkMode = _ref8.darkMode,
-      theme = _ref8.theme;
-  return darkMode ? theme.colors.white : theme.colors.black;
-});
-var ErrorLabel = /*#__PURE__*/styled__default.p(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
-  var darkMode = _ref9.darkMode,
-      theme = _ref9.theme;
-  return darkMode ? theme.colors.white : theme.colors.error;
-});
-
-var _excluded$5 = ["label", "error", "darkMode"];
-/**
- * A text field component, that wraps around the native `<input />` element
- * and adds some extra information around it (i.e. a text label and an error label).
- *
- * # Labels
- * You can use this component just like you would use a regular `<input />` element,
- * just with the extra `label` prop, to set the label of the content. For example:
- * ```tsx
- * <TextField label="This is a label" />
- * ```
- *
- * **IMPORTANT!** If you want to render a `<TextField />` without a label, you will
- * have to make the label an empty string:
- * ```tsx
- * <TextField label='' />
- * ```
- *
- * This is not recommended, as it makes the input non-accessible - all `<TextField />`s should
- * have a label.
- *
- * # Light / Dark mode
- * The component can also adapt its styles for light / dark mode. If you want this component
- * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
- * ```tsx
- * <div>
- *     <WhiteBackgroundContainer>
- *         <TextField label="..." />
- *     </WhiteBackgroundContainer>
- *
- *     <BlackBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlackBackgroundContainer>
- *     <BlueBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlueBackgroundContainer>
- * </div>
- * ```
- */
-
-var TextField = function TextField(_ref) {
-  var label = _ref.label,
-      error = _ref.error,
-      _ref$darkMode = _ref.darkMode,
-      darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
-      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
-  return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel, {
-    darkMode: darkMode,
-    "data-testid": "text-field-text-label"
-  }, label), /*#__PURE__*/React__default.createElement(Input, Object.assign({
-    type: "text",
-    error: error,
-    darkMode: darkMode,
-    "data-testid": "text-field-input"
-  }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel, {
-    darkMode: darkMode,
-    "data-testid": "text-field-error-label"
-  }, error) : null);
-};
-
-var _templateObject$j, _templateObject2$8;
-var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
+var _templateObject$i, _templateObject2$7;
+var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
 }, function (_ref2) {
   var color = _ref2.color;
   return color;
 });
-var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
+var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
-var _excluded$6 = ["children", "iconName", "iconDirection", "color"];
+var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
 
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
       color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
@@ -3031,8 +2961,8 @@ var TextLink = function TextLink(_ref) {
   })) : null);
 };
 
-var _templateObject$k;
-var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-", ");\n  font-feature-settings: var(--font-feature-settings-", ");\n  font-size: var(--font-size-", "-", ");\n  font-weight: var(--font-weight-", "-", ");\n  letter-spacing: var(--letter-spacing-", "-", ");\n  line-height: var(--line-height-", "-", ");\n  text-transform: var(--text-transform-", ");\n  word-break: var(--word-break-", ");\n  margin: var(--margin-", "-", ");\n"])), function (_ref) {
+var _templateObject$j;
+var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-", ");\n  font-feature-settings: var(--font-feature-settings-", ");\n  font-size: var(--font-size-", "-", ");\n  font-weight: var(--font-weight-", "-", ");\n  letter-spacing: var(--letter-spacing-", "-", ");\n  line-height: var(--line-height-", "-", ");\n  text-transform: var(--text-transform-", ");\n  word-break: var(--word-break-", ");\n  margin: var(--margin-", "-", ");\n"])), function (_ref) {
   var typography = _ref.typography;
   return typography;
 }, function (_ref2) {
@@ -3145,16 +3075,16 @@ var Subtitle = function Subtitle(_ref6) {
   }, children);
 };
 
-var _templateObject$l, _templateObject2$9, _templateObject3$3;
-var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  @media ", " {\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$k, _templateObject2$8, _templateObject3$2;
+var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n\n  @media ", " {\n    &:focus {\n      outline: 0;\n    }\n  }\n"])), function (_ref) {
   var dark = _ref.dark;
   return dark ? 'white' : 'black';
 }, devices.mobileAndTablet);
-var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 1px;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  padding: 3px;\n  box-sizing: border-box;\n  border: 1px solid var(--base-color-", ");\n\n  svg {\n    display: none;\n  }\n\n  @media ", " {\n    top: 0;\n  }\n"])), function (_ref2) {
+var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 1px;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  padding: 3px;\n  box-sizing: border-box;\n  border: 1px solid var(--base-color-", ");\n\n  svg {\n    display: none;\n  }\n\n  @media ", " {\n    top: 0;\n  }\n"])), function (_ref2) {
   var dark = _ref2.dark;
   return dark ? 'white' : 'black';
 }, devices.mobile);
-var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
+var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
   var dark = _ref3.dark;
   return dark ? 'white' : 'black';
 }, function (_ref4) {
@@ -3214,6 +3144,104 @@ var Tickbox = function Tickbox(_ref) {
   })));
 };
 
+var _templateObject$l, _templateObject2$9, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n"])), function (_ref) {
+  var color = _ref.color;
+  return color;
+});
+var Line = /*#__PURE__*/styled__default.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: var(--base-color-", ");\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 20px;\n  }\n"])), function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, devices.mobileAndTablet);
+var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 16px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n"])), devices.mobileAndTablet);
+var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-header-4);\n  font-family: var(--font-family-header);\n  font-feature-settings: var(--font-feature-settings-header);\n  font-weight: var(--font-weight-header-4);\n  letter-spacing: var(--letter-spacing-header-4);\n  line-height: var(--line-height-header-4);\n  text-transform: var(--text-transform-header);\n  display: flex;\n\n  @media ", " {\n    font-size: var(--font-size-header-5);\n  }\n"])), devices.tablet);
+var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  margin-top: 4px;\n"])));
+var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+
+var Timer = function Timer(_ref) {
+  var endDate = _ref.endDate,
+      title = _ref.title,
+      endDateHandler = _ref.endDateHandler,
+      _ref$bottomLine = _ref.bottomLine,
+      bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? exports.Colors.Black : _ref$color;
+
+  var _React$useState = React__default.useState('00'),
+      seconds = _React$useState[0],
+      setSeconds = _React$useState[1];
+
+  var _React$useState2 = React__default.useState('00'),
+      minutes = _React$useState2[0],
+      setMinutes = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState('00'),
+      hours = _React$useState3[0],
+      setHours = _React$useState3[1];
+
+  var _React$useState4 = React__default.useState('00'),
+      days = _React$useState4[0],
+      setDays = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(false),
+      isEndDateReached = _React$useState5[0],
+      setIsEndDateReached = _React$useState5[1];
+
+  var renderTimerValue = function renderTimerValue(value, title, separator) {
+    if (separator === void 0) {
+      separator = true;
+    }
+
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, null, value), /*#__PURE__*/React__default.createElement(TimerLabel, null, title)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
+  };
+
+  React__default.useEffect(function () {
+    if (isEndDateReached) return; // We use this to set values for the timer immediately
+
+    var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
+      fn();
+      return setInterval(fn, delay);
+    };
+
+    var updateValues = function updateValues() {
+      var futureDate = moment(endDate);
+      var nowDate = moment();
+      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
+      var difference = moment(differenceInMilliseconds).utc();
+
+      if (differenceInMilliseconds < 0) {
+        setIsEndDateReached(true);
+        if (endDateHandler) endDateHandler();
+      } else {
+        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
+        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
+        var hoursDiff = difference.format('HH');
+        var minutesDiff = difference.format('mm');
+        var secondsDiff = difference.format('ss');
+        setDays(daysDiff);
+        setHours(hoursDiff);
+        setMinutes(minutesDiff);
+        setSeconds(secondsDiff);
+      }
+    };
+
+    var interval = setIntervalAndExecute(updateValues, 1000);
+    return function () {
+      clearInterval(interval);
+    };
+  });
+  return /*#__PURE__*/React__default.createElement(TimerWrapper, {
+    color: color
+  }, title && /*#__PURE__*/React__default.createElement(TitleWrapper, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 5
+  }, title)), /*#__PURE__*/React__default.createElement(ValuesWrapper, null, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
+    "data-testid": "timer-bottom-line",
+    color: color
+  }));
+};
+
 var _templateObject$m;
 var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\n    color: var(--base-color-black);\n    display: inline-block;\n    margin: 0;\n  }\n\n  & li:before {\n    content: '\u2014';\n    margin: 0 0.5em;\n  }\n\n  & li:first-child:before {\n    display: none;\n  }\n"])));
 
@@ -3300,7 +3328,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
   }, renderNextIcon()));
 };
 
-var _templateObject$o, _templateObject2$b, _templateObject3$5, _templateObject4$2, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject$o, _templateObject2$b, _templateObject3$5, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
 var NavigationWrapper = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    ", "\n  }\n"])), devices.mobileAndTablet, function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--base-color-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
@@ -3309,12 +3337,12 @@ var FullScreenContainer = /*#__PURE__*/styled__default.div(_templateObject2$b ||
 var NavigationGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
 var SearchBackground = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
 var GridItemSearch = /*#__PURE__*/styled__default(GridItem)(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%;\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n  height: 100px;\n\n  @media ", " {\n    height: 100%;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
-var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref2) {
+var NavigationGridMobile = /*#__PURE__*/styled__default(Grid)(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacing[12];
 });
-var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 140px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 66px;\n  }\n\n  @media ", " {\n    height: 80px;\n\n    &&& .logoImg {\n      width: 100%;\n      height: 64px;\n    }\n  }\n"])), devices.mobile);
-var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 80px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
+var LogoContainer = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 140px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 66px;\n  }\n\n  @media ", " {\n    height: 80px;\n\n    &&& .logoImg {\n      width: 100%;\n      height: 64px;\n    }\n  }\n"])), devices.mobile);
+var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 80px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
 var NavContainer = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 40px;\n  margin-top: auto;\n\n  @media ", " {\n    background-color: var(--base-color-white);\n    height: auto;\n    margin-top: 0px;\n  }\n"])), devices.mobileAndTablet);
 var NavContainerGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 3 / span 14;\n  }\n"])), devices.desktop);
 var NavTopContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 26px;\n  right: 50px;\n  top: 20px;\n  position: absolute;\n\n  @media ", " {\n    margin-top: 1px;\n    position: inherit;\n  }\n"])), devices.mobileAndTablet);
@@ -3848,13 +3876,13 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))));
 };
 
-var _templateObject$u, _templateObject2$f, _templateObject3$8, _templateObject5$2, _templateObject6$1, _templateObject7$1;
+var _templateObject$u, _templateObject2$f, _templateObject3$8, _templateObject5$2, _templateObject6$2, _templateObject7$2;
 var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: var(--base-color-transparent);\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
 var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
-var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
@@ -4079,13 +4107,13 @@ var Navigation = function Navigation(_ref) {
   })))));
 };
 
-var _templateObject$v, _templateObject2$g, _templateObject3$9, _templateObject4$5, _templateObject5$3, _templateObject6$2;
+var _templateObject$v, _templateObject2$g, _templateObject3$9, _templateObject4$5, _templateObject5$3, _templateObject6$3;
 var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
 var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
 var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row1;\n  justify-self: center;\n\n  @media ", " {\n    & {\n      justify-self: start;\n      grid-area: row2;\n    }\n  }\n"])), devices.mobile);
 var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
 var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row3;\n  justify-self: center;\n\n  @media ", " {\n    justify-self: start;\n  }\n"])), devices.mobile);
-var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row4;\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-3);\n  line-height: var(--line-height-body-3);\n  text-align: center;\n  margin: 0;\n  padding: 0;\n\n  @media ", " {\n    text-align: left;\n  }\n"])), devices.mobile);
+var AdditionalInfo = /*#__PURE__*/styled__default.p(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row4;\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-3);\n  line-height: var(--line-height-body-3);\n  text-align: center;\n  margin: 0;\n  padding: 0;\n\n  @media ", " {\n    text-align: left;\n  }\n"])), devices.mobile);
 
 var _templateObject$w, _templateObject2$h, _templateObject3$a;
 var PolicyLinksList = /*#__PURE__*/styled__default.ul(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
@@ -4106,15 +4134,15 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$x, _templateObject2$i, _templateObject3$b, _templateObject4$6, _templateObject5$4, _templateObject6$3, _templateObject7$2, _templateObject8$1;
+var _templateObject$x, _templateObject2$i, _templateObject3$b, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$3, _templateObject8$2;
 var ContactNewsletterWrapper = /*#__PURE__*/styled__default.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var ContactNewsletterSeparator = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
 var SignUpWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  padding-top: 9px;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
 var SignUpText = /*#__PURE__*/styled__default.p(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-2);\n  line-height: var(--line-height-body-2);\n  width: 60%;\n  margin: 0 auto;\n  height: 60px;\n  text-align: center;\n\n  @media ", " {\n    & {\n      width: 100%;\n      height: auto;\n      text-align: left;\n      font-size: 14px;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var ContactWrapper = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 3;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 9px;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
-var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n  height: 60px;\n\n  @media ", " {\n    & {\n      height: auto;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
-var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n"])));
-var TextLinkWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &&& {\n    font-family: var(--font-family-overline);\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    line-height: var(--line-height-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    text-transform: var(--text-transform-overline);\n  }\n"])));
+var MediaLinksWrapper = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n  height: 60px;\n\n  @media ", " {\n    & {\n      height: auto;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
+var MediaIconWrapper = /*#__PURE__*/styled__default.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n"])));
+var TextLinkWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &&& {\n    font-family: var(--font-family-overline);\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    line-height: var(--line-height-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    text-transform: var(--text-transform-overline);\n  }\n"])));
 
 var ContactNewsletter = function ContactNewsletter(_ref) {
   var signUpText = _ref.signUpText,
@@ -4139,7 +4167,7 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
   }, contact.title))));
 };
 
-var _excluded$7 = ["dataRoh"];
+var _excluded$6 = ["dataRoh"];
 
 var Footer = function Footer(_ref) {
   var data = _ref.data;
@@ -4150,7 +4178,7 @@ var Footer = function Footer(_ref) {
 
   var _data$artsLogo = data.artsLogo,
       artsDataRoh = _data$artsLogo.dataRoh,
-      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$7);
+      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$6);
 
   var additionalInfo = data.additionalInfo;
   return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -4180,7 +4208,7 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
-var _templateObject$y, _templateObject2$j, _templateObject3$c, _templateObject4$7, _templateObject5$5, _templateObject6$4;
+var _templateObject$y, _templateObject2$j, _templateObject3$c, _templateObject4$7, _templateObject5$5, _templateObject6$5;
 var LIST_ITEM_GAP = 32;
 var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
@@ -4203,9 +4231,9 @@ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_t
   var fullWidth = _ref5.fullWidth;
   return fullWidth ? '74px' : '46px';
 });
-var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
+var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 
-var _excluded$8 = ["id", "text"];
+var _excluded$7 = ["id", "text"];
 
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
@@ -4421,7 +4449,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
         text = _ref4.text,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded$8);
+        rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
@@ -4482,7 +4510,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$z || (_te
   }
 });
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
-var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__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 TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$d || (_templateObject3$d = /*#__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.mobile);
 var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 2 / span 10;\n    }\n  }\n"])), devices.tablet);
 
@@ -4560,7 +4588,7 @@ var Carousel = function Carousel(_ref) {
     columnSpanDesktop: 10,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(TitleWrapper, {
+  }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
     "data-testid": "carousel-title-wrapper"
   }, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
@@ -4601,7 +4629,7 @@ var Theme = function Theme(_ref) {
   }, children);
 };
 
-var _templateObject$A, _templateObject2$l, _templateObject3$e, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12;
+var _templateObject$A, _templateObject2$l, _templateObject3$e, _templateObject4$9, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12, _templateObject13;
 var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$A || (_templateObject$A = /*#__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$l || (_templateObject2$l = /*#__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 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: 40px;\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;
@@ -4640,7 +4668,7 @@ var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_
   var theme = _ref11.theme;
   return theme.fonts.mobile.lineHeights.subtitles[2];
 });
-var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n  h6 {\n    padding: 0;\n    margin: 0 0 4px 0;\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      > div {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n      h6 {\n        margin: 0 0 8px 0;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref12) {
+var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n  user-select: text;\n  h6 {\n    padding: 0;\n    margin: 0 0 4px 0;\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n\n      h6 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n\n      > div {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n      h6 {\n        margin: 0 0 8px 0;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref12) {
   var theme = _ref12.theme;
   return theme.fonts.mobile.sizes.subtitles[2];
 }, function (_ref13) {
@@ -4665,12 +4693,13 @@ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_t
   var theme = _ref19.theme;
   return theme.fonts.mobile.lineHeights.body[1];
 }, devices.mobile);
-var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  flex-direction: row;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n    display: flex;\n    flex-direction: column;\n  }\n"])), devices.tablet, devices.mobile);
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__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: 2 / 7 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\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 InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  flex-direction: row;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n    display: flex;\n    flex-direction: column;\n  }\n"])), devices.tablet, devices.mobile);
+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: 2 / 7 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\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$1 || (_templateObject9$1 = /*#__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.mobileAndTablet);
 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 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\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.tablet, devices.mobile);
 var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 16px;\n\n  @media ", " {\n    & {\n      display: flex;\n      flex-direction: column;\n      margin-right: 0;\n      margin-bottom: 10px;\n    }\n  }\n"])), devices.mobile);
+var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 24px;\n  }\n"])), devices.mobileAndTablet);
 
 var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
 var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
@@ -4727,7 +4756,7 @@ var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots)
   return addDots ? truncatedString + "..." : truncatedString;
 };
 
-var _excluded$9 = ["text"],
+var _excluded$8 = ["text"],
     _excluded2 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
@@ -4735,7 +4764,8 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
 
   var logo = _ref.logo,
       carouselTitle = _ref.carouselTitle,
-      slides = _ref.slides;
+      slides = _ref.slides,
+      timerParams = _ref.timerParams;
   var images = React.useMemo(function () {
     return slides.map(function (_ref2) {
       var image = _ref2.image;
@@ -4773,7 +4803,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var _ref3 = firstButton || {},
       _ref3$text = _ref3.text,
       firstButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref3, _excluded$9);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref3, _excluded$8);
 
   var secondButton = links == null ? void 0 : links[1];
 
@@ -4818,7 +4848,13 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     onClickPrev: onPrev
   })), /*#__PURE__*/React__default.createElement(InfoWrapper, {
     "data-testid": "info-wrapper"
-  }, logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
+  }, timerParams && /*#__PURE__*/React__default.createElement(TimerWrapper$1, {
+    "data-testid": "hightlight-carousel-timer-wrapper"
+  }, /*#__PURE__*/React__default.createElement(Timer, {
+    color: exports.Colors.White,
+    endDate: timerParams.endDate,
+    title: timerParams.title
+  })), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
     level: 3
   }, infoTitle), /*#__PURE__*/React__default.createElement(Subtitle, {
     level: 2,
@@ -4853,12 +4889,12 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }))));
 };
 
-var _excluded$a = ["logo", "slides"];
+var _excluded$9 = ["logo", "slides"];
 
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
       slides = _ref.slides,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   var cinemaLink = {
     color: exports.Colors.Cinema,
@@ -4883,11 +4919,11 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$b = ["slides"];
+var _excluded$a = ["slides"];
 
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   var newSlides = slides.map(function (slide) {
     var _slide$links$1$color, _slide$links$;
@@ -4907,12 +4943,12 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$c = ["logo", "slides"];
+var _excluded$b = ["logo", "slides"];
 
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
       slides = _ref.slides,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   var newSlides = slides.map(function (slide) {
     var _slide$links$1$color, _slide$links$;
@@ -4933,7 +4969,7 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject4$a, _templateObject6$6, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10$2;
+var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject4$a, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
 var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
@@ -4944,9 +4980,9 @@ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$f || (_
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
 var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
-var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
-var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
-var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
+var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
+var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
+var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.colors.primaryButtonReverseBg;
 }, function (_ref4) {
@@ -4962,7 +4998,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
 var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$d = ["text"],
+var _excluded$c = ["text"],
     _excluded2$1 = ["text"];
 
 var TitleWithCTA = function TitleWithCTA(_ref) {
@@ -4974,7 +5010,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
 
   var _ref2 = (links == null ? void 0 : links[0]) || {},
       primaryButtonText = _ref2.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var _ref3 = (links == null ? void 0 : links[1]) || {},
       secondaryButtonText = _ref3.text,
@@ -5086,6 +5122,7 @@ var Accordion = function Accordion(_ref) {
       _ref$showLine = _ref.showLine,
       showLine = _ref$showLine === void 0 ? true : _ref$showLine,
       children = _ref.children,
+      visibleStandfirst = _ref.visibleStandfirst,
       _ref$initOpen = _ref.initOpen,
       initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen;
 
@@ -5134,13 +5171,21 @@ var Accordion = function Accordion(_ref) {
     }
   };
 
+  var Standfirst = function Standfirst() {
+    if (visibleStandfirst) {
+      return /*#__PURE__*/React__default.createElement(ContentContainer, null, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, visibleStandfirst));
+    }
+
+    return null;
+  };
+
   return /*#__PURE__*/React__default.createElement(AccordionContainer, null, /*#__PURE__*/React__default.createElement(LineContainer, null), /*#__PURE__*/React__default.createElement(TitleContainer$1, {
     onClick: toggleAccordion,
     onKeyDown: keyDown,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement("a", null, title), /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement("h4", null, /*#__PURE__*/React__default.createElement("a", null, title)), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName
-  })), /*#__PURE__*/React__default.createElement(ContentContainer, {
+  })), /*#__PURE__*/React__default.createElement(Standfirst, null), /*#__PURE__*/React__default.createElement(ContentContainer, {
     "data-testid": "richcontainer",
     ref: content,
     style: {
@@ -5166,7 +5211,8 @@ var Accordions = function Accordions(_ref) {
     return /*#__PURE__*/React__default.createElement(Accordion, {
       key: accordion.title + "-" + index,
       title: accordion.title,
-      showLine: isLastAccordion(index)
+      showLine: isLastAccordion(index),
+      visibleStandfirst: accordion.visibleStandfirst
     }, accordion.children);
   }));
 };
@@ -5214,7 +5260,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$G, _templateObject2$q, _templateObject3$i, _templateObject4$c, _templateObject5$9, _templateObject6$7, _templateObject7$5, _templateObject8$4, _templateObject9$3;
+var _templateObject$G, _templateObject2$q, _templateObject3$i, _templateObject4$c, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$2;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -5222,9 +5268,10 @@ var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$G || (_temp
   var onlyShowButtonsOnHover = _ref.onlyShowButtonsOnHover;
   return !onlyShowButtonsOnHover ? "height: 100%;\n       display: flex;\n       flex-direction: column;\n       justify-content: space-between;  \n    " : '';
 });
-var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-", ");\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref2) {
-  var lineColor = _ref2.lineColor;
-  return lineColor;
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref2) {
+  var lineColor = _ref2.lineColor,
+      theme = _ref2.theme;
+  return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
 }, zIndexes.contentOverlay);
 var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
 var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref3) {
@@ -5235,24 +5282,30 @@ var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$c ||
   return fullWidth ? '0' : '20px';
 });
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__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.mobileAndTablet);
-var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__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.mobileAndTablet);
-var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__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 TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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.mobileAndTablet);
+var TextContainer = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$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(_templateObject8$5 || (_templateObject8$5 = /*#__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 LabelContainer = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: -32px;\n  left: 0;\n  height: 32px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref5) {
+  var bgColor = _ref5.bgColor,
+      theme = _ref5.theme;
+  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
+});
+var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
-var getButtonsOpacity = function getButtonsOpacity(_ref5) {
-  var onlyShowButtonsOnHover = _ref5.onlyShowButtonsOnHover;
+var getButtonsOpacity = function getButtonsOpacity(_ref6) {
+  var onlyShowButtonsOnHover = _ref6.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
 
-var getButtonsMinHeight = function getButtonsMinHeight(_ref6) {
-  var onlyShowButtonsOnHover = _ref6.onlyShowButtonsOnHover;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref7) {
+  var onlyShowButtonsOnHover = _ref7.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref7) {
-  var size = _ref7.size,
-      primaryButtonTextLength = _ref7.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref7.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref8) {
+  var size = _ref8.size,
+      primaryButtonTextLength = _ref8.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -5260,15 +5313,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
   }
 
   return '';
-}, devices.mobile, getButtonsMinHeight, function (_ref8) {
-  var fullWidth = _ref8.fullWidth;
-  return fullWidth ? '0' : '20px';
-}, function (_ref9) {
+}, devices.mobile, getButtonsMinHeight, function (_ref9) {
   var fullWidth = _ref9.fullWidth;
   return fullWidth ? '0' : '20px';
-}, devices.tablet, getButtonsMinHeight, function (_ref10) {
-  var primaryButtonTextLength = _ref10.primaryButtonTextLength,
-      tertiaryButtonTextLength = _ref10.tertiaryButtonTextLength;
+}, function (_ref10) {
+  var fullWidth = _ref10.fullWidth;
+  return fullWidth ? '0' : '20px';
+}, devices.tablet, getButtonsMinHeight, function (_ref11) {
+  var primaryButtonTextLength = _ref11.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
 
   if (isLinksLayoutColumnTablet) {
@@ -5279,29 +5332,47 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject9$3 ||
 });
 
 var _templateObject$H, _templateObject2$r, _templateObject3$j;
-var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
-var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-progress);\n  flex: ", ";\n"])), function (_ref) {
-  var progress = _ref.progress;
+var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
+  var height = _ref.height;
+  return height ? height + "px" : '6px';
+});
+var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n"])), function (_ref2) {
+  var color = _ref2.color;
+  return color ? "var(--base-color-" + color + ")" : 'var(--base-color-progress)';
+}, function (_ref3) {
+  var progress = _ref3.progress;
   return progress;
 });
-var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref2) {
-  var progress = _ref2.progress;
+var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref4) {
+  var color = _ref4.color;
+  return color ? "var(--base-color-" + color + ")" : 'var(--base-color-white)';
+}, function (_ref5) {
+  var progress = _ref5.progress;
   return progress;
 });
 
 var Progress = function Progress(_ref) {
   var _ref$progress = _ref.progress,
-      progress = _ref$progress === void 0 ? 0 : _ref$progress;
-  return /*#__PURE__*/React__default.createElement(ProgressView, null, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
+      progress = _ref$progress === void 0 ? 0 : _ref$progress,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 6 : _ref$height,
+      elapsedLineColor = _ref.elapsedLineColor,
+      pendingLineColor = _ref.pendingLineColor;
+  return /*#__PURE__*/React__default.createElement(ProgressView, {
+    height: height,
+    "data-testid": "progress-container"
+  }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
+    color: elapsedLineColor,
     progress: progress,
     "data-testid": "elapsedprogress"
   }), /*#__PURE__*/React__default.createElement(PendingProgressView, {
+    color: pendingLineColor,
     progress: 100 - progress,
     "data-testid": "pendingprogress"
   }));
 };
 
-var _excluded$e = ["text"],
+var _excluded$d = ["text"],
     _excluded2$2 = ["text"];
 
 var _buttonTypeToButton;
@@ -5310,6 +5381,8 @@ var LENGTH_SMALL_TEXT$1 = 19;
 var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = Button$1, _buttonTypeToButton);
 
 var Card = function Card(_ref) {
+  var _labelParams$color;
+
   var _ref$progress = _ref.progress,
       progress = _ref$progress === void 0 ? 0 : _ref$progress,
       _ref$title = _ref.title,
@@ -5331,8 +5404,8 @@ var Card = function Card(_ref) {
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
       _ref$onlyShowButtonsO = _ref.onlyShowButtonsOnHover,
       onlyShowButtonsOnHover = _ref$onlyShowButtonsO === void 0 ? true : _ref$onlyShowButtonsO,
-      _ref$hoverLineColor = _ref.hoverLineColor,
-      hoverLineColor = _ref$hoverLineColor === void 0 ? exports.Colors.Core : _ref$hoverLineColor;
+      hoverLineColor = _ref.hoverLineColor,
+      labelParams = _ref.labelParams;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -5350,7 +5423,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$1) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
@@ -5385,7 +5458,15 @@ var Card = function Card(_ref) {
     },
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     "data-testid": "cardcontainer"
-  }, ' ', /*#__PURE__*/React__default.createElement("a", {
+  }, labelParams && /*#__PURE__*/React__default.createElement(LabelContainer, {
+    bgColor: labelParams.bgColor
+  }, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 2
+  }, labelParams.text), labelParams.iconName && /*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: labelParams.iconName,
+    direction: labelParams.iconDirection,
+    color: (_labelParams$color = labelParams.color) != null ? _labelParams$color : exports.Colors.White
+  }))), ' ', /*#__PURE__*/React__default.createElement("a", {
     href: firstButton == null ? void 0 : firstButton.href,
     target: firstButton == null ? void 0 : firstButton.target,
     className: "targetLink",
@@ -5401,7 +5482,8 @@ var Card = function Card(_ref) {
     src: image,
     alt: imageAltText
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
-    progress: progress
+    progress: progress,
+    height: 10
   })), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
     fullWidth: fullWidth
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
@@ -5463,7 +5545,8 @@ var Cards = function Cards(_ref) {
       withContinueWatching: card.withContinueWatching,
       onlyShowButtonsOnHover: card.onlyShowButtonsOnHover,
       hoverLineColor: card.hoverLineColor,
-      fullWidth: card.fullWidth
+      fullWidth: card.fullWidth,
+      labelParams: card.labelParams
     }));
   }));
 };
@@ -5808,7 +5891,7 @@ var Information = function Information(_ref) {
   }))));
 };
 
-var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$h, _templateObject5$d, _templateObject6$8, _templateObject7$6, _templateObject8$5;
+var _templateObject$N, _templateObject2$x, _templateObject3$o, _templateObject4$h, _templateObject5$d, _templateObject6$9, _templateObject7$7, _templateObject8$6;
 var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
@@ -5817,7 +5900,7 @@ var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$N || (
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
 var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
+var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
@@ -5826,11 +5909,11 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$h || (_t
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
 var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__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$6 || (_templateObject7$6 = /*#__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 PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__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$7 || (_templateObject7$7 = /*#__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 PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
 
-var _excluded$f = ["text"];
+var _excluded$e = ["text"];
 
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
@@ -5842,7 +5925,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title && title.substring(0, 40);
@@ -5850,7 +5933,7 @@ var PageHeading = function PageHeading(_ref) {
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
     "data-testid": "page-heading-wrapper",
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
     "data-testid": "page-heading-title",
     isPageHeadingWithoutTitle: isTitleUnAvailable
   }, children ? /*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -5870,11 +5953,11 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
 };
 
-var _excluded$g = ["link"];
+var _excluded$f = ["link"];
 
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   var coreLink = link && _extends({}, link, {
     color: exports.Colors.White,
@@ -5888,11 +5971,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$h = ["link"];
+var _excluded$g = ["link"];
 
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var cinemaLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -5906,7 +5989,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$O, _templateObject2$y, _templateObject3$p, _templateObject4$i, _templateObject5$e, _templateObject6$9, _templateObject7$7;
+var _templateObject$O, _templateObject2$y, _templateObject3$p, _templateObject4$i, _templateObject5$e, _templateObject6$a, _templateObject7$8;
 var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$O || (_templateObject$O = /*#__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 HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: text;\n  h3 {\n    padding: 0;\n    margin: 0 0 8px 0;\n  }\n\n  @media ", " {\n    & {\n      h3 {\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: ", ";\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
@@ -5945,8 +6028,8 @@ var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject
   var hasMultipleImages = _ref11.hasMultipleImages;
   return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
 }, devices.tablet, devices.mobile);
-var MobileRotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div {\n    padding-top: 8px;\n  }\n\n  @media ", ", ", " {\n    display: none;\n  }\n\n  @media ", " {\n    .carousel-icon-wrapper-left,\n    .carousel-icon-wrapper-right {\n      background-color: transparent;\n\n      svg path {\n        fill: var(--base-color-lightgrey);\n      }\n    }\n\n    .carousel-icon-wrapper-left {\n      margin-right: 8px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 2;\n    height: 56px;\n\n    div {\n      padding-top: 6px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 13;\n    height: 80px;\n\n    div {\n      padding-top: 8px;\n    }\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobileAndTablet, devices.mobile, devices.tablet);
-var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__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.mobileAndTablet);
+var MobileRotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div {\n    padding-top: 8px;\n  }\n\n  @media ", ", ", " {\n    display: none;\n  }\n\n  @media ", " {\n    .carousel-icon-wrapper-left,\n    .carousel-icon-wrapper-right {\n      background-color: transparent;\n\n      svg path {\n        fill: var(--base-color-lightgrey);\n      }\n    }\n\n    .carousel-icon-wrapper-left {\n      margin-right: 8px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 2;\n    height: 56px;\n\n    div {\n      padding-top: 6px;\n    }\n  }\n\n  @media ", " {\n    grid-area: 1 / 13;\n    height: 80px;\n\n    div {\n      padding-top: 8px;\n    }\n  }\n"])), devices.desktop, devices.largeDesktop, devices.mobileAndTablet, devices.mobile, devices.tablet);
+var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__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.mobileAndTablet);
 
 var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   var title = _ref.title,
@@ -6031,17 +6114,17 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
   }))));
 };
 
-var _templateObject$P, _templateObject2$z, _templateObject3$q, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$8, _templateObject8$6;
+var _templateObject$P, _templateObject2$z, _templateObject3$q, _templateObject4$j, _templateObject5$f, _templateObject6$b, _templateObject7$9, _templateObject8$7;
 var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
 var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
 var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . logo logo logo logo logo logo . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. . text text text text text text text text text text . .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
 var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$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: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
-var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$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    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\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 TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__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: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__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    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\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$i = ["text"];
+var _excluded$h = ["text"];
 
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
@@ -6059,7 +6142,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -6107,11 +6190,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 var _templateObject$Q;
 var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
-var _excluded$j = ["link"];
+var _excluded$i = ["link"];
 
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   var streamLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -6202,13 +6285,13 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$S, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$g, _templateObject6$b;
+var _templateObject$S, _templateObject2$B, _templateObject3$s, _templateObject4$l, _templateObject5$g, _templateObject6$c;
 var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
 var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
 var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -6259,7 +6342,7 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$T, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$c, _templateObject7$9, _templateObject8$7, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject$T, _templateObject2$C, _templateObject3$t, _templateObject4$m, _templateObject5$h, _templateObject6$d, _templateObject7$a, _templateObject8$8, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -6272,28 +6355,29 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$T ||
 }, devices.tablet, function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
-}, devices.mobile, function (asCard) {
+}, devices.mobile, function (_ref3) {
+  var asCard = _ref3.asCard;
   return asCard ? "\n    grid-template-areas: " + GridTemplateAsCard + ";\n    @media " + devices.tablet + " {\n      grid-template-areas: " + GridTemplateAsCardTablet + ";\n    }\n  " : "";
 });
 var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$C || (_templateObject2$C = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.black;
-}, function (_ref4) {
+var PromoWithTagsText = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref4) {
   var theme = _ref4.theme;
-  return theme.colors.darkgrey;
+  return theme.colors.black;
 }, function (_ref5) {
   var theme = _ref5.theme;
+  return theme.colors.darkgrey;
+}, function (_ref6) {
+  var theme = _ref6.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref6) {
-  var hasTextLinks = _ref6.hasTextLinks;
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 24px;\n\n  ", ";\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref7) {
+  var hasTextLinks = _ref7.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
-}, function (_ref7) {
-  var _ref7$primaryButtonTe = _ref7.primaryButtonTextLength,
-      primaryButtonTextLength = _ref7$primaryButtonTe === void 0 ? 0 : _ref7$primaryButtonTe,
-      _ref7$tertiaryButtonT = _ref7.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref7$tertiaryButtonT === void 0 ? 0 : _ref7$tertiaryButtonT;
+}, function (_ref8) {
+  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
+      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
+      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
   var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
 
   if (isLinksLayoutColumn) {
@@ -6301,11 +6385,11 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$m ||
   }
 
   return '';
-}, devices.mobile, devices.tablet, function (_ref8) {
-  var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
-      primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
-      _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
-      tertiaryButtonTextLength = _ref8$tertiaryButtonT === void 0 ? 0 : _ref8$tertiaryButtonT;
+}, devices.mobile, devices.tablet, function (_ref9) {
+  var _ref9$primaryButtonTe = _ref9.primaryButtonTextLength,
+      primaryButtonTextLength = _ref9$primaryButtonTe === void 0 ? 0 : _ref9$primaryButtonTe,
+      _ref9$tertiaryButtonT = _ref9.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref9$tertiaryButtonT === void 0 ? 0 : _ref9$tertiaryButtonT;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
 
   if (isLinksLayoutColumnTablet) {
@@ -6314,37 +6398,40 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$m ||
 
   return '';
 });
-var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref9) {
-  var marginBottom = _ref9.marginBottom;
+var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: ", ";\n"])), function (_ref10) {
+  var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
 var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
-var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
-var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
+var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
+var PrimaryButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n"])));
 var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsTypeTags = /*#__PURE__*/styled__default(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsTextLink = /*#__PURE__*/styled__default(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var asCardOverrides = /*#__PURE__*/styled.css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
-var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref10) {
-  var imageToLeft = _ref10.imageToLeft;
+var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref11) {
+  var imageToLeft = _ref11.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      display: ", ";\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n\n  ", "\n"])), function (_ref11) {
-  var imageToLeft = _ref11.imageToLeft;
+var PromoWithTagsContentWrapper = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      display: ", ";\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n\n  ", "\n"])), function (_ref12) {
+  var imageToLeft = _ref12.imageToLeft;
   return imageToLeft ? 'right' : 'left';
-}, devices.mobile, function (_ref12) {
-  var hideSection = _ref12.hideSection;
+}, devices.mobile, function (_ref13) {
+  var hideSection = _ref13.hideSection;
   return hideSection ? 'none' : 'block';
-}, function (asCard) {
+}, function (_ref14) {
+  var asCard = _ref14.asCard;
   return asCard && asCardOverrides;
 });
 var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 16px;\n  }\n"])));
+var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var EndDateText = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
-var _excluded$k = ["text"],
+var _excluded$j = ["text"],
     _excluded2$3 = ["text"],
     _excluded3 = ["text"];
 var LENGTH_TEXT$1 = 28;
@@ -6372,12 +6459,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
       _ref$disableCTA = _ref.disableCTA,
       disableCTA = _ref$disableCTA === void 0 ? false : _ref$disableCTA,
       _ref$disabledCTACopy = _ref.disabledCTACopy,
-      disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy;
+      disabledCTACopy = _ref$disabledCTACopy === void 0 ? 'Sold Out' : _ref$disabledCTACopy,
+      timerParams = _ref.timerParams;
 
   var _useState = React.useState(false),
       showExtraContent = _useState[0],
       setShowExtraContent = _useState[1];
 
+  var _useState2 = React.useState(true),
+      isTimerActive = _useState2[0],
+      setIsTimerActive = _useState2[1];
+
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
   };
@@ -6414,7 +6506,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -6435,6 +6527,29 @@ var PromoWithTags = function PromoWithTags(_ref) {
       key: index
     }, /*#__PURE__*/React__default.createElement(PromoWithTagsTextLink, Object.assign({}, restTextLink), textLinkText));
   }) : null;
+
+  var renderTimerBlock = function renderTimerBlock() {
+    if (!timerParams) return null;
+
+    if (!isTimerActive && timerParams.endDateText) {
+      return /*#__PURE__*/React__default.createElement(EndDateText, {
+        "data-testid": "promo-with-tags-timer-end-date-text"
+      }, /*#__PURE__*/React__default.createElement(AltHeader, {
+        level: 5
+      }, timerParams.endDateText));
+    }
+
+    return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
+      "data-testid": "promo-with-tags-timer-wrapper"
+    }, /*#__PURE__*/React__default.createElement(Timer, {
+      endDateHandler: function endDateHandler() {
+        return setIsTimerActive(false);
+      },
+      endDate: timerParams.endDate,
+      title: 'Live stream starts in:'
+    }));
+  };
+
   return /*#__PURE__*/React__default.createElement(PromoWithTagsGrid, {
     id: anchorLink,
     "data-testid": "grid-wrapper",
@@ -6445,7 +6560,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
     imageToLeft: imageToLeft,
     hideSection: showExtraContent,
     asCard: asCard
-  }, /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
+  }, renderTimerBlock(), /*#__PURE__*/React__default.createElement(PromoWithTagsContainer, null, !!(aboveTitleTags != null && aboveTitleTags.length) && /*#__PURE__*/React__default.createElement(PromoWithTagsTagWrapper, {
     marginBottom: 16
   }, /*#__PURE__*/React__default.createElement(PromoWithTagsTypeTags, {
     list: aboveTitleTags
@@ -6508,7 +6623,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$U, _templateObject2$D, _templateObject3$u, _templateObject4$n, _templateObject5$i, _templateObject6$d, _templateObject7$a;
+var _templateObject$U, _templateObject2$D, _templateObject3$u, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$b;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
@@ -6528,7 +6643,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$i || (_templateObject5$i = /*#__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-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__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: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\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    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -6538,7 +6653,7 @@ var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$d ||
   var theme = _ref7.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
   var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
       primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
       _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
@@ -6564,7 +6679,7 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$a ||
   return '';
 });
 
-var _excluded$l = ["text"],
+var _excluded$k = ["text"],
     _excluded2$4 = ["text"];
 var LENGTH_TEXT$3 = 28;
 
@@ -6591,7 +6706,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -6736,7 +6851,7 @@ var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F ||
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
+var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
 
 var Quote = function Quote(_ref) {
   var text = _ref.text,
@@ -6755,7 +6870,7 @@ var Quote = function Quote(_ref) {
   }))), /*#__PURE__*/React__default.createElement(AttributionWrapper, {
     displayAttribution: attribution,
     "data-testid": "quote-attribution-block"
-  }, /*#__PURE__*/React__default.createElement(Line, null), /*#__PURE__*/React__default.createElement(Subtitle, {
+  }, /*#__PURE__*/React__default.createElement(Line$1, null), /*#__PURE__*/React__default.createElement(Subtitle, {
     level: 1
   }, attribution))));
 };
@@ -7727,11 +7842,11 @@ exports.Tab = Tab;
 exports.TabLink = TabLink;
 exports.Tabs = Tabs;
 exports.TertiaryButton = Button$1;
-exports.TextField = TextField;
 exports.TextLink = TextLink;
 exports.TextOnly = TextOnly;
 exports.ThemeProvider = Theme;
 exports.Tickbox = Tickbox;
+exports.Timer = Timer;
 exports.TitleWithCTA = TitleWithCTA;
 exports.TypeTags = TypeTags;
 exports.devices = devices;