@royaloperahouse/chord 0.5.11 → 0.7.2

package/dist/chord.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, useMemo } from 'react';
 import styled, { ThemeProvider, createGlobalStyle } from 'styled-components';
 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
 import 'swiper/swiper-bundle.css';
@@ -2190,8 +2190,175 @@ var CinemaBadge = function CinemaBadge(_ref) {
   }))));
 };
 
-var _templateObject$9;
-var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  path {\n    fill: var(--base-color-", ");\n  }\n"])), function (_ref) {
+var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
+var zIndexes = {};
+zLevels.forEach(function (name, index) {
+  zIndexes[name] = index;
+});
+
+var _templateObject$9, _templateObject2$1, _templateObject3;
+var TabContainer = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n"])));
+var OptionItem = /*#__PURE__*/styled.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n  text-decoration: none;\n  cursor: pointer;\n  text-transform: uppercase;\n\n  :hover,\n  :focus {\n    color: var(--base-color-", ");\n  }\n"])), function (_ref) {
+  var colorPrimary = _ref.colorPrimary;
+  return colorPrimary;
+});
+var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border: 1px solid var(--base-color-light-grey);\n  border-top-color: var(--base-color-", ");\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--navigation-small-gap);\n  padding: var(--navigation-middle-gap);\n  position: absolute;\n  top: 24px;\n  min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n  max-width: max-content;\n  white-space: nowrap;\n  z-index: ", ";\n\n  ", "\n\n  @media ", " {\n    padding-left: 0px;\n    padding-bottom: 0px;\n    row-gap: var(--navigation-large-gap);\n    border: 0;\n    background-color: none;\n\n    ", "\n  }\n"])), function (_ref2) {
+  var colorPrimary = _ref2.colorPrimary;
+  return colorPrimary;
+}, zIndexes.menu, function (props) {
+  if (props.withIcon === 'none') {
+    return "\n        top: 21px;\n    ";
+  }
+
+  return "";
+}, devices.mobileAndTablet, function (props) {
+  if (props.withOptionsInMobile) {
+    return "\n          position: relative;\n          top: 0px;\n      ";
+  }
+
+  return "\n        display: none;\n    ";
+});
+
+var _templateObject$a, _templateObject2$2, _templateObject3$1, _templateObject4;
+var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$2 || (_templateObject2$2 = /*#__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(--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-black);\n  text-decoration: none;\n  text-transform: uppercase;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref) {
+  var active = _ref.active,
+      activeColor = _ref.activeColor;
+
+  if (active) {
+    return "\n      & {\n        border-bottom: 1px solid " + activeColor + ";\n        color: var(--base-color-" + activeColor + ");\n      }\n      && svg path {\n        fill: var(--base-color-" + activeColor + ");\n      } \n      ";
+  } else {
+    return '';
+  }
+});
+var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
+  as: 'a'
+})(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var IconWrapper = /*#__PURE__*/styled.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n"])));
+
+var ControlledDropdown = function ControlledDropdown(_ref) {
+  var text = _ref.text,
+      options = _ref.options,
+      _ref$activeColor = _ref.activeColor,
+      activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
+      active = _ref.active,
+      onClick = _ref.onClick,
+      onOptionClick = _ref.onOptionClick,
+      _onMouseEnter = _ref.onMouseEnter,
+      _onMouseLeave = _ref.onMouseLeave,
+      onReset = _ref.onReset,
+      _onFocus = _ref.onFocus,
+      _onBlur = _ref.onBlur;
+  var ref = useRef();
+  var resetHandler = useCallback(function () {
+    return onReset == null ? void 0 : onReset();
+  }, []);
+  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);
+      };
+    }
+
+    return;
+  }, [ref, resetHandler, active]);
+
+  var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
+    if (e.key === 'Enter') {
+      onOptionClick == null ? void 0 : onOptionClick(link);
+    } else if (e.key === 'Escape') {
+      resetHandler();
+    }
+  };
+
+  var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
+    if (e.key === 'Enter') {
+      onClick == null ? void 0 : onClick();
+    } else if (e.key === 'Escape') {
+      resetHandler();
+    }
+  };
+
+  var handleOptionBlur = function handleOptionBlur(i) {
+    if (i === ((options == null ? void 0 : options.length) || 0) - 1) {
+      _onBlur == null ? void 0 : _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();
+    }
+  };
+  var headerEvents = {
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+      onClick == null ? void 0 : onClick();
+    },
+    onFocus: function onFocus() {
+      return _onFocus == null ? void 0 : _onFocus();
+    },
+    onBlur: function onBlur() {
+      return !isDropdown && (_onBlur == null ? void 0 : _onBlur());
+    },
+    onKeyDown: handleHeaderKeyDown
+  };
+  return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
+    ref: ref
+  }, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
+    active: active,
+    activeColor: activeColor
+  }, headerEvents, {
+    tabIndex: 0,
+    "data-testid": "span-container"
+  }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
+    "data-testid": "dropdown-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow"
+  }))), active && options ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
+    colorPrimary: activeColor,
+    withOptionsInMobile: true
+  }, options.map(function (optionItem, index) {
+    return /*#__PURE__*/React__default.createElement(OptionItem, {
+      key: "key-" + index + "-" + optionItem.option,
+      onClick: function onClick() {
+        return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
+      },
+      onKeyDown: function onKeyDown(e) {
+        return handleOptionKeyDown(e, optionItem.optionLink);
+      },
+      colorPrimary: activeColor,
+      tabIndex: 0,
+      onBlur: function onBlur() {
+        return handleOptionBlur(index);
+      }
+    }, optionItem.option);
+  })) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
+    active: active,
+    activeColor: activeColor
+  }, headerEvents, {
+    "data-testid": "link-container",
+    tabIndex: 0
+  }), text));
+};
+
+var _templateObject$b;
+var SecondaryLogoWrapper = /*#__PURE__*/styled.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  path {\n    fill: var(--base-color-", ");\n  }\n"])), function (_ref) {
   var fillColor = _ref.fillColor;
   return fillColor;
 });
@@ -2215,8 +2382,8 @@ var SecondaryLogo = function SecondaryLogo(_ref) {
   })));
 };
 
-var _templateObject$a;
-var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 172px;\n"])));
+var _templateObject$c;
+var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 172px;\n"])));
 
 var SponsorLogo = function SponsorLogo(_ref) {
   var _ref$colorLogo = _ref.colorLogo,
@@ -2426,11 +2593,11 @@ var SponsorLogo = function SponsorLogo(_ref) {
   })))));
 };
 
-var _templateObject$b;
+var _templateObject$d;
 var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
-var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
+var SponsorshipStyled = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
 
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
@@ -2448,9 +2615,9 @@ var Sponsorship = function Sponsorship(_ref) {
   }));
 };
 
