@royaloperahouse/chord 2.2.3 → 2.2.5-a-chord-development

package/dist/chord.esm.js

@@ -1,4 +1,4 @@
-import React__default, { createElement, memo, useRef, useCallback, useEffect, useState } from 'react';
+import React__default, { createElement, memo, useRef, useCallback, useEffect, useState, forwardRef } from 'react';
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import { renderToString } from 'react-dom/server';
@@ -3407,111 +3407,133 @@ var TextArea = function TextArea(_ref) {
   }, error))));
 };
 
-var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3, _templateObject5$1;
-var TextFieldContainer = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var textStyles = /*#__PURE__*/css(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.fonts.desktop.weights.body[1];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fonts.desktop.sizes.altHeaders[6];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.spacing[7];
+var _templateObject$n, _templateObject2$b, _templateObject3$6, _templateObject4$3, _templateObject5$1, _templateObject6;
+var Container = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObject2$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n"])), function (_ref) {
+  var width = _ref.width;
+  if (!width) return 'none';
+  return width + 'px';
 });
-var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: ", ";\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
-  var width = _ref4.width;
-  return width ? width + 'px' : '196px';
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.darkgrey;
-}, function (_ref6) {
-  var error = _ref6.error,
-      theme = _ref6.theme;
-  if (!error) return;
-  return "\n      border: 1px solid " + theme.colors.error + ";\n    ";
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.colors.lightgrey;
-}, function (_ref8) {
-  var darkMode = _ref8.darkMode,
-      theme = _ref8.theme;
-  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
-  return "3px solid " + theme.colors.lapisLazuli;
+var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__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  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";
+}, function (_ref3) {
+  var error = _ref3.error;
+  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
+  return "1px solid var(--base-color-darkgrey)";
+}, function (_ref4) {
+  var darkMode = _ref4.darkMode;
+  if (darkMode) return "4px solid var(--base-color-lemonchiffon)";
+  return "3px solid var(--base-color-lapislazuli)";
 });
-var TextLabel = /*#__PURE__*/styled.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
-  var darkMode = _ref9.darkMode,
-      theme = _ref9.theme;
-  return darkMode ? theme.colors.white : theme.colors.black;
+var ShowHideButton = /*#__PURE__*/styled.button(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 53px;\n  top: 50%;\n  margin-top: calc(var(--line-height-overline-1) / 2 * -1);\n  right: 20px;\n  border: none;\n  background: none;\n  padding: 0;\n  display: block;\n  text-align: left;\n  cursor: pointer;\n  white-space: nowrap;\n"])));
+var TextLabel = /*#__PURE__*/styled.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 20px;\n  color: ", ";\n"])), function (_ref5) {
+  var darkMode = _ref5.darkMode;
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-black)";
 });
-var ErrorLabel = /*#__PURE__*/styled.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref10) {
-  var darkMode = _ref10.darkMode,
-      theme = _ref10.theme;
-  return darkMode ? theme.colors.white : theme.colors.error;
+var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n  color: ", ";\n"])), function (_ref6) {
+  var darkMode = _ref6.darkMode;
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-errorstate)";
 });
 
-var _excluded$6 = ["label", "error", "darkMode", "width"];
+var _excluded$6 = ["label", "type", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
- * and adds some extra information around it (i.e. a text label and an error label).
+ * and adds some extra states and information around it (i.e. a text and an error labels,
+ * error state, show/hide button for password field).
  *
- * # Labels
+ * # Label
  * You can use this component just like you would use a regular `<input />` element,
  * just with the extra `label` prop, to set the label of the content. For example:
  * ```tsx
  * <TextField label="This is a label" />
  * ```
  *
- * **IMPORTANT!** If you want to render a `<TextField />` without a label, you will
- * have to make the label an empty string:
- * ```tsx
- * <TextField label='' />
- * ```
+ * # Error state
+ * An error label will be shown below the text input field if the `error` prop exists.
+ * Also input will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
  *
- * This is not recommended, as it makes the input non-accessible - all `<TextField />`s should
- * have a label.
+ * # Password mode
+ * If type `password` provided this will be rendered with the `Show/Hide` button over the input field.
+ * Clicking on that changes type to `text` and back to `password`.
  *
  * # Light / Dark mode
  * The component can also adapt its styles for light / dark mode. If you want this component
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
  * ```tsx
  * <div>
- *     <WhiteBackgroundContainer>
- *         <TextField label="..." />
- *     </WhiteBackgroundContainer>
- *
- *     <BlackBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlackBackgroundContainer>
- *     <BlueBackgroundContainer>
- *         <TextField darkMode label="..." />
- *     </BlueBackgroundContainer>
+ *   <WhiteBackgroundContainer>
+ *     <TextField label="..." />
+ *   </WhiteBackgroundContainer>
+ *   <BlackBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlackBackgroundContainer>
+ *   <BlueBackgroundContainer>
+ *     <TextField darkMode label="..." />
+ *   </BlueBackgroundContainer>
  * </div>
  * ```
  */
 
-var TextField = function TextField(_ref) {
+var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
       error = _ref.error,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       width = _ref.width,
       inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
-  return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel, {
+  var _useState = useState(false),
+      showPassword = _useState[0],
+      setShowPassword = _useState[1];
+
+  var isPasswordField = type === 'password';
+  var showHideButtonText = showPassword ? 'Hide' : 'Show';
+
+  var inputType = function () {
+    if (type !== 'password') return type;
+    if (showPassword) return 'text';
+    return 'password';
+  }();
+
+  var showHideClickHandler = function showHideClickHandler() {
+    setShowPassword(function (prev) {
+      return !prev;
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel, {
     darkMode: darkMode,
     "data-testid": "text-field-text-label"
-  }, label), /*#__PURE__*/React__default.createElement(Input, Object.assign({
-    type: "text",
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, label)), /*#__PURE__*/React__default.createElement(InputWrapper, {
+    width: width
+  }, /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    isPasswordField: isPasswordField,
+    type: inputType,
     error: error,
     darkMode: darkMode,
     "data-testid": "text-field-input",
-    width: width
-  }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel, {
+    ref: ref
+  }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
+    type: "button",
+    onClick: showHideClickHandler
+  }, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 1
+  }, showHideButtonText)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel, {
     darkMode: darkMode,
     "data-testid": "text-field-error-label"
-  }, error) : null);
-};
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, error)));
+});
 
 var _templateObject$o, _templateObject2$c;
 var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid;\n  padding-bottom: ", ";\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  color: var(--base-color-", ");\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n"])), function (_ref) {
