@royaloperahouse/harmonic 0.1.7 → 0.1.8-b

package/dist/harmonic.cjs.development.js

@@ -364,17 +364,73 @@ function _taggedTemplateLiteralLoose(e, t) {
   return t || (t = e.slice(0)), e.raw = t, e;
 }
 
-var _excluded = ["children", "size", "color", "className"];
+// Utility function for creating className strings
+var createClassNames = function createClassNames(baseClass, options) {
+  var size = options.size,
+    _options$color = options.color,
+    color = _options$color === void 0 ? 'primary' : _options$color,
+    serif = options.serif,
+    em = options.em,
+    className = options.className;
+  return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
+};
+
+var _excluded = ["children", "size", "color", "className"],
+  _excluded2 = ["children", "size", "color", "className"];
+/* ~~~ Headers - size and hierarchy set separately ~~~ */
+var HarmonicHeader = function HarmonicHeader(_ref2) {
+  var children = _ref2.children,
+    size = _ref2.size,
+    em = _ref2.em,
+    _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+    serif = _ref2.serif,
+    Tag = _ref2.hierarchy,
+    className = _ref2.className;
+  var classNames = createClassNames('header', {
+    size: size,
+    color: color,
+    serif: serif,
+    em: em,
+    className: className
+  });
+  return /*#__PURE__*/React__default.createElement(Tag, {
+    className: classNames
+  }, children);
+};
+/* ~~~ Subtitle - (use case) ~~~ */
+var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
+  var children = _ref3.children,
+    size = _ref3.size,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    className = _ref3.className;
+  var classNames = createClassNames('subtitle', {
+    size: size,
+    color: color,
+    className: className
+  });
+  return /*#__PURE__*/React__default.createElement("p", {
+    className: classNames
+  }, children);
+};
 /* ~~~ Body Copy Text - (use case) ~~~ */
 var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
   var children = _ref4.children,
-    size = _ref4.size,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     _ref4$color = _ref4.color,
     color = _ref4$color === void 0 ? 'primary' : _ref4$color,
-    className = _ref4.className;
-  return /*#__PURE__*/React__default.createElement("p", {
-    className: "bodycopy " + size + " color-" + color + " " + className
-  }, children);
+    className = _ref4.className,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded);
+  var classNames = createClassNames('bodycopy', {
+    size: size,
+    color: color,
+    className: className
+  });
+  return /*#__PURE__*/React__default.createElement("p", Object.assign({
+    className: classNames
+  }, props), children);
 };
 /* ~~~ Overline - (use case) ~~~ */
 var HarmonicOverline = function HarmonicOverline(_ref5) {
@@ -383,9 +439,14 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
     _ref5$color = _ref5.color,
     color = _ref5$color === void 0 ? 'primary' : _ref5$color,
     className = _ref5.className,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
+  var classNames = createClassNames('overline', {
+    size: size,
+    color: color,
+    className: className
+  });
   return /*#__PURE__*/React__default.createElement("p", Object.assign({
-    className: "overline " + size + " color-" + color + " " + className
+    className: classNames
   }, props), children);
 };
 
@@ -673,11 +734,11 @@ var devices = {
 };
 
 var _templateObject$1, _templateObject2;
-var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--button-color);\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
+var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", "\n    var(--button-padding-x);\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  line-height: var(--button-line-height);\n  width: fit-content;\n  border-style: solid;\n  border-width: 1px;\n  cursor: pointer;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n\n  @media ", " {\n    & {\n      width: 100%;\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
 }, devices.mobile);
-var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n\n  span {\n    svg > path {\n      fill: var(--button-color);\n    }\n  }\n"])));
+var ButtonIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _templateObject$2;
 var Directions = {
@@ -2621,9 +2682,31 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
   }
   return COLORS.background;
 };
+var getHoveredColor = function getHoveredColor(_ref3) {
+  var disabled = _ref3.disabled,
+    hoveredColor = _ref3.hoveredColor;
+  if (disabled) {
+    return COLORS.darkGrey;
+  }
+  if (hoveredColor) {
+    return "var(--color-" + hoveredColor + ")";
+  }
+  return COLORS.hover;
+};
+var getPressedColor = function getPressedColor(_ref4) {
+  var disabled = _ref4.disabled,
+    pressedColor = _ref4.pressedColor;
+  if (disabled) {
+    return COLORS.darkGrey;
+  }
+  if (pressedColor) {
+    return "var(--color-" + pressedColor + ")";
+  }
+  return COLORS.pressed;
+};
 
 var _templateObject$3, _templateObject2$1;
-var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, COLORS.hover, COLORS.hover, COLORS.hover, COLORS.pressed, COLORS.pressed, COLORS.pressed, getTextColor);
+var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor, getTextColor);
 var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$3 = ["children", "disabled", "className"];
@@ -2676,13 +2759,9 @@ var getTextColor$1 = function getTextColor(_ref) {
   }
   return COLORS$1["default"];
 };
-var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? COLORS$1.disabled : COLORS$1.transparent;
-};
-var getBorderColor = function getBorderColor(_ref3) {
-  var disabled = _ref3.disabled,
-    borderColor = _ref3.borderColor;
+var getBorderColor = function getBorderColor(_ref2) {
+  var disabled = _ref2.disabled,
+    borderColor = _ref2.borderColor;
   if (disabled) {
     return COLORS$1.disabled;
   }
@@ -2691,9 +2770,34 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return COLORS$1.border;
 };
+var getHoveredColor$1 = function getHoveredColor(_ref3) {
+  var disabled = _ref3.disabled,
+    hoveredColor = _ref3.hoveredColor;
+  if (disabled) {
+    return COLORS$1.disabled;
+  }
+  if (hoveredColor) {
+    return "var(--color-" + hoveredColor + ")";
+  }
+  return COLORS$1.hover;
+};
+var getPressedColor$1 = function getPressedColor(_ref4) {
+  var disabled = _ref4.disabled,
+    pressedColor = _ref4.pressedColor;
+  if (disabled) {
+    return COLORS$1.disabled;
+  }
+  if (pressedColor) {
+    return "var(--color-" + pressedColor + ")";
+  }
+  return COLORS$1.pressed;
+};
 
 var _templateObject$4, _templateObject2$2;
-var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    color: ", ";\n    border-color: ", ";\n\n    && svg * {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n    border-color: ", ";\n\n    && svg * {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getTextColor$1, getBackgroundColor$1, getBorderColor, getPointerEvents, COLORS$1.hover, COLORS$1.hover, COLORS$1.hover, COLORS$1.pressed, COLORS$1.pressed, COLORS$1.pressed, getTextColor$1);
+var SecondaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  ", "\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$1, function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && COLORS$1.disabled;
+}, getBorderColor, getPointerEvents, getTextColor$1, getHoveredColor$1, getHoveredColor$1, getHoveredColor$1, getPressedColor$1, getPressedColor$1, getPressedColor$1);
 var AriaDescription$1 = /*#__PURE__*/styled__default.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$4 = ["children", "disabled", "className"];
@@ -2732,7 +2836,7 @@ var COLORS$2 = {
   hover: 'var(--button-tertiary-hover-color)',
   pressed: 'var(--button-tertiary-pressed-color)'
 };
-var getButtonColor = function getButtonColor(_ref) {
+var getTextColor$2 = function getTextColor(_ref) {
   var disabled = _ref.disabled,
     textColor = _ref.textColor;
   if (disabled) {
@@ -2745,7 +2849,7 @@ var getButtonColor = function getButtonColor(_ref) {
 };
 
 var _templateObject$5, _templateObject2$3;
-var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n  pointer-events: ", ";\n\n  :hover:not(:active) {\n    color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n\n    && svg path {\n      fill: ", ";\n    }\n  }\n\n  && span svg * {\n    fill: ", ";\n  }\n"])), getButtonColor, getPointerEvents, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed, getButtonColor);
+var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  height: var(--button-height);\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  background: none;\n  border-style: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
 var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _excluded$5 = ["children", "className"];
@@ -2952,6 +3056,8 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateO
   AspectRatio["4:3"] = "4 / 3";
   AspectRatio["8:3"] = "8 / 3";
   AspectRatio["16:9"] = "16 / 9";
+  AspectRatio["90:17"] = "90 / 17";
+  AspectRatio["75:32"] = "75 / 32";
 })(exports.AspectRatio || (exports.AspectRatio = {}));
 var AspectRatioLegacy;
 (function (AspectRatioLegacy) {
@@ -2960,6 +3066,8 @@ var AspectRatioLegacy;
   AspectRatioLegacy["4 / 3"] = "75";
   AspectRatioLegacy["8 / 3"] = "37.5";
   AspectRatioLegacy["16 / 9"] = "56.25";
+  AspectRatioLegacy["90 / 17"] = "18.88";
+  AspectRatioLegacy["75 / 32"] = "15";
 })(AspectRatioLegacy || (AspectRatioLegacy = {}));
 var AspectRatioWidth;
 (function (AspectRatioWidth) {
@@ -2968,6 +3076,8 @@ var AspectRatioWidth;
   AspectRatioWidth["4 / 3"] = "1.33";
   AspectRatioWidth["8 / 3"] = "2.67";
   AspectRatioWidth["16 / 9"] = "1.78";
+  AspectRatioWidth["90 / 17"] = "5.29";
+  AspectRatioWidth["75 / 32"] = "2.34";
 })(AspectRatioWidth || (AspectRatioWidth = {}));
 
 var _templateObject$a;
@@ -3008,36 +3118,39 @@ var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
 };
 
 var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