-var _templateObject$c, _templateObject2$1;
-var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n"])));
-var Splitter = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 4px;\n  background: var(--base-color-lightgrey);\n"])));
+var _templateObject$e, _templateObject2$3;
+var SectionSplitterContainer = /*#__PURE__*/styled(Grid)(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 4px;\n"])));
+var Splitter = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 4px;\n  background: var(--base-color-lightgrey);\n"])));
 
 var SectionSplitter = function SectionSplitter(_ref) {
   var _ref$fullWidth = _ref.fullWidth,
@@ -2495,8 +2662,8 @@ var AspectRatioWidth;
   AspectRatioWidth["16 / 9"] = "1.78";
 })(AspectRatioWidth || (AspectRatioWidth = {}));
 
-var _templateObject$d;
-var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    position: relative;\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\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$f;
+var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: ", ";\n\n  @supports not (aspect-ratio: ", ") {\n    position: relative;\n    width: 100%;\n    padding-top: ", "%;\n  }\n\n  img {\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 ? AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -2514,8 +2681,8 @@ var ImageAspectRatioWrapper = /*#__PURE__*/styled.div(_templateObject$d || (_tem
   return aspectRatio;
 });
 
-var _templateObject$e, _templateObject2$2;
-var TabText = /*#__PURE__*/styled.a(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n  margin-right: 0px;\n  margin-top: 5px;\n  text-decoration: none;\n  text-transform: uppercase;\n\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (props) {
+var _templateObject$g, _templateObject2$4;
+var TabText = /*#__PURE__*/styled.a(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n  margin-right: 0px;\n  margin-top: 5px;\n  text-decoration: none;\n  text-transform: uppercase;\n\n  ", "\n\n  @media ", " {\n    ", "\n  }\n"])), function (props) {
   if (props.withIcon === 'left') {
     return "margin-left: 5px;";
   }
@@ -2528,7 +2695,7 @@ var TabText = /*#__PURE__*/styled.a(_templateObject$e || (_templateObject$e = /*
 
   return "";
 });
-var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  border-bottom: 1px solid transparent;\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  ", "\n\n  ", "\n\n  @media ", " {\n    svg {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (props) {
+var TitleContainer = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  border-bottom: 1px solid transparent;\n\n  ", "\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  ", "\n\n  ", "\n\n  @media ", " {\n    svg {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (props) {
   if (props.withIcon === 'left') {
     return "\n      flex-direction: row-reverse;\n      svg {\n        margin-right: 6px;\n      }";
   }
@@ -2614,8 +2781,8 @@ var Tab = function Tab(_ref) {
   }));
 };
 
-var _templateObject$f, _templateObject2$3;
-var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$f || (_templateObject$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-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 _templateObject$h, _templateObject2$5;
+var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: ", ";\n  font-family: var(--font-family-navigation);\n  font-size: var(--font-size-navigation);\n  font-weight: var(--font-weight-navigation);\n  line-height: var(--line-height-navigation);\n  letter-spacing: var(--letter-spacing-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 iconName = _ref.iconName;
   return iconName ? 'calc(var(--text-link-underline-offset) - 4px) 0' : 'var(--text-link-underline-offset) 0';
 }, function (_ref2) {
@@ -2641,7 +2808,7 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$f || (_templateObject
   var hoverColor = _ref7.hoverColor;
   return hoverColor;
 });
-var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
+var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
 
 var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
 
@@ -2668,8 +2835,40 @@ var TabLink = function TabLink(_ref) {
   })) : null, children);
 };
 
-var _templateObject$g;
-var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$g || (_templateObject$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-", ");\n  font-feature-settings: var(--font-feature-settings-", ");\n  font-size: var(--font-size-", "-", ");\n  font-weight: var(--font-weight-", "-", ");\n  letter-spacing: var(--letter-spacing-", "-", ");\n  line-height: var(--line-height-", "-", ");\n  text-transform: var(--text-transform-", ");\n  word-break: var(--word-break-", ");\n"])), function (_ref) {
+var _templateObject$i, _templateObject2$6;
+var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
+  var iconName = _ref.iconName;
+  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+});
+var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
+
+var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
+
+var TextLink = function TextLink(_ref) {
+  var children = _ref.children,
+      iconName = _ref.iconName,
+      iconDirection = _ref.iconDirection,
+      color = _ref.color,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  var truncatedString = children.substring(0, 30);
+  return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
+    color: color,
+    iconName: iconName
+  }, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
+    "data-testid": "text-link-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: iconName,
+    direction: iconDirection,
+    color: color
+  })) : null);
+};
+
+var _templateObject$j;
+var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-", ");\n  font-feature-settings: var(--font-feature-settings-", ");\n  font-size: var(--font-size-", "-", ");\n  font-weight: var(--font-weight-", "-", ");\n  letter-spacing: var(--letter-spacing-", "-", ");\n  line-height: var(--line-height-", "-", ");\n  text-transform: var(--text-transform-", ");\n  word-break: var(--word-break-", ");\n"])), function (_ref) {
   var typography = _ref.typography;
   return typography;
 }, function (_ref2) {
@@ -2775,16 +2974,16 @@ var Subtitle = function Subtitle(_ref6) {
   }, children);
 };
 
-var _templateObject$h, _templateObject2$4, _templateObject3;
-var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])), function (_ref) {
+var _templateObject$k, _templateObject2$7, _templateObject3$2;
+var TickboxLabel = /*#__PURE__*/styled.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  width: fit-content;\n  position: relative;\n  padding-left: 32px;\n  color: var(--base-color-", ");\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])), function (_ref) {
   var dark = _ref.dark;
   return dark ? 'white' : 'black';
 });
-var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 1px;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  padding: 3px;\n  box-sizing: border-box;\n  border: 1px solid var(--base-color-", ");\n\n  svg {\n    display: none;\n  }\n\n  @media ", " {\n    top: 0;\n  }\n"])), function (_ref2) {
+var TickboxCheckmark = /*#__PURE__*/styled.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 1px;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  padding: 3px;\n  box-sizing: border-box;\n  border: 1px solid var(--base-color-", ");\n\n  svg {\n    display: none;\n  }\n\n  @media ", " {\n    top: 0;\n  }\n"])), function (_ref2) {
   var dark = _ref2.dark;
   return dark ? 'white' : 'black';
 }, devices.mobile);
-var TickboxInput = /*#__PURE__*/styled.input(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
+var TickboxInput = /*#__PURE__*/styled.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n\n  &:checked ~ ", " {\n    background-color: var(--base-color-", ");\n    & svg {\n      display: block;\n      path {\n        fill: var(--base-color-", ");\n      }\n    }\n  }\n"])), TickboxCheckmark, function (_ref3) {
   var dark = _ref3.dark;
   return dark ? 'white' : 'black';
 }, function (_ref4) {
@@ -2836,8 +3035,8 @@ var Tickbox = function Tickbox(_ref) {
   })));
 };
 
