npm - @royaloperahouse/harmonic - Versions diffs - 0.5.1 → 0.6.0-b - Mend

@royaloperahouse/harmonic 0.5.1 → 0.6.0-b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/dist/harmonic.cjs.development.js CHANGED Viewed

@@ -374,7 +374,7 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
     size = _ref2.size,
     em = _ref2.em,
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'primary' : _ref2$color,
+    color = _ref2$color === void 0 ? 'inherit' : _ref2$color,
     serif = _ref2.serif,
     Tag = _ref2.hierarchy,
     className = _ref2.className;
@@ -394,7 +394,7 @@ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
   var children = _ref3.children,
     size = _ref3.size,
     _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? 'primary' : _ref3$color,
+    color = _ref3$color === void 0 ? 'inherit' : _ref3$color,
     className = _ref3.className;
   var classNames = createClassNames('subtitle', {
     size: size,
@@ -411,7 +411,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     _ref4$size = _ref4.size,
     size = _ref4$size === void 0 ? 'medium' : _ref4$size,
     _ref4$color = _ref4.color,
-    color = _ref4$color === void 0 ? 'primary' : _ref4$color,
+    color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
     className = _ref4.className,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   var classNames = createClassNames('bodycopy', {
@@ -428,7 +428,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
   var children = _ref5.children,
     size = _ref5.size,
     _ref5$color = _ref5.color,
-    color = _ref5$color === void 0 ? 'primary' : _ref5$color,
+    color = _ref5$color === void 0 ? 'inherit' : _ref5$color,
     className = _ref5.className,
     props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
   var classNames = createClassNames('overline', {
@@ -444,7 +444,7 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
 var ButtonText = function ButtonText(_ref6) {
   var children = _ref6.children,
     _ref6$color = _ref6.color,
-    color = _ref6$color === void 0 ? 'primary' : _ref6$color,
+    color = _ref6$color === void 0 ? 'inherit' : _ref6$color,
     className = _ref6.className;
   var classNames = createClassNames('buttontext', {
     color: color,
@@ -457,7 +457,7 @@ var ButtonText = function ButtonText(_ref6) {
 var Caption = function Caption(_ref7) {
   var children = _ref7.children,
     _ref7$color = _ref7.color,
-    color = _ref7$color === void 0 ? 'primary' : _ref7$color,
+    color = _ref7$color === void 0 ? 'inherit' : _ref7$color,
     className = _ref7.className;
   var classNames = createClassNames('captiontext', {
     color: color,
@@ -470,7 +470,7 @@ var Caption = function Caption(_ref7) {
 var NavigationText = function NavigationText(_ref8) {
   var children = _ref8.children,
     _ref8$color = _ref8.color,
-    color = _ref8$color === void 0 ? 'primary' : _ref8$color,
+    color = _ref8$color === void 0 ? 'inherit' : _ref8$color,
     className = _ref8.className;
   var classNames = createClassNames('navigationtext', {
     color: color,
@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -2947,12 +2947,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templ
   return '';
 });
 var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
-  as: 'a'
+  as: 'button'
 })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n\n  span > svg path {\n    fill: var(--color-primary-black);\n  }\n"])));
 /* eslint-disable no-useless-return */
-var ControlledDropdown = function ControlledDropdown(_ref) {
+var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var text = _ref.text,
     options = _ref.options,
     active = _ref.active,
@@ -2960,32 +2960,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     onOptionClick = _ref.onOptionClick,
     _onMouseEnter = _ref.onMouseEnter,
     _onMouseLeave = _ref.onMouseLeave,
+    _onFocusLeave = _ref.onFocusLeave,
     onReset = _ref.onReset,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
     className = _ref.className;
-  var ref = React.useRef();
-  var resetHandler = React.useCallback(function () {
+  ControlledDropdown.displayName = 'ControlledDropdown';
+  var internalRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return internalRef.current;
+  });
+  var resetHandler = function resetHandler() {
     return onReset == null ? void 0 : onReset();
-  }, []);
-  React.useEffect(function () {
-    if (window.innerWidth > breakpoints.sm) {
-      var mouseClickHandler = function mouseClickHandler(e) {
-        var _ref$current;
-        if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
-          return;
-        } else if (active) {
-          resetHandler();
-        }
-      };
-      document.addEventListener('click', mouseClickHandler);
-      return function () {
-        document.removeEventListener('click', mouseClickHandler);
-      };
-    }
-    // eslint-disable-next-line consistent-return
-    return;
-  }, [ref, resetHandler, active]);
+  };
+  var isDropdown = React.useMemo(function () {
+    return !!(options != null && options.length);
+  }, [options]);
   var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
     if (e.key === 'Enter') {
       onOptionClick == null || onOptionClick(link);
@@ -3005,13 +2995,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       _onBlur == null || _onBlur();
     }
   };
-  var isDropdown = !!(options != null && options.length);
   var wrapperEvents = {
     onMouseEnter: function onMouseEnter() {
       return _onMouseEnter == null ? void 0 : _onMouseEnter();
     },
     onMouseLeave: function onMouseLeave() {
       return _onMouseLeave == null ? void 0 : _onMouseLeave();
+    },
+    onFocusLeave: function onFocusLeave() {
+      return _onFocusLeave == null ? void 0 : _onFocusLeave();
     }
   };
   var headerEvents = {
@@ -3027,21 +3019,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
     },
     onKeyDown: handleHeaderKeyDown
   };
+  React.useEffect(function () {
+    var mouseEvent = function mouseEvent(e) {
+      var _internalRef$current;
+      if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
+      if (active) resetHandler();
+    };
+    if (window.innerWidth > breakpoints.sm) {
+      document.addEventListener('click', mouseEvent);
+    }
+    return function () {
+      document.removeEventListener('click', mouseEvent);
+    };
+  }, [resetHandler, active]);
+  React.useEffect(function () {
+    var handleFocusOut = function handleFocusOut(e) {
+      if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
+        _onFocusLeave == null || _onFocusLeave();
+      }
+    };
+    var node = internalRef.current;
+    if (node) node.addEventListener('focusout', handleFocusOut);
+    return function () {
+      return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [_onFocusLeave]);
   return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: ref
+    ref: internalRef
   }, wrapperEvents, {
     className: className
   }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
     active: active
   }, headerEvents, {
-    tabIndex: 0,
-    "data-testid": "span-container"
+    "data-testid": "span-container",
+    role: "menuitem",
+    "aria-controls": "dropdown-menu",
+    "aria-haspopup": "menu",
+    "aria-expanded": active
   }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
     "data-testid": "dropdown-icon"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
   }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
-    withOptionsInMobile: true
+    withOptionsInMobile: true,
+    role: "menu",
+    id: "dropdown-menu"
   }, options.map(function (optionItem, index) {
     return /*#__PURE__*/React__default.createElement(OptionItem, {
       key: "key-" + index + "-" + optionItem.option,
@@ -3055,15 +3077,17 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
       onBlur: function onBlur() {
         return handleOptionBlur(index);
       },
-      href: optionItem.optionLink
+      href: optionItem.optionLink,
+      role: "menuitem"
     }, optionItem.option);
   }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
     active: active
   }, headerEvents, {
     "data-testid": "link-container",
+    role: "menuitem",
     tabIndex: 0
   }), text)));
-};
+});
 var _templateObject$8;
 var Grid = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])));