-var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
+var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: ", ";\n  box-shadow: ", ";\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])), function (_ref) {
   var height = _ref.height;
   return height ? height + "px" : '6px';
+}, function (_ref2) {
+  var shadow = _ref2.shadow;
+  return shadow ? '0px 1px 4px 0px rgba(0, 0, 0, 0.15)' : 'none';
 });
-var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  padding-left: ", ";\n\n  @media ", " {\n    padding-left: ", ";\n  }\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 ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  z-index: ", ";\n  padding-left: ", ";\n\n  @media ", " {\n    padding-left: ", ";\n  }\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return color ? "var(--color-base-" + color + ")" : 'var(--color-base-white)';
 }, function (_ref4) {
-  var isProgressWithSteps = _ref4.isProgressWithSteps;
-  return isProgressWithSteps ? '34px' : '0';
-}, devices.mobile, function (_ref5) {
+  var progress = _ref4.progress;
+  return progress;
+}, zIndexes.contentOverlay, function (_ref5) {
   var isProgressWithSteps = _ref5.isProgressWithSteps;
+  return isProgressWithSteps ? '34px' : '0';
+}, devices.mobile, function (_ref6) {
+  var isProgressWithSteps = _ref6.isProgressWithSteps;
   return isProgressWithSteps ? '24px' : '0';
 });
-var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref6) {
-  var color = _ref6.color;
-  return color ? "var(--base-color-" + color + ")" : 'var(--base-color-light-grey)';
-}, function (_ref7) {
-  var progress = _ref7.progress;
+var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  flex: ", ";\n  z-index: ", ";\n"])), function (_ref7) {
+  var color = _ref7.color;
+  return color ? "var(--color-base-" + color + ")" : 'var(--color-base-mid-grey)';
+}, function (_ref8) {
+  var progress = _ref8.progress;
   return progress;
-});
+}, zIndexes.contentOverlay);
 var StepsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n\n  @media ", " {\n    font-size: var(--font-size-body-2);\n    font-weight: var(--font-weight-body-2);\n    letter-spacing: var(--letter-spacing-body-2);\n    line-height: var(--line-height-body-2);\n  }\n"])), devices.mobile);
-var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n"])), function (_ref8) {
-  var isVisible = _ref8.isVisible;
+var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n"])), function (_ref9) {
+  var isVisible = _ref9.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, function (_ref9) {
-  var isActive = _ref9.isActive;
+}, function (_ref10) {
+  var isActive = _ref10.isActive;
   return isActive ? "var(--base-color-black)" : 'var(--base-color-mid-grey)';
 });
 
@@ -3047,6 +3160,8 @@ var Progress = function Progress(_ref) {
     progress = _ref$progress === void 0 ? 0 : _ref$progress,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 6 : _ref$height,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     elapsedLineColor = _ref.elapsedLineColor,
     pendingLineColor = _ref.pendingLineColor,
     steps = _ref.steps;
@@ -3073,6 +3188,7 @@ var Progress = function Progress(_ref) {
   var progressValue = getProgressValue();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressView, {
     height: height,
+    shadow: shadow,
     "data-testid": "progress-container"
   }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
     color: elapsedLineColor,
@@ -3406,7 +3522,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconprev",
-    className: "carousel-icon-wrapper-left"
+    className: "carousel-icon-wrapper-left",
+    "aria-label": "Previous slide",
+    role: "button"
   }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconprevnoavailable"
   }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
@@ -3414,7 +3532,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconnext",
-    className: "carousel-icon-wrapper-right"
+    className: "carousel-icon-wrapper-right",
+    "aria-label": "Next slide",
+    role: "button"
   }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconnextnoavailable"
   }, renderNextIcon())));
@@ -4179,7 +4299,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
 };
 
 var _templateObject$p, _templateObject2$h;
-var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  font-weight: 500;\n  line-height: 17px;\n  letter-spacing: 0.4px;\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media ", " {\n    font-size: 17px;\n  }\n"])), function (_ref) {
+var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-sans);\n  font-size: 19px;\n  font-weight: 500;\n  line-height: 17px;\n  letter-spacing: 0.4px;\n  color: var(--color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  @media ", " {\n    font-size: 17px;\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
 }, function (_ref2) {
@@ -4188,23 +4308,23 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
-var _excluded$b = ["children", "iconName", "iconDirection", "color"];
+var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
-    color = _ref.color,
+    textColor = _ref.textColor,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
-    color: color,
+    color: textColor,
     iconName: iconName
   }, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
     "data-testid": "text-link-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName,
     direction: iconDirection,
-    color: color
+    color: textColor
   }))) : null);
 };
 
@@ -4449,18 +4569,21 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
 var Tickbox2 = /*#__PURE__*/React.forwardRef(Tickbox2Component);
 
 var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
-var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n"])), function (_ref) {
+var TimerWrapper = /*#__PURE__*/styled__default.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-", ");\n\n  .color-primary {\n    color: var(--color-base-", ");\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return color;
-});
-var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__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) {
+}, function (_ref2) {
   var color = _ref2.color;
   return color;
+});
+var Line = /*#__PURE__*/styled__default.div(_templateObject2$k || (_templateObject2$k = /*#__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 (_ref3) {
+  var color = _ref3.color;
+  return color;
 }, devices.mobileAndTablet);
 var TitleWrapper = /*#__PURE__*/styled__default.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 16px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n"])), devices.mobileAndTablet);
-var ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__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$5 || (_templateObject5$5 = /*#__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$3 || (_templateObject6$3 = /*#__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 ValuesWrapper = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TimerLabel = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 4px;\n"])));
+var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.mobileAndTablet);
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
@@ -4493,9 +4616,17 @@ var Timer = function Timer(_ref) {
     }
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
       className: "harmonic-timer-value"
-    }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      hierarchy: "h3",
+      size: "medium"
+    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
       className: "harmonic-timer-label"
-    }, label)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
+    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      size: "large"
+    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      hierarchy: "h3",
+      size: "medium"
+    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
   };
   React__default.useEffect(function () {
     if (isEndDateReached) return undefined;
@@ -4535,8 +4666,8 @@ var Timer = function Timer(_ref) {
     color: color
   }, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
     className: "harmonic-timer-title-wrapper"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 5
+  }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
+    size: "large"
   }, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
     className: "harmonic-timer-values-wrapper"
   }, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
@@ -4547,16 +4678,16 @@ var Timer = function Timer(_ref) {
 };
 
 var _templateObject$t;
-var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\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"])));
+var TypeTagsContainer = /*#__PURE__*/styled__default.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  p,\n  li {\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"])));
 
 var TypeTags = function TypeTags(_ref) {
   var list = _ref.list;
   return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
-    return /*#__PURE__*/React__default.createElement(Overline, {
-      level: 1,
-      tag: "li",
+    return /*#__PURE__*/React__default.createElement("li", {
       key: t
-    }, t);
+    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      size: "large"
+    }, t));
   }));
 };
 
@@ -6250,7 +6381,7 @@ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_te
 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$f = ["text"],
-  _excluded2 = ["text"];
+  _excluded2$1 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
     links = _ref.links,
@@ -6262,7 +6393,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
-    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
   return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
     sticky: sticky
   }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
@@ -6877,7 +7008,7 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-// eslint-disable-next-line no-shadow
+/* eslint-disable no-shadow */
 (function (CarouselType) {
   CarouselType["Image"] = "image";
   CarouselType["SmallCard"] = "SmallCard";
@@ -6891,31 +7022,6 @@ var TextOnly = function TextOnly(_ref) {
   ButtonType["Tertiary"] = "Tertiary";
 })(exports.ButtonType || (exports.ButtonType = {}));
 
-var IInformationCtaVariant;
-(function (IInformationCtaVariant) {
-  IInformationCtaVariant["Primary"] = "Primary";
-  IInformationCtaVariant["Secondary"] = "Secondary";
-  IInformationCtaVariant["Tertiary"] = "Tertiary";
-  IInformationCtaVariant["TextLink"] = "TextLink";
-})(IInformationCtaVariant || (IInformationCtaVariant = {}));
-var IInformationCtaTheme;
-(function (IInformationCtaTheme) {
-  IInformationCtaTheme["Cinema"] = "Cinema";
-  IInformationCtaTheme["Core"] = "Core";
-  IInformationCtaTheme["Stream"] = "Stream";
-})(IInformationCtaTheme || (IInformationCtaTheme = {}));
-var IInformationTitleVariant;
-(function (IInformationTitleVariant) {
-  IInformationTitleVariant["Header"] = "Header";
-  IInformationTitleVariant["AltHeader"] = "AltHeader";
-})(IInformationTitleVariant || (IInformationTitleVariant = {}));
-(function (IInformationBackgroundColour) {
-  IInformationBackgroundColour["Cinema"] = "cinema";
-  IInformationBackgroundColour["Core"] = "core";
-  IInformationBackgroundColour["Stream"] = "stream";
-  IInformationBackgroundColour["White"] = "white";
-})(exports.IInformationBackgroundColour || (exports.IInformationBackgroundColour = {}));
-
 var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
 var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-light-grey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
 var PromoLabelWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
@@ -7204,9 +7310,316 @@ var ModalWindow = function ModalWindow(_ref) {
   })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