-var _templateObject$i;
-var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\n    color: var(--base-color-black);\n    display: inline-block;\n    margin: 0;\n  }\n\n  & li:before {\n    content: '\u2014';\n    margin: 0 0.5em;\n  }\n\n  & li:first-child:before {\n    display: none;\n  }\n"])));
+var _templateObject$l;
+var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  & li {\n    color: var(--base-color-black);\n    display: inline-block;\n    margin: 0;\n  }\n\n  & li:before {\n    content: '\u2014';\n    margin: 0 0.5em;\n  }\n\n  & li:first-child:before {\n    display: none;\n  }\n"])));
 
 var TypeTags = function TypeTags(_ref) {
   var list = _ref.list;
@@ -2850,13 +3049,13 @@ var TypeTags = function TypeTags(_ref) {
   }));
 };
 
-var _templateObject$j, _templateObject2$5, _templateObject3$1;
-var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n"])));
-var IconWrapper = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--rotator-button-width);\n  height: var(--rotator-button-width);\n  background-color: var(--base-color-lightgrey);\n  color: var(--base-color-black);\n\n  svg {\n    width: var(--rotator-button-icon-width);\n    height: var(--rotator-button-icon-width);\n  }\n\n  svg path {\n    fill: var(--base-color-black);\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n  }\n\n  @media ", " {\n    background-color: var(--base-color-black);\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n\n    :hover {\n      cursor: default;\n      background-color: var(--base-color-black);\n\n      && svg path {\n        fill: var(--base-color-white);\n      }\n    }\n  }\n"])), function (_ref) {
+var _templateObject$m, _templateObject2$8, _templateObject3$3;
+var ButtonsContainer = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n"])));
+var IconWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--rotator-button-width);\n  height: var(--rotator-button-width);\n  background-color: var(--base-color-lightgrey);\n  color: var(--base-color-black);\n\n  svg {\n    width: var(--rotator-button-icon-width);\n    height: var(--rotator-button-icon-width);\n  }\n\n  svg path {\n    fill: var(--base-color-black);\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n  }\n\n  @media ", " {\n    background-color: var(--base-color-black);\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n\n    :hover {\n      cursor: default;\n      background-color: var(--base-color-black);\n\n      && svg path {\n        fill: var(--base-color-white);\n      }\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, devices.mobileAndTablet);
-var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--navigation-large-margin);\n  height: var(--navigation-large-margin);\n  background-color: var(--base-color-lightgrey);\n  color: var(--base-color-black);\n  opacity: 0.2;\n\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n\n  svg path {\n    fill: var(--base-color-black);\n  }\n\n  @media ", " {\n    opacity: 1;\n    pointer-events: none;\n    background-color: var(--base-color-black);\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n  }\n"])), devices.mobileAndTablet);
+var IconUnavailableWrapper = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n  display: flex;\n  align-items: center;\n  width: var(--navigation-large-margin);\n  height: var(--navigation-large-margin);\n  background-color: var(--base-color-lightgrey);\n  color: var(--base-color-black);\n  opacity: 0.2;\n\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n\n  svg path {\n    fill: var(--base-color-black);\n  }\n\n  @media ", " {\n    opacity: 1;\n    pointer-events: none;\n    background-color: var(--base-color-black);\n\n    && svg path {\n      fill: var(--base-color-white);\n    }\n  }\n"])), devices.mobileAndTablet);
 
 var RotatorButtons = function RotatorButtons(_ref) {
   var onClickPrev = _ref.onClickPrev,
@@ -2903,14 +3102,14 @@ var RotatorButtons = function RotatorButtons(_ref) {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper, {
+  return /*#__PURE__*/React__default.createElement(ButtonsContainer, null, availablePrev ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
     onClick: onClickLeftHandler,
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
     "data-testid": "iconprev"
   }, renderPrevIcon()) : /*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     "data-testid": "iconprevnoavailable"
-  }, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper, {
+  }, renderPrevIcon()), availableNext ? /*#__PURE__*/React__default.createElement(IconWrapper$1, {
     onClick: onClickRightHandler,
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
@@ -2920,17 +3119,11 @@ var RotatorButtons = function RotatorButtons(_ref) {
   }, renderNextIcon()));
 };
 
-var zLevels = ['base', 'content', 'contentOverlay', 'anchor', 'searchOverlay', 'navigation', 'search', 'menu', 'overlay', 'popup'];
-var zIndexes = {};
-zLevels.forEach(function (name, index) {
-  zIndexes[name] = index;
-});
-
-var _templateObject$k, _templateObject2$6, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
-var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
-var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
-var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  height: 100px;\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n \n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
+var _templateObject$n, _templateObject2$9, _templateObject3$4, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  width: 100vw;\n  position: absolute;\n  z-index: ", ";\n  opacity: 0.4;\n"])), zIndexes.searchOverlay);
+var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: var(--base-color-white);\n  height: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n  }\n"])), zIndexes.navigation, devices.mobile);
+var SearchBackground = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  height: 100px;\n  border-top: 1px solid var(--base-color-light-grey);\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n\n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
+var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border-top: 1px solid var(--base-color-light-grey);\n  height: 100px;\n  width: 100%\n  position: absolute;\n  top: 140px;\n  z-index: ", ";\n \n  @media ", " {\n    height: 80px;\n    top: 80px;\n  }\n"])), zIndexes.search, devices.mobile);
 var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet);
 var LogoContainer = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 140px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  &&& .logoImg {\n    height: 96px;\n    width: 66px;\n  }\n\n  @media ", " {\n    height: 80px;\n\n    &&& .logoImg {\n      width: 100%;\n      height: 64px;\n    }\n  }\n"])), devices.mobile);
 var MenuContainer = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 140px;\n\n  @media ", " {\n    flex-direction: row;\n    height: 80px;\n    justify-content: flex-end;\n  }\n"])), devices.mobileAndTablet);
@@ -2938,8 +3131,8 @@ var NavContainer = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8
 var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 3 / span 14;\n  }\n"])), devices.desktop);
 var NavTopContainer = /*#__PURE__*/styled.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 26px;\n  right: 50px;\n  top: 20px;\n  position: absolute;\n\n  @media ", " {\n    margin-top: 1px;\n    position: inherit;\n  }\n"])), devices.mobileAndTablet);
 
-var _templateObject$l;
-var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
+var _templateObject$o;
+var LogoWrapper = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 66px;\n  height: auto;\n  cursor: pointer;\n  & img {\n    width: auto;\n    height: 100%;\n  }\n"])));
 
 var Logo = function Logo(_ref) {
   var _ref$id = _ref.id,
@@ -2968,11 +3161,11 @@ var Logo = function Logo(_ref) {
   }))));
 };
 
-var _templateObject$m;
-var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 16px;\n  justify-content: flex-end;\n  height: 26px;\n\n  @media ", " {\n    column-gap: 8px;\n  }\n"])), devices.mobile);
+var _templateObject$p;
+var NavTopContainer$1 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 16px;\n  justify-content: flex-end;\n  height: 26px;\n\n  @media ", " {\n    column-gap: 8px;\n  }\n"])), devices.mobile);
 