@@ -3694,7 +3716,7 @@ var Tickbox = function Tickbox(_ref) {
   }, error)));
 };
 
-var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject$r, _templateObject2$f, _templateObject3$9, _templateObject4$6, _templateObject5$2, _templateObject6$1, _templateObject7, _templateObject8;
 var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n"])), function (_ref) {
   var color = _ref.color;
   return color;
@@ -3706,7 +3728,7 @@ var Line = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /
 var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 16px;\n\n  @media ", " {\n    margin-bottom: 8px;\n  }\n"])), devices.mobileAndTablet);
 var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-header-4);\n  font-family: var(--font-family-header);\n  font-feature-settings: var(--font-feature-settings-header);\n  font-weight: var(--font-weight-header-4);\n  letter-spacing: var(--letter-spacing-header-4);\n  line-height: var(--line-height-header-4);\n  text-transform: var(--text-transform-header);\n  display: flex;\n\n  @media ", " {\n    font-size: var(--font-size-header-5);\n  }\n"])), devices.tablet);
 var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-overline);\n  font-size: var(--font-size-overline-1);\n  font-weight: var(--font-weight-overline-1);\n  line-height: var(--line-height-overline-1);\n  letter-spacing: var(--letter-spacing-overline-1);\n  text-transform: var(--text-transform-overline);\n  margin-top: 4px;\n"])));
-var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 20px;\n\n  @media ", " {\n    margin: 0 12px;\n  }\n\n  @media ", " {\n    margin: 0 12px;\n  }\n"])), devices.tablet, devices.mobile);
 var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
@@ -3817,13 +3839,13 @@ var TypeTags = function TypeTags(_ref) {
   }));
 };
 
-var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$1, _templateObject7$1;
+var _templateObject$t, _templateObject2$g, _templateObject3$a, _templateObject4$7, _templateObject5$3, _templateObject6$2, _templateObject7$1;
 var VideoPlayButton = /*#__PURE__*/styled.button(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  background-color: #fff;\n  border: none;\n  padding: 12px;\n"])));
 var VideoControlsWrapper = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50px;\n  bottom: 24px;\n  display: flex;\n  align-items: center;\n  @media ", " {\n    left: 20px;\n    bottom: 12px;\n  }\n"])), devices.mobile);
 var VideoVolume = /*#__PURE__*/styled.input(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100px;\n  margin-left: 24px;\n"])));
 var VideoMute = /*#__PURE__*/styled.button(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 17px;\n  height: 17px;\n  background: none;\n  border: none;\n  padding: 0;\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])));
 var thumbStyes = /*#__PURE__*/css(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  appearance: none;\n  border: none;\n  height: 8px;\n  width: 8px;\n  border-radius: 50%;\n  background: #ffffff;\n  border: none;\n  transform: translateY(-25%);\n"])));
-var trackStyles = /*#__PURE__*/css(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  height: 4px;\n  cursor: pointer;\n  background: rgb(241, 241, 241, 0.5);\n  border-radius: 1.3px;\n  border: none;\n"])));
+var trackStyles = /*#__PURE__*/css(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  cursor: pointer;\n  height: 4px;\n  cursor: pointer;\n  background: rgb(241, 241, 241, 0.5);\n  border-radius: 1.3px;\n  border: none;\n"])));
 var VolumeControlsWrapper = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 12px 12px;\n  padding: 0;\n  background-color: rgb(26, 26, 26, 0.6);\n  height: 36px;\n  width: ", ";\n  align-items: center;\n  justify-content: center;\n\n  /* Range slider overrides */\n  input[type='range' i] {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 42px;\n    margin: 0;\n    margin-left: 7px;\n    background: transparent; /* Otherwise white in Chrome */\n\n    ::-webkit-slider-runnable-track {\n      ", "\n    }\n    ::-moz-range-track {\n      ", "\n    }\n    ::-ms-track {\n      ", "\n    }\n    ::-ms-fill-lower {\n      ", "\n    }\n    ::-ms-fill-upper {\n      ", "\n    }\n\n    ::-webkit-slider-thumb {\n      ", "\n    }\n    ::-moz-range-thumb {\n      ", "\n    }\n    ::-ms-thumb {\n      ", "\n    }\n  }\n"])), function (_ref) {
   var volumeHidden = _ref.volumeHidden;
   return volumeHidden ? '40px' : '100px';
@@ -4157,7 +4179,7 @@ var Component = function Component(_ref) {
   }, error)));
 };
 
