@royaloperahouse/chord 2.2.9 → 2.2.10-a-chord-development

package/dist/chord.esm.js

@@ -624,6 +624,7 @@ var core = /*#__PURE__*/_extends({}, common, {
     primaryButton: colors.core,
     secondaryButton: commonColors.white,
     tertiaryButton: 'transparent',
+    auxiliaryButton: 'transparent',
     primaryButtonReverseBg: colors.cinema,
     primaryButtonReverse: commonColors.white
   })
@@ -632,30 +633,33 @@ var stream = /*#__PURE__*/_extends({}, common, {
   colors: /*#__PURE__*/_extends({}, commonColors, colors, {
     primary: colors.stream,
     primaryButton: colors.stream,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
     secondaryButton: commonColors.white,
     tertiaryButton: 'transparent',
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white
+    auxiliaryButton: 'transparent'
   })
 });
 var cinema = /*#__PURE__*/_extends({}, common, {
   colors: /*#__PURE__*/_extends({}, commonColors, colors, {
     primary: colors.cinema,
     primaryButton: commonColors.white,
+    primaryButtonReverseBg: commonColors.white,
+    primaryButtonReverse: colors.cinema,
     secondaryButton: commonColors.white,
     tertiaryButton: 'transparent',
-    primaryButtonReverseBg: commonColors.white,
-    primaryButtonReverse: colors.cinema
+    auxiliaryButton: 'transparent'
   })
 });
 var schools = /*#__PURE__*/_extends({}, common, {
   colors: /*#__PURE__*/_extends({}, commonColors, colors, {
     primary: colors.core,
     primaryButton: colors.core,
+    primaryButtonReverseBg: colors.cinema,
+    primaryButtonReverse: commonColors.white,
     secondaryButton: commonColors.white,
     tertiaryButton: 'transparent',
-    primaryButtonReverseBg: colors.cinema,
-    primaryButtonReverse: commonColors.white
+    auxiliaryButton: 'transparent'
   }),
   fonts: /*#__PURE__*/_extends({}, common.fonts, {
     desktop: /*#__PURE__*/_extends({}, common.fonts.desktop, {
@@ -705,21 +709,36 @@ var Wrapper = /*#__PURE__*/styled.span(_templateObject$3 || (_templateObject$3 =
   return color || 'black';
 }, core.colors.black);
 
-var Remove = (function (_ref) {
+var Expand12px = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
   return /*#__PURE__*/createElement("svg", {
-    width: "100%",
-    height: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
     viewBox: "0 0 12 12",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, /*#__PURE__*/createElement("path", {
-    d: "M7.06066 5.93957L11.0001 2.00011L9.93945 0.939453L6 4.87891L2.06055 0.939453L0.999887 2.00011L4.93934 5.93957L0.939453 9.93945L2.00011 11.0001L6 7.00023L9.99989 11.0001L11.0605 9.93945L7.06066 5.93957Z",
+    d: "M7.02857 0H5.31429V4.97143H0V6.68571H5.31429V12H7.02857V6.68571H12V4.97143H7.02857V0Z",
     fill: color
   }));
 });
 
+var Remove12px = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none"
+  }, /*#__PURE__*/createElement("g", null, /*#__PURE__*/createElement("path", {
+    d: "M6.9956 5.96581L11.8642 10.8344L10.9042 11.7944L6.0356 6.92581L1.16703 11.7944L0.207031 10.8344L5.0756 5.96581L0.207031 1.16581L1.16703 0.205811L6.0356 5.07438L10.9042 0.205811L11.8642 1.16581L6.9956 5.96581Z",
+    fill: color
+  })));
+});
+
 var Tick = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1839,6 +1858,21 @@ var Refresh = (function (_ref) {
   }));
 });
 
+var Remove = (function (_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
+  return /*#__PURE__*/createElement("svg", {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/createElement("path", {
+    d: "M7.06066 5.93957L11.0001 2.00011L9.93945 0.939453L6 4.87891L2.06055 0.939453L0.999887 2.00011L4.93934 5.93957L0.939453 9.93945L2.00011 11.0001L6 7.00023L9.99989 11.0001L11.0605 9.93945L7.06066 5.93957Z",
+    fill: color
+  }));
+});
+
 var Star = (function (_ref) {
   var _ref$color = _ref.color,
       color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -2151,6 +2185,7 @@ var IconLibrary = {
   EditMyList: EditMyList,
   Email: Email,
   Expand: Expand,
+  Expand12px: Expand12px,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
   Favourite: Favourite,
@@ -2180,6 +2215,7 @@ var IconLibrary = {
   Refresh: Refresh,
   Reminder: Reminder,
   Remove: Remove,
+  Remove12px: Remove12px,
   Restart: Restart,
   Search: Search,
   Seat: Seat,
@@ -2227,15 +2263,17 @@ var Button = function Button(_ref) {
   var children = _ref.children,
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
+      iconClassName = _ref.iconClassName,
       color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "iconClassName", "color"]);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
     color: color,
     iconName: iconName
   }), iconName ? /*#__PURE__*/React__default.createElement(ButtonIconWrapper, {
-    "data-testid": "button-icon"
+    "data-testid": "button-icon",
+    className: iconClassName
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: iconName,
     direction: iconDirection,
@@ -3568,7 +3606,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObjec
   if (!width) return 'none';
   return width + 'px';
 });
-var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  text-transform: var(--text-transform-altHeader);\n  border-radius: 0;\n  width: 100%;\n  height: 48px;\n  padding-left: 20px;\n  -moz-appearance: textfield;\n  padding-right: ", ";\n  outline: none;\n  border: ", ";\n  &:disabled {\n    background-color: var(--base-color-lightgrey);\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  &:focus {\n    outline: ", ";\n  }\n\n  /* remove search decoration */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  /* remove number decoration */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref2) {
+var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  text-transform: var(--text-transform-altHeader);\n  border-radius: 0;\n  width: 100%;\n  height: 48px;\n  padding-left: 20px;\n  -moz-appearance: textfield;\n  padding-right: ", ";\n  outline: none;\n  border: ", ";\n  &:disabled {\n    background-color: var(--base-color-lightgrey);\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  &:focus {\n    outline: ", ";\n  }\n\n  /* remove search decoration */\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n   display: none; \n  }\n\n  /* remove number decoration */\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (_ref2) {
   var isPasswordField = _ref2.isPasswordField;
   if (isPasswordField) return "80px";
   return "20px";
@@ -3676,7 +3714,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "text-field-input",
     ref: ref
   }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
-    type: "button",
+    type: 'button',
     onClick: showHideClickHandler
   }, /*#__PURE__*/React__default.createElement(Overline, {
     level: 1
@@ -3846,7 +3884,10 @@ var Tickbox = function Tickbox(_ref) {
     onKeyPress: spaceButtonHandler,
     dark: isDarkMode,
     disabled: disabled,
-    "data-testid": "tickbox"
+    "data-testid": "tickbox",
+    role: "checkbox",
+    "aria-checked": selected ? 'true' : 'false',
+    "aria-labelledby": dataLabel
   }, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1,
     tag: "span"
@@ -3857,6 +3898,7 @@ var Tickbox = function Tickbox(_ref) {
     dark: isDarkMode,
     "aria-labelledby": dataLabel,
     whiteBox: whiteBox,
+    "aria-checked": selected ? 'true' : 'false',
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
     dark: isDarkMode,
@@ -6049,7 +6091,8 @@ var Accordions = function Accordions(_ref) {
       visibleStandfirst: accordion.visibleStandfirst,
       contentType: accordion.contentType,
       displayLevel: accordion.displayLevel,
-      semanticLevel: accordion.semanticLevel
+      semanticLevel: accordion.semanticLevel,
+      initOpen: accordion.initOpen
     }, accordion.children);
   }));
 };