-var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
-var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
-var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-light-grey);\n  width: 100%;\n"])));
+var _templateObject$N, _templateObject2$A;
+var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
+var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", "px);\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (props) {
+  return props.transitioning ? 'transform 0.3s ease-in-out' : 'none';
+}, function (props) {
+  return props.translateX;
+}, SWIPE_SLIDE_CLASS_NAME);
+
+/**
+ * Generates a random string in the format XXX-XXX.
+ * Does not meet UUID standards.
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
+ *
+ * @return {string} A random string in the format XXX-XXX.
+ */
+var generateDomElementId = function generateDomElementId() {
+  var randomPart = Math.floor(100 + Math.random() * 900).toString();
+  var datePart = Date.now().toString().slice(-3);
+  return randomPart + "-" + datePart;
+};
+
+var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
+  var widthSoFar = 0;
+  var visible = [];
+  for (var i = currentIndex; i < slidesLength; i++) {
+    var _slideWidths$i;
+    var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
+    if (widthSoFar + width > containerWidth) break;
+    visible.push(i);
+    widthSoFar += width;
+  }
+  return visible;
+};
+
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore"];
+var MAX_CLONES_NUMBER = 6;
+var getClonesCount = function getClonesCount(infinite, childrenLength) {
+  if (!infinite) return 0;
+  if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
+  return childrenLength;
+};
+var getSlidedWidth = function getSlidedWidth(slide) {
+  if (!slide) return 0;
+  var style = window.getComputedStyle(slide);
+  var marginLeft = parseFloat(style.marginLeft) || 0;
+  var marginRight = parseFloat(style.marginRight) || 0;
+  return slide.getBoundingClientRect().width + marginLeft + marginRight;
+};
+var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$infinite = _ref.infinite,
+    infinite = _ref$infinite === void 0 ? false : _ref$infinite,
+    onIndexChange = _ref.onIndexChange,
+    _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
+    slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+  var containerRef = React.useRef(null);
+  var childRefs = React.useRef([]);
+  var startX = React.useRef(0);
+  var currentTranslate = React.useRef(0);
+  var isDragging = React.useRef(false);
+  var uniqueIdRef = React.useRef(generateDomElementId());
+  var _useMemo = React.useMemo(function () {
+      var count = getClonesCount(infinite, children.length);
+      var leftClones = infinite ? children.slice(-count) : [];
+      var rightClones = infinite ? children.slice(0, count) : [];
+      var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
+      return {
+        slides: allSlides,
+        clonesCount: count
+      };
+    }, [children, infinite]),
+    slides = _useMemo.slides,
+    clonesCount = _useMemo.clonesCount;
+  // Set the initial index to clonesCount (so the first real slide is shown)
+  var _useState = React.useState(infinite ? clonesCount : 0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var _useState2 = React.useState(false),
+    transitioning = _useState2[0],
+    setTransitioning = _useState2[1];
+  var _useState3 = React.useState([]),
+    slideWidths = _useState3[0],
+    setSlideWidths = _useState3[1];
+  var _useState4 = React.useState(0),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
+  React.useEffect(function () {
+    if (!onIndexChange) return;
+    if (!infinite) {
+      onIndexChange(currentIndex);
+      return;
+    }
+    var offset = currentIndex - clonesCount + children.length;
+    var realIndex = offset % children.length;
+    onIndexChange(realIndex);
+  }, [currentIndex, onIndexChange, infinite, children.length]);
+  // Update dimensions
+  var updateDimensions = React.useCallback(function () {
+    if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
+    if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
+  }, []);
+  React.useEffect(function () {
+    var animationFrameRequestId = requestAnimationFrame(function () {
+      updateDimensions();
+    });
+    return function () {
+      cancelAnimationFrame(animationFrameRequestId);
+    };
+  }, [children]);
+  React.useEffect(function () {
+    var observer = new ResizeObserver(updateDimensions);
+    if (containerRef.current) observer.observe(containerRef.current);
+    return function () {
+      observer.disconnect();
+    };
+  }, [children]);
+  // Compute current translate X value by summing widths of all slides before currentIndex.
+  var getTranslateX = function getTranslateX() {
+    var slideOffset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    return slideOffset + (slidesOffsetBefore || 0); // Apply offsetBefore
+  };
+  var canMoveNext = function canMoveNext() {
+    var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
+      return acc + width;
+    }, 0);
+    // In non-infinite mode, only move if there is more to show
+    return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
+  };
+  var handleTransitionEnd = function handleTransitionEnd() {
+    setTransitioning(false); // Reset transitioning after animation ends
+    if (!infinite) return;
+    if (currentIndex >= children.length + clonesCount) {
+      setCurrentIndex(clonesCount);
+    } else if (currentIndex < clonesCount) {
+      setCurrentIndex(children.length + currentIndex);
+    }
+  };
+  var goToPrev = function goToPrev() {
+    if (transitioning) return; // Prevent clicks during transition
+    if (currentIndex === 0 && !infinite) {
+      setTransitioning(false); // Reset immediately if no more slides
+      return;
+    }
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      return infinite ? prev - 1 : Math.max(0, prev - 1);
+    });
+  };
+  var goToNext = function goToNext() {
+    if (transitioning || !canMoveNext()) return; // Prevent clicks during transition
+    if (currentIndex === children.length - 1 && !infinite) {
+      setTransitioning(false); // Reset immediately if no more slides
+      return;
+    }
+    setTransitioning(true);
+    setCurrentIndex(function (prev) {
+      return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
+    });
+  };
+  React.useImperativeHandle(ref, function () {
+    return {
+      nextSlide: goToNext,
+      prevSlide: goToPrev
+    };
+  });
+  var handleTouchStart = function handleTouchStart(e) {
+    startX.current = e.touches[0].clientX;
+    isDragging.current = true;
+    setTransitioning(false);
+  };
+  var handleTouchMove = function handleTouchMove(e) {
+    if (!isDragging.current) return;
+    var deltaX = e.touches[0].clientX - startX.current;
+    currentTranslate.current = getTranslateX() + deltaX;
+  };
+  var handleTouchEnd = function handleTouchEnd() {
+    isDragging.current = false;
+    setTransitioning(true);
+    if (currentTranslate.current > getTranslateX()) {
+      goToPrev();
+    } else if (currentTranslate.current < getTranslateX()) {
+      goToNext();
+    }
+  };
+  var onSlideFocus = function onSlideFocus(isVisible, index) {
+    if (!isVisible) setCurrentIndex(index);
+  };
+  var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
+  return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
+    ref: containerRef,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd,
+    className: "swipe"
+  }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
+    className: "swipe-track-wrapper",
+    translateX: getTranslateX(),
+    transitioning: transitioning,
+    onTransitionEnd: handleTransitionEnd
+  }, slides.map(function (child, index) {
+    var isVisible = visibleIndexes.includes(index);
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
+      ariaHidden: !isVisible,
+      className: SWIPE_SLIDE_CLASS_NAME,
+      ref: function ref(el) {
+        childRefs.current[index] = el;
+      },
+      onFocus: function onFocus() {
+        return onSlideFocus(isVisible, index);
+      }
+    });
+  })));
+});
+Swipe.displayName = 'Swipe';
+
+var COLORS$3 = {
+  "default": 'var(--button-auxiliary-color)',
+  background: 'var(--button-auxiliary-bg-color)'
+};
+var getTextColor$3 = function getTextColor(_ref) {
+  var textColor = _ref.textColor;
+  return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
+};
+var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
+};
+
+var _templateObject$O;
+var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
+
+var _excluded$i = ["children", "className"];
+var AuxiliaryButton = function AuxiliaryButton(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+  return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
+    iconClassName: "auxiliaryButtonIcon",
+    className: className
+  }), children);
+};
+
+var _buttonTypeToButton;
+var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
+
+var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
+  return htmlString.replace(/<[^>]*>/g, '');
+};
+var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+  var textContent = stripAllHtmlTags(htmlString);
+  if (textContent.length <= resultLength) {
+    return htmlString;
+  }
+  var accumulatedText = '';
+  var tagStack = [];
+  var charCount = 0;
+  var closeTags = function closeTags() {
+    while (tagStack.length > 0) {
+      accumulatedText += "</" + tagStack.pop() + ">";
+    }
+  };
+  for (var i = 0; i < htmlString.length; i++) {
+    var _char = htmlString[i];
+    if (_char === '<') {
+      accumulatedText += _char;
+      if (htmlString[i + 1] !== '/') {
+        var tagNameEnd = htmlString.indexOf('>', i);
+        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
+        tagStack.push(tagName);
+        accumulatedText += tagName + ">";
+        i = tagNameEnd;
+      }
+    } else if (_char === '>') {
+      accumulatedText += _char;
+    } else if (charCount < resultLength) {
+      accumulatedText += _char;
+      charCount++;
+    }
+    if (charCount >= resultLength) {
+      if (addDots) {
+        accumulatedText += '...';
+      }
+      break;
+    }
+  }
+  closeTags();
+  return accumulatedText;
+};
+var truncate = function truncate(str, n) {
+  return str.length >= n ? str.substring(0, n) : str;
+};
+var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+  var nodeString = server.renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
+  return truncateHtmlString(nodeString, resultLength, addDots);
+};
+
+var _templateObject$P, _templateObject2$B, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
+var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  div {\n    overflow: hidden;\n  }\n"])));
+var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-light-grey);\n  width: 100%;\n"])));
 var ChildrenContainer = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  visibility: ", ";\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
@@ -7321,8 +7734,8 @@ var Accordion = function Accordion(_ref) {
   }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$O;