-var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject$v, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$5, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11;
 var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    ", "\n  }\n"])), devices.mobileAndTablet, function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen && "\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: " + zIndexes.overlay + ";\n      background-color: var(--base-color-white);\n      overflow-y: auto;\n      scrollbar-width: none;\n      ::-webkit-scrollbar {\n        display: none;\n      }\n    ";
@@ -4172,7 +4194,7 @@ var GridItemSearch = /*#__PURE__*/styled(GridItem)(_templateObject5$5 || (_templ
   var visible = _ref3.visible;
   return visible ? 'visible' : 'hidden';
 }, zIndexes.search, devices.mobile);
-var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref4) {
+var NavigationGridMobile = /*#__PURE__*/styled(Grid)(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: grid;\n    background-color: var(--base-color-white);\n    padding-top: ", ";\n    padding-bottom: var(--navigation-large-margin);\n  }\n"])), devices.mobileAndTablet, function (_ref4) {
   var theme = _ref4.theme;
   return theme.spacing[12];
 });
@@ -4840,12 +4862,12 @@ var Tabs = function Tabs(_ref) {
   }, "MENU"))));
 };
 
-var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject5$6, _templateObject6$3, _templateObject7$3;
+var _templateObject$B, _templateObject2$m, _templateObject3$f, _templateObject5$6, _templateObject6$4, _templateObject7$3;
 var SearchBarContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: var(--base-color-transparent);\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
 var SvgContainerClose = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
-var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
+var SearchLinkContainer = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
 var SearchBar = function SearchBar(_ref) {
@@ -5078,13 +5100,13 @@ var Navigation = function Navigation(_ref) {
   })))));
 };
 
-var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$4;
+var _templateObject$C, _templateObject2$n, _templateObject3$g, _templateObject4$c, _templateObject5$7, _templateObject6$5;
 var FooterSection = /*#__PURE__*/styled.section(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  color: var(--base-color-white);\n"])));
 var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-height);\n  padding-top: var(--footer-padding-top);\n  padding-bottom: var(--footer-padding-bottom);\n  display: grid;\n  grid-template-rows:\n    min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg) min-content var(\n      --footer-vertical-spacing-sm\n    )\n    min-content;\n  grid-template-areas:\n    'row1'\n    '.'\n    'row2'\n    '.'\n    'row3'\n    '.'\n    'row4';\n"])));
 var PolicyLinksRow = /*#__PURE__*/styled.div(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row1;\n  justify-self: center;\n\n  @media ", " {\n    & {\n      justify-self: start;\n      grid-area: row2;\n    }\n  }\n"])), devices.mobile);
 var ContactNewsletterRow = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row2;\n\n  @media ", " {\n    & {\n      grid-area: row1;\n    }\n  }\n"])), devices.mobile);
 var ArtsLogoRow = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row3;\n  justify-self: center;\n\n  @media ", " {\n    justify-self: start;\n  }\n"])), devices.mobile);
-var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row4;\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-3);\n  line-height: var(--line-height-body-3);\n  text-align: center;\n  margin: 0;\n  padding: 0;\n\n  @media ", " {\n    text-align: left;\n  }\n"])), devices.mobile);
+var AdditionalInfo = /*#__PURE__*/styled.p(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: row4;\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-3);\n  line-height: var(--line-height-body-3);\n  text-align: center;\n  margin: 0;\n  padding: 0;\n\n  @media ", " {\n    text-align: left;\n  }\n"])), devices.mobile);
 
 var _templateObject$D, _templateObject2$o, _templateObject3$h;
 var PolicyLinksList = /*#__PURE__*/styled.ul(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n  display: flex;\n  gap: var(--footer-items-gap);\n\n  @media ", " {\n    & {\n      margin: 0;\n      flex-direction: column;\n    }\n  }\n"])), devices.mobile);
@@ -5105,13 +5127,13 @@ var PolicyLinks = function PolicyLinks(_ref) {
   }));
 };
 