@@ -6106,11 +6149,33 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$P, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
+var _templateObject$P;
+var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  font-family: var(--font-family-buttons);\n  font-size: var(--button-font-size);\n  font-weight: var(--button-font-weight);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), function (_ref) {
+  var bgColor = _ref.bgColor,
+      theme = _ref.theme;
+  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.auxiliaryButton;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+});
+
+var AuxiliaryButton = function AuxiliaryButton(_ref) {
+  var _props$color;
+
+  var children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+
+  return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
+    color: (_props$color = props.color) != null ? _props$color : Colors.Black,
+    iconClassName: "auxiliaryButtonIcon"
+  }), children);
+};
+
+var _templateObject$Q, _templateObject2$y, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13, _templateObject14;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
-var CardContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
+var CardContainer = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: ", ";\n  position: relative;\n  ", "\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (_ref) {
   var isCardClickable = _ref.isCardClickable;
   return isCardClickable ? 'pointer' : 'default';
 }, function (_ref2) {
@@ -6134,20 +6199,22 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$k || (_templat
 var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobileAndTablet);
 var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n  display: none;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobileAndTablet);
 var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin-top: var(--editorial-spacing-hover);\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n"])));
-var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var LabelContainer = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
+var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
   var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
 }, devices.mobile, function (_ref7) {
   var isGridCard = _ref7.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var LabelElements = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
+var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: var(--editorial-margin-between);\n"])));
+var LabelElements = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
   var bgColor = _ref8.bgColor,
       theme = _ref8.theme;
   return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
 });
-var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
+var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 var getButtonsOpacity = function getButtonsOpacity(_ref9) {
   var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
@@ -6159,7 +6226,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
+var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
   var size = _ref11.size,
       primaryButtonTextLength = _ref11.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
@@ -6269,6 +6336,8 @@ var Card = function Card(_ref) {
       subtitle = _ref.subtitle,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$highlightText = _ref.highlightText,
+      highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
       links = _ref.links,
       _ref$tags = _ref.tags,
       tags = _ref$tags === void 0 ? [] : _ref$tags,
@@ -6286,7 +6355,8 @@ var Card = function Card(_ref) {
       hoverLineColor = _ref.hoverLineColor,
       labelParams = _ref.labelParams,
       _ref$isGridCard = _ref.isGridCard,
-      isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard;
+      isGridCard = _ref$isGridCard === void 0 ? false : _ref$isGridCard,
+      auxiliaryCTA = _ref.auxiliaryCTA;
 
   var truncate = function truncate(str, n) {
     return str.length >= n ? str.substr(0, n) : str;
@@ -6381,9 +6451,12 @@ var Card = function Card(_ref) {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
+  }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1
+  }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
     "data-testid": "buttonscontainer",
+    className: "cardButtonsContainer",
     size: size,
     primaryButtonTextLength: firstButtonText.length,
     tertiaryButtonTextLength: secondButtonText.length,
@@ -6392,8 +6465,8 @@ var Card = function Card(_ref) {
   }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)));
 };
 
-var _templateObject$Q, _templateObject2$z;
-var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
+var _templateObject$R, _templateObject2$z;
+var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  @media ", " {\n    grid-row-gap: var(--cards-spacing-stack);\n  }\n"])), devices.mobile);
 var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    grid-column: 1 / span 14;\n  }\n"])), devices.mobile);
 
 var Cards = function Cards(_ref) {
@@ -6425,6 +6498,7 @@ var Cards = function Cards(_ref) {
       title: card.title,
       subtitle: card.subtitle,
       text: card.text,
+      highlightText: card.highlightText,
       links: card.links,
       tags: card.tags,
       withContinueWatching: card.withContinueWatching,
@@ -6432,13 +6506,14 @@ var Cards = function Cards(_ref) {
       hoverLineColor: card.hoverLineColor,
       fullWidth: card.fullWidth,
       labelParams: card.labelParams,
+      auxiliaryCTA: card.auxiliaryCTA,
       isGridCard: true
     }));
   }));
 };
 
-var _templateObject$R, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
-var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
+var _templateObject$S, _templateObject2$A, _templateObject3$s, _templateObject4$l, _templateObject5$f;
+var ContentWrapper = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
 var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\n    display: grid;\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: max-content;\n    gap: var(--grid-column-gap);\n    margin: 0;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
@@ -6506,8 +6581,8 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
-var _templateObject$S, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
-var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$T, _templateObject2$B, _templateObject3$t, _templateObject4$m, _templateObject5$g, _templateObject6$d, _templateObject7$8;
+var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  justify-items: start;\n  align-items: center;\n  margin: 20px 0;\n  gap: 24px;\n  cursor: ", ";\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n  }\n"])), function (props) {
   return props.clickable ? 'pointer' : 'default';
 }, devices.mobile);
@@ -6589,8 +6664,8 @@ var ContentSummary = function ContentSummary(_ref) {
   }), link.text)));
 };
 