-var _templateObject$n, _templateObject2$7, _templateObject3$3, _templateObject4$1;
-var BasketContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__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 var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
+var BasketContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__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 var(--base-color-transparent);\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && a {\n      color: var(--base-color-", ");\n    }\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
@@ -2991,9 +3184,9 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObj
   var colorPrimary = _ref4.colorPrimary;
   return colorPrimary;
 });
-var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
-var NumContainer = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
-var BasketText = /*#__PURE__*/styled.a(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+var NumContainer = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  position: absolute;\n  top: 8px;\n  margin-left: 6px;\n\n  & .basket-num {\n    color: white;\n    font-size: 10px;\n    font-family: var(--font-family-navigation);\n  }\n"])));
+var BasketText = /*#__PURE__*/styled.a(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  color: var(--base-color-black);\n  margin-left: 6px;\n  text-decoration: none;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 
 var Basket$1 = function Basket(_ref) {
   var text = _ref.text,
@@ -3035,8 +3228,8 @@ var Basket$1 = function Basket(_ref) {
   }, text) : ''));
 };
 
-var _templateObject$o, _templateObject2$8;
-var SearchContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__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 var(--base-color-transparent);\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
+var _templateObject$r, _templateObject2$b;
+var SearchContainer = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__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 var(--base-color-transparent);\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--base-color-", ");\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n"])), function (_ref) {
   var selected = _ref.selected,
       colorPrimary = _ref.colorPrimary;
 
@@ -3052,7 +3245,7 @@ var SearchContainer = /*#__PURE__*/styled.div(_templateObject$o || (_templateObj
   var colorPrimary = _ref3.colorPrimary;
   return colorPrimary;
 });
-var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
+var SvgContainer$1 = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__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 _ref$selected = _ref.selected,
@@ -3079,29 +3272,6 @@ var Search$1 = function Search(_ref) {
   })));
 };
 
-var _templateObject$p, _templateObject2$9, _templateObject3$4;
-var TabContainer = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n"])));
-var OptionItem = /*#__PURE__*/styled.a(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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-black);\n  text-decoration: none;\n  cursor: pointer;\n  text-transform: uppercase;\n\n  :hover,\n  :focus {\n    color: var(--base-color-", ");\n  }\n"])), function (_ref) {
-  var colorPrimary = _ref.colorPrimary;
-  return colorPrimary;
-});
-var OptionsContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  border: 1px solid var(--base-color-light-grey);\n  border-top-color: var(--base-color-", ");\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--navigation-small-gap);\n  padding: var(--navigation-middle-gap);\n  position: absolute;\n  top: 24px;\n  min-width: calc(100% - calc(2 * var(--navigation-middle-gap)));\n  max-width: max-content;\n  white-space: nowrap;\n  z-index: ", ";\n\n  ", "\n\n  @media ", " {\n    padding-left: 0px;\n    padding-bottom: 0px;\n    row-gap: var(--navigation-large-gap);\n    border: 0;\n    background-color: none;\n\n    ", "\n  }\n"])), function (_ref2) {
-  var colorPrimary = _ref2.colorPrimary;
-  return colorPrimary;
-}, zIndexes.menu, function (props) {
-  if (props.withIcon === 'none') {
-    return "\n        top: 21px;\n    ";
-  }
-
-  return "";
-}, devices.mobileAndTablet, function (props) {
-  if (props.withOptionsInMobile) {
-    return "\n          position: relative;\n          top: 0px;\n      ";
-  }
-
-  return "\n        display: none;\n    ";
-});
-
 var Dropdown = function Dropdown(_ref) {
   var title = _ref.title,
       titleLink = _ref.titleLink,
@@ -3344,161 +3514,23 @@ var NavTop = function NavTop(_ref) {
   }));
 };
 
-var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
-var TabsContainer = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
-var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", " {\n    column-gap: 15px;\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
+var _templateObject$s, _templateObject2$c, _templateObject3$6, _templateObject4$3;
+var TabsContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n"])));
+var ItemsContainer = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  column-gap: 32px;\n\n  @media ", " {\n    column-gap: 15px;\n  }\n\n  @media ", " {\n    ", "\n  }\n"])), devices.desktop, devices.mobileAndTablet, function (props) {
   if (props.showMenu) {
     return "\n          display: flex;\n          flex-direction: column;\n          row-gap: 32px;\n        ";
   }
 
   return "display: none;";
 });
-var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  width: 60px;\n\n  & a {\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-black);\n    text-decoration: none;\n    cursor: pointer;\n\n    :hover {\n      color: var(--base-color-", ");\n    }\n  }\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  @media ", " {\n    display: block;\n\n    svg {\n      width: 24px;\n      height: 24px;\n      margin-left: 40px;\n      margin-top: -20px;\n    }\n\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), function (_ref) {
+var MenuContainer$1 = /*#__PURE__*/styled.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  width: 60px;\n\n  & a {\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-black);\n    text-decoration: none;\n    cursor: pointer;\n\n    :hover {\n      color: var(--base-color-", ");\n    }\n  }\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-", ");\n    }\n  }\n\n  @media ", " {\n    display: block;\n\n    svg {\n      width: 24px;\n      height: 24px;\n      margin-left: 40px;\n      margin-top: -20px;\n    }\n\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), function (_ref) {
   var colorPrimary = _ref.colorPrimary;
   return colorPrimary;
 }, function (_ref2) {
   var colorPrimary = _ref2.colorPrimary;
   return colorPrimary;
 }, devices.mobileAndTablet);