-var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$Q;
+var AccordionsContainer = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -7343,9 +7756,9 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$P, _templateObject2$B, _templateObject3$p, _templateObject4$k, _templateObject5$f;
-var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: var(--announcement-banner-bg-color);\n  color: var(--announcement-banner-color);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), devices.mobile);
-var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  cursor: ", ";\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n\n    path {\n      fill: var(--announcement-banner-color);\n    }\n  }\n"])), function (_ref) {
+var _templateObject$R, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f;
+var AnnouncementBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 28px 0;\n  background-color: var(--announcement-banner-bg-color);\n  color: var(--announcement-banner-color);\n\n  @media ", " {\n    padding: 20px 0;\n  }\n"])), devices.mobile);
+var SvgContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  cursor: ", ";\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n\n    path {\n      fill: var(--announcement-banner-color);\n    }\n  }\n"])), function (_ref) {
   var isClickable = _ref.isClickable;
   return isClickable ? 'pointer' : 'default';
 }, function (_ref2) {
@@ -7426,109 +7839,76 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var COLORS$3 = {
-  "default": 'var(--button-auxiliary-color)',
-  background: 'var(--button-auxiliary-bg-color)'
-};
-var getTextColor$2 = function getTextColor(_ref) {
-  var textColor = _ref.textColor;
-  return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
-};
-var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
-};
-
-var _templateObject$Q;
-var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-sans);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$2, getTextColor$2, getTextColor$2);
-
-var _excluded$h = ["children", "className"];
-var AuxiliaryButton = function AuxiliaryButton(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
-  return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
-    iconClassName: "auxiliaryButtonIcon",
-    className: className
-  }), children);
-};
-
-var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
+var _templateObject$S, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
+var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
   var isCardClickable = _ref.isCardClickable;
   return isCardClickable ? 'pointer' : 'default';
 }, function (_ref2) {
   var onlyShowButtonsOnHover = _ref2.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$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: ", ";\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), function (_ref3) {
-  var lineColor = _ref3.lineColor,
-    theme = _ref3.theme;
-  if (lineColor === exports.Colors.Cinema) return 'var(--base-color-white)';
-  return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
-}, zIndexes.contentOverlay);
-var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__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 (_ref4) {
-  var fullWidth = _ref4.fullWidth;
+var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n  background-color: var(--button-bg-color);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
+var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -6px;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 24px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref3) {
+  var fullWidth = _ref3.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref5) {
-  var fullWidth = _ref5.fullWidth;
+}, function (_ref4) {
+  var fullWidth = _ref4.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__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$d || (_templateObject6$d = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__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 HighlightTextContainer = /*#__PURE__*/styled__default(TextContainer$2)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
-var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$3 || (_templateObject9$3 = /*#__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(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
-  var isVisible = _ref6.isVisible;
+var TitleContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleContainerMobile = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 12px 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n"])));
+var HighlightTextContainer = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 24px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 4px;\n  overflow-wrap: break-word;\n"])));
+var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref5) {
+  var isVisible = _ref5.isVisible;
   return isVisible ? "visible" : 'hidden';
-}, devices.mobile, function (_ref7) {
-  var isGridCard = _ref7.isGridCard;
+}, devices.mobile, function (_ref6) {
+  var isGridCard = _ref6.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref8) {
-  var fullWidth = _ref8.fullWidth;
+var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 26px;\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref7) {
+  var fullWidth = _ref7.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref9) {
-  var fullWidth = _ref9.fullWidth;
+}, function (_ref8) {
+  var fullWidth = _ref8.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref10) {
-  var bgColor = _ref10.bgColor,
-    theme = _ref10.theme;
-  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
+var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 26px;\n  padding: 0 8px;\n  background-color: ", ";\n"])), function (_ref9) {
+  var bgColor = _ref9.bgColor;
+  return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
 });
 var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
-var getButtonsOpacity = function getButtonsOpacity(_ref11) {
-  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
+var getButtonsOpacity = function getButtonsOpacity(_ref10) {
+  var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
 };
-var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
-  var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
+var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
+  var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__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 (_ref13) {
-  var size = _ref13.size,
-    primaryButtonTextLength = _ref13.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 24px;\n  margin-top: 24px;\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 (_ref12) {
+  var size = _ref12.size,
+    primaryButtonTextLength = _ref12.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
   var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
   if (isLinksLayoutColumn) {
     return "\n        flex-direction: column;\n      ";
   }
   return '';
-}, devices.mobile, getButtonsMinHeight, function (_ref14) {
-  var fullWidth = _ref14.fullWidth;
+}, devices.mobile, getButtonsMinHeight, function (_ref13) {
+  var fullWidth = _ref13.fullWidth;
   return fullWidth ? '0' : '20px';
-}, function (_ref15) {
-  var fullWidth = _ref15.fullWidth;
+}, function (_ref14) {
+  var fullWidth = _ref14.fullWidth;
   return fullWidth ? '0' : '20px';
-}, devices.tablet, getButtonsMinHeight, function (_ref16) {
-  var primaryButtonTextLength = _ref16.primaryButtonTextLength,
-    tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
+}, devices.tablet, getButtonsMinHeight, function (_ref15) {
+  var primaryButtonTextLength = _ref15.primaryButtonTextLength,
+    tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
   var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
   if (isLinksLayoutColumnTablet) {
     return "\n          flex-direction: column;\n        ";
@@ -7536,69 +7916,12 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14$1 ||
   return '';
 });
 
-var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
-  return htmlString.replace(/<[^>]*>/g, '');
-};
-var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
-  var textContent = stripAllHtmlTags(htmlString);
-  if (textContent.length <= resultLength) {
-    return htmlString;
-  }
-  var accumulatedText = '';
-  var tagStack = [];
-  var charCount = 0;
-  var closeTags = function closeTags() {
-    while (tagStack.length > 0) {
-      accumulatedText += "</" + tagStack.pop() + ">";
-    }
-  };
-  for (var i = 0; i < htmlString.length; i++) {
-    var _char = htmlString[i];
-    if (_char === '<') {
-      accumulatedText += _char;
-      if (htmlString[i + 1] !== '/') {
-        var tagNameEnd = htmlString.indexOf('>', i);
-        var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
-        tagStack.push(tagName);
-        accumulatedText += tagName + ">";
-        i = tagNameEnd;
-      }
-    } else if (_char === '>') {
-      accumulatedText += _char;
-    } else if (charCount < resultLength) {
-      accumulatedText += _char;
-      charCount++;
-    }
-    if (charCount >= resultLength) {
-      if (addDots) {
-        accumulatedText += '...';
-      }
-      break;
-    }
-  }
-  closeTags();
-  return accumulatedText;
-};
-var truncate = function truncate(str, n) {
-  return str.length >= n ? str.substring(0, n) : str;
-};
-var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
-  if (addDots === void 0) {
-    addDots = false;
-  }
-  var nodeString = server.renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
-  return truncateHtmlString(nodeString, resultLength, addDots);
-};
-
-var _excluded$i = ["text"],
-  _excluded2$1 = ["text"];
-var _buttonTypeToButton;
+var _excluded$j = ["text"],
+  _excluded2$2 = ["text"];
+var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$2 = 19;
-var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
+var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var Card = function Card(_ref) {
   var _labelParams$color;
   var _ref$progress = _ref.progress,
@@ -7636,18 +7959,20 @@ var Card = function Card(_ref) {
   var _useState = React.useState(false),
     hovered = _useState[0],
     setHovered = _useState[1];
+  var cardTitleId = "card-title-" + title;
+  var cardDescriptionId = "card-desc-" + title;
   var truncatedText = truncateHtmlString(text, 185, true);
   var firstButton = links == null ? void 0 : links[0];
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
   var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
   var hoverHandler = function hoverHandler(value) {
     if (value) {
@@ -7659,8 +7984,8 @@ var Card = function Card(_ref) {
     }
     setHovered(value);
   };
-  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
-  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -7670,21 +7995,26 @@ var Card = function Card(_ref) {
     },
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     "data-testid": "cardcontainer",
-    isCardClickable: !!firstButton
+    isCardClickable: !!firstButton,
+    role: "region",
+    "aria-labelledby": cardTitleId,
+    "aria-describedby": cardDescriptionId
   }, /*#__PURE__*/React__default.createElement("a", {
     href: firstButton == null ? void 0 : firstButton.href,
     target: firstButton == null ? void 0 : firstButton.target,
     className: "targetLink",
     style: {
       flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
-    }
+    },
+    "aria-label": "Navigate to " + title
   }, /*#__PURE__*/React__default.createElement(LabelContainer, {
     isGridCard: isGridCard,
     isVisible: !!labelParams
   }, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
     bgColor: labelParams == null ? void 0 : labelParams.bgColor
-  }, /*#__PURE__*/React__default.createElement(Overline, {
-    level: 2
+  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "small",
+    color: "white"
   }, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: labelParams.iconName,
     direction: labelParams.iconDirection,
@@ -7696,24 +8026,36 @@ var Card = function Card(_ref) {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
-    alt: imageAltText
+    alt: imageAltText || title
   })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress,
-    height: 10
+    height: 6
   }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
     fullWidth: fullWidth
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
-  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: size === 'small' ? 6 : 5
-  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: 6
-  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer$2, {
+  }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
+    id: cardTitleId
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h3",
+    size: "small"
+  }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
+    id: cardTitleId
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h3",
+    size: "medium"
+  }, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+    size: "large"
+  }, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large"
+  }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
+    id: cardDescriptionId,
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
+  })), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "large",
+    color: "red"
   }, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
     fullWidth: fullWidth
   }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