-var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
-var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__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$U, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$h;
+var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__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);
@@ -6667,8 +6742,8 @@ var BackgroundColour;
   BackgroundColour["White"] = "white";
 })(BackgroundColour || (BackgroundColour = {}));
 
-var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o;
-var InfoContent = /*#__PURE__*/styled('div')(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
+var _templateObject$V, _templateObject2$D, _templateObject3$v, _templateObject4$o;
+var InfoContent = /*#__PURE__*/styled('div')(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-altHeader);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n  -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n  -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  word-break: var(--word-break-altHeader);\n"])));
 var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  * {\n    margin-block: 0;\n  }\n"])));
 var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 32px 0;\n\n  ", "}\n"])), function (props) {
   if (!props.infoThemed) {
@@ -6794,8 +6869,8 @@ var Information = function Information(_ref) {
   }))));
 };
 
-var _templateObject$V, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
-var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
+var _templateObject$W, _templateObject2$E, _templateObject3$w, _templateObject4$p, _templateObject5$i, _templateObject6$e, _templateObject7$9, _templateObject8$6;
+var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-bottom: 80px;\n  background-color: ", ";\n  color: var(--base-color-white);\n\n  ", ";\n\n  h2 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -6886,8 +6961,8 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$W, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
-var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
+var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject4$q, _templateObject5$j, _templateObject6$f, _templateObject7$a, _templateObject8$7;
+var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  position: relative;\n  display: flex;\n  background: var(--base-color-black);\n\n  @media ", " {\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n  }\n"])), devices.mobile);
 var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n  aspect-ratio: 16 / 9;\n  @supports not (aspect-ratio: 16 / 9) {\n    height: 56.25vw;\n  }\n\n  img {\n    width: 100%;\n    filter: brightness(0.7);\n    opacity: 0.95;\n  }\n\n  @media ", " {\n    height: fit-content;\n    aspect-ratio: 1 / 1;\n    @supports not (aspect-ratio: 1 / 1) {\n      height: 100vw;\n    }\n\n    img {\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n"])), devices.mobile);
 var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  align-self: center;\n  width: 100%;\n  z-index: ", ";\n  gap: 0 var(--grid-column-gap);\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . logo logo logo logo logo logo . . . . .'\n    '. . . text text text text text text text text text text . . .'\n    '. . . button button button button button button button button button button . . .';\n\n  @media ", " {\n    & {\n      height: 100%;\n      grid-template-rows: 1fr max-content 1fr;\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. text text text text text text text text text text text text .'\n        '. button button button button button button button button button button button button .';\n    }\n  }\n\n  @media ", " {\n    align-content: center;\n\n    & {\n      grid-template-areas:\n        '. . . logo logo logo logo logo logo logo logo . . .'\n        '. . text text text text text text text text text text . .'\n        '. . button button button button button button button button button button . .';\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
@@ -6957,8 +7032,8 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   }, "Scroll Down")) : null);
 };
 
-var _templateObject$X, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
-var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
+var _templateObject$Y, _templateObject2$G, _templateObject3$y, _templateObject4$r, _templateObject5$k;
+var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0 var(--grid-column-gap);\n\n  ", "\n\n  @media ", " {\n    grid-template-rows: 48px max-content max-content;\n  }\n"])), function (_ref) {
   var color = _ref.color;
   return "\n    background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n    color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n  ";
 }, devices.mobileAndTablet);
@@ -7002,8 +7077,8 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
   }))));
 };
 
-var _templateObject$Y;
-var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
+var _templateObject$Z;
+var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
@@ -7021,8 +7096,8 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
 };
 
-var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
-var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
+var _templateObject$_, _templateObject2$H, _templateObject3$z, _templateObject5$l, _templateObject6$g, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
+var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-overline-4);\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  margin: 0;\n  white-space: nowrap;\n  @media screen and (max-width: 920px) {\n    white-space: normal;\n  }\n  @media ", " {\n    white-space: nowrap;\n  }\n"])), devices.mobile);
 var BrandingTextBody = /*#__PURE__*/styled.p(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
@@ -7156,7 +7231,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
 var isIOS = function isIOS() {
   try {
     console.warn('Do not use this on server side rendering, it may throw an error.');
-    if (typeof navigator === undefined) return false;
+    if (typeof navigator === 'undefined') return false;
     return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
     navigator.userAgent.includes('Mac') && 'ontouchend' in document;
   } catch (e) {
@@ -7172,7 +7247,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -7354,8 +7429,8 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
   }), linkText))));
 };
 
-var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
-var MorePages = /*#__PURE__*/styled.span(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
+var _templateObject$$, _templateObject2$I, _templateObject3$A, _templateObject4$s;
+var MorePages = /*#__PURE__*/styled.span(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: not-allowed;\n  pointer-events: none;\n"])));
 var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 40px;\n  margin-bottom: 40px;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  padding: 0;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0);\n  }\n"]))); // PageNumber extends bodyText but uses subtitle-1 font size
 
 var PageNumber = /*#__PURE__*/styled.a(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: inherit;\n  margin: 0;\n  border-bottom: 1px solid transparent;\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n  :hover {\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n  /* active state - string used because react returns error for bool */\n  ", "\n"])), function (_ref) {
@@ -7431,8 +7506,8 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var _templateObject$10, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$m, _templateObject6$h;
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
 var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
 var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
 var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
@@ -7488,11 +7563,11 @@ var PeopleListing = function PeopleListing(_ref) {
   }));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u;
-var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
+var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 1.5;\n    margin-bottom: 4px;\n  }\n"])));
+var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
 
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
   return array.reduce(function (acc, item) {
@@ -7503,12 +7578,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
 var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
     if (musicTitle.length > 1 && index === musicTitle.length - 1) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, title));
     } else if (index > 0) {
-      return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
+      return /*#__PURE__*/React__default.createElement("i", {
+        key: index
+      }, ", ", title);
     }
 
-    return /*#__PURE__*/React__default.createElement("i", null, title);
+    return /*#__PURE__*/React__default.createElement("i", {
+      key: index
+    }, title);
   }));
 };
 
@@ -7560,14 +7641,14 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-var _templateObject$11, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$12, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 12;
 var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
 var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
 var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
 var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