-var MenuItem = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
-
-var _templateObject$r, _templateObject2$b, _templateObject3$6, _templateObject4$3;
-var ControlledDropdownWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled.span(_templateObject2$b || (_templateObject2$b = /*#__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(--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-black);\n  text-decoration: none;\n  text-transform: uppercase;\n  cursor: pointer;\n\n  ", "\n"])), function (_ref) {
-  var active = _ref.active,
-      activeColor = _ref.activeColor;
-
-  if (active) {
-    return "\n      & {\n        border-bottom: 1px solid " + activeColor + ";\n        color: var(--base-color-" + activeColor + ");\n      }\n      && svg path {\n        fill: var(--base-color-" + activeColor + ");\n      } \n      ";
-  } else {
-    return '';
-  }
-});
-var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled(ControlledDropdownHeaderContainer).attrs({
-  as: 'a'
-})(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var IconWrapper$1 = /*#__PURE__*/styled.span(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n"])));
-
-var ControlledDropdown = function ControlledDropdown(_ref) {
-  var text = _ref.text,
-      options = _ref.options,
-      _ref$activeColor = _ref.activeColor,
-      activeColor = _ref$activeColor === void 0 ? 'primary' : _ref$activeColor,
-      active = _ref.active,
-      onClick = _ref.onClick,
-      onOptionClick = _ref.onOptionClick,
-      _onMouseEnter = _ref.onMouseEnter,
-      _onMouseLeave = _ref.onMouseLeave,
-      onReset = _ref.onReset,
-      _onFocus = _ref.onFocus,
-      _onBlur = _ref.onBlur;
-  var ref = useRef();
-  var resetHandler = useCallback(function () {
-    return onReset == null ? void 0 : onReset();
-  }, []);
-  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);
-      };
-    }
-
-    return;
-  }, [ref, resetHandler, active]);
-
-  var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
-    if (e.key === 'Enter') {
-      onOptionClick == null ? void 0 : onOptionClick(link);
-    } else if (e.key === 'Escape') {
-      resetHandler();
-    }
-  };
-
-  var handleHeaderKeyDown = function handleHeaderKeyDown(e) {
-    if (e.key === 'Enter') {
-      onClick == null ? void 0 : onClick();
-    } else if (e.key === 'Escape') {
-      resetHandler();
-    }
-  };
-
-  var handleOptionBlur = function handleOptionBlur(i) {
-    if (i === ((options == null ? void 0 : options.length) || 0) - 1) {
-      _onBlur == null ? void 0 : _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();
-    }
-  };
-  var headerEvents = {
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault();
-      onClick == null ? void 0 : onClick();
-    },
-    onFocus: function onFocus() {
-      return _onFocus == null ? void 0 : _onFocus();
-    },
-    onBlur: function onBlur() {
-      return !isDropdown && (_onBlur == null ? void 0 : _onBlur());
-    },
-    onKeyDown: handleHeaderKeyDown
-  };
-  return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
-    ref: ref
-  }, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
-    active: active,
-    activeColor: activeColor
-  }, headerEvents, {
-    tabIndex: 0,
-    "data-testid": "span-container"
-  }), text, /*#__PURE__*/React__default.createElement(IconWrapper$1, {
-    "data-testid": "dropdown-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow"
-  }))), active && options ? /*#__PURE__*/React__default.createElement(OptionsContainer, {
-    colorPrimary: activeColor,
-    withOptionsInMobile: true
-  }, options.map(function (optionItem, index) {
-    return /*#__PURE__*/React__default.createElement(OptionItem, {
-      key: "key-" + index + "-" + optionItem.option,
-      onClick: function onClick() {
-        return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
-      },
-      onKeyDown: function onKeyDown(e) {
-        return handleOptionKeyDown(e, optionItem.optionLink);
-      },
-      colorPrimary: activeColor,
-      tabIndex: 0,
-      onBlur: function onBlur() {
-        return handleOptionBlur(index);
-      }
-    }, optionItem.option);
-  })) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
-    active: active,
-    activeColor: activeColor
-  }, headerEvents, {
-    "data-testid": "link-container",
-    tabIndex: 0
-  }), text));
-};
+var MenuItem = /*#__PURE__*/styled.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    a {\n      margin-left: 20px;\n    }\n  }\n"])), devices.mobileAndTablet);
 
 var Tabs = function Tabs(_ref) {
   var _ref$items = _ref.items,
@@ -3623,46 +3655,14 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))));
 };
 
-var _templateObject$s, _templateObject2$c, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
-var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n    height: 80px;\n  }\n"])), devices.mobile);
-var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
+var _templateObject$t, _templateObject2$d, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
+var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n    height: 80px;\n  }\n"])), devices.mobile);
+var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
 var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
-var _templateObject$t, _templateObject2$d;
-var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
-  var iconName = _ref.iconName;
-  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
-}, function (_ref2) {
-  var color = _ref2.color;
-  return color;
-});
-var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
-
-var _excluded$5 = ["children", "iconName", "iconDirection", "color"];
-
-var TextLink = function TextLink(_ref) {
-  var children = _ref.children,
-      iconName = _ref.iconName,
-      iconDirection = _ref.iconDirection,
-      color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-
-  var truncatedString = children.substring(0, 30);
-  return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
-    color: color,
-    iconName: iconName
-  }, rest), truncatedString, iconName ? /*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
-    "data-testid": "text-link-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: iconName,
-    direction: iconDirection,
-    color: color
-  })) : null);
-};
-
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
       onClose = _ref.onClose;
@@ -3978,14 +3978,11 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
-var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11;
+var _templateObject$x, _templateObject2$h, _templateObject3$b, _templateObject4$7, _templateObject5$4, _templateObject6$4;
 var AnchorTapbarWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), zIndexes.anchor);
-var TitleCTAGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
-var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      height: 50px;\n    }\n  }\n"])), devices.mobile);
-var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
-var TabsWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: 32px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref) {
+var TabsGrid = /*#__PURE__*/styled(Grid)(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--anchor-tabs-height);\n"])));
+var TabsWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TabsList = /*#__PURE__*/styled.ul(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: ", ";\n  display: flex;\n  gap: 32px;\n  justify-content: ", ";\n  align-items: center;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  height: var(--anchor-tabs-height);\n  white-space: nowrap;\n  overflow: scroll;\n  scrollbar-width: none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scroll-behavior: smooth;\n\n  @media ", " {\n    & {\n      width: ", ";\n    }\n  }\n"])), function (_ref) {
   var tabsOverflow = _ref.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 74px)' : '100%';
 }, function (_ref2) {
@@ -3995,31 +3992,13 @@ var TabsList = /*#__PURE__*/styled.ul(_templateObject7$2 || (_templateObject7$2
   var tabsOverflow = _ref3.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 50px)' : '100%';
 });