-var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8, _templateObject6$5, _templateObject7$4, _templateObject8$2;
+var _templateObject$E, _templateObject2$p, _templateObject3$i, _templateObject4$d, _templateObject5$8, _templateObject6$6, _templateObject7$4, _templateObject8$2;
 var ContactNewsletterWrapper = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: calc(50% - 1px) 2px calc(50% - 1px);\n  grid-template-rows: 100px;\n  gap: 0;\n\n  @media ", " {\n    & {\n      display: grid;\n      grid-template-columns: 100%;\n      grid-template-rows: min-content min-content;\n      gap: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var ContactNewsletterSeparator = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 2;\n  justify-self: center;\n  height: 100%;\n  border: 1px solid var(--base-color-white);\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      display: none;\n    }\n  }\n"])), devices.mobile);
 var SignUpWrapper = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 1;\n  padding-top: 9px;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
 var SignUpText = /*#__PURE__*/styled.p(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-body-2);\n  line-height: var(--line-height-body-2);\n  width: 60%;\n  margin: 0 auto;\n  height: 60px;\n  text-align: center;\n\n  @media ", " {\n    & {\n      width: 100%;\n      height: auto;\n      text-align: left;\n      font-size: 14px;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var ContactWrapper = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: 3;\n  justify-self: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 9px;\n\n  @media ", " {\n    & {\n      grid-column: auto;\n      align-items: start;\n      justify-self: start;\n      padding-top: 0;\n    }\n  }\n"])), devices.mobile);
-var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n  height: 60px;\n\n  @media ", " {\n    & {\n      height: auto;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
+var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: var(--footer-media-gap);\n  height: 60px;\n\n  @media ", " {\n    & {\n      height: auto;\n      margin-bottom: var(--footer-vertical-spacing-lg);\n    }\n  }\n"])), devices.mobile);
 var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--footer-media-icon-height);\n  width: var(--footer-media-icon-width);\n"])));
 var TextLinkWrapper$1 = /*#__PURE__*/styled.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &&& {\n    font-family: var(--font-family-overline);\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    line-height: var(--line-height-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    text-transform: var(--text-transform-overline);\n  }\n"])));
 
@@ -5179,7 +5201,7 @@ var Footer = function Footer(_ref) {
   }, additionalInfo)))));
 };
 
-var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$6;
+var _templateObject$F, _templateObject2$q, _templateObject3$j, _templateObject4$e, _templateObject5$9, _templateObject6$7;
 var LIST_ITEM_GAP = 32;
 var AnchorTabbarWrapper = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  width: 100%;\n  top: 0;\n  border-bottom: ", ";\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var bottomBorder = _ref.bottomBorder;
@@ -5202,7 +5224,7 @@ var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateOb
   var fullWidth = _ref5.fullWidth;
   return fullWidth ? '74px' : '46px';
 });
-var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
+var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 
 var _excluded$9 = ["id", "text"];
 
@@ -5447,7 +5469,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   })) : null) : null))));
 };
 
-var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject6$7, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1;
+var _templateObject$G, _templateObject2$r, _templateObject3$k, _templateObject4$f, _templateObject6$8, _templateObject7$5, _templateObject8$3, _templateObject9$1, _templateObject10$1;
 var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: -1px;\n  background-color: var(--base-color-white);\n  z-index: ", ";\n"])), function (_ref) {
   var sticky = _ref.sticky;
   return sticky ? 'sticky' : 'initial';
@@ -5458,7 +5480,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$k || (_templateO
   return title ? 'row' : 'row-reverse';
 }, devices.tablet, devices.mobile);
 var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  min-height: var(--button-height);\n\n  h5 {\n    padding: 0;\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      min-height: 50px;\n    }\n  }\n"])), devices.mobile);
-var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
+var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n\n  @media ", " {\n    display: none;\n  }\n\n  a {\n    width: max-content;\n  }\n"])), devices.mobile);
 var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
 var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref3) {
   var theme = _ref3.theme;
@@ -5511,7 +5533,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message)));
 };
 
-var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
+var _templateObject$H, _templateObject2$s, _templateObject3$l, _templateObject4$g, _templateObject5$a, _templateObject6$9, _templateObject7$6, _templateObject8$4;
 var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-lightgrey);\n  padding: 40px;\n\n  display: block;\n  position: relative;\n\n  @media ", " {\n    margin-top: 0;\n    padding: 40px 20px;\n  }\n"])), devices.tablet);
 var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-self: flex-end;\n  height: 15px;\n"])));
 var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  padding: 6px 8px;\n  width: fit-content;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  right: 20px;\n  top: 0;\n  width: auto;\n  margin: auto;\n  font-family: var(--font-family-header);\n  font-feature-settings: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n  font-size: var(--font-size-overline-2);\n  line-height: 12px;\n  text-align: center;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n"])), function (_ref) {
@@ -5520,7 +5542,7 @@ var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3
 }, Colors.White);
 var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 2em;\n  width: fit-content;\n"])));
 var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-top: 0;\n    margin-bottom: 0.5em;\n  }\n"])));