-var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
+var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n\n  /* Overwrite template for card */\n  ", "\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
 }, devices.tablet, function (_ref2) {
@@ -7627,8 +7708,8 @@ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templa
 var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
 var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var asCardOverrides = /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
 var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  grid-area: left;\n  grid-area: ", ";\n  align-self: center;\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), function (_ref11) {
@@ -7838,10 +7919,10 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$12, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
+var _templateObject$13, _templateObject2$M, _templateObject3$E, _templateObject4$w, _templateObject5$o, _templateObject6$j, _templateObject7$d;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
-var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
+var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
 }, devices.tablet, function (_ref2) {
@@ -7953,8 +8034,8 @@ var PromoWithTitle = function PromoWithTitle(_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$13;
-var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
+var _templateObject$14;
+var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n"])));
 
 /**
  * DEPRECATED. Use RadioGroup2 instead
@@ -8012,8 +8093,8 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$14, _templateObject2$N, _templateObject3$F;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var _templateObject$15, _templateObject2$N, _templateObject3$F;
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-direction: ", ";\n  gap: ", ";\n"])), function (_ref) {
   var horizontalMode = _ref.horizontalMode;
   if (horizontalMode) return 'row';
@@ -8102,8 +8183,8 @@ var RadioGroup2 = function RadioGroup2(_ref) {
   }, error)));
 };
 
-var _templateObject$15, _templateObject2$O, _templateObject3$G;
-var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-lightgrey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
+var _templateObject$16, _templateObject2$O, _templateObject3$G;
+var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 26px 150px;\n  display: flex;\n  justify-content: space-between;\n  background-color: var(--base-color-lightgrey);\n  transition: transform 0.3s ease;\n  transform-origin: top;\n\n  @media ", " {\n    padding: 20px 20px;\n  }\n\n  @media ", " {\n    padding: 20px 50px;\n  }\n\n  &.closing {\n    transform: scaleY(0);\n  }\n"])), devices.mobile, devices.tablet);
 var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.3s ease-in-out;\n  font-size: var(--font-size-body-1);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-weight: var(--font-weight-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  line-height: var(--line-height-body-1);\n"])));
 var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
 
@@ -8167,8 +8248,8 @@ var StatusBanner = function StatusBanner(_ref) {
   })))));
 };
 
-var _templateObject$16;
-var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
+var _templateObject$17;
+var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 30px 0;\n\n  & > div {\n    row-gap: 0;\n  }\n\n  & h1,\n  & h2 {\n    margin: 16px 0;\n    white-space: pre-wrap;\n  }\n\n  @media ", " {\n    & h1,\n    & h2 {\n      margin: 12px 0;\n    }\n  }\n\n  & div {\n    font-size: var(--font-size-title-description);\n    line-height: var(--line-height-title-description);\n    margin-block-start: 0;\n  }\n"])), devices.mobile);
 
 var SectionTitle = function SectionTitle(_ref) {
   var title = _ref.title,
@@ -8194,8 +8275,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$17, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
-var stateStyles = /*#__PURE__*/css(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
+var _templateObject$18, _templateObject2$P, _templateObject3$H, _templateObject4$x, _templateObject5$p, _templateObject6$k, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
+var stateStyles = /*#__PURE__*/css(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:focus,\n  &.focus {\n    outline: ", ";\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n    pointer-events: none;\n    cursor: none;\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return "3px solid " + theme.colors.lapisLazuli;
 }, function (_ref2) {
@@ -8617,8 +8698,8 @@ function Select(_ref3) {
   }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$18, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .chord-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .chord-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .chord-select__indicator-separator {\n    display: none;\n  }\n  .chord-select__control--menu-is-open {\n    .chord-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .chord-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .chord-select__single-value,\n  .chord-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .chord-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .chord-select__single-value {\n    color: var(--base-color-black);\n  }\n  .chord-select__value-container {\n    padding-left: 20px;\n    padding-right: 15px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .chord-select--is-disabled {\n    .chord-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .chord-select__indicator,\n    .chord-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .chord-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .chord-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .chord-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.chord-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .chord-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .chord-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .chord-select__menu-notice {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-darkgrey);\n    text-align: left;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
@@ -8705,8 +8786,8 @@ var SelectComponent = function SelectComponent(_ref) {
   }, error)));
 };
 
-var _templateObject$19;
-var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  h2,\n  h3,\n  h4 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -20px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 12px;\n    margin-right: 8px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
+var _templateObject$1a;
+var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  h2,\n  h3,\n  h4 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\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    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: ", ";\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & strong {\n    font-weight: bold;\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -20px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 12px;\n    margin-right: 8px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 });
@@ -8734,8 +8815,8 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-var _templateObject$1a, _templateObject2$R;
-var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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 _templateObject$1b, _templateObject2$R;
+var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__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;
   return aspectRatio;
@@ -8783,8 +8864,8 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$1b, _templateObject2$S, _templateObject3$J;
-var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var _templateObject$1c, _templateObject2$S, _templateObject3$J;
+var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
 var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -8813,8 +8894,8 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$1c, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$q, _templateObject6$l;
-var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
+var _templateObject$1d, _templateObject2$T, _templateObject3$K, _templateObject4$z, _templateObject5$q, _templateObject6$l;
+var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  gap: 15px;\n  min-height: 50px;\n"])));
 var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
 var StyledImage = /*#__PURE__*/styled.img(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
@@ -8857,8 +8938,8 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1d, _templateObject2$U, _templateObject3$L, _templateObject4$A;
-var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
+var _templateObject$1e, _templateObject2$U, _templateObject3$L, _templateObject4$A;
+var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
 var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s 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"])));
@@ -8959,96 +9040,14 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1e, _templateObject2$V, _templateObject3$M, _templateObject4$B;
-var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n    @media ", " {\n      margin-left: 0px;\n    }\n  }\n  @media ", " {\n    display: ", ";\n    background: var(--base-color-", ");\n    border: 1px solid var(--base-color-", ");\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n  }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
-  var mobileOpen = _ref.mobileOpen;
-  return mobileOpen ? "block" : 'none';
-}, Colors.White, Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  border: 0;\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n  @media ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), Colors.Black, function (_ref2) {
-  var active = _ref2.active;
-  return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
-}, Colors.MidGrey, devices.mobile);
-var MobileButton = /*#__PURE__*/styled.button(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: none;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n  @media ", " {\n    display: block;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
-
-/**
- * Vertical menu component uses for navigation
- * inside website chapter. It looks like a vertical
- * list with clickable items on desktop and dropdown
- * list on mobile.
- *
- * ## Menu items
- * Menu items should be passed as `items` prop. This
- * should be an array of objects. Each object should
- * have `text` (text displayed as a menu item) and
- * `onClick` (click handler function)
- *
- * ## Active menu item
- * Active menu item should be passed as component `activeItem`
- * prop. This indicates on which menu item should be highlighted
- * as active one. Should be equal to `text` prop from one of the `items`
- */
-
-var AuxiliaryNav = function AuxiliaryNav(_ref) {
-  var items = _ref.items,
-      activeItem = _ref.activeItem;
-
-  var _useState = useState(false),
-      mobileOpen = _useState[0],
-      setMobileOpen = _useState[1];
-
-  var containerRef = useRef(null);
-
-  var mobileButtonClickHandler = function mobileButtonClickHandler() {
-    setMobileOpen(function (prev) {
-      return !prev;
-    });
-  };
-
-  var outsideClickHandler = function outsideClickHandler(event) {
-    if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMobileOpen(false);
-    }
-  };
-
-  useEffect(function () {
-    document.addEventListener('mousedown', outsideClickHandler);
-    return function () {
-      document.removeEventListener('mousedown', outsideClickHandler);
-    };
-  }, [containerRef]);
-  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
-    ref: containerRef,
-    "data-testid": "nav-menu-container"
-  }, /*#__PURE__*/React__default.createElement(MobileButton, {
-    mobileOpen: mobileOpen,
-    onClick: mobileButtonClickHandler,
-    "data-testid": "nav-menu-mobile-button"
-  }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: mobileOpen ? 'left' : 'right'
-  })), /*#__PURE__*/React__default.createElement(MenuList, {
-    mobileOpen: mobileOpen,
-    "data-testid": "nav-menu-list"
-  }, items.map(function (item, idx) {
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: item.text + "-" + idx
-    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
-      onClick: item.onClick,
-      active: item.text === activeItem,
-      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
-    }, item.text));
-  })));
-};
-
-var _templateObject$1f, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
+var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
 var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
   var color = _ref.color;
   return "var(--base-color-" + color + ")";
 });