-var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])));
-var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
-var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
-var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.primaryButtonReverseBg;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.primaryButtonReverseBg;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.primaryButtonReverse;
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.colors.primaryButtonReverse;
-});
+var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])));
+var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 
-var _excluded$7 = ["text"],
-    _excluded2 = ["text"],
-    _excluded3 = ["id", "text"];
+var _excluded$7 = ["id", "text"];
 
 var AnchorTapBar = function AnchorTapBar(_ref) {
   var tabs = _ref.tabs,
-      title = _ref.title,
-      links = _ref.links,
       onTabClick = _ref.onTabClick,
       activeTab = _ref.activeTab;
   var tabListRef = useRef(null);
@@ -4040,8 +4019,6 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
       canScrollToRight = _useState4[0],
       setCanScrollToRight = _useState4[1];
 
-  var hasTitleOrLinks = title || links;
-
   var isSelectedItem = function isSelectedItem(id) {
     return id === selectedItem;
   };
@@ -4063,7 +4040,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   }, [tabListRef]);
   useEffect(function () {
     var scrollTriggerCheck = function scrollTriggerCheck() {
-      var elementGap = hasTitleOrLinks ? 150 : 100;
+      var elementGap = 100;
       var reachedItem = tabs == null ? void 0 : tabs.find(function (item) {
         var targetSectionElement = document.getElementById(item.id);
         if (!targetSectionElement) return false;
@@ -4100,18 +4077,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     return function () {
       return document.removeEventListener('scroll', scrollTriggerCheck);
     };
-  }, [tabs, selectedItem, hasTitleOrLinks, tabListRef]);
+  }, [tabs, selectedItem, tabListRef]);
   var tabsColumnStart = tabsOverflow ? !canScrollToLeft ? 2 : 1 : 3;
   var tabsColumnSpan = tabsOverflow ? !canScrollToLeft ? 14 : 15 : 13;
 
-  var _ref3 = (links == null ? void 0 : links[0]) || {},
-      primaryButtonText = _ref3.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded$7);
-
-  var _ref4 = (links == null ? void 0 : links[1]) || {},
-      secondaryButtonText = _ref4.text,
-      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref4, _excluded2);
-
   var scrollToRight = function scrollToRight() {
     if (tabListRef.current) {
       var scroll = tabListRef.current.scrollLeft;
@@ -4129,34 +4098,19 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
   };
 
   var onTabsScroll = function onTabsScroll() {
-    var _ref5 = (tabListRef == null ? void 0 : tabListRef.current) || {},
-        _ref5$scrollLeft = _ref5.scrollLeft,
-        scrollLeft = _ref5$scrollLeft === void 0 ? 0 : _ref5$scrollLeft,
-        _ref5$clientWidth = _ref5.clientWidth,
-        clientWidth = _ref5$clientWidth === void 0 ? 0 : _ref5$clientWidth,
-        _ref5$scrollWidth = _ref5.scrollWidth,
-        scrollWidth = _ref5$scrollWidth === void 0 ? 0 : _ref5$scrollWidth;
+    var _ref3 = (tabListRef == null ? void 0 : tabListRef.current) || {},
+        _ref3$scrollLeft = _ref3.scrollLeft,
+        scrollLeft = _ref3$scrollLeft === void 0 ? 0 : _ref3$scrollLeft,
+        _ref3$clientWidth = _ref3.clientWidth,
+        clientWidth = _ref3$clientWidth === void 0 ? 0 : _ref3$clientWidth,
+        _ref3$scrollWidth = _ref3.scrollWidth,
+        scrollWidth = _ref3$scrollWidth === void 0 ? 0 : _ref3$scrollWidth;
 
     setCanScrollToLeft(scrollLeft > 0);
     setCanScrollToRight(scrollLeft + clientWidth < scrollWidth);
   };
 
-  return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, title || links ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 2,
-    columnSpanDesktop: 9,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(AnchorTitle, {
-    "data-testid": "anchor-title"
-  }, /*#__PURE__*/React__default.createElement(Header, {
-    level: 5
-  }, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
-    columnStartDesktop: 12,
-    columnSpanDesktop: 5,
-    columnStartDevice: 2,
-    columnSpanDevice: 12,
-    "data-testid": "anchor-ctas"
-  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null)) : null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
+  return /*#__PURE__*/React__default.createElement(AnchorTapbarWrapper, null, /*#__PURE__*/React__default.createElement(TabsGrid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: tabsColumnStart,
     columnSpanDesktop: tabsColumnSpan,
     columnStartDevice: 2,
@@ -4167,10 +4121,10 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     ref: tabListRef,
     tabsOverflow: tabsOverflow,
     onScroll: onTabsScroll
-  }, tabs.map(function (_ref6) {
-    var id = _ref6.id,
-        text = _ref6.text,
-        rest = _objectWithoutPropertiesLoose(_ref6, _excluded3);
+  }, tabs.map(function (_ref4) {
+    var id = _ref4.id,
+        text = _ref4.text,
+        rest = _objectWithoutPropertiesLoose(_ref4, _excluded$7);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
@@ -4191,7 +4145,7 @@ var AnchorTapBar = function AnchorTapBar(_ref) {
     onClick: scrollToRight
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Arrow"
-  })) : null) : null))), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
+  })) : null) : null))));
 };
 
 var CarouselType;
@@ -4344,7 +4298,7 @@ var Carousel = function Carousel(_ref) {
   })))));
 };
 
-var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2;
+var _templateObject$z, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$5, _templateObject6$5, _templateObject7$2, _templateObject8$2, _templateObject9$1, _templateObject10$1;
 var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-template-rows: max-content minmax(0, 1fr);\n  gap: 0 var(--grid-column-gap);\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n  user-select: none;\n\n  @media ", " {\n    & {\n      grid-template-rows: min-content max-content max-content;\n    }\n  }\n"])), devices.mobile);
 var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$j || (_templateObject2$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 1 / 1 / 7;\n  box-sizing: border-box;\n  width: calc(100% + var(--grid-column-gap));\n  padding-top: 40px;\n  padding-left: 50px;\n  padding-right: 36px;\n  user-select: text;\n\n  h4 {\n    margin: 0;\n    padding: 0;\n  }\n\n  h5 {\n    display: none;\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 12;\n      padding: 12px 0 12px var(--grid-margin);\n      min-height: 64px;\n      box-sizing: border-box;\n      width: 100%;\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n        font-size: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        line-height: 40px;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 1 / 1 / 2 / 11;\n      width: 100%;\n      padding: 8px 0 8px 20px;\n      min-height: var(--line-height-altHeader-5);\n\n      h4 {\n        display: none;\n      }\n\n      h5 {\n        margin: 0;\n        padding: 0;\n        display: block;\n      }\n    }\n  }\n"])), devices.tablet, function (_ref) {
   var theme = _ref.theme;
@@ -4408,10 +4362,10 @@ var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateOb
   var theme = _ref19.theme;
   return theme.fonts.mobile.lineHeights.body[1];
 }, devices.mobile);