@@ -7725,12 +8067,16 @@ var Card = function Card(_ref) {
     tertiaryButtonTextLength: secondButtonText.length,
     onlyShowButtonsOnHover: onlyShowButtonsOnHover,
     fullWidth: fullWidth
-  }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
+  }, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
+    "aria-label": firstButtonText
+  }, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
+    "aria-label": secondButtonText
+  }, restSecondButton), tertiaryButtonTextTruncate)))));
 };
 
-var _templateObject$S, _templateObject2$D;
-var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
-var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
+var _templateObject$T, _templateObject2$E;
+var CardsContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
+var GridItemContainer = /*#__PURE__*/styled__default(GridItem)(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -7772,9 +8118,9 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
-var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
-var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
+var _templateObject$U, _templateObject2$F, _templateObject3$r, _templateObject4$m, _templateObject5$h;
+var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
+var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
 }, function (_ref2) {
@@ -7840,9 +8186,9 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
 };
 
-var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
-var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
+var _templateObject$V, _templateObject2$G, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
+var BodyTextRelative = /*#__PURE__*/styled__default(BodyText)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
 var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 0 0 33.3%;\n"])));
@@ -7923,12 +8269,12 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text))));
 };
 
-var _templateObject$V, _templateObject2$G, _templateObject3$t, _templateObject4$o, _templateObject5$j;
-var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
+var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
+var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
 }, devices.mobile);
-var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
@@ -7968,26 +8314,70 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$k;
-var InfoContent = /*#__PURE__*/styled__default('div')(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
-var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
-var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
-  if (!props.infoThemed) {
-    return '';
-  }
-  if (props.variant === IInformationCtaVariant.Primary || props.variant === IInformationCtaVariant.Secondary) {
-    return "a {\n            color: var(--base-color-black);\n            background: var(--base-color-white);\n            border-color: var(--base-color-transparent);\n          }";
-  }
-  return "a {\n            color: var(--base-color-white);\n            background: var(--base-color-transparent});\n          }\n            svg > path {\n              fill: var(--base-color-white);\n              stroke: var(--base-color-white);\n              stroke-width: 1;\n            }\n          ";
-});
-var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: ", ";\n  background: ", "\n  }};\n"])), function (props) {
-  return props.background !== exports.IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
-}, function (props) {
-  return "var(--base-color-" + props.background + ")";
-});
-var InfoBodyWrapper = /*#__PURE__*/styled__default('div')(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  a {\n    text-decoration: underline;\n    color: ", ";\n  }\n"])), function (props) {
-  return props.background === exports.IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
+var InformationCtaVariants = {
+  Primary: 'Primary',
+  Secondary: 'Secondary',
+  Tertiary: 'Tertiary',
+  TextLink: 'TextLink'
+};
+
+var COLORS$4 = {
+  "default": 'var(--information-panel-button-color)',
+  background: 'var(--information-panel-button-bg-color)',
+  hover: 'var(--information-panel-button-hover-color)',
+  pressed: 'var(--information-panel-button-pressed-color)'
+};
+var getTextColor$4 = function getTextColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary ? COLORS$4["default"] : colorValue;
+};
+var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary ? "background-color: " + colorValue + ";" : '';
+};
+var getBorderColor$1 = function getBorderColor(variant, colorValue) {
+  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary ? "border-color: " + colorValue + ";" : '';
+};
+
+var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p;
+var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 60px 0;\n  color: var(--information-panel-color);\n  background-color: var(--information-panel-bg-color);\n\n  @media ", " {\n    padding: 40px 0;\n  }\n"])), devices.mobile);
+var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
+var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    margin-top: 16px;\n  }\n\n  a {\n    color: ", ";\n    ", "\n    ", "\n\n    svg path {\n      fill: ", ";\n    }\n\n    :hover:not(:active) {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n\n    :active {\n      color: ", ";\n      ", "\n      ", "\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), devices.mobile, function (_ref) {
+  var variant = _ref.variant;
+  return getTextColor$4(variant, COLORS$4.background);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return getBackgroundColor$2(variant, COLORS$4.background);
+}, function (_ref3) {
+  var variant = _ref3.variant;
+  return getBorderColor$1(variant, COLORS$4.background);
+}, function (_ref4) {
+  var variant = _ref4.variant;
+  return getTextColor$4(variant, COLORS$4.background);
+}, function (_ref5) {
+  var variant = _ref5.variant;
+  return getTextColor$4(variant, COLORS$4.hover);
+}, function (_ref6) {
+  var variant = _ref6.variant;
+  return getBackgroundColor$2(variant, COLORS$4.hover);
+}, function (_ref7) {
+  var variant = _ref7.variant;
+  return getBorderColor$1(variant, COLORS$4.hover);
+}, function (_ref8) {
+  var variant = _ref8.variant;
+  return getTextColor$4(variant, COLORS$4.hover);
+}, function (_ref9) {
+  var variant = _ref9.variant;
+  return getTextColor$4(variant, COLORS$4.pressed);
+}, function (_ref10) {
+  var variant = _ref10.variant;
+  return getBackgroundColor$2(variant, COLORS$4.pressed);
+}, function (_ref11) {
+  var variant = _ref11.variant;
+  return getBorderColor$1(variant, COLORS$4.pressed);
+}, function (_ref12) {
+  var variant = _ref12.variant;
+  return getTextColor$4(variant, COLORS$4.pressed);
 });
+var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--information-panel-color);\n\n  a {\n    text-decoration: underline;\n    color: var(--information-panel-color);\n  }\n\n  @media ", " {\n    padding-top: 4px;\n  }\n"])), devices.mobile);
 
 // Helper function for rendering buttons based on the variant
 var renderButton = function renderButton(_ref) {
@@ -7998,7 +8388,7 @@ var renderButton = function renderButton(_ref) {
     iconDirection = _ref.iconDirection,
     target = _ref.target;
   switch (variant) {
-    case IInformationCtaVariant.Secondary:
+    case InformationCtaVariants.Secondary:
       return /*#__PURE__*/React__default.createElement(SecondaryButton, {
         href: link,
         iconName: iconName,
@@ -8006,13 +8396,13 @@ var renderButton = function renderButton(_ref) {
         target: target,
         "aria-label": text
       }, text);
-    case IInformationCtaVariant.Tertiary:
+    case InformationCtaVariants.Tertiary:
       return /*#__PURE__*/React__default.createElement(TertiaryButton, {
         href: link,
         target: target,
         "aria-label": text
       }, text);
-    case IInformationCtaVariant.TextLink:
+    case InformationCtaVariants.TextLink:
       return /*#__PURE__*/React__default.createElement(TextLink, {
         href: link,
         iconName: iconName,
@@ -8032,17 +8422,15 @@ var renderButton = function renderButton(_ref) {
 };
 var InfoCta = function InfoCta(_ref2) {
   var _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? IInformationCtaVariant.Primary : _ref2$variant,
+    variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
     link = _ref2.link,
     text = _ref2.text,
     iconName = _ref2.iconName,
     iconDirection = _ref2.iconDirection,
-    infoThemed = _ref2.infoThemed,
     _ref2$target = _ref2.target,
     target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
   return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
-    variant: variant,
-    infoThemed: infoThemed
+    variant: variant
   }, renderButton({
     variant: variant,
     link: link,
@@ -8058,40 +8446,27 @@ var smallColumnSpan = 4;
 var largeColumnSpan = 9;
 var mediumWordBreakpoint = 8;
 var longWordBreakpoint = 13;
-var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
-  if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
+var getColumnSpan = function getColumnSpan(longestWordLength) {
   if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
   if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
   return defaultColumnSpan;
 };
-var renderTitle = function renderTitle(props) {
-  var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
-  return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
-    level: headerLevel
-  }, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
-    level: headerLevel
-  }, props.text));
-};
 var Information = function Information(_ref) {
   var body = _ref.body,
     title = _ref.title,
-    background = _ref.background,
     cta = _ref.cta,
     className = _ref.className;
   var safeTitle = title || {
     text: '',
-    variant: IInformationTitleVariant.Header,
-    textSize: 5
+    textSize: 'medium'
   }; // Provide a fallback
   var titleWords = safeTitle.text.split(' ');
   var titleWordLengths = titleWords.map(function (word) {
     return word.length;
   });
   var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
-  var titleColumnSpan = getColumnSpan(safeTitle.variant, safeTitle.textSize, maxTitleWordLength);
-  var bgColour = background != null ? background : exports.IInformationBackgroundColour.White;
+  var titleColumnSpan = getColumnSpan(maxTitleWordLength);
   return /*#__PURE__*/React__default.createElement(InfoWrapper, {
-    background: bgColour,
     "data-testid": "infoWrapper",
     className: className
   }, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -8099,20 +8474,22 @@ var Information = function Information(_ref) {
     columnStartDevice: 2,
     columnSpanDesktop: titleColumnSpan,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(safeTitle))), /*#__PURE__*/React__default.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: "h2",
+    size: safeTitle.textSize,
+    color: "inherit"
+  }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: titleColumnSpan + 2,
     columnStartDevice: 2,
     columnSpanDesktop: 14 - titleColumnSpan,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
-    background: bgColour,
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
     dangerouslySetInnerHTML: {
       __html: body
     }
   }), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
     link: cta.link,
     variant: cta.variant,
-    infoThemed: bgColour !== exports.IInformationBackgroundColour.White,
     text: cta.text,
     iconName: cta.iconName,
     iconDirection: cta.iconDirection,
@@ -8120,15 +8497,15 @@ var Information = function Information(_ref) {
   })))));
 };
 