-var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
+var BottomLine = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
 var Text = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
@@ -9139,6 +9138,279 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
+var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
+var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n    @media ", " {\n      margin-left: 0px;\n    }\n  }\n  @media ", " {\n    display: ", ";\n    background: var(--base-color-", ");\n    border: 1px solid var(--base-color-", ");\n    border-top: 0;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n  }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
+  var mobileOpen = _ref.mobileOpen;
+  return mobileOpen ? "block" : 'none';
+}, Colors.White, Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 20px 15px 5px;\n  border: 0;\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  background: ", ";\n  cursor: pointer;\n  &:hover {\n    background: var(--base-color-", ");\n  }\n  @media ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), Colors.Black, function (_ref2) {
+  var active = _ref2.active;
+  return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
+}, Colors.MidGrey, devices.mobile);
+var MobileButton = /*#__PURE__*/styled.button(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: none;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n  @media ", " {\n    display: block;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
+
+/**
+ * Vertical menu component uses for navigation
+ * inside website chapter. It looks like a vertical
+ * list with clickable items on desktop and dropdown
+ * list on mobile.
+ *
+ * ## Menu items
+ * Menu items should be passed as `items` prop. This
+ * should be an array of objects. Each object should
+ * have `text` (text displayed as a menu item) and
+ * `onClick` (click handler function)
+ *
+ * ## Active menu item
+ * Active menu item should be passed as component `activeItem`
+ * prop. This indicates on which menu item should be highlighted
+ * as active one. Should be equal to `text` prop from one of the `items`
+ */
+
+var AuxiliaryNav = function AuxiliaryNav(_ref) {
+  var items = _ref.items,
+      activeItem = _ref.activeItem;
+
+  var _useState = useState(false),
+      mobileOpen = _useState[0],
+      setMobileOpen = _useState[1];
+
+  var containerRef = useRef(null);
+
+  var mobileButtonClickHandler = function mobileButtonClickHandler() {
+    setMobileOpen(function (prev) {
+      return !prev;
+    });
+  };
+
+  var outsideClickHandler = function outsideClickHandler(event) {
+    if (containerRef.current && !containerRef.current.contains(event.target)) {
+      setMobileOpen(false);
+    }
+  };
+
+  useEffect(function () {
+    document.addEventListener('mousedown', outsideClickHandler);
+    return function () {
+      document.removeEventListener('mousedown', outsideClickHandler);
+    };
+  }, [containerRef]);
+  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
+    ref: containerRef,
+    "data-testid": "nav-menu-container"
+  }, /*#__PURE__*/React__default.createElement(MobileButton, {
+    mobileOpen: mobileOpen,
+    onClick: mobileButtonClickHandler,
+    "data-testid": "nav-menu-mobile-button"
+  }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: mobileOpen ? 'left' : 'right'
+  })), /*#__PURE__*/React__default.createElement(MenuList, {
+    mobileOpen: mobileOpen,
+    "data-testid": "nav-menu-list"
+  }, items.map(function (item, idx) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: item.text + "-" + idx
+    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
+      onClick: item.onClick,
+      active: item.text === activeItem,
+      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
+    }, item.text));
+  })));
+};
+
+var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
+var TableHeader = /*#__PURE__*/styled.th(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 24px 0;\n  text-align: left;\n  text-transform: uppercase;\n"])));
+var TableCell = /*#__PURE__*/styled.td(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  padding: 34px 30px 34px 0;\n  text-align: left;\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])), function (props) {
+  return "calc(100% / " + (props.columns - 1) + ")";
+});
+var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {
+  return "var(--base-color-" + props.lineColor + ")";
+});
+var Pagination$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--base-color-transparent);\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+  var active = _ref.active;
+  return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
+});
+var Next = /*#__PURE__*/styled.span(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n"])));
+var TableContainer = /*#__PURE__*/styled.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
+var Container$6 = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
+
+var Table = function Table(_ref) {
+  var columns = _ref.columns,
+      headings = _ref.headings,
+      children = _ref.children,
+      lineColors = _ref.lineColors,
+      rowsPerPage = _ref.rowsPerPage,
+      pagination = _ref.pagination;
+
+  var _useState = useState(0),
+      currentPage = _useState[0],
+      setCurrentPage = _useState[1];
+
+  var _useState2 = useState(false),
+      showScrollButtons = _useState2[0],
+      setShowScrollButtons = _useState2[1];
+
+  var Content = function Content(_ref2) {
+    var content = _ref2.content;
+    return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
+  };
+
+  var Cell = function Cell(_ref3) {
+    var cell = _ref3.cell,
+        cellIndex = _ref3.cellIndex,
+        columns = _ref3.columns;
+    return /*#__PURE__*/React__default.createElement(TableCell, {
+      key: cellIndex,
+      columns: columns
+    }, /*#__PURE__*/React__default.createElement(Content, {
+      content: cell
+    }));
+  };
+
+  var Row = function Row(_ref4) {
+    var row = _ref4.row,
+        rowIndex = _ref4.rowIndex,
+        columns = _ref4.columns,
+        lineColor = _ref4.lineColor;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: rowIndex
+    }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
+      return /*#__PURE__*/React__default.createElement(Cell, {
+        key: index,
+        cell: cell,
+        cellIndex: index,
+        columns: columns
+      });
+    })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+      colSpan: columns
+    }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
+      lineColor: lineColor,
+      role: "presentation"
+    }))));
+  };
+
+  var lineColor = lineColors != null ? lineColors : ThemeType.Cinema;
+  var tableRef = useRef(null);
+  useEffect(function () {
+    if (tableRef.current) {
+      tableRef.current.scrollTo(0, 0);
+    }
+  }, [children]);
+
+  var horizontalScroll = function horizontalScroll() {
+    if (tableRef.current) {
+      setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
+    }
+  };
+
+  useEffect(function () {
+    horizontalScroll();
+    window.addEventListener('resize', horizontalScroll);
+    return function () {
+      return window.removeEventListener('resize', horizontalScroll);
+    };
+  }, []);
+
+  var scrollTable = function scrollTable(direction) {
+    if (tableRef.current) {
+      var currentScroll = tableRef.current.scrollLeft;
+      var scrollAmount = direction === 'left' ? -300 : 300;
+      tableRef.current.scrollTo({
+        left: currentScroll + scrollAmount,
+        behavior: 'smooth'
+      });
+    }
+  };
+
+  var totalRows = Array.isArray(children) ? children.length : 0;
+  var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
+  var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
+  var pageNumbers = Array.from({
+    length: totalPages
+  }, function (_, i) {
+    return i;
+  });
+  var reducedPageNumbers = reducePages(pageNumbers, currentPage);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
+    onClickPrev: function onClickPrev() {
+      return scrollTable('left');
+    },
+    onClickNext: function onClickNext() {
+      return scrollTable('right');
+    }
+  })), /*#__PURE__*/React__default.createElement(Container$6, {
+    role: "table",
+    tabIndex: 0,
+    ref: tableRef
+  }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: columns
+  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
+    lineColor: lineColor,
+    role: "presentation"
+  })))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
+    return /*#__PURE__*/React__default.createElement(TableHeader, {
+      key: index,
+      role: "columnheader"
+    }, /*#__PURE__*/React__default.createElement(Content, {
+      content: heading
+    }));
+  }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: columns
+  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
+    lineColor: lineColor,
+    role: "presentation"
+  }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
+    return /*#__PURE__*/React__default.createElement(Row, {
+      key: rowIndex,
+      row: row,
+      rowIndex: rowIndex,
+      columns: columns,
+      lineColor: lineColor
+    });
+  }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "previous-page",
+    onClick: function onClick() {
+      return setCurrentPage(currentPage - 1);
+    },
+    tabIndex: 0,
+    "aria-label": "Previous page"
+  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: "down"
+  })))), reducedPageNumbers.map(function (number) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: number
+    }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+      key: number,
+      onClick: function onClick() {
+        return setCurrentPage(number);
+      },
+      tabIndex: 0,
+      active: "" + (number === currentPage)
+    }, number + 1));
+  }), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "more-after"
+  }, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
+    key: "next-page",
+    onClick: function onClick() {
+      return setCurrentPage(currentPage + 1);
+    },
+    tabIndex: 0,
+    "aria-label": "Next page"
+  }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "DropdownArrow",
+    direction: "up"
+  })))))));
+};
+
 var UpsellSection = function UpsellSection(_ref) {
   var title = _ref.title,
       richText = _ref.richText,
@@ -9227,9 +9499,9 @@ var LiveChat = function LiveChat() {
   });
 };
 