-var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
-var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n\n  @media ", " {\n    & {\n      margin-top: 16px;\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 20px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: 1 / 7 / 3 / 17;\n  position: relative;\n  height: 100%;\n  width: 100%;\n\n  .swiper-slide {\n    width: calc(100% - 50px - var(--rotator-button-width));\n    -webkit-transform: translate3d(0, 0, 0);\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 7 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-area: 2 / 1 / 3 / 15;\n\n      .swiper-slide {\n        width: 100%;\n        -webkit-transform: translate3d(0, 0, 0);\n      }\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 50px;\n  top: calc(50% - calc(var(--rotator-button-width) / 2));\n  z-index: 2;\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.mobileAndTablet);
+var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 
 var _excluded$8 = ["text"];
 
@@ -4571,12 +4525,73 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6;
-var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var LineContainer = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
-var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
-var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 28px 20px;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
-var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\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  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n"])));
+var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6, _templateObject7$3;
+var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
+  var sticky = _ref.sticky;
+  return sticky ? 'sticky' : 'initial';
+}, zIndexes.anchor);
+var CTAGridWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: solid 2px var(--base-color-lightgrey);\n"])));
+var AnchorTitle = /*#__PURE__*/styled.div(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      height: 50px;\n    }\n  }\n"])), devices.mobile);
+var GridItemTitleWrapper = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 2 / span 9;\n    }\n  }\n"])), devices.tablet);
+var ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  @media ", " {\n     {\n      grid-column: 12 / span 3;\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
+var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.colors.primaryButtonReverseBg;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.colors.primaryButtonReverseBg;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.colors.primaryButtonReverse;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.colors.primaryButtonReverse;
+});
+
+var _excluded$b = ["text"],
+    _excluded2 = ["text"];
+
+var TitleWithCTA = function TitleWithCTA(_ref) {
+  var title = _ref.title,
+      links = _ref.links,
+      _ref$sticky = _ref.sticky,
+      sticky = _ref$sticky === void 0 ? false : _ref$sticky;
+
+  var _ref2 = (links == null ? void 0 : links[0]) || {},
+      primaryButtonText = _ref2.text,
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+
+  var _ref3 = (links == null ? void 0 : links[1]) || {},
+      secondaryButtonText = _ref3.text,
+      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+
+  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
+    sticky: sticky
+  }, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
+    columnStartDesktop: 2,
+    columnSpanDesktop: 9,
+    columnStartDevice: 2,
+    columnSpanDevice: 12
+  }, /*#__PURE__*/React__default.createElement(AnchorTitle, {
+    "data-testid": "anchor-title"
+  }, /*#__PURE__*/React__default.createElement(Header, {
+    level: 5
+  }, title))) : null, links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsDesktopGridItem, {
+    columnStartDesktop: 12,
+    columnSpanDesktop: 5,
+    columnStartDevice: 2,
+    columnSpanDevice: 12,
+    "data-testid": "anchor-ctas"
+  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText), links != null && links[1] ? /*#__PURE__*/React__default.createElement(PrimaryButtonReverse, Object.assign({}, secondaryButtonProps), secondaryButtonText) : null) : null), links != null && links[0] ? /*#__PURE__*/React__default.createElement(ButtonsMobileWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, primaryButtonProps), primaryButtonText)) : null);
+};
+
+var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
+var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var LineContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
+var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n"])), devices.mobile);
+var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n\n  && a {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 28px 20px;\n\n    @media ", " {\n      margin: 12px 20px 12px 0px;\n    }\n  }\n\n  && svg {\n    width: var(--navigation-middle-gap);\n    height: var(--navigation-middle-gap);\n    margin-right: 20px;\n\n    @media ", " {\n      margin-right: 0px;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])), devices.mobile, devices.mobile);
+var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.2s ease;\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  text-transform: var(--text-transform-body);\n\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n"])));
 
 var Accordion = function Accordion(_ref) {
   var _ref$title = _ref.title,
@@ -4618,8 +4633,8 @@ var Accordion = function Accordion(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChildrenContainer, null, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
 };
 
-var _templateObject$B;
-var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$C;
+var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var Accordions = function Accordions(_ref) {
   var _ref$items = _ref.items,
@@ -4638,25 +4653,25 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$C, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3;
+var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$4, _templateObject8$3, _templateObject9$2;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
-var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-primary);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
-var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
-var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref) {
+var CardContainer = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-primary);\n  position: absolute;\n  width: 100%;\n  z-index: ", ";\n"])), zIndexes.contentOverlay);
+var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
+var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    margin-left: ", ";\n    margin-right: ", ";\n  }\n"])), devices.mobile, function (_ref) {
   var fullWidth = _ref.fullWidth;
   return fullWidth ? '0' : '20px';
 }, function (_ref2) {
   var fullWidth = _ref2.fullWidth;
   return fullWidth ? '0' : '20px';
 });
-var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
+var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 var TextContainer = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
+var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref3) {
   var size = _ref3.size,
       primaryButtonTextLength = _ref3.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref3.tertiaryButtonTextLength;
@@ -4679,13 +4694,13 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject9$3 || (_templat
   return '';
 });
 
-var _templateObject$D, _templateObject2$m, _templateObject3$g;
-var ProgressView = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
-var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-progress);\n  flex: ", ";\n"])), function (_ref) {
+var _templateObject$E, _templateObject2$n, _templateObject3$h;
+var ProgressView = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
+var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-progress);\n  flex: ", ";\n"])), function (_ref) {
   var progress = _ref.progress;
   return progress;
 });
-var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref2) {
+var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-white);\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref2) {
   var progress = _ref2.progress;
   return progress;
 });
@@ -4702,7 +4717,7 @@ var Progress = function Progress(_ref) {
   }));
 };
 
-var _excluded$b = ["text"],
+var _excluded$c = ["text"],
     _excluded2$1 = ["text"];
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
@@ -4741,7 +4756,7 @@ var Card = function Card(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -4811,9 +4826,9 @@ var Card = function Card(_ref) {
   }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
 };
 
-var _templateObject$E, _templateObject2$n;
-var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n     {\n      grid-row-gap: var(--cards-spacing-stack);\n    }\n  }\n"])), devices.mobile);
-var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 1 / span 14;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$F, _templateObject2$o;
+var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n     {\n      grid-row-gap: var(--cards-spacing-stack);\n    }\n  }\n"])), devices.mobile);
+var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n     {\n      grid-column: 1 / span 14;\n    }\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
   var cards = _ref.cards,
@@ -4850,21 +4865,21 @@ var Cards = function Cards(_ref) {
   }));
 };
 
-var _templateObject$F, _templateObject2$o, _templateObject3$h, _templateObject4$c, _templateObject5$8;
-var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
+var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9;
+var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-column-gap);\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content 24px min-content;\n      grid-template-areas:\n        'row1'\n        '.'\n        'row2';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
 }, devices.mobile);