@@ -3696,7 +3720,12 @@ var Sponsorship = function Sponsorship(_ref) {
 };
 var _templateObject$k, _templateObject2$c;
-var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(9ch + 1px);\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (props) {
+var TabText = /*#__PURE__*/styled__default.a(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  text-decoration: none;\n  margin-left: 5px;\n  color: var(--color-primary-black);\n  color: ", ";\n\n  white-space: nowrap;\n  overflow: hidden;\n\n  ", "\n\n  ", "\n\n  @media ", " {\n    width: max-content;\n  }\n"])), function (_ref) {
+  var color = _ref.color;
+  return color ? "var(--color-" + color + ")" : "var(--color-primary-black)";
+}, function (props) {
+  return props.trimText && "\n    text-overflow: ellipsis;\n    max-width: calc(9ch + 1px);\n  ";
+}, function (props) {
   if (props.withIcon === 'left') {
     return "margin-left: 5px;";
   }
@@ -3707,8 +3736,8 @@ var TitleContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_te
     return "\n      flex-direction: row-reverse;\n      svg {\n        margin-right: 6px;\n      }";
   }
   return "\n      svg {\n          margin-left: 6px;\n      }";
-}, function (_ref) {
-  var selected = _ref.selected;
+}, function (_ref2) {
+  var selected = _ref2.selected;
   if (selected) {
     return "\n        cursor: pointer;\n        && a {\n          color: var(--color-primary-red);\n        } \n        && svg path {\n          fill: var(--color-primary-red);\n        } \n      ";
   }
@@ -3731,13 +3760,19 @@ var Tab = function Tab(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     _ref$iconName = _ref.iconName,
     iconName = _ref$iconName === void 0 ? 'DropdownArrow' : _ref$iconName,
+    _ref$iconDirection = _ref.iconDirection,
+    iconDirection = _ref$iconDirection === void 0 ? 'right' : _ref$iconDirection,
     _ref$withIcon = _ref.withIcon,
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     _ref$withTextInMobile = _ref.withTextInMobile,
     withTextInMobile = _ref$withTextInMobile === void 0 ? true : _ref$withTextInMobile,
+    _ref$trimText = _ref.trimText,
+    trimText = _ref$trimText === void 0 ? false : _ref$trimText,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
+    color = _ref.color;
   var clickHandler = function clickHandler() {
     if (onClick) {
       onClick(titleLink);
@@ -3767,31 +3802,36 @@ var Tab = function Tab(_ref) {
     tabIndex: 0,
     className: className
   }, /*#__PURE__*/React__default.createElement(TabText, {
+    id: tabLinkId,
+    trimText: trimText,
+    color: color,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
+    direction: iconDirection,
     iconName: iconName,
     "aria-hidden": "true"
   }));
 };
 var _templateObject$l, _templateObject2$d;
-var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-sans);\n  font-size: var(--harmonic-font-size-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation)\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  text-transform: var(--text-transform-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n  ", "\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--base-color-", ");\n      border-bottom: 1px solid var(--base-color-", ");\n\n      && svg path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
+var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n  border-bottom: ", ";\n\n  && svg path {\n    fill: ", ";\n  }\n\n  @media ", ", ", " {\n    &:hover {\n      color: var(--color-", ");\n      border-bottom: 1px solid var(--color-", ");\n\n      && svg path {\n        fill: var(--color-", ");\n      }\n    }\n  }\n"])), function (_ref) {
   var iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
   var selected = _ref2.selected,
     color = _ref2.color,
     hoverColor = _ref2.hoverColor;
-  return selected ? "var(--base-color-" + hoverColor + ")" : "var(--base-color-" + color + ")";
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, function (_ref3) {
   var selected = _ref3.selected,
     hoverColor = _ref3.hoverColor;
-  return selected ? "1px solid var(--base-color-" + hoverColor + ")" : '1px solid transparent';
+  return selected ? "1px solid var(--color-" + hoverColor + ")" : '1px solid transparent';
 }, function (_ref4) {
   var selected = _ref4.selected,
-    hoverColor = _ref4.hoverColor;
-  return selected ? "&& svg path {\n    fill: var(--base-color-" + hoverColor + ");\n  }" : '';
+    hoverColor = _ref4.hoverColor,
+    color = _ref4.color;
+  return selected ? "var(--color-" + hoverColor + ")" : "var(--color-" + color + ")";
 }, devices.desktop, devices.largeDesktop, function (_ref5) {
   var hoverColor = _ref5.hoverColor;
   return hoverColor;
@@ -3810,9 +3850,9 @@ var TabLink = function TabLink(_ref) {
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
+    color = _ref$color === void 0 ? ThemeColor['base-dark-grey'] : _ref$color,
     _ref$hoverColor = _ref.hoverColor,
-    hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
@@ -4295,9 +4335,8 @@ var Tickbox = function Tickbox(_ref) {
     role: "checkbox",
     "aria-checked": selected ? 'true' : 'false',
     "aria-labelledby": dataLabel
-  }, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: "medium"
   }, children), /*#__PURE__*/React__default.createElement(TickboxInput, {
     type: "checkbox",
     checked: selected,
@@ -5099,7 +5138,7 @@ var MobileMenuContainer = /*#__PURE__*/styled__default(Grid)(_templateObject7$3
   return showSearch ? '110px' : '12px';
 });
 var LogoContainer = /*#__PURE__*/styled__default.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 80px;\n  }\n\n  span > svg path,\n  span > svg g path {\n    fill: var(--color-primary-black);\n  }\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
-var LogoContainerMobile = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
+var LogoContainerMobile = /*#__PURE__*/styled__default.a(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n\n    span > svg path {\n      fill: var(--color-primary-black);\n    }\n  }\n"])), devices.mobileAndTablet);
 var MenuContainer = /*#__PURE__*/styled__default.div(_templateObject0$1 || (_templateObject0$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n  justify-content: space-evenly;\n  width: 100%;\n\n  @media ", " {\n  flex-direction: row;\n  justify-content: space-between;\n  height: 60px;\n  width 100%;\n  }\n"])), devices.mobileAndTablet);
 var NavWrapper = /*#__PURE__*/styled__default.div(_templateObject1 || (_templateObject1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  gap: 32px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 60px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
 var NavContainer = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-end;\n  flex-gap: 32px;\n  width: fit-content;\n\n  @media ", " {\n    flex-gap: 0;\n    height: auto;\n    width: fit-content;\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n"])), devices.mobileAndTablet);
@@ -5273,7 +5312,7 @@ var Basket$1 = function Basket(_ref) {
 };
 var _templateObject$A, _templateObject2$q;
-var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])), function (_ref) {
+var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])), function (_ref) {
   var selected = _ref.selected;
   if (selected) {
     return "\n        border-bottom: 1px solid var(--color-primary-red);\n        && svg path {\n          fill: var(--color-primary-red);\n        }\n      ";
@@ -5282,31 +5321,26 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
 });
 var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
-var Search$1 = function Search(_ref) {
+var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
     onClick = _ref.onClick,
     className = _ref.className;
-  var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.key === 'Enter') {
-      onClick == null || onClick();
-    }
-  };
+  Search$1.displayName = 'Search';
   return /*#__PURE__*/React__default.createElement(SearchContainer, {
-    role: "button",
     "aria-label": "Search",
     selected: selected,
     onClick: onClick,
-    onKeyDown: onKeyDownHandler,
     "data-testid": "search-icon",
     tabIndex: 0,
-    className: className
+    className: className,
+    ref: ref
   }, /*#__PURE__*/React__default.createElement(SvgContainer$1, {
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })));
-};
+});
 /* eslint-disable react/jsx-no-useless-fragment */
 var Dropdown = function Dropdown(_ref) {
@@ -5327,7 +5361,9 @@ var Dropdown = function Dropdown(_ref) {
     withIcon = _ref$withIcon === void 0 ? 'right' : _ref$withIcon,
     className = _ref.className,
     role = _ref.role,
-    ariaLabel = _ref.ariaLabel;
+    ariaLabel = _ref.ariaLabel,
+    tabLinkId = _ref.tabLinkId,
+    trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
     open = _useState[0],
@@ -5423,6 +5459,8 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
+      tabLinkId: tabLinkId,
+      trimText: trimTabText,
       title: title,
       titleLink: titleLink,
       selected: titleSelected,
@@ -5492,6 +5530,7 @@ var Account = function Account(_ref) {
   };
   return /*#__PURE__*/React__default.createElement(Dropdown, {
     role: "group",
+    trimTabText: true,
     ariaLabel: isUserSignedInIcon(iconName) ? "Logged in as " + title : title,
     titleLink: titleLink,
     title: title,
@@ -5500,7 +5539,8 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className
+    className: className,
+    tabLinkId: "account-link"
   });
 };
@@ -5518,12 +5558,14 @@ var NavTop = function NavTop(_ref) {
     onClickSearch = _ref.onClickSearch,
     _ref$isShowSearch = _ref.isShowSearch,
     isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
-    className = _ref.className;
+    className = _ref.className,
+    searchButtonRef = _ref.searchButtonRef;
   return /*#__PURE__*/React__default.createElement(NavTopContainer$1, {
     className: className
   }, /*#__PURE__*/React__default.createElement(Search$1, {
     onClick: onClickSearch,
-    selected: isShowSearch
+    selected: isShowSearch,
+    ref: searchButtonRef
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
@@ -5569,6 +5611,7 @@ var Tabs = function Tabs(_ref) {
   var _useState3 = React.useState(-1),
     hoverOverDropdown = _useState3[0],
     setHoverOverDropdown = _useState3[1];
+  var dropdownRefs = React.useRef([]);
   var onClickHandler = function onClickHandler(value) {
     setOpenMenu(value);
     if (onShowMenu) {
@@ -5608,23 +5651,25 @@ var Tabs = function Tabs(_ref) {
       setHoverOverDropdown(-1);
     }
   };
-  var _onFocus = function onFocus(i) {
-    return setActiveDropdown(i);
+  var onDropdownFocusLeave = function onDropdownFocusLeave() {
+    onResetActive();
   };
-  var _onBlur = function onBlur(i) {
-    var _items$length;
-    if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
+  var handleBlur = function handleBlur(index) {
+    var currentDropdown = dropdownRefs.current[index];
+    var active = document.activeElement;
+    if (currentDropdown && (!active || !currentDropdown.contains(active))) {
       onResetActive();
     }
   };
   return /*#__PURE__*/React__default.createElement(TabsContainer, {
+    role: "menubar",
     className: className
   }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
     showMenu: showMenu
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
       key: "key-" + item.title,
-      text: item.title,
+      text: item.title || '',
       options: item.options,
       onClick: function onClick() {
         return onDropdownClick(index, item.titleLink);
@@ -5636,14 +5681,17 @@ var Tabs = function Tabs(_ref) {
       onMouseLeave: function onMouseLeave() {
         return onDropdownMouseLeave();
       },
-      onFocus: function onFocus() {
-        return _onFocus(index);
+      onFocusLeave: function onFocusLeave() {
+        return onDropdownFocusLeave();
       },
       onBlur: function onBlur() {
-        return _onBlur(index);
+        return handleBlur(index);
       },
       onReset: onResetActive,
-      active: isActiveDropdown(index)
+      active: isActiveDropdown(index),
+      ref: function ref(el) {
+        dropdownRefs.current[index] = el;
+      }
     });
   })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
     "data-testid": "mobile-menu-close",
@@ -5666,30 +5714,56 @@ var Tabs = function Tabs(_ref) {
 var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$a, _templateObject6$7, _templateObject7$4;
 var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: transparent;\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
-var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])));
+var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  as: button;\n  all: unset;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-serif);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--color-base-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+function useFocusTrap(containerRef, onEscape) {
+  React.useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return undefined;
+    var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+    var focusableEls = container.querySelectorAll(focusableSelectors);
+    var firstEl = focusableEls[0];
+    var lastEl = focusableEls[focusableEls.length - 1];
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Tab') {
+        if (focusableEls.length === 0) return;
+        if (e.shiftKey && document.activeElement === firstEl) {
+          e.preventDefault();
+          lastEl == null || lastEl.focus();
+        } else if (!e.shiftKey && document.activeElement === lastEl) {
+          e.preventDefault();
+          firstEl == null || firstEl.focus();
+        }
+      }
+      if (e.key === 'Escape') {
+        onEscape == null || onEscape();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [containerRef, onEscape]);
+}
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
-    className = _ref.className;
+    className = _ref.className,
+    inputRef = _ref.inputRef;
   var _useState = React.useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
   var _useState2 = React.useState(''),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    var _inputRef$current;
-    inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    return function () {
-      var _inputRef$current2;
-      return inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-    };
-  }, [inputRef]);
+  var internalRef = React.useRef(null);
+  var finalInputRef = inputRef != null ? inputRef : internalRef;
+  var containerRef = React.useRef(null);
+  useFocusTrap(containerRef, onClose);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5725,12 +5799,13 @@ var SearchBar = function SearchBar(_ref) {
   var _useViewport = useViewport(),
     isDesktop = _useViewport.isDesktop;
   return /*#__PURE__*/React__default.createElement(SearchBarContainer, {
-    className: className
+    className: className,
+    ref: containerRef
   }, /*#__PURE__*/React__default.createElement(SvgContainerSearch, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })), /*#__PURE__*/React__default.createElement(InputContainer, null, /*#__PURE__*/React__default.createElement("input", {
     "data-testid": "input-html",
-    ref: inputRef,
+    ref: finalInputRef,
     className: "search-input",
     placeholder: "Search the website...",
     type: "text",
@@ -5763,7 +5838,8 @@ var SearchBar = function SearchBar(_ref) {
     tabIndex: 0,
     onClick: onCloseHandler,
     onKeyDown: onKeyboardCloseHandler,
-    "data-testid": "close-icon"
+    "data-testid": "close-icon",
+    "aria-label": "Close search bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   })));
@@ -5780,6 +5856,8 @@ var Navigation = function Navigation(_ref) {
     crest = _ref$crest === void 0 ? false : _ref$crest,
     className = _ref.className,
     logoLink = _ref.logoLink;
+  var searchInputRef = React.useRef(null);
+  var searchButtonRef = React.useRef(null);
   var _useState = React.useState(dataNavTop),
     navTopData = _useState[0],
     setNavTopData = _useState[1];
@@ -5793,6 +5871,12 @@ var Navigation = function Navigation(_ref) {
     fullScreenHeight = _useState4[0],
     setFullScreenHeight = _useState4[1];
   var items = menuData.items;
+  var logoLinkProps = {
+    title: title,
+    href: logoLink,
+    rel: 'noopener noreferrer',
+    'data-roh': dataRoh
+  };
   React.useEffect(function () {
     var _document, _document2;
     var body = (_document = document) == null ? void 0 : _document.body;
@@ -5806,9 +5890,7 @@ var Navigation = function Navigation(_ref) {
     setNavTopData(dataNavTop);
   }, [dataNavTop]);
   var onClickSearchHandler = function onClickSearchHandler() {
-    setshowSearch(function (prev) {
-      return !prev;
-    });
+    setshowSearch(true);
   };
   var onLinkHandler = function onLinkHandler(link) {
     onLink(link);
@@ -5825,7 +5907,23 @@ var Navigation = function Navigation(_ref) {
   };
   var onCloseSearchHandler = function onCloseSearchHandler() {
     setshowSearch(false);
+    setTimeout(function () {
+      var _searchButtonRef$curr;
+      (_searchButtonRef$curr = searchButtonRef.current) == null || _searchButtonRef$curr.focus();
+    }, 0);
   };
+  React.useEffect(function () {
+    if (showSearch) {
+      var timer = setTimeout(function () {
+        var _searchInputRef$curre;
+        (_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
+      }, 50);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [showSearch]);
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
@@ -5845,16 +5943,11 @@ var Navigation = function Navigation(_ref) {
     columnSpanDesktop: 18,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, {
-    "data-roh": dataRoh,
-    rel: "noopener noreferrer",
-    href: logoLink,
-    title: title
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(MenuContainer, null, /*#__PURE__*/React__default.createElement(LogoContainer, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
     "data-testid": crest ? 'NavLogoWithCrest' : 'NavLogoNoCrest',
     "aria-hidden": "true"
-  })), /*#__PURE__*/React__default.createElement(LogoContainerMobile, null, /*#__PURE__*/React__default.createElement(Icon, {
+  })), /*#__PURE__*/React__default.createElement(LogoContainerMobile, Object.assign({}, logoLinkProps), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "NavLogoMobile"
   })), /*#__PURE__*/React__default.createElement(NavWrapper, null, /*#__PURE__*/React__default.createElement(NavContainer, null, /*#__PURE__*/React__default.createElement(Tabs, {
     items: items,
@@ -5872,7 +5965,8 @@ var Navigation = function Navigation(_ref) {
     basketNumVirtualItems: navTopData.basketNumVirtualItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
-    isShowSearch: showSearch
+    isShowSearch: showSearch,
+    searchButtonRef: searchButtonRef
   }))))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
     visible: showSearch
   }), /*#__PURE__*/React__default.createElement(GridItemSearch, {
@@ -5883,6 +5977,7 @@ var Navigation = function Navigation(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(SearchBar, {
+    inputRef: searchInputRef,
     onClick: onSearchHandler,
     onClose: onCloseSearchHandler
   })))), showMenu && (/*#__PURE__*/React__default.createElement(NavigationGridMobile, {
@@ -8818,101 +8913,104 @@ var Information = function Information(_ref) {
 };
 var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
-var PageHeadingWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__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;
+var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: var(--page-header-bg-color);\n  color: var(--color-base-white);\n\n  ", ";\n\n  h1,\n  h2,\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    padding-bottom: 42px;\n  ";
 }, devices.mobile);
 var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$L || (_templateObject2$L = /*#__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$2 = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__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 BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 35px;\n  padding-bottom: 20px;\n\n  ", ";\n"])), function (_ref2) {
+  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    height: 50px;\n    padding-bottom: 0;\n    margin: 10px 0;\n  ";
+});
+var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), function (_ref3) {
   var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin-top: 42px;\n  ";
 }, devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
+var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 43px;\n\n  ", ";\n\n  @media ", " {\n    & {\n      height: 33px;\n      margin-top: 10px;\n      margin-bottom: 20px;\n    }\n  }\n"])), function (_ref4) {
   var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
-var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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$h || (_templateObject6$h = /*#__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$c || (_templateObject7$c = /*#__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$8 || (_templateObject8$8 = /*#__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 TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-white);\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(_templateObject7$c || (_templateObject7$c = /*#__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  ", ";\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_ref5) {
+  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 40px;\n  ";
+}, devices.mobile, function (_ref6) {
+  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
+  return isPageHeadingWithoutTitle && "\n    margin-top: 15px;\n   ";
+});
+var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
-var _excluded$k = ["text"];
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
+    hierarchy = _ref.hierarchy,
     text = _ref.text,
     link = _ref.link,
     _ref$sponsor = _ref.sponsor,
     sponsor = _ref$sponsor === void 0 ? false : _ref$sponsor,
     children = _ref.children,
-    _ref$semanticLevel = _ref.semanticLevel,
-    semanticLevel = _ref$semanticLevel === void 0 ? 1 : _ref$semanticLevel,
     _ref$copyCharLimit = _ref.copyCharLimit,
     copyCharLimit = _ref$copyCharLimit === void 0 ? 250 : _ref$copyCharLimit,
     _ref$titleCharLimit = _ref.titleCharLimit,
-    titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
-  var _ref2 = link || {},
-    linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
+    titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit,
+    className = _ref.className,
+    showBadge = _ref.showBadge,
+    theme = _ref.theme;
+  var themedLink = link && _extends({}, link, {
+    textColor: ThemeColor['base-black'],
+    backgroundColor: ThemeColor['base-white'],
+    hoveredColor: ThemeColor['white-hovered'],
+    pressedColor: ThemeColor['white-pressed']
+  });
+  var linkText = themedLink == null ? void 0 : themedLink.text;
   var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
   var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
   var isTitleUnAvailable = !title;
+  var renderBadge = function renderBadge(currentTheme) {
+    if (!showBadge) return null;
+    switch (currentTheme) {
+      case exports.ThemeType.Cinema:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(CinemaBadge, {
+          align: "left"
+        }));
+      case exports.ThemeType.Stream:
+        return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
+          isPageHeadingWithoutTitle: isTitleUnAvailable
+        }, /*#__PURE__*/React__default.createElement(StreamBadge, {
+          align: "left"
+        }));
+      default:
+        return null;
+    }
+  };
   return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
+    className: className,
     "data-testid": "page-heading-wrapper",
     isPageHeadingWithoutTitle: isTitleUnAvailable
   }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
     "data-testid": "page-heading-title",
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
+  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
     isPageHeadingWithoutTitle: isTitleUnAvailable
-  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(Header, {
-    level: 2,
-    semanticLevel: semanticLevel
+  }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    color: "white",
+    size: "large",
+    hierarchy: hierarchy
   }, truncatedTitle))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
     "data-testid": "page-heading-text"
-  }, /*#__PURE__*/React__default.createElement(PageHeadingText, {
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    color: "white",
+    size: "large",
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
   }))) : null, sponsor ? (/*#__PURE__*/React__default.createElement(LogoWrapper, {
-    "data-testid": "page-heading-sponsor"
-  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, link ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
+    "data-testid": "page-heading-sponsor",
+    isPageHeadingWithoutTitle: isTitleUnAvailable
+  }, /*#__PURE__*/React__default.createElement(Sponsorship, null))) : null, themedLink ? (/*#__PURE__*/React__default.createElement(ButtonWrapper$1, {
     "data-testid": "page-heading-link"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
-};
-var _excluded$l = ["link"];
-var PageHeadingCore = function PageHeadingCore(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  var coreLink = link && _extends({}, link, {
-    color: ThemeColor['base-white'],
-    bgColor: ThemeColor['base-black']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: exports.ThemeType.Core
-  }, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: coreLink
-  })));
-};
-var _excluded$m = ["link"];
-var PageHeadingCinema = function PageHeadingCinema(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
-  var cinemaLink = link && _extends({}, link, {
-    color: ThemeColor['base-black'],
-    bgColor: ThemeColor['base-white']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: exports.ThemeType.Cinema
-  }, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: cinemaLink
-  }), /*#__PURE__*/React__default.createElement(CinemaBadge, {
-    align: "left"
-  })));
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
 };
 var _templateObject$$, _templateObject2$M, _templateObject3$z, _templateObject4$u, _templateObject5$n, _templateObject6$i, _templateObject7$d, _templateObject8$9;