-var _templateObject$1g, _templateObject2$X;
-var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--base-color-white);\n"])), zIndexes.anchor);
-var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
+var _templateObject$1i, _templateObject2$Y;
+var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: 0;\n  position: sticky;\n  z-index: ", ";\n  background-color: var(--base-color-white);\n"])), zIndexes.anchor);
+var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  padding: 28px 0 26px;\n\n  @media ", " {\n    padding: 24px 0 28px;\n  }\n\n  @media ", " {\n    border-bottom: none;\n  }\n"])), function (_ref) {
   var hideBottomBorder = _ref.hideBottomBorder;
   return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
 }, devices.mobileAndTablet, devices.mobile);
@@ -9257,11 +9529,11 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1h, _templateObject2$Y, _templateObject3$O, _templateObject4$D;
-var InnerModal = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
-var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
-var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
+var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
+var InnerModal = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 62px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n  position: relative;\n\n  @media ", ", ", " {\n    height: 100vh;\n    padding: 62px 0 0;\n  }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
+var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  margin: 15px;\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  @media ", " {\n    margin: 25px;\n  }\n  @media ", ", ", " {\n    margin: 30px;\n  }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
+var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
 var MAX_Z_INDEX = 9999999999;
 
@@ -9381,8 +9653,8 @@ var ModalWindow = function ModalWindow(_ref) {
   })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