-var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
+var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin-bottom: 0.5em;\n  }\n  margin-bottom: 1em;\n"])));
 var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px 12px;\n  padding: 5px 0 8px 0;\n"])));
 var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration-line: line-through;\n  color: var(--base-color-darkgrey);\n"])));
 
@@ -5768,7 +5790,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);
   }));
 };
@@ -5825,7 +5848,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$9, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
+var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -5851,7 +5874,7 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templat
   return fullWidth ? '0' : '20px';
 });
 var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__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$9 || (_templateObject6$9 = /*#__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 TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__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) {
@@ -6228,7 +6251,7 @@ var ContactCard = function ContactCard(_ref) {
   }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
-var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$a, _templateObject7$8;
+var _templateObject$Q, _templateObject2$z, _templateObject3$r, _templateObject4$k, _templateObject5$e, _templateObject6$b, _templateObject7$8;
 var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$z || (_templateObject2$z = /*#__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';
@@ -6238,7 +6261,7 @@ var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_
   return props.showImage ? 2 : '1 / span 4';
 }, devices.mobile);
 var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > * {\n    margin: 0;\n  }\n\n  @media ", " {\n    & > * {\n      font-size: var(--font-size-header-5);\n      font-weight: var(--font-weight-header-5);\n    }\n  }\n"])), devices.mobile);
-var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
+var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n"])));
 var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & p:not(:last-child):after {\n    content: '\\A\\A';\n    white-space: pre;\n  }\n\n  ", "\n"], ["\n  & p:not(:last-child):after {\n    content: '\\\\A\\\\A';\n    white-space: pre;\n  }\n\n  ", "\n"])), function (props) {
   return !!props.truncate && "\n    overflow: hidden;\n    position: relative;\n    display: -webkit-box;\n    -webkit-line-clamp: " + props.truncate + ";\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    min-height: 1em;\n    max-height: 3em;\n  ";
 });
@@ -6516,7 +6539,7 @@ var Information = function Information(_ref) {
   }))));
 };
 
-var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$g, _templateObject6$b, _templateObject7$9, _templateObject8$6;
+var _templateObject$T, _templateObject2$C, _templateObject3$u, _templateObject4$n, _templateObject5$g, _templateObject6$c, _templateObject7$9, _templateObject8$6;
 var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__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;
@@ -6534,7 +6557,7 @@ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateOb
   return isPageHeadingWithoutTitle && "\n    margin: 10px 0;\n  ";
 }, devices.mobile);
 var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  align-self: end;\n  margin-top: 12px;\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n"])));
-var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
+var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  justify-self: end;\n  margin-top: 20px;\n  position: relative;\n\n  > div {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  @media ", " {\n    & {\n      align-self: start;\n      margin-top: 0;\n    }\n  }\n"])), devices.mobile);
 var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  justify-self: end;\n  align-self: end;\n\n  @media ", " {\n    & {\n      justify-self: center;\n      align-self: center;\n      width: 100%;\n      margin-top: 16px;\n    }\n  }\n"])), devices.mobile);
 var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-altHeader-6);\n  font-weight: var(--font-weight-altHeader-6);\n  letter-spacing: var(--letter-spacing-altHeader-6);\n  line-height: var(--line-height-altHeader-6);\n  font-feature-settings: var(--font-feature-settings-altHeader);\n  font-family: var(--font-family-altHeader);\n  text-transform: var(--text-transform-altHeader);\n  word-break: var(--word-break-altHeader);\n"])));
 
@@ -6614,13 +6637,13 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
   }), /*#__PURE__*/React__default.createElement(CinemaBadge, null)));
 };
 