@@ -8925,7 +9023,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__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$9 || (_templateObject8$9 = /*#__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$n = ["text"];
+var _excluded$k = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -8943,7 +9041,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$n);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -8981,8 +9079,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollHref,
-    color: exports.Colors.White,
-    hoverColor: exports.Colors.White
+    color: ThemeColor['base-white'],
+    hoverColor: ThemeColor['base-white']
   }, "Scroll Down"))) : null);
 };
@@ -9020,8 +9118,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
     iconName: "Arrow",
     iconDirection: "down",
     href: scrollTo,
-    color: color === exports.Colors.White ? exports.Colors.Black : exports.Colors.White,
-    hoverColor: color === exports.Colors.White ? exports.Colors.Black : exports.Colors.White
+    color: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white'],
+    hoverColor: color === ThemeColor['base-white'] ? ThemeColor['base-black'] : ThemeColor['base-white']
   }, "Scroll Down")))), hasImage && (/*#__PURE__*/React__default.createElement(RightPanel, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
@@ -9030,28 +9128,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   })))));
 };
-var _templateObject$11;
-var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
-var _excluded$o = ["link"];
-var PageHeadingStream = function PageHeadingStream(_ref) {
-  var link = _ref.link,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-  var streamLink = link && _extends({}, link, {
-    color: ThemeColor['base-black'],
-    bgColor: ThemeColor['base-white']
-  });
-  return /*#__PURE__*/React__default.createElement(Theme, {
-    theme: exports.ThemeType.Stream
-  }, /*#__PURE__*/React__default.createElement(StreamWrapper, null, /*#__PURE__*/React__default.createElement(PageHeading, Object.assign({}, rest, {
-    link: streamLink
-  }), /*#__PURE__*/React__default.createElement(StreamBadge, {
-    align: "left"
-  }))));
-};
-var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
-var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
+var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__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$B || (_templateObject3$B = /*#__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 ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__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);
@@ -9062,7 +9140,7 @@ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$p || (_te
   var showBlock = _ref2.showBlock;
   return showBlock ? 'block' : 'none';
 }, devices.mobile);
-var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    height: 32px;\n  }\n\n  @media ", " {\n    margin-bottom: 12px;\n  }\n"])), devices.mobile);
+var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__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$e || (_templateObject7$e = /*#__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';
@@ -9094,7 +9172,7 @@ var Badge = function Badge(_ref) {
   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, {
+  return /*#__PURE__*/React__default.createElement(BadgeWrapper$2, {
     "data-testid": "promo-heading-badge"
   }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
     fillColor: color,
@@ -9264,8 +9342,8 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
   })))))))))));
 };