-var _templateObject$1i;
-var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
+var _templateObject$1k;
+var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  html {\n    --base-color-primary: ", ";\n    --base-color-core: ", ";\n    --base-color-stream: ", ";\n    --base-color-cinema: ", ";\n    --base-color-white: ", ";\n    --base-color-black: ", ";\n    --base-color-dark-grey: ", ";\n    --base-color-mid-grey: ", ";\n    --base-color-light-grey: ", ";\n    --error-color-state: ", ";\n    --medium-color-state: ", ";\n    --good-color-state: ", ";\n    --base-color-darkgrey: ", ";\n    --base-color-midgrey: ", ";\n    --base-color-lightgrey: ", ";\n    --base-color-transparent: transparent;\n    --base-color-errorstate: ", ";\n    --base-color-mediumstate: ", ";\n    --base-color-goodstate: ", ";\n    --base-color-progress: ", ";\n    --base-color-navigation: ", ";\n    --base-color-lapislazuli: ", ";\n    --base-color-lemonchiffon: ", ";\n\n    --button-height: ", ";\n    --button-line-height: ", ";\n    --button-padding-x: ", ";\n    --button-padding-y: ", ";\n    --button-padding-y-icon: ", ";\n    --button-icon-margin: ", ";\n    --button-icon-width: ", ";\n    --button-icon-height: ", ";\n    --button-font-size: ", ";\n    --button-font-weight: ", ";\n\n    --font-size-header-1: ", ";\n    --font-weight-header-1: ", ";\n    --letter-spacing-header-1: ", ";\n    --line-height-header-1: ", ";\n    --margin-header-1: ", ";\n\n    --font-size-header-2: ", ";\n    --font-weight-header-2: ", ";\n    --letter-spacing-header-2: ", ";\n    --line-height-header-2: ", ";\n    --margin-header-2: ", ";\n\n    --font-size-header-3: ", ";\n    --font-weight-header-3: ", ";\n    --letter-spacing-header-3: ", ";\n    --line-height-header-3: ", ";\n    --margin-header-3: ", ";\n\n    --font-size-header-4: ", ";\n    --font-weight-header-4: ", ";\n    --letter-spacing-header-4: ", ";\n    --line-height-header-4: ", ";\n    --margin-header-4: ", ";\n\n    --font-size-header-5: ", ";\n    --font-weight-header-5: ", ";\n    --letter-spacing-header-5: ", ";\n    --line-height-header-5: ", ";\n    --margin-header-5: ", ";\n\n    --font-size-header-6: ", ";\n    --font-weight-header-6: ", ";\n    --letter-spacing-header-6: ", ";\n    --line-height-header-6: ", ";\n    --margin-header-6: ", ";\n\n    --font-size-altHeader-3: ", ";\n    --font-weight-altHeader-3: ", ";\n    --letter-spacing-altHeader-3: ", ";\n    --line-height-altHeader-3: ", ";\n\n    --font-size-altHeader-4: ", ";\n    --font-weight-altHeader-4: ", ";\n    --letter-spacing-altHeader-4: ", ";\n    --line-height-altHeader-4: ", ";\n\n    --font-size-altHeader-5: ", ";\n    --font-weight-altHeader-5: ", ";\n    --letter-spacing-altHeader-5: ", ";\n    --line-height-altHeader-5: ", ";\n\n    --font-size-altHeader-6: ", ";\n    --font-weight-altHeader-6: ", ";\n    --letter-spacing-altHeader-6: ", ";\n    --line-height-altHeader-6: ", ";\n\n    --font-size-overline-1: ", ";\n    --font-weight-overline-1: ", ";\n    --letter-spacing-overline-1: ", ";\n    --line-height-overline-1: ", ";\n\n    --font-size-overline-2: ", ";\n    --font-weight-overline-2: ", ";\n    --letter-spacing-overline-2: ", ";\n    --line-height-overline-2: ", ";\n\n    --font-size-overline-3: ", ";\n    --font-weight-overline-3: ", ";\n    --letter-spacing-overline-3: ", ";\n    --line-height-overline-3: ", "; \n\n    --font-size-overline-4: ", ";\n    --font-weight-overline-4: ", ";\n    --letter-spacing-overline-4: ", ";\n    --line-height-overline-4: ", ";\n\n    --font-size-body-1: ", ";\n    --font-weight-body-1: ", ";\n    --letter-spacing-body-1: ", ";\n    --line-height-body-1: ", ";\n\n    --font-size-body-2: ", ";\n    --font-weight-body-2: ", ";\n    --letter-spacing-body-2: ", ";\n    --line-height-body-2: ", ";\n\n    --font-size-body-3: ", ";\n    --font-weight-body-3: ", ";\n    --letter-spacing-body-3: ", ";\n    --line-height-body-3: ", ";\n\n    --font-size-subtitle-1: ", ";\n    --font-weight-subtitle-1: ", ";\n    --letter-spacing-subtitle-1: ", ";\n    --line-height-subtitle-1: ", ";\n    \n    --font-size-subtitle-2: ", ";\n    --font-weight-subtitle-2: ", ";\n    --letter-spacing-subtitle-2: ", ";\n    --line-height-subtitle-2: ", ";\n\n    --font-size-title-description: ", ";\n    --line-height-title-description: ", ";\n    --line-height-listing: ", ";\n    --font-size-individual-listing-name: ", ";\n    --line-height-individual-listing-name: ", ";\n    --line-height-people-listing-gap: ", ";\n\n    --font-family-header: ", ";\n    --font-family-altHeader: ", ";\n    --font-family-body: ", ";\n    --font-family-body-italics: ", ";\n    --font-family-buttons: ", ";\n    --font-family-overline: ", ";\n    --font-family-subtitle: ", ";\n    --font-family-people-listing-role: ", ";\n    --font-family-people-listing-name: ", ";\n\n    --font-feature-settings-header: ", ";\n    --font-feature-settings-altHeader: ", ";\n    --font-feature-settings-overline: ", ";\n    --font-feature-settings-subtitle: ", ";\n    --font-feature-settings-body: ", ";\n    --font-feature-settings-navigation: ", ";\n\n    --text-transform-header: ", ";\n    --text-transform-altHeader: ", ";\n    --text-transform-body: ", ";\n    --text-transform-overline: ", ";\n    --text-transform-subtitle: ", ";\n\n    --word-break-header: ", ";\n    --word-break-altHeader: ", ";\n    --word-break-body: ", ";\n    --word-break-overline: ", ";\n    --word-break-subtitle: ", ";\n\n    --font-family-navigation: ", ";\n    --font-size-navigation: ", ";\n    --font-weight-navigation: ", ";\n    --line-height-navigation: ", ";\n    --text-transform-navigation: ", ";\n    --letter-spacing-navigation: ", ";\n\n    --navigation-small-gap: ", ";\n    --navigation-middle-gap: ", ";\n    --navigation-large-gap: ", ";\n    --navigation-xlarge-gap: ", ";\n    --navigation-large-margin: ", ";\n\n    --rotator-button-width: ", ";\n    --rotator-button-icon-width: ", ";\n\n    --font-size-search: ", ";\n    --font-family-search: ", ";\n\n    --grid-margin: ", ";\n    --grid-outer-margin: ", ";\n    --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n    --grid-column-gap: ", ";\n    --grid-margin: 0;\n\n    --footer-height: ", ";\n    --footer-padding-top: ", ";\n    --footer-padding-bottom: ", ";\n    --footer-items-gap: ", ";\n    --footer-media-gap: ", ";\n    --footer-media-icon-width: ", ";\n    --footer-media-icon-height: ", ";\n    --footer-vertical-spacing-lg: ", ";\n    --footer-vertical-spacing-sm: ", ";\n\n    --text-link-underline-offset: ", ";\n\n    --cards-spacing-stack: ", ";\n\n    --editorial-subtitle-margin-bottom: ", ";\n    --editorial-margin-between: ", ";\n    --editorial-spacing-hover: ", ";\n    --anchor-tabs-height: 70px;\n    \n\n    @media ", " {\n\n      --font-size-header-1: ", ";\n      --font-weight-header-1: ", ";\n      --letter-spacing-header-1: ", ";\n      --line-height-header-1: ", ";\n  \n      --font-size-header-2: ", ";\n      --font-weight-header-2: ", ";\n      --letter-spacing-header-2: ", ";\n      --line-height-header-2: ", ";\n  \n      --font-size-header-3: ", ";\n      --font-weight-header-3: ", ";\n      --letter-spacing-header-3: ", ";\n      --line-height-header-3: ", ";\n  \n      --font-size-header-4: ", ";\n      --font-weight-header-4: ", ";\n      --letter-spacing-header-4: ", ";\n      --line-height-header-4: ", ";\n  \n      --font-size-header-5: ", ";\n      --font-weight-header-5: ", ";\n      --letter-spacing-header-5: ", ";\n      --line-height-header-5: ", ";\n  \n      --font-size-header-6: ", ";\n      --font-weight-header-6: ", ";\n      --letter-spacing-header-6: ", ";\n      --line-height-header-6: ", ";\n  \n      --font-size-altHeader-3: ", ";\n      --font-weight-altHeader-3: ", ";\n      --letter-spacing-altHeader-3: ", ";\n      --line-height-altHeader-3: ", ";\n  \n      --font-size-altHeader-4: ", ";\n      --font-weight-altHeader-4: ", ";\n      --letter-spacing-altHeader-4: ", ";\n      --line-height-altHeader-4: ", ";\n  \n      --font-size-altHeader-5: ", ";\n      --font-weight-altHeader-5: ", ";\n      --letter-spacing-altHeader-5: ", ";\n      --line-height-altHeader-5: ", ";\n  \n      --font-size-altHeader-6: ", ";\n      --font-weight-altHeader-6: ", ";\n      --letter-spacing-altHeader-6: ", ";\n      --line-height-altHeader-6: ", ";\n  \n      --font-size-overline-1: ", ";\n      --font-weight-overline-1: ", ";\n      --letter-spacing-overline-1: ", ";\n      --line-height-overline-1: ", ";\n  \n      --font-size-overline-2: ", ";\n      --font-weight-overline-2: ", ";\n      --letter-spacing-overline-2: ", ";\n      --line-height-overline-2: ", ";\n  \n      --font-size-body-1: ", ";\n      --font-weight-body-1: ", ";\n      --letter-spacing-body-1: ", ";\n      --line-height-body-1: ", ";\n  \n      --font-size-body-2: ", ";\n      --font-weight-body-2: ", ";\n      --letter-spacing-body-2: ", ";\n      --line-height-body-2: ", ";\n  \n      --font-size-body-3: ", ";\n      --font-weight-body-3: ", ";\n      --letter-spacing-body-3: ", ";\n      --line-height-body-3: ", ";\n  \n      --font-size-subtitle-1: ", ";\n      --font-weight-subtitle-1: ", ";\n      --letter-spacing-subtitle-1: ", ";\n      --line-height-subtitle-1: ", ";\n      \n      --font-size-subtitle-2: ", ";\n      --font-weight-subtitle-2: ", ";\n      --letter-spacing-subtitle-2: ", ";\n      --line-height-subtitle-2: ", ";\n\n      --font-size-title-description: ", ";\n      --line-height-title-description: ", ";\n      --line-height-people-listing-gap: ", ";\n\n      --font-size-search: ", ";\n      --font-family-search: ", ";\n\n      --font-family-header: ", ";\n      --font-family-altHeader: ", ";\n      --font-family-body: ", ";\n      --font-family-body-italics: ", ";\n      --font-family-buttons: ", ";\n      --font-family-overline: ", ";\n      --font-family-subtitle: ", ";\n      --font-family-people-listing-role: ", ";\n      --font-family-people-listing-name: ", ";\n  \n      --font-feature-settings-header: ", ";\n      --font-feature-settings-altHeader: ", ";\n      --font-feature-settings-overline: ", ";\n      --font-feature-settings-subtitle: ", ";\n      --font-feature-settings-body: ", ";\n      --font-feature-settings-navigation: ", ";\n  \n      --text-transform-header: ", ";\n      --text-transform-altHeader: ", ";\n      --text-transform-body: ", ";\n      --text-transform-overline: ", ";\n      --text-transform-subtitle: ", ";\n  \n      --word-break-header: ", ";\n      --word-break-altHeader: ", ";\n      --word-break-body: ", ";\n      --word-break-overline: ", ";\n      --word-break-subtitle: ", ";\n  \n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n\n      --footer-height: ", ";\n      --footer-padding-top: ", ";\n      --footer-padding-bottom: ", ";\n      --footer-items-gap: ", ";\n      --footer-media-gap: ", ";\n      --footer-media-icon-width: ", ";\n      --footer-media-icon-height: ", ";\n      --footer-vertical-spacing-lg: ", ";\n      --footer-vertical-spacing-sm: ", ";\n\n      --anchor-tabs-height: 60px;\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n    }\n\n    @media ", " {\n      --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n      --grid-column-gap: ", ";\n      --grid-margin: ", ";\n      --rotator-button-width: ", ";\n      --rotator-button-icon-width: ", ";\n\n      --font-size-header-6: ", ";\n\n      --font-size-altHeader-4: ", ";\n\n      --font-size-body-1: ", ";\n    }\n\n    @media ", " {\n      \n    }\n\n    @media ", " {\n      \n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.colors.primary;
 }, function (_ref2) {
@@ -10323,5 +10595,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1i || (_templa
   return theme.fonts.tablet.sizes.body[1];
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
+export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
 //# sourceMappingURL=chord.esm.js.map