-var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$h, _templateObject6$c, _templateObject7$a, _templateObject8$7;
+var _templateObject$U, _templateObject2$D, _templateObject3$v, _templateObject4$o, _templateObject5$h, _templateObject6$d, _templateObject7$a, _templateObject8$7;
 var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__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$D || (_templateObject2$D = /*#__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$v || (_templateObject3$v = /*#__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$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 20px;\n  right: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @media ", " {\n    & {\n      right: var(--grid-margin);\n    }\n  }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
 var LogoWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  align-self: end;\n"])));
-var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
+var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: text;\n  color: var(--base-color-white);\n  text-align: center;\n  margin-top: 40px;\n  max-height: calc(2 * var(--line-height-header-3));\n  overflow: hidden;\n\n  h3 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n  }\n\n  @media ", " {\n    & {\n      margin-top: 12px;\n      max-height: calc(4 * var(--line-height-header-3));\n    }\n\n    h3 {\n      font-size: var(--font-size-header-3);\n      letter-spacing: var(--letter-spacing-header-5);\n      line-height: var(--line-height-header-5);\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
@@ -6753,12 +6776,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null))));
 };
 
-var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject5$j, _templateObject6$d, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
+var _templateObject$X, _templateObject2$F, _templateObject3$x, _templateObject5$j, _templateObject6$e, _templateObject7$b, _templateObject8$8, _templateObject9$3, _templateObject10$3;
 var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__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$F || (_templateObject2$F = /*#__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$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n  }\n"])), function (_ref) {
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    max-width: 155px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
       theme = _ref.theme;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -6888,7 +6911,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) {
@@ -6904,7 +6927,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -7165,13 +7188,13 @@ var Pagination = function Pagination(_ref) {
   }))));
 };
 
-var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$r, _templateObject5$k, _templateObject6$e;
+var _templateObject$Z, _templateObject2$H, _templateObject3$z, _templateObject4$r, _templateObject5$k, _templateObject6$f;
 var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__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$H || (_templateObject2$H = /*#__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$z || (_templateObject3$z = /*#__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$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
 var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
-var PersonLink = /*#__PURE__*/styled.a(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
+var PersonLink = /*#__PURE__*/styled.a(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -7225,8 +7248,8 @@ var PeopleListing = function PeopleListing(_ref) {
 var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
 var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
-var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__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$s || (_templateObject4$s = /*#__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$A || (_templateObject3$A = /*#__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$s || (_templateObject4$s = /*#__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) {
@@ -7237,12 +7260,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);
   }));
 };
 
@@ -7294,7 +7323,7 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$f, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _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 . .'";
@@ -7354,7 +7383,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_te
   var marginBottom = _ref10.marginBottom;
   return marginBottom + "px";
 });
-var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
+var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 24px 0;\n"])));
 var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 24px 0 4px 0;\n"])));
 var TextLinkWrapper$2 = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 24px;\n  margin-bottom: 20px;\n\n  &:last-child {\n    margin-right: 0;\n  }\n"])));
 var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding-right: 68px;\n\n  iframe {\n    height: 800px;\n  }\n\n  @media ", " {\n    padding: 30px 0 0;\n  }\n\n  @media ", " {\n    padding: 0;\n    position: initial;\n  }\n"])), devices.tablet, devices.mobile);
@@ -7576,7 +7605,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   }))));
 };
 
-var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$m, _templateObject6$g, _templateObject7$d;
+var _templateObject$10, _templateObject2$K, _templateObject3$C, _templateObject4$u, _templateObject5$m, _templateObject6$h, _templateObject7$d;
 var LENGTH_TEXT$2 = 28;
 var LENGTH_TEXT_TABLET$2 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__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) {
@@ -7596,7 +7625,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$C ||
 }, devices.mobile);
 var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2,\n  h3 {\n    margin: 0 0 32px;\n\n    @media ", " {\n      & {\n        margin: 0 0 24px;\n      }\n    }\n  }\n"])), devices.mobile);
 var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-1);\n  font-weight: var(--font-weight-body-1);\n  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  h5,\n  h6 {\n    margin: 0 0 4px 0;\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-size: var(--font-size-subtitle-2);\n    font-weight: var(--font-weight-subtitle-2);\n    line-height: var(--line-height-subtitle-2);\n    letter-spacing: var(--letter-spacing-subtitle-2);\n    text-transform: var(--text-transform-subtitle);\n    overflow-wrap: break-word;\n  }\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -7748,8 +7777,73 @@ var RadioGroup = function RadioGroup(_ref) {
   })));
 };
 
-var _templateObject$12;
-var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__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$12, _templateObject2$L, _templateObject3$D;
+var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__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$L || (_templateObject2$L = /*#__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$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: end;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n    padding-left: 50px;\n  }\n\n  cursor: pointer;\n\n  @media ", " {\n    padding-left: 20px;\n  }\n"])), devices.mobile);
+
+var StatusBanner = function StatusBanner(_ref) {
+  var statusText = _ref.statusText,
+      _ref$visibility = _ref.visibility,
+      visibility = _ref$visibility === void 0 ? true : _ref$visibility;
+
+  var _useState = useState(visibility),
+      isVisible = _useState[0],
+      setIsVisible = _useState[1];
+
+  var _useState2 = useState(false),
+      isClosing = _useState2[0],
+      setIsClosing = _useState2[1];
+
+  var content = useRef(null);
+
+  var handleCloseBanner = function handleCloseBanner() {
+    setIsClosing(true);
+
+    var transitionEnd = function transitionEnd() {
+      setIsVisible(!visibility);
+
+      if (content.current) {
+        content.current.removeEventListener('transitionend', transitionEnd);
+      }
+    };
+
+    if (content.current) {
+      content.current.addEventListener('transitionend', transitionEnd);
+    }
+
+    setTimeout(function () {
+      setIsVisible(!visibility);
+    }, 300);
+  };
+
+  var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
+    if (e.key === 'Enter') {
+      handleCloseBanner();
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StatusBannerWrapper, {
+    role: "alert",
+    className: isClosing ? 'closing' : '',
+    "data-testid": "statusContainer"
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: statusText
+    }
+  })), /*#__PURE__*/React__default.createElement(SvgContainer$3, {
+    onClick: handleCloseBanner,
+    tabIndex: 0,
+    role: "button",
+    "aria-label": "Close",
+    onKeyDown: onKeyboardCloseHandler
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: "Close"
+  })))));
+};
+
+var _templateObject$13;
+var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__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,
@@ -7775,8 +7869,8 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$13, _templateObject2$L, _templateObject3$D, _templateObject4$v, _templateObject5$n, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
-var stateStyles = /*#__PURE__*/css(_templateObject$13 || (_templateObject$13 = /*#__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$14, _templateObject2$M, _templateObject3$E, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
+var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__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) {
@@ -7786,11 +7880,11 @@ var stateStyles = /*#__PURE__*/css(_templateObject$13 || (_templateObject$13 = /
   var theme = _ref3.theme;
   return theme.colors.lightgrey;
 });
-var borderStyles = /*#__PURE__*/css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
+var borderStyles = /*#__PURE__*/css(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 0;\n  outline: 1px solid ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.colors.darkgrey;
 });
-var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
+var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
 var listItemStyles = /*#__PURE__*/css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
 var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
   var theme = _ref5.theme;
@@ -7800,7 +7894,7 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
     title: 'Select Arrow'
   };
 })(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n\n  max-width: 24px;\n  max-height: 24px;\n\n  svg {\n    width: 24px;\n    height: 24px;\n  }\n"])));
-var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
+var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: initial;\n\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])), noMarginAndPaddingStyles);
 var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
 var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
 var Option = /*#__PURE__*/styled.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