-var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$f, _templateObject7$9, _templateObject8$6;
-var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$k, _templateObject6$f, _templateObject7$9, _templateObject8$6;
+var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  // remove spacing above/below for all semantic levels of the title\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\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;
 }, function (_ref2) {
   var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$I || (_templateObject2$I = /*#__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 PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$J || (_templateObject2$J = /*#__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$v || (_templateObject3$v = /*#__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  ";
@@ -8137,12 +8514,12 @@ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_t
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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 TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__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 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__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$9 || (_templateObject7$9 = /*#__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$j = ["text"];
+var _excluded$k = ["text"];
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
     text = _ref.text,
@@ -8158,7 +8535,7 @@ var PageHeading = function PageHeading(_ref) {
     titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
   var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
@@ -8186,13 +8563,13 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
 };
 
-var _excluded$k = ["link"];
+var _excluded$l = ["link"];
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var coreLink = link && _extends({}, link, {
-    color: exports.Colors.White,
-    bgColor: exports.Colors.Black
+    color: ThemeColor['base-white'],
+    bgColor: ThemeColor['base-black']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Core
@@ -8201,13 +8578,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$l = ["link"];
+var _excluded$m = ["link"];
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var cinemaLink = link && _extends({}, link, {
-    color: exports.Colors.Black,
-    bgColor: exports.Colors.White
+    color: ThemeColor['base-black'],
+    bgColor: ThemeColor['base-white']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Cinema
@@ -8218,17 +8595,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   })));
 };
 
-var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$a, _templateObject8$7;
-var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__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$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\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 _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r, _templateObject5$l, _templateObject6$g, _templateObject7$a, _templateObject8$7;
+var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__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$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\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$w || (_templateObject3$w = /*#__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$r || (_templateObject4$r = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__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$a || (_templateObject7$a = /*#__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$m = ["text"];
+var _excluded$n = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -8246,7 +8623,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -8291,12 +8668,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down"))) : null);
 };
 
-var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$n;
-var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
+var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m;
+var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
-var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
+var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  box-sizing: border-box;\n  height: 100%;\n  display: grid;\n  grid-auto-rows: 90% 1fr;\n  gap: 0px 36px;\n  align-items: center;\n\n  @media ", " {\n    grid-area: ", ";\n  }\n"])), function (_ref2) {
   var hasImage = _ref2.hasImage;
   return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
 }, devices.mobileAndTablet, function (_ref3) {
@@ -8305,7 +8682,7 @@ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templat
 });
 var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: var(--base-color-black);\n\n  @media ", " {\n    grid-area: 2 / 1 / 3 / 15;\n  }\n"])), devices.mobileAndTablet);
 var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 36px;\n  max-height: 33vw;\n  overflow: hidden;\n\n  :first-child * {\n    margin-block-start: 0;\n  }\n\n  @media ", " {\n    margin: 36px 20px;\n    max-height: unset;\n  }\n"])), devices.mobileAndTablet);
-var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\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\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
+var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 0 25px 36px;\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\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 
 var PageHeadingPanel = function PageHeadingPanel(_ref) {
   var _image$src, _image$alt;
@@ -8335,16 +8712,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
 
-var _templateObject$_;
-var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
+var _templateObject$$;
+var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
-var _excluded$n = ["link"];
+var _excluded$o = ["link"];
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var streamLink = link && _extends({}, link, {
-    color: exports.Colors.Black,
-    bgColor: exports.Colors.White
+    color: ThemeColor['base-black'],
+    bgColor: ThemeColor['base-white']
   });
   return /*#__PURE__*/React__default.createElement(Theme, {
     theme: exports.ThemeType.Stream
@@ -8355,12 +8732,199 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }))));
 };
 
-var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
-var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
-var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
+var _templateObject$10, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4, _templateObject11$2;
+var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  picture,\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"])));
+var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__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\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    \n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n"])), zIndexes.sponsorship, devices.mobileAndTablet, devices.tablet);
+var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: var(--grid-outer-margin);\n  bottom: 20px;\n  z-index: 10;\n\n  @media ", " {\n    right: var(--grid-margin);\n    bottom: 10px;\n  }\n"])), devices.tablet);
+var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--heading-promo-bg-color);\n  border-bottom: ", ";\n  display: ", ";\n\n  @media ", " {\n    padding: 12px 0 20px;\n  }\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
+}, function (_ref2) {
+  var showBlock = _ref2.showBlock;
+  return showBlock ? 'block' : 'none';
+}, devices.mobile);
+var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
+var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  width: 200px;\n\n  @media ", " {\n    order: ", ";\n    width: 100%;\n    justify-content: center;\n  }\n"])), devices.mobile, function (_ref3) {
+  var isBadgePresent = _ref3.isBadgePresent;
+  return isBadgePresent ? '1' : '4';
+});
+var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: end;\n  width: 200px;\n\n  @media ", " {\n    margin-bottom: ", ";\n    width: 100%;\n    order: 3;\n  }\n"])), devices.mobile, function (_ref4) {
+  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
+  return isAdditionalButtonPresent ? '20px' : '0';
+});
+var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 10px 0;\n\n  h1,\n  h2,\n  h3 {\n    color: ", ";\n  }\n\n  @media ", " {\n    padding: 0;\n    order: 2;\n    margin-bottom: ", ";\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
+}, devices.mobile, function (_ref6) {
+  var isButtonPresent = _ref6.isButtonPresent;
+  return isButtonPresent ? '20px' : '0';
+});
+var ContentWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 70px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @media ", " {\n    height: auto;\n    flex-direction: column;\n    justify-content: start;\n  }\n"])), devices.mobile);
+
+var PageHeadingPromoBadge;
+(function (PageHeadingPromoBadge) {
+  PageHeadingPromoBadge["Stream"] = "Stream";
+  PageHeadingPromoBadge["Cinema"] = "Cinema";
+})(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
+
+var Badge = function Badge(_ref) {
+  var isMobile = _ref.isMobile,
+    theme = _ref.theme,
+    badge = _ref.badge;
+  if (!badge) return null;
+  var color = theme === exports.ThemeType.Cinema ? exports.Colors.Black : exports.Colors.White;
+  var alignment = isMobile ? 'center' : 'left';
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+    "data-testid": "promo-heading-badge"
+  }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
+    fillColor: color,
+    align: alignment
+  })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
+    fillColor: color,
+    align: alignment
+  })));
+};
+
+var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
+  var link = _ref.link,
+    theme = _ref.theme;
+  var text = link.text;
+  if (theme === exports.ThemeType.Cinema) {
+    return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+      textColor: ThemeColor['base-white'],
+      backgroundColor: ThemeColor['base-black'],
+      hoveredColor: ThemeColor['rbo-black-hovered'],
+      pressedColor: ThemeColor['rbo-black-pressed']
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), text);
+};
+var Button$1 = function Button(_ref2) {
+  var link = _ref2.link,
+    theme = _ref2.theme,
+    isMobile = _ref2.isMobile;
+  var text = link.text;
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
+      theme: theme,
+      link: link
+    });
+  }
+  var buttonColor = theme === exports.ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
+  if (link.isTextLink) {
+    return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
+      color: buttonColor,
+      iconName: undefined
+    }), text);
+  }
+  return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
+    textColor: buttonColor,
+    borderColor: buttonColor,
+    hoveredColor: buttonColor,
+    pressedColor: buttonColor
+  }), text);
+};
+
+var Image = function Image(_ref) {
+  var desktop = _ref.desktop,
+    mobile = _ref.mobile,
+    alt = _ref.alt;
+  var isMobile = useMobile();
+  return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+    aspectRatio: isMobile ? exports.AspectRatio['75:32'] : exports.AspectRatio['90:17']
+  }, /*#__PURE__*/React__default.createElement("picture", {
+    "data-testid": "promo-heading-picture"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    srcSet: mobile,
+    media: "(max-width: 768px)"
+  }), /*#__PURE__*/React__default.createElement("source", {
+    srcSet: desktop,
+    media: "(min-width: 769px)"
+  }), /*#__PURE__*/React__default.createElement("img", {
+    src: desktop,
+    alt: alt,
+    "data-testid": "promo-heading-image"
+  })));
+};
+
+var TITLE_MAX_LENGTH = 40;
+var PageHeadingPromo = function PageHeadingPromo(_ref) {
+  var _ref$sponsor = _ref.sponsor,
+    sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
+    className = _ref.className,
+    theme = _ref.theme,
+    badge = _ref.badge,
+    mainLink = _ref.mainLink,
+    title = _ref.title,
+    titleSemanticLevel = _ref.titleSemanticLevel,
+    additionalLink = _ref.additionalLink,
+    image = _ref.image;
+  var isMobile = useMobile();
+  var showImageButton = !title && !badge && !additionalLink && !isMobile;
+  var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
+  var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, {
+    className: className
+  }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
+    "data-testid": "promo-heading-sponsor"
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
+    mobile: image.mobile,
+    desktop: image.desktop,
+    alt: image.alt
+  }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
+    "data-testid": "promo-heading-image-button"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
+    theme: theme,
+    showBlock: showContentBlock
+  }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+    columnStartDesktop: 2,
+    columnSpanDesktop: 14,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
+    theme: theme
+  }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
+    isBadgePresent: !!badge
+  }, /*#__PURE__*/React__default.createElement(Badge, {
+    theme: theme,
+    badge: badge,
+    isMobile: isMobile
+  }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: additionalLink
+  }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$2, {
+    theme: theme,
+    isButtonPresent: !!mainLink || !!additionalLink
+  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
+    size: "large"
+  }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
+    isAdditionalButtonPresent: !!additionalLink && !badge
+  }, /*#__PURE__*/React__default.createElement(Button$1, {
+    theme: theme,
+    link: mainLink,
+    isMobile: isMobile
+  }))))))));
+};
+
+var _templateObject$11, _templateObject2$N, _templateObject3$z, _templateObject5$o, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$5, _templateObject10$5;
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-body-2);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
+var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
     theme = _ref.theme;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -8376,10 +8940,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
   var theme = _ref4.theme;
   return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
 }, devices.tablet, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