-var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
+var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-self: center;\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref2) {
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
+var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var EditorialText = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
+var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var EditorialText = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
 
 var Editorial = function Editorial(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -4895,19 +4910,19 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$G, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$5;
-var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$5;
+var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, devices.mobile);
-var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
-var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
-var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
-var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content;\n  grid-template-areas:\n    '. . title title title title title title title title title title . . logo .'\n    '. . text text text text text text text text text button button button . .';\n\n  @media ", " {\n    & {\n      grid-template-rows: 20px min-content min-content min-content 20px;\n      grid-template-areas:\n        '. . . . . . . . . . . . . .'\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .'\n        '. . . . . . . . . . . . . .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. title title title title title title title title title title logo logo .'\n        '. text text text text text text text text text button button button .';\n    }\n  }\n"])), devices.mobile, devices.tablet);
+var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: title;\n  margin-top: 80px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  width: fit-content;\n  height: 36px;\n\n  @media ", " {\n    & {\n      height: 30px;\n    }\n  }\n"])), devices.mobile);
+var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
+var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$c = ["text"];
+var _excluded$d = ["text"];
 
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
@@ -4919,7 +4934,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title.substring(0, 40);
@@ -4940,11 +4955,11 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
 };
 
-var _excluded$d = ["link"];
+var _excluded$e = ["link"];
 
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var coreLink = link && _extends({}, link, {
     color: Colors.White,
@@ -4958,11 +4973,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$e = ["link"];
+var _excluded$f = ["link"];
 
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   var cinemaLink = link && _extends({}, link, {
     color: Colors.Black,
@@ -4976,8 +4991,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6;
-var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      @supports not (aspect-ratio: 1 / 1) {\n        height: 100vw;\n      }\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$6;
+var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  background-image: url('", "');\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  display: flex;\n  align-items: center;\n\n  ::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: var(--base-color-black);\n    filter: opacity(40%);\n    z-index: ", ";\n  }\n\n  @media ", " {\n    & {\n      aspect-ratio: 1 / 1;\n      @supports not (aspect-ratio: 1 / 1) {\n        height: 100vw;\n      }\n      background-image: url('", "');\n      background-position: center;\n      display: flex;\n      align-items: start;\n    }\n  }\n"])), function (_ref) {
   var bgUrlDesktop = _ref.bgUrlDesktop;
   return bgUrlDesktop;
 }, zIndexes.content, devices.mobile, function (_ref2) {
@@ -4985,14 +5000,14 @@ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$H || (_templateObjec
       bgUrlDevice = _ref2.bgUrlDevice;
   return bgUrlDevice ? bgUrlDevice : bgUrlDesktop;
 });
-var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . . logo logo logo logo . . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . . logo logo logo logo logo logo . . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. . . . . logo logo logo logo . . . . .'\n        '. text text text text text text text text text text text text .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
-var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobileAndTablet);
-var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-5);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
+var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . . logo logo logo logo . . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . . logo logo logo logo logo logo . . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-areas:\n        '. . . . . logo logo logo logo . . . . .'\n        '. text text text text text text text text text text text text .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
+var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__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.contentOverlay, devices.mobileAndTablet);
+var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
+var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(3 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-5);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$f = ["text"];
+var _excluded$g = ["text"];
 
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
@@ -5007,7 +5022,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -5034,11 +5049,11 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _excluded$g = ["link"];
+var _excluded$h = ["link"];
 
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   var streamLink = link && _extends({}, link, {
     color: Colors.Black,
@@ -5052,47 +5067,52 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
 };
 
-var _templateObject$I, _templateObject2$r;
-var RoleWrapper = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-role);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
-var NameWrapper = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-people-listing-name);\n  font-size: var(--font-size-individual-listing-name);\n  font-weight: var(--font-weight-listing-name);\n  line-height: var(--line-height-individual-listing-name);\n  letter-spacing: var(--letter-spacing-body-1);\n  overflow-wrap: break-word;\n\n  & a {\n    color: var(--base-color-black);\n\n    :hover {\n      color: var(--base-color-primary);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-
-var IndividualListing = function IndividualListing(_ref) {
-  var role = _ref.role,
-      name = _ref.name,
-      link = _ref.link,
-      dataROH = _ref.dataROH;
-  return /*#__PURE__*/React__default.createElement("span", {
-    "data-roh": dataROH
-  }, /*#__PURE__*/React__default.createElement(RoleWrapper, {
-    title: "role"
-  }, role), /*#__PURE__*/React__default.createElement(NameWrapper, null, link ? /*#__PURE__*/React__default.createElement("a", {
-    href: link,
-    title: name
-  }, name) : name));
-};
-
-var _templateObject$J;
+var _templateObject$J, _templateObject2$s, _templateObject3$l;
 var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n"])));
+var RoleWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
+var PersonLink = /*#__PURE__*/styled.a(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+
+var Person = function Person(_ref) {
+  var person = _ref.person,
+      withSeparator = _ref.withSeparator;
+  var link = person.link,
+      name = person.name,
+      _person$separator = person.separator,
+      separator = _person$separator === void 0 ? ', ' : _person$separator;
+  var personSeparator = withSeparator ? separator : '';
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, link ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PersonLink, {
+    href: link
+  }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
+};
 
 var PeopleListing = function PeopleListing(_ref) {
-  var people = _ref.people;
-  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, people.map(function (person, index) {
+  var roles = _ref.roles;
+  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
-      key: person.name + "-" + index,
+      key: role.name + "-" + index,
       columnStartDesktop: index % 4 * 3 + 3,
       columnSpanDesktop: 3,
       columnStartDevice: index % 2 * 6 + 2,
       columnSpanDevice: 6
-    }, /*#__PURE__*/React__default.createElement(IndividualListing, {
-      role: person.role,
-      name: person.name,
-      link: person.link,
-      dataROH: person.dataROH
-    }));
+    }, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+      title: "role",
+      "data-roh": role.dataROH
+    }, /*#__PURE__*/React__default.createElement(Overline, {
+      level: 1
+    }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
+      level: 1,
+      tag: "p"
+    }, role.people.map(function (person, personIndex) {
+      return /*#__PURE__*/React__default.createElement(Person, {
+        key: "" + person.name + personIndex,
+        person: person,
+        withSeparator: role.people.length !== personIndex + 1
+      });
+    })));
   }));
 };
 
-var _templateObject$K, _templateObject2$s, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$7;
+var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$g, _templateObject5$c, _templateObject6$a, _templateObject7$7;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templateObject$K = /*#__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) {
@@ -5102,17 +5122,17 @@ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$K || (_templa
   var imageToLeft = _ref2.imageToLeft;
   return imageToLeft ? "'left left left left left left left . right right right right right .'" : "'. left left left left left . right right right right right right right'";
 }, devices.mobile);
-var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref3) {
+var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  @media ", " {\n    & {\n      grid-area: row1;\n  }\n"])), function (_ref3) {
   var imageToLeft = _ref3.imageToLeft;
   return imageToLeft ? 'left' : 'right';
 }, devices.mobile);
-var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref4) {
+var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row2;\n      align-self: start;\n  }\n"])), function (_ref4) {
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -5148,7 +5168,7 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templat
   return '';
 });
 
-var _excluded$h = ["text"],
+var _excluded$i = ["text"],
     _excluded2$2 = ["text"];
 var LENGTH_TEXT$1 = 28;
 
@@ -5175,7 +5195,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$h);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -5262,7 +5282,7 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-var _templateObject$N, _templateObject2$t;
+var _templateObject$N, _templateObject2$u;
 var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__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"])), ImageAspectRatioWrapper, function (_ref) {
   var _ref$aspectRatio = _ref.aspectRatio,
       aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
@@ -5273,7 +5293,7 @@ var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N
       height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
+var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
 
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
@@ -6196,5 +6216,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$O || (_templat
   return theme.spacing[6];
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TypeTags, devices };
+export { Accordion, Accordions, AltHeader, AnchorTapBar, AspectRatio, BodyText, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ControlledDropdown, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Navigation, Overline, PageHeadingCinema, PageHeadingCore, PageHeadingImpact, PageHeadingStream, PeopleListing, PrimaryButton, PromoWithTitle, RotatorButtons, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Sponsorship, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, TypeTags, devices };
 //# sourceMappingURL=chord.esm.js.map