@@ -8197,8 +8291,8 @@ function Select(_ref3) {
   }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
-var _templateObject$14;
-var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__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$15;
+var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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;
 });
@@ -8226,8 +8320,8 @@ var TextOnly = function TextOnly(_ref) {
   })));
 };
 
-var _templateObject$15, _templateObject2$M;
-var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__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$16, _templateObject2$N;
+var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__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;
@@ -8237,7 +8331,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$1
       height = _ref2.height;
   return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
 });
-var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
+var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 12px;\n  height: var(--line-height-body-2);\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  font-size: var(--font-size-body-2);\n  font-weight: var(--font-weight-body-2);\n  letter-spacing: var(--letter-spacing-body-2);\n  line-height: var(--line-height-body-2);\n  text-transform: var(--text-transform-body-2);\n  word-break: var(--word-break-body-2);\n  font-style: italic;\n"])));
 
 var ImageWithCaption = function ImageWithCaption(_ref) {
   var caption = _ref.caption,
@@ -8275,13 +8369,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
   }, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
 };
 
-var _templateObject$16, _templateObject2$N, _templateObject3$E;
-var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
-var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
+var _templateObject$17, _templateObject2$O, _templateObject3$F;
+var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
 });
-var Line$1 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
+var Line$1 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--base-color-black);\n  height: 2px;\n  width: 62px;\n  margin: 32px 0;\n\n  @media ", " {\n    height: 1px;\n    width: 46px;\n    margin: 24px 0;\n  }\n"])), devices.mobile);
 
 var Quote = function Quote(_ref) {
   var text = _ref.text,
@@ -8305,13 +8399,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$17, _templateObject2$O, _templateObject3$F, _templateObject4$w, _templateObject5$o, _templateObject6$i;
-var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__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$3 = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-var StyledImage = /*#__PURE__*/styled.img(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
+var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$o, _templateObject6$j;
+var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var StyledImage = /*#__PURE__*/styled.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.4);\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  span {\n    width: 40px;\n    height: 40px;\n    @media ", " {\n      width: 24px;\n      height: 24px;\n    }\n    @media ", " {\n      width: 18px;\n      height: 18px;\n    }\n  }\n"])), devices.tablet, devices.mobile);
-var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
+var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 8px;\n  div {\n    @media ", " {\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n"])), devices.mobile);
 
 var MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -8342,18 +8436,18 @@ var MiniCard = function MiniCard(_ref) {
     columnSpanDevice: 4,
     columnStartDesktop: 4,
     columnSpanDesktop: 4
-  }, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement(Overline, {
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 4
   }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
     level: 2
   }, title)))));
 };
 
-var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$x;
-var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__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$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
-var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__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"])));
+var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x;
+var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__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"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -8416,7 +8510,7 @@ var ReadMore = function ReadMore(_ref) {
   var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
 
   var IntroText = function IntroText() {
-    return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
+    return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: "" + truncatedText
       }