-var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
-var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
-var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
+var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
     theme = _ref5.theme;
   return invert ? theme.colors.primary : theme.colors.white;
@@ -8431,7 +8995,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
   var target = sameSiteUrl ? '_self' : '_blank';
-  var color = invert ? exports.Colors.Black : exports.Colors.White;
+  var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
   switch (brandingStyle) {
     case 'BlockText':
       return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
@@ -8468,7 +9032,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$o = ["text"];
+var _excluded$p = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -8575,7 +9139,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$p);
   var titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -8613,15 +9177,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))))));
 };
 
-var _templateObject$10, _templateObject2$M, _templateObject3$z, _templateObject4$t;
-var MorePages = /*#__PURE__*/styled__default.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
-var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
+var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$u;
+var MorePages = /*#__PURE__*/styled__default.span(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"])));
 // PageNumber extends bodyText but uses subtitle-1 font size
-var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
+var PageNumber = /*#__PURE__*/styled__default.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && " \n      color: var(--base-color-core);\n    ";
 });
-var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var NextPage = /*#__PURE__*/styled__default(PageNumber)(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
 
 var reducePages = function reducePages(pages, currentPage) {
   // If there are less than 6 pages, return all pages
@@ -8687,14 +9251,14 @@ var Pagination = function Pagination(_ref) {
   })))));
 };
 
-var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$c;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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$N || (_templateObject2$N = /*#__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$A || (_templateObject3$A = /*#__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$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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$P || (_templateObject2$P = /*#__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$B || (_templateObject3$B = /*#__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$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
 var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$i || (_templateObject6$i = /*#__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 ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$j || (_templateObject6$j = /*#__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 ReplacementWrapper = /*#__PURE__*/styled__default.span(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -8751,14 +9315,14 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$v;
-var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
-var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
+var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
+var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
-var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
+var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8818,8 +9382,8 @@ var CreditListing = function CreditListing(_ref) {
           var span = namesLength > characterThreshold ? largeColumnSpan : 1;
           var unboundedEnd = nextColumnStart + span;
           var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
-          var columnEnd = start + span;
-          nextColumnStart = columnEnd % columnCount || columnCount;
+          var end = start + span;
+          nextColumnStart = end % columnCount || columnCount;
           return {
             columnStart: start,
             columnSpan: span
@@ -8876,14 +9440,14 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
 
-var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$d, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _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 . .'";
 var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
 var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
 var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
-var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 || (_templateObject$13 = /*#__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\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
+var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -8893,9 +9457,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$13 ||
   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$P || (_templateObject2$P = /*#__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$C || (_templateObject3$C = /*#__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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__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 (_ref4) {
+var PromoWithTagsSubtitle = /*#__PURE__*/styled__default.span(_templateObject2$R || (_templateObject2$R = /*#__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$D || (_templateObject3$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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__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 (_ref4) {
   var hasTextLinks = _ref4.hasTextLinks;
   return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
 }, function (_ref5) {
@@ -8923,12 +9487,12 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
   var marginBottom = _ref7.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
-var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
-var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__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$5 || (_templateObject9$5 = /*#__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$5 || (_templateObject10$5 = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
+var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__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$6 || (_templateObject9$6 = /*#__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$6 || (_templateObject10$6 = /*#__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$1 = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject12$2 || (_templateObject12$2 = /*#__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$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled__default(Header)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
@@ -8952,13 +9516,13 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
 var TimerWrapper$1 = /*#__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$p = ["text"],
-  _excluded2$2 = ["text"],
+var _excluded$q = ["text"],
+  _excluded2$3 = ["text"],
   _excluded3 = ["text"];
-var _buttonTypeToButton$1;
+var _buttonTypeToButton$2;
 var LENGTH_TEXT$1 = 28;
 var LENGTH_TEXT_PARAGRAPH = 130;
-var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
+var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
     imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
@@ -9015,17 +9579,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
     secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+    restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
   var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
   var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
-  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
-  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
+  var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
+  var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
   var textLinkItems = textLinks ? textLinks.map(function (link, index) {
     var _link$text = link.text,
       textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -9128,28 +9692,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$e;
+var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$f;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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) {
+var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$16 || (_templateObject$16 = /*#__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) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, 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);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n    }\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__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 PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__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$r || (_templateObject5$r = /*#__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$k || (_templateObject6$k = /*#__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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
-var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__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 (_ref5) {
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__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: var(--color-primary-black);\n    }\n\n    &:visited {\n      color: var(--color-base-dark-grey);\n    }\n\n    &:hover {\n      color: var(--color-primary-red);\n    }\n  }\n"])));
+var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__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 (_ref5) {
   var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
     primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
     _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -9171,8 +9735,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$e ||
   return '';
 });
 
-var _templateObject$15;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$17;
+var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n\n    @supports not (aspect-ratio: ", ") {\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n  }\n"])), function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -9203,19 +9767,6 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
   return exports.AspectRatio[aspectRatioKey] || exports.AspectRatio['16:9'];
 };
 
-/**
- * Generates a random string in the format XXX-XXX.
- * Does not meet UUID standards.
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
- *
- * @return {string} A random string in the format XXX-XXX.
- */
-var generateDomElementId = function generateDomElementId() {
-  var randomPart = Math.floor(100 + Math.random() * 900).toString();
-  var datePart = Date.now().toString().slice(-3);
-  return randomPart + "-" + datePart;
-};
-
 var VideoWithControls$1 = function VideoWithControls(_ref) {
   var video = _ref.video,
     settings = _ref.settings;
@@ -9297,8 +9848,8 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$q = ["text"],
-  _excluded2$3 = ["text"];
+var _excluded$r = ["text"],
+  _excluded2$4 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9323,13 +9874,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
     _ref3$text = _ref3.text,
     tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+    restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
   var defaultVideoSettings = {
     muted: true,
@@ -9366,8 +9917,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
 };
 
-var _templateObject$16;
-var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$18;
+var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -9422,9 +9973,9 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$17, _templateObject2$R, _templateObject3$E;
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
+var _templateObject$19, _templateObject2$T, _templateObject3$F;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
   return 'column';
@@ -9432,7 +9983,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_temp
   var gap = _ref2.gap;
   return gap + "px";
 });
-var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
+var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref3) {
   var darkMode = _ref3.darkMode;
   if (darkMode) return 'var(--base-color-white)';
   return 'var(--base-color-errorstate)';
@@ -9509,10 +10060,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
 
-var _templateObject$18, _templateObject2$S, _templateObject3$F;
-var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
-var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
-var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
+var _templateObject$1a, _templateObject2$U, _templateObject3$G;
+var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-light-grey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
+var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 
 /* eslint-disable react/no-danger */
 var StatusBanner = function StatusBanner(_ref) {
@@ -9568,8 +10119,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
 
-var _templateObject$19;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$1b;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
 
 var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
@@ -9597,8 +10148,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
 
-var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3;
-var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
+var _templateObject$1c, _templateObject2$V, _templateObject3$H, _templateObject4$z, _templateObject5$s, _templateObject6$m, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7, _templateObject11$4;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
 }, function (_ref2) {
@@ -9608,12 +10159,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$1a || (_templateObject
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/styled.css(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
   return {
@@ -9622,10 +10173,10 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
     title: 'Select Arrow'
   };
 })(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
-var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
-var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
+var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
+var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
+var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
   var theme = _ref6.theme,
     hover = _ref6.hover;
   var _theme$colors = theme.colors,
@@ -9635,9 +10186,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObj
   return "\n        background-color: " + lightgrey + ";\n        &:hover { background-color: " + midgrey + " }\n    ";
 });
 var selectStyles = function selectStyles(width, height) {
-  return styled.css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
+  return styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
 };
-var SelectList = /*#__PURE__*/styled__default.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
+var SelectList = /*#__PURE__*/styled__default.ul(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
   var width = _ref7.width,
     height = _ref7.height;
   return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9931,7 +10482,7 @@ function Select(_ref3) {
     }
     setSelectedValue(options[0]);
   }, [options, resetWhenOptionsUpdate]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "p",
     "data-testid": "select-label"
@@ -9978,9 +10529,9 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$1b, _templateObject2$U, _templateObject3$H, _templateObject4$z;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\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    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var _templateObject$1d, _templateObject2$W, _templateObject3$I, _templateObject4$A;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\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    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\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    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
@@ -9997,18 +10548,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_t
   if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
   return "0 0 0 3px var(--base-color-lapislazuli)";
 });
-var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-black)";
 });
-var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
+var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
   if (darkMode) return "var(--base-color-white)";
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$r = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$s = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10059,7 +10610,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10077,7 +10628,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$s = ["label", "error", "width", "darkMode", "components"];
+var _excluded$t = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -10099,7 +10650,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10116,8 +10667,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
 
-var _templateObject$1c, _templateObject2$V;
-var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
+var _templateObject$1e, _templateObject2$X;
+var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: fit-content;\n\n  ", " {\n    height: calc(100% - 12px - var(--line-height-body-2));\n    @supports not (aspect-ratio: ", ") {\n      width: ", ";\n    }\n  }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
     aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -10127,7 +10678,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_temp
     height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
+var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
 
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
@@ -10148,7 +10699,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       return window.removeEventListener('resize', setWrapperHeight);
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$7, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
@@ -10161,13 +10712,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$1d, _templateObject2$W, _templateObject3$I;
-var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
-var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$1f, _templateObject2$Y, _templateObject3$J;
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__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$J || (_templateObject3$J = /*#__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);
 
 /* eslint-disable react/no-danger */
 var Quote = function Quote(_ref) {
@@ -10192,13 +10743,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
-var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
-var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
-var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$1g, _templateObject2$Z, _templateObject3$K, _templateObject4$B, _templateObject5$t, _templateObject6$n;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
+var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
 var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -10216,7 +10767,7 @@ var MiniCard = function MiniCard(_ref) {
     columnSpanDevice: 3,
     columnStartDesktop: 1,
     columnSpanDesktop: 3
-  }, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
+  }, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement(StyledImage, {
     src: image,
@@ -10231,19 +10782,19 @@ var MiniCard = function MiniCard(_ref) {
     columnSpanDesktop: 4
   }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 4
-  }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
+  }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$3, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 2
   }, title)))));
 };
 