-var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
-var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__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 _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
+var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__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$P || (_templateObject2$P = /*#__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$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__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);
@@ -9377,7 +9455,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
-var _excluded$p = ["text"];
+var _excluded$l = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -9479,13 +9557,11 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     brandingText = _ref4.brandingText,
     brandingLink = _ref4.brandingLink,
     _ref4$showCopy = _ref4.showCopy,
-    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy,
-    _ref4$semanticLevel = _ref4.semanticLevel,
-    semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
+    showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$p);
-  var titleSize = title && title.length > 20 ? 4 : 3;
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
+  // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
     desktop: videoUrlDesktop,
@@ -9511,17 +9587,17 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     brandingText: brandingText,
     brandingLink: brandingLink,
     invert: invert
-  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(Header, {
-    level: titleSize,
-    semanticLevel: semanticLevel
+  }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+    size: "large",
+    hierarchy: "h1"
   }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
     invert: invert,
     className: "page-heading-compact__button"
   }), linkText))))));
 };
-var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x;
-var MorePages = /*#__PURE__*/styled__default.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var _templateObject$13, _templateObject2$Q, _templateObject3$D, _templateObject4$x;
+var MorePages = /*#__PURE__*/styled__default.span(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
 var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject2$Q || (_templateObject2$Q = /*#__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$D || (_templateObject3$D = /*#__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) {
@@ -9594,8 +9670,8 @@ var Pagination = function Pagination(_ref) {
   })))));
 };
-var _templateObject$15, _templateObject2$R, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$15 || (_templateObject$15 = /*#__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 _templateObject$14, _templateObject2$R, _templateObject3$E, _templateObject4$y, _templateObject5$r, _templateObject6$l, _templateObject7$g;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$14 || (_templateObject$14 = /*#__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$R || (_templateObject2$R = /*#__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$E || (_templateObject3$E = /*#__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$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
@@ -9658,8 +9734,8 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
-var _templateObject$16, _templateObject2$S, _templateObject3$F, _templateObject4$z;
-var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var _templateObject$15, _templateObject2$S, _templateObject3$F, _templateObject4$z;
+var ReplacementWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$S || (_templateObject2$S = /*#__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)";
@@ -9783,14 +9859,14 @@ var CreditListing = function CreditListing(_ref) {
   }, creditEntries);
 };
-var _templateObject$17, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 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$17 || (_templateObject$17 = /*#__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$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\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -9859,7 +9935,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject17
 var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__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$q = ["text"],
+var _excluded$m = ["text"],
   _excluded2$4 = ["text"],
   _excluded3 = ["text"];
 var _buttonTypeToButton$2;
@@ -9922,7 +9998,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -10035,10 +10111,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
-var _templateObject$18, _templateObject2$U, _templateObject3$H, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
+var _templateObject$17, _templateObject2$U, _templateObject3$H, _templateObject4$B, _templateObject5$t, _templateObject6$n, _templateObject7$i;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$18 || (_templateObject$18 = /*#__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$17 || (_templateObject$17 = /*#__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) {
@@ -10078,8 +10154,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i ||
   return '';
 });
-var _templateObject$19;
-var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__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$18;
+var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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;
@@ -10191,7 +10267,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
-var _excluded$r = ["text"],
+var _excluded$n = ["text"],
   _excluded2$5 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -10216,7 +10292,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -10258,8 +10334,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$1a;
-var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$19;
+var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -10314,8 +10390,8 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
-var _templateObject$1b, _templateObject2$V, _templateObject3$I;
-var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var _templateObject$1a, _templateObject2$V, _templateObject3$I;
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__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';
@@ -10401,8 +10477,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error))));
 };
-var _templateObject$1c, _templateObject2$W, _templateObject3$J;
-var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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 _templateObject$1b, _templateObject2$W, _templateObject3$J;
+var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__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$W || (_templateObject2$W = /*#__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$J || (_templateObject3$J = /*#__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);
@@ -10460,8 +10536,8 @@ var StatusBanner = function StatusBanner(_ref) {
   return null;
 };
-var _templateObject$1d;
-var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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$1c;
+var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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,
@@ -10489,8 +10565,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description)))));
 };
-var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
-var stateStyles = /*#__PURE__*/styled.css(_templateObject$1e || (_templateObject$1e = /*#__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$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
+var stateStyles = /*#__PURE__*/styled.css(_templateObject$1d || (_templateObject$1d = /*#__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) {
@@ -10870,8 +10946,8 @@ function Select(_ref3) {
   })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
-var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$D;
-var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$1e, _templateObject2$Y, _templateObject3$L, _templateObject4$D;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__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';
@@ -10900,7 +10976,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_temp
   return "var(--base-color-errorstate)";
 });
-var _excluded$s = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$o = ["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"
@@ -10951,7 +11027,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$s);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -10969,7 +11045,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
-var _excluded$t = ["label", "error", "width", "darkMode", "components"];
+var _excluded$p = ["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
@@ -10991,7 +11067,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$t);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -11008,8 +11084,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
   })));
 };
-var _templateObject$1g, _templateObject2$Z;
-var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1g || (_templateObject$1g = /*#__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$1f, _templateObject2$Z;
+var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1f || (_templateObject$1f = /*#__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;
@@ -11053,8 +11129,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
-var _templateObject$1h, _templateObject2$_, _templateObject3$M;
-var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var _templateObject$1g, _templateObject2$_, _templateObject3$M;
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
 var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -11084,8 +11160,8 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
-var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$v, _templateObject6$p;
-var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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 _templateObject$1h, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$v, _templateObject6$p;
+var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__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$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
@@ -11128,8 +11204,8 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
-var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$w;
-var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__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 _templateObject$1i, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$w;
+var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__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$10 || (_templateObject2$10 = /*#__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$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
@@ -11220,8 +11296,8 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
 };
-var _templateObject$1k, _templateObject2$11, _templateObject3$P, _templateObject4$G, _templateObject5$x;
-var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var _templateObject$1j, _templateObject2$11, _templateObject3$P, _templateObject4$G, _templateObject5$x;
+var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$11 || (_templateObject2$11 = /*#__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$P || (_templateObject3$P = /*#__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$G || (_templateObject4$G = /*#__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) {
@@ -11384,8 +11460,8 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
-var _templateObject$1l, _templateObject2$12, _templateObject3$Q, _templateObject4$H, _templateObject5$y, _templateObject6$q;
-var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var _templateObject$1k, _templateObject2$12, _templateObject3$Q, _templateObject4$H, _templateObject5$y, _templateObject6$q;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
@@ -11478,8 +11554,8 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
-var _templateObject$1m, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
-var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
+var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$I || (_templateObject4$I = /*#__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) {
@@ -11682,8 +11758,8 @@ var Table = function Table(_ref) {
   }))))))))));
 };
-var _templateObject$1n, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
-var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
+var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
+var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-top: 4px solid ", ";\n  border-bottom: 4px solid ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return "var(--color-" + theme + ")";
 }, function (_ref2) {
@@ -12106,8 +12182,8 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
-var _templateObject$1o, _templateObject3$T, _templateObject4$K;
-var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
+var _templateObject$1n, _templateObject3$T, _templateObject4$K;
+var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
 var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
 var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
@@ -12362,11 +12438,11 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
   return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
 };
-var _excluded$u = ["logo", "slides"];
+var _excluded$q = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12383,10 +12459,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
-var _excluded$v = ["slides"];
+var _excluded$r = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12400,11 +12476,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
-var _excluded$w = ["logo", "slides"];
+var _excluded$s = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12421,8 +12497,8 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
-var _templateObject$1p, _templateObject3$U;
-var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
+var _templateObject$1o, _templateObject3$U;
+var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
 var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
 var MinimalCarousel = function MinimalCarousel(_ref) {
@@ -12458,8 +12534,8 @@ var MinimalCarousel = function MinimalCarousel(_ref) {
   }))));
 };
-var _templateObject$1q;
-var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1q || (_templateObject$1q = /*#__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 _templateObject$1p;
+var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__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) {
@@ -13458,13 +13534,11 @@ exports.ModalWindow = ModalWindow;
 exports.Navigation = Navigation;
 exports.NavigationText = NavigationText;
 exports.Overline = Overline;
-exports.PageHeadingCinema = PageHeadingCinema;
+exports.PageHeading = PageHeading;
 exports.PageHeadingCompact = PageHeadingCompact;
-exports.PageHeadingCore = PageHeadingCore;
 exports.PageHeadingImpact = PageHeadingImpact;
 exports.PageHeadingPanel = PageHeadingPanel;
 exports.PageHeadingPromo = PageHeadingPromo;
-exports.PageHeadingStream = PageHeadingStream;
 exports.Pagination = Pagination;
 exports.PasswordStrength = PasswordStrength;
 exports.PeopleListing = PeopleListing;