@@ -8434,7 +8528,7 @@ var ReadMore = function ReadMore(_ref) {
   }, /*#__PURE__*/React__default.createElement(Header, {
     level: 5,
     semanticLevel: 3
-  }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$4, {
+  }, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
     "data-testid": "richcontainer",
     ref: readMoreContent,
     id: contentContainerId,
@@ -8451,6 +8545,186 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
+var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y, _templateObject5$p, _templateObject6$k;
+var Container$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__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$y || (_templateObject4$y = /*#__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$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+  var color = _ref2.color;
+  return "var(--base-color-" + color + ")";
+});
+var LabelText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+  var color = _ref3.color;
+  return "var(--base-color-" + color + ")";
+});
+
+/**
+ * Password strength indicator component.
+ * This renders some number of lines (6 by default)
+ * which should become active when the user improves
+ * the strength of the entered password.
+ *
+ * ## Sections
+ * To set number of sections it should be passed
+ * as `sections` prop.
+ *
+ * ## Active section
+ * To set number of active sections it should be passed
+ * as `activeSections` prop.
+ *
+ * ## Colors
+ * Color of every element can be controlled by properties:
+ * `sectionsColor`, `activeSectionsColor`,
+ * `textColor`, `strengthLabelColor`.
+ *
+ * ## Text
+ * `text` prop is used to render some message.
+ * For example error (together with proper red color)
+ * or some password requirement. It can be empty.
+ *
+ * ## Strength label
+ * `strengthLabel` prop is used to render strength characteristic
+ * of entered password. For example: `weak`, `normal`, `strong`, etc.
+ * It can be empty.
+ */
+
+var PasswordStrength = function PasswordStrength(_ref) {
+  var _ref$sections = _ref.sections,
+      sections = _ref$sections === void 0 ? 6 : _ref$sections,
+      _ref$activeSections = _ref.activeSections,
+      activeSections = _ref$activeSections === void 0 ? 0 : _ref$activeSections,
+      _ref$sectionsColor = _ref.sectionsColor,
+      sectionsColor = _ref$sectionsColor === void 0 ? Colors.MidGrey : _ref$sectionsColor,
+      _ref$activeSectionsCo = _ref.activeSectionsColor,
+      activeSectionsColor = _ref$activeSectionsCo === void 0 ? Colors.Black : _ref$activeSectionsCo,
+      _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$textColor = _ref.textColor,
+      textColor = _ref$textColor === void 0 ? Colors.Black : _ref$textColor,
+      _ref$strengthLabel = _ref.strengthLabel,
+      strengthLabel = _ref$strengthLabel === void 0 ? '' : _ref$strengthLabel,
+      _ref$strengthLabelCol = _ref.strengthLabelColor,
+      strengthLabelColor = _ref$strengthLabelCol === void 0 ? Colors.Black : _ref$strengthLabelCol;
+
+  var setSectionColor = function setSectionColor(index) {
+    return index < activeSections ? activeSectionsColor : sectionsColor;
+  };
+
+  var setSectionDataTestId = function setSectionDataTestId(index) {
+    return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
+  };
+
+  return /*#__PURE__*/React__default.createElement(Container$1, {
+    "data-testid": "password-strength-container"
+  }, /*#__PURE__*/React__default.createElement(Sections, {
+    "data-testid": "password-strength-sections"
+  }, Array.from({
+    length: sections
+  }, function (_section, i) {
+    return /*#__PURE__*/React__default.createElement(Section, {
+      key: i,
+      color: setSectionColor(i),
+      "data-testid": setSectionDataTestId(i)
+    });
+  })), /*#__PURE__*/React__default.createElement(BottomLine, null, /*#__PURE__*/React__default.createElement(Text, {
+    color: textColor,
+    "data-testid": "password-strength-text"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, text)), /*#__PURE__*/React__default.createElement(LabelText, {
+    color: strengthLabelColor,
+    "data-testid": "password-strength-label"
+  }, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 2
+  }, strengthLabel))));
+};
+
+var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z;
+var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled.ul(_templateObject2$S || (_templateObject2$S = /*#__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$J || (_templateObject3$J = /*#__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$z || (_templateObject4$z = /*#__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 UpsellSection = function UpsellSection(_ref) {
   var title = _ref.title,
       richText = _ref.richText,
@@ -8539,9 +8813,9 @@ var LiveChat = function LiveChat() {
   });
 };
 
-var _templateObject$19, _templateObject2$Q;
-var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__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$Q || (_templateObject2$Q = /*#__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$1c, _templateObject2$T;
+var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__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$T || (_templateObject2$T = /*#__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);
@@ -8569,11 +8843,11 @@ var StickyBar = function StickyBar(_ref) {
   }, children)));
 };
 
-var _templateObject$1a, _templateObject2$R, _templateObject3$H, _templateObject4$y;
-var InnerModal = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__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$R || (_templateObject2$R = /*#__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$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$y || (_templateObject4$y = /*#__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$1d, _templateObject2$U, _templateObject3$K, _templateObject4$A;
+var InnerModal = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__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$U || (_templateObject2$U = /*#__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$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$A || (_templateObject4$A = /*#__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 _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
@@ -8694,8 +8968,8 @@ var ModalWindow = function ModalWindow(_ref) {
   })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
 };
 
-var _templateObject$1b;
-var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1b || (_templateObject$1b = /*#__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$1e;
+var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1e || (_templateObject$1e = /*#__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) {
@@ -9636,5 +9910,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1b || (_templa
   return theme.fonts.tablet.sizes.body[1];
 }, devices.desktop, devices.largeDesktop);
 
-export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, 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, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
+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, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
 //# sourceMappingURL=chord.esm.js.map