-var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$u;
-var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
-var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
-var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
+var _templateObject$1h, _templateObject2$_, _templateObject3$L, _templateObject4$C, _templateObject5$u;
+var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
+var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
+var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
   var isVisible = _ref2.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
@@ -10328,11 +10879,11 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
 
-var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$v;
-var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
-var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
+var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
+var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  text-decoration: none;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  display: block;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n"])), exports.Colors.Black, function (_ref) {
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
@@ -10492,19 +11043,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
-var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w, _templateObject6$o;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
 var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
   var color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10586,11 +11137,11 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7;
-var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
-var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
-var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8;
+var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
   return "var(--base-color-" + props.lineColor + ")";
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
@@ -10600,14 +11151,14 @@ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_template
 }, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
-var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-var Next = /*#__PURE__*/styled__default.span(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
-var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+var Next = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 /* eslint-disable react/no-danger */
 var Content = function Content(_ref) {
@@ -10715,7 +11266,7 @@ var Table = function Table(_ref) {
   } else {
     visibleRows = totalRows;
   }
-  return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickPrev: function onClickPrev() {
       return scrollTable(tableRef, 'left');
     },
@@ -10790,24 +11341,24 @@ var Table = function Table(_ref) {
   }))))))))));
 };
 
-var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
-var Wrapper$8 = /*#__PURE__*/styled__default('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q, _templateObject7$i, _templateObject8$d, _templateObject9$9, _templateObject10$9, _templateObject11$5, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--base-color-" + theme + ")";
 }, function (_ref2) {
   var theme = _ref2.theme;
   return "var(--base-color-" + theme + ")";
 });
-var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
-var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
-var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
+var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  margin-bottom: 32px;\n\n  @media ", " {\n    margin-bottom: 30px;\n  }\n"])), devices.mobile);
+var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  position: relative;\n  top: -25px;\n  left: -20px;\n  height: 52px;\n  background: var(--base-color-white);\n  display: inline-block;\n  padding: 0 20px;\n\n  @media ", " {\n    top: -18px;\n    height: 37px;\n    padding: 0 13px;\n    left: -13px;\n  }\n"])), devices.mobile);
+var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: var(--base-color-errorstate);\n  a {\n    text-decoration: underline;\n    color: inherit;\n  }\n"])));
 var Form = /*#__PURE__*/styled__default.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  align-items: center;\n  ", " {\n    margin-top: -20px;\n  }\n  a[href] {\n    color: inherit;\n  }\n"])), Error$1);
-var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
-var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
-var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
-var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
-var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
-var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
+var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n  display: flex;\n  gap: 28px;\n  align-items: center;\n\n  @media ", " {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n"])), devices.mobile);
+var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: left;\n  color: var(--base-color-errorstate);\n"])));
+var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  div {\n    text-decoration: underline;\n  }\n"])));
+var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  width: fit-content;\n\n  @media ", " {\n    width: 100%;\n  }\n  &:focus {\n    outline: 3px solid var(--base-color-lapislazuli);\n  }\n"])), devices.mobile);
+var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$9 || (_templateObject10$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 36px;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n"])), devices.mobile);
+var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$5 || (_templateObject11$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  div > p {\n    margin: 0;\n  }\n"])));
 var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1 / -1;\n  display: grid;\n  grid-template-columns: var(--grid-template-columns);\n  gap: var(--grid-column-gap);\n  cursor: pointer;\n"])));
 var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  transform: rotate(", ");\n  .dropdown-icon > div {\n    border-bottom: none;\n    color: var(--base-color-black);\n    margin: 0;\n  }\n"])), function (_ref3) {
   var _ref3$isOpen = _ref3.isOpen,
@@ -11113,7 +11664,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
       });
     }
   }, [isSuccess]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$8, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$9, {
     theme: themeToColor(theme)
   }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
     id: signUpInstructionsId,
@@ -11177,8 +11728,59 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
   }))))));
 };
 
-var _templateObject$1k;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var _BUTTONS_STYLE_VALUES;
+// Text color, Background color, Border color, Hovered color
+var BUTTONS_STYLE_VALUES = (_BUTTONS_STYLE_VALUES = {}, _BUTTONS_STYLE_VALUES[exports.ButtonType.Primary] = [ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[exports.ButtonType.Secondary] = [ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[exports.ButtonType.Tertiary] = [ThemeColor['base-white'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES);
+
+var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
+
+var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
+
+var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
+
+var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
+
+/* eslint-disable react/jsx-no-useless-fragment */
+var getThemeClass = function getThemeClass(theme) {
+  // Always include the base (core) theme class
+  var baseThemeClass = coreThemeStyles.coreTheme;
+  var overrideClass = '';
+  switch (theme) {
+    case exports.ThemeType.Core:
+      overrideClass = '';
+      break;
+    case exports.ThemeType.Stream:
+      overrideClass = streamThemeStyles.streamTheme;
+      break;
+    case exports.ThemeType.Cinema:
+      overrideClass = cinemaThemeStyles.cinemaTheme;
+      break;
+    case exports.ThemeType.Schools:
+      overrideClass = schoolsThemeStyles.schoolsTheme;
+      break;
+    default:
+      overrideClass = '';
+  }
+  // Return the combined classes
+  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
+};
+var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
+  var theme = _ref.theme,
+    children = _ref.children;
+  var themeClass = getThemeClass(theme);
+  // Convert children to an array (assuming they accept a className prop)
+  var childrenArray = React__default.Children.toArray(children);
+  var themedChildren = childrenArray.map(function (child) {
+    return /*#__PURE__*/React__default.cloneElement(child, {
+      className: ((child.props.className || '') + " " + themeClass).trim(),
+      theme: theme
+    });
+  });
+  return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
+};
+
+var _templateObject$1m;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n    --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n    --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n    --harmonic-text-link-underline-offset: 6px;\n    --harmonic-text-transform-navigation: capitalize;\n    --harmonic-font-size-navigation: 19px;\n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -12125,52 +12727,6 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (
   return theme.footer.tablet.paddingBottom;
 }, devices.desktop, devices.largeDesktop);
 
-var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
-
-var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
-
-var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
-
-var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
-
-/* eslint-disable react/jsx-no-useless-fragment */
-var getThemeClass = function getThemeClass(theme) {
-  // Always include the base (core) theme class
-  var baseThemeClass = coreThemeStyles.coreTheme;
-  var overrideClass = '';
-  switch (theme) {
-    case exports.ThemeType.Core:
-      overrideClass = '';
-      break;
-    case exports.ThemeType.Stream:
-      overrideClass = streamThemeStyles.streamTheme;
-      break;
-    case exports.ThemeType.Cinema:
-      overrideClass = cinemaThemeStyles.cinemaTheme;
-      break;
-    case exports.ThemeType.Schools:
-      overrideClass = schoolsThemeStyles.schoolsTheme;
-      break;
-    default:
-      overrideClass = '';
-  }
-  // Return the combined classes
-  return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
-};
-var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
-  var theme = _ref.theme,
-    children = _ref.children;
-  var themeClass = getThemeClass(theme);
-  // Convert children to an array (assuming they accept a className prop)
-  var childrenArray = React__default.Children.toArray(children);
-  var themedChildren = childrenArray.map(function (child) {
-    return /*#__PURE__*/React__default.cloneElement(child, {
-      className: ((child.props.className || '') + " " + themeClass).trim()
-    });
-  });
-  return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
-};
-
 exports.Accordion = Accordion;
 exports.Accordions = Accordions;
 exports.AltHeader = AltHeader;
@@ -12206,6 +12762,7 @@ exports.PageHeadingCompact = PageHeadingCompact;
 exports.PageHeadingCore = PageHeadingCore;
 exports.PageHeadingImpact = PageHeadingImpact;
 exports.PageHeadingPanel = PageHeadingPanel;
+exports.PageHeadingPromo = PageHeadingPromo;
 exports.PageHeadingStream = PageHeadingStream;
 exports.Pagination = Pagination;
 exports.PasswordStrength = PasswordStrength;