@royaloperahouse/chord 0.7.0 → 0.7.4

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;
@@ -4525,16 +4525,17 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$A, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$6, _templateObject6$6;
+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 ButtonsDesktopGridItem = /*#__PURE__*/styled(GridItem)(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
-var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref2) {
+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) {
@@ -4567,7 +4568,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
 
   return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
     sticky: sticky
-  }, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItem, {
+  }, /*#__PURE__*/React__default.createElement(CTAGridWrapper, null, title ? /*#__PURE__*/React__default.createElement(GridItemTitleWrapper, {
     columnStartDesktop: 2,
     columnSpanDesktop: 9,
     columnStartDevice: 2,
@@ -4652,7 +4653,7 @@ var Accordions = function Accordions(_ref) {
   }));
 };
 
-var _templateObject$D, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$8, _templateObject6$7, _templateObject7$3, _templateObject8$3, _templateObject9$2;
+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;
@@ -4668,7 +4669,7 @@ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject4$c || (_templat
 });
 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$3 || (_templateObject7$3 = /*#__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 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$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,
@@ -4869,7 +4870,7 @@ var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$G || (_templateObjec
   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$p || (_templateObject2$p = /*#__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);
@@ -4909,7 +4910,7 @@ var Editorial = function Editorial(_ref) {
   })))));
 };
 
-var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$4;
+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;
@@ -4919,7 +4920,7 @@ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObj
 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$4 || (_templateObject7$4 = /*#__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 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$d = ["text"];
 
@@ -4990,7 +4991,7 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject5$b, _templateObject6$9, _templateObject7$5;
+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;
@@ -5004,7 +5005,7 @@ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObj
 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$5 || (_templateObject7$5 = /*#__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 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$g = ["text"];
 
@@ -5066,11 +5067,23 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
 };
 
-var _templateObject$J, _templateObject2$s, _templateObject3$l, _templateObject4$g;
-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 _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\n  @media ", " {\n    p {\n      margin: 0;\n    }\n  }\n"])), devices.mobile);
 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\n  :not(:last-child):after {\n    content: ',';\n    margin-right: 4px;\n  }\n"])));
-var PersonText = /*#__PURE__*/styled.span(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  :not(:last-child):after {\n    content: ',';\n    margin-right: 4px;\n  }\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 roles = _ref.roles;
@@ -5090,17 +5103,16 @@ var PeopleListing = function PeopleListing(_ref) {
       level: 1,
       tag: "p"
     }, role.people.map(function (person, personIndex) {
-      return person.link ? /*#__PURE__*/React__default.createElement(PersonLink, {
+      return /*#__PURE__*/React__default.createElement(Person, {
         key: "" + person.name + personIndex,
-        href: person.link
-      }, person.name) : /*#__PURE__*/React__default.createElement(PersonText, {
-        key: "" + person.name + personIndex
-      }, person.name);
+        person: person,
+        withSeparator: role.people.length !== personIndex + 1
+      });
     })));
   }));
 };
 
-var _templateObject$K, _templateObject2$t, _templateObject3$m, _templateObject4$h, _templateObject5$c, _templateObject6$a, _templateObject7$6;
+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) {
@@ -5118,7 +5130,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$m ||
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__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 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;
@@ -5130,7 +5142,7 @@ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$a || (_templat
   var theme = _ref7.theme;
   return theme.colors.primary;
 });
-var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
+var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  ", "\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref8) {
   var _ref8$primaryButtonTe = _ref8.primaryButtonTextLength,
       primaryButtonTextLength = _ref8$primaryButtonTe === void 0 ? 0 : _ref8$primaryButtonTe,
       _ref8$tertiaryButtonT = _ref8.tertiaryButtonTextLength,
@@ -6204,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, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, TitleWithCTA, 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