@royaloperahouse/chord 2.2.5-b-select-test → 2.2.5-c-chord-development

package/dist/chord.esm.js

@@ -2,7 +2,6 @@ import React__default, { createElement, memo, useRef, useCallback, useEffect, us
 import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
 import moment from 'moment';
 import { renderToString } from 'react-dom/server';
-import ReactSelect, { components } from 'react-select';
 import Modal from 'react-modal';
 import ScrollLock from 'react-scrolllock';
 
@@ -2172,12 +2171,14 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
 });
 Icon.displayName = 'Icon';
 
+var _excluded = ["children", "iconName", "iconDirection", "color"];
+
 var Button = function Button(_ref) {
   var children = _ref.children,
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
       color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
@@ -2253,9 +2254,11 @@ var ButtonType;
   ButtonType["Tertiary"] = "Tertiary";
 })(ButtonType || (ButtonType = {}));
 
+var _excluded$1 = ["children"];
+
 var PrimaryButton = function PrimaryButton(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
     color: Colors.White
@@ -2269,9 +2272,11 @@ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled(Button)(_templateObject$5 || (_
   return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
 });
 
+var _excluded$2 = ["children"];
+
 var SecondaryButton = function SecondaryButton(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
     color: Colors.Primary
@@ -2285,10 +2290,12 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$6 || (_templat
 });
 var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
+var _excluded$3 = ["children", "color"];
+
 var Button$1 = function Button(_ref) {
   var children = _ref.children,
       color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "color"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   var truncatedString = children.substring(0, 100);
   return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
@@ -3250,6 +3257,8 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
 
+var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
+
 var TabLink = function TabLink(_ref) {
   var children = _ref.children,
       iconName = _ref.iconName,
@@ -3258,7 +3267,7 @@ var TabLink = function TabLink(_ref) {
       color = _ref$color === void 0 ? Colors.DarkGrey : _ref$color,
       _ref$hoverColor = _ref.hoverColor,
       hoverColor = _ref$hoverColor === void 0 ? Colors.Primary : _ref$hoverColor,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color", "hoverColor"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
@@ -3308,6 +3317,7 @@ var TextAreaError = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObje
   return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
 });
 
+var _excluded$5 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
 /**
  * An HTML textarea component for Chord.
  *
@@ -3369,7 +3379,7 @@ var TextArea = function TextArea(_ref) {
       maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-      textareaProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"]);
+      textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -3404,7 +3414,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObjec
   if (!width) return 'none';
   return width + 'px';
 });
-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 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";
@@ -3429,6 +3439,7 @@ var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 =
   return "var(--base-color-errorstate)";
 });
 
+var _excluded$6 = ["label", "type", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -3476,7 +3487,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       width = _ref.width,
-      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width"]);
+      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var _useState = useState(false),
       showPassword = _useState[0],
@@ -3512,7 +3523,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "text-field-input",
     ref: ref
   }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
-    type: "button",
+    type: 'button',
     onClick: showHideClickHandler
   }, /*#__PURE__*/React__default.createElement(Overline, {
     level: 1
@@ -3534,12 +3545,14 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObjec
 });
 var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
+var _excluded$7 = ["children", "iconName", "iconDirection", "color"];
+
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
       iconName = _ref.iconName,
       iconDirection = _ref.iconDirection,
       color = _ref.color,
-      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
@@ -5147,6 +5160,8 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
   }, contact.title))));
 };
 
+var _excluded$8 = ["dataRoh"];
+
 var Footer = function Footer(_ref) {
   var data = _ref.data;
   var policyLinks = data.policyLinks;
@@ -5156,7 +5171,7 @@ var Footer = function Footer(_ref) {
 
   var _data$artsLogo = data.artsLogo,
       artsDataRoh = _data$artsLogo.dataRoh,
-      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, ["dataRoh"]);
+      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$8);
 
   var additionalInfo = data.additionalInfo;
   return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -5211,6 +5226,8 @@ var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateOb
 });
 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"];
+
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
       onTabClick = _ref.onTabClick,
@@ -5425,7 +5442,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
         text = _ref4.text,
-        rest = _objectWithoutPropertiesLoose(_ref4, ["id", "text"]);
+        rest = _objectWithoutPropertiesLoose(_ref4, _excluded$9);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
@@ -5481,6 +5498,9 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3
 var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
+var _excluded$a = ["text"],
+    _excluded2 = ["text"];
+
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
       links = _ref.links,
@@ -5490,11 +5510,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
 
   var _ref2 = (links == null ? void 0 : links[0]) || {},
       primaryButtonText = _ref2.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$a);
 
   var _ref3 = (links == null ? void 0 : links[1]) || {},
       secondaryButtonText = _ref3.text,
-      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, ["text"]);
+      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
 
   return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
     sticky: sticky
@@ -5770,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);
   }));
 };
@@ -5827,7 +5848,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
   }))))));
 };
 
-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 _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13;
 var LENGTH_LARGE_TEXT = 28;
 var LENGTH_SMALL_TEXT$1 = 19;
 var LENGTH_TEXT_TABLET = 10;
@@ -5855,20 +5876,21 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templat
 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$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) {
+var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-primary);\n  margin-top: 4px;\n"])));
+var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  width: fit-content;\n  height: 30px;\n\n  @media ", " {\n    margin-left: ", ";\n  }\n"])), function (_ref6) {
   var isVisible = _ref6.isVisible;
   return isVisible ? "visible" : 'hidden';
 }, devices.mobile, function (_ref7) {
   var isGridCard = _ref7.isGridCard;
   return isGridCard ? '20px' : '0';
 });
-var LabelElements = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
+var LabelElements = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 8px;\n  background-color: ", ";\n  color: var(--base-color-white);\n"])), function (_ref8) {
   var bgColor = _ref8.bgColor,
       theme = _ref8.theme;
   return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
 });
-var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
+var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 var getButtonsOpacity = function getButtonsOpacity(_ref9) {
   var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
@@ -5880,7 +5902,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
   return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
 };
 
-var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
+var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    ", ";\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), getButtonsOpacity, function (_ref11) {
   var size = _ref11.size,
       primaryButtonTextLength = _ref11.primaryButtonTextLength,
       tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
@@ -5975,6 +5997,9 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
   return truncateHtmlString(nodeString, resultLength, addDots);
 };
 
+var _excluded$b = ["text"],
+    _excluded2$1 = ["text"];
+
 var _buttonTypeToButton;
 var LENGTH_LARGE_TEXT$1 = 28;
 var LENGTH_SMALL_TEXT$2 = 19;
@@ -5990,6 +6015,8 @@ var Card = function Card(_ref) {
       subtitle = _ref.subtitle,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$highlightText = _ref.highlightText,
+      highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
       links = _ref.links,
       _ref$tags = _ref.tags,
       tags = _ref$tags === void 0 ? [] : _ref$tags,
@@ -6025,7 +6052,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
@@ -6033,7 +6060,7 @@ var Card = function Card(_ref) {
   var _ref3 = secondButton || {},
       _ref3$text = _ref3.text,
       secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
+      restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
 
   var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
 
@@ -6102,7 +6129,9 @@ var Card = function Card(_ref) {
     dangerouslySetInnerHTML: {
       __html: truncatedText
     }
-  }))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
+  }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1
+  }, highlightText)))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
     "data-testid": "buttonscontainer",
     size: size,
@@ -6146,6 +6175,7 @@ var Cards = function Cards(_ref) {
       title: card.title,
       subtitle: card.subtitle,
       text: card.text,
+      highlightText: card.highlightText,
       links: card.links,
       tags: card.tags,
       withContinueWatching: card.withContinueWatching,
@@ -6537,6 +6567,8 @@ var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObje
 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"])));
 
+var _excluded$c = ["text"];
+
 var PageHeading = function PageHeading(_ref) {
   var title = _ref.title,
       text = _ref.text,
@@ -6547,7 +6579,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title && title.substring(0, 40);
@@ -6575,9 +6607,11 @@ var PageHeading = function PageHeading(_ref) {
   }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
 };
 
+var _excluded$d = ["link"];
+
 var PageHeadingCore = function PageHeadingCore(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   var coreLink = link && _extends({}, link, {
     color: Colors.White,
@@ -6591,9 +6625,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
+var _excluded$e = ["link"];
+
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   var cinemaLink = link && _extends({}, link, {
     color: Colors.Black,
@@ -6617,6 +6653,8 @@ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObje
 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);
 
+var _excluded$f = ["text"];
+
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
       text = _ref.text,
@@ -6633,7 +6671,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -6726,9 +6764,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
 var _templateObject$W;
 var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h2::selection,\n  div::selection {\n    color: #1866dc;\n    background-color: #fff;\n  }\n"])));
 
+var _excluded$g = ["link"];
+
 var PageHeadingStream = function PageHeadingStream(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   var streamLink = link && _extends({}, link, {
     color: Colors.Black,
@@ -6877,7 +6917,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) {
@@ -6893,7 +6933,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   useEffect(function () {
-    if (typeof navigator === undefined) return;
+    if (typeof navigator === 'undefined') return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -6922,6 +6962,8 @@ var useMobile = function useMobile() {
   return mobile;
 };
 
+var _excluded$h = ["text"];
+
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -7036,7 +7078,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
 
   var _ref5 = link || {},
       linkText = _ref5.text,
-      restLink = _objectWithoutPropertiesLoose(_ref5, ["text"]);
+      restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$h);
 
   var titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
@@ -7212,8 +7254,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) {
@@ -7224,12 +7266,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);
   }));
 };
 
@@ -7281,7 +7329,7 @@ var CreditListing = function CreditListing(_ref) {
   }));
 };
 
-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 _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _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 . .'";
@@ -7348,7 +7396,7 @@ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templa
 var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 25px;\n  right: 35px;\n  width: 24px;\n  height: 24px;\n\n  @media ", " {\n    top: 30px;\n    right: 30px;\n  }\n\n  @media ", " {\n    top: 3px;\n    right: 20px;\n  }\n"])), devices.tablet, devices.mobile);
 var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--button-height);\n\n  @media ", " {\n    width: 100%;\n  }\n"])), devices.mobile);
 var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  margin: 0 50px 0 20px;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var asCardOverrides = /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", " {\n    font-size: var(--font-size-subtitle-2);\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-1);\n  }\n\n  ", " {\n    flex-direction: row;\n    @media ", " {\n      flex-direction: row;\n    }\n  }\n\n  ", " {\n    font-size: var(--font-size-overline-2);\n    font-weight: var(--font-weight-overline-2);\n    line-height: var(--line-height-overline-2);\n    letter-spacing: var(--letter-spacing-overline-2);\n  }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
@@ -7370,6 +7418,10 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_temp
 var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
+var _excluded$i = ["text"],
+    _excluded2$2 = ["text"],
+    _excluded3 = ["text"];
+
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
 var LENGTH_TEXT_PARAGRAPH = 130;
@@ -7440,7 +7492,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
 
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
@@ -7448,7 +7500,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref3 = secondButton || {},
       _ref3$text = _ref3.text,
       secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
+      restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
 
   var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
   var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
@@ -7457,7 +7509,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var textLinkItems = textLinks ? textLinks.map(function (link, index) {
     var _link$text = link.text,
         textLinkText = _link$text === void 0 ? '' : _link$text,
-        restTextLink = _objectWithoutPropertiesLoose(link, ["text"]);
+        restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
 
     return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
       key: index
@@ -7615,6 +7667,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
   return '';
 });
 
+var _excluded$j = ["text"],
+    _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -7640,7 +7694,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -7648,7 +7702,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref3 = tertiaryButton || {},
       _ref3$text = _ref3.text,
       tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
+      restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
 
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
   return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
@@ -7821,72 +7875,426 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v;
-var Container$1 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .chord-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .chord-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .chord-select__indicator-separator {\n    display: none;\n  }\n  .chord-select__control--menu-is-open {\n    .chord-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .chord-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .chord-select__single-value,\n  .chord-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .chord-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .chord-select__single-value {\n    color: var(--base-color-black);\n  }\n  .chord-select__value-container {\n    padding-left: 20px;\n    padding-right: 15px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .chord-select--is-disabled {\n    .chord-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .chord-select__indicator,\n    .chord-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .chord-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .chord-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .chord-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.chord-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .chord-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .chord-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .chord-select__menu-notice {\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-darkgrey);\n    padding: 10px 20px;\n    text-align: left;\n  }\n  .chord-select__group-heading {\n    padding: 0 20px;\n    text-transform: none;\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    color: var(--base-color-darkgrey);\n    &:not(:empty) {\n      margin-bottom: 5px;\n    }\n  }\n  .chord-select__group {\n    padding-top: 0;\n    padding-bottom: 10px;\n    &:last-child {\n      padding-bottom: 0;\n    }\n  }\n"])), function (_ref) {
-  var width = _ref.width;
-  if (!width) return 'none';
-  return width + 'px';
+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) {
-  var error = _ref2.error;
-  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
-  return "1px solid var(--base-color-darkgrey)";
+  var theme = _ref2.theme;
+  return theme.colors.lightgrey;
 }, function (_ref3) {
-  var error = _ref3.error;
-  if (error !== undefined) return "var(--base-color-errorstate)";
-  return "var(--base-color-darkgrey)";
-}, function (_ref4) {
-  var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
-  return "0 0 0 3px var(--base-color-lapislazuli)";
-});
-var TextLabel$1 = /*#__PURE__*/styled.p(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
-  var darkMode = _ref5.darkMode;
-  if (darkMode) return "var(--base-color-white)";
-  return "var(--base-color-black)";
+  var theme = _ref3.theme;
+  return theme.colors.lightgrey;
 });
-var ErrorLabel$1 = /*#__PURE__*/styled.p(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
-  var darkMode = _ref6.darkMode;
-  if (darkMode) return "var(--base-color-white)";
-  return "var(--base-color-errorstate)";
+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$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;
+  return {
+    iconName: 'DropdownArrow',
+    color: theme.colors.black,
+    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$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) {
+  var theme = _ref6.theme,
+      hover = _ref6.hover;
+  var _theme$colors = theme.colors,
+      lightgrey = _theme$colors.lightgrey,
+      midgrey = _theme$colors.midgrey;
+  if (hover) return "background-color: " + midgrey;
+  return "\n        background-color: " + lightgrey + ";\n        &:hover { background-color: " + midgrey + " }\n    ";
+});
+
+var selectStyles = function selectStyles(width, height) {
+  return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  * {\n    width: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    top: ", ";\n  }\n  ", " {\n    height: ", ";\n  }\n  p {\n    height: ", ";\n    padding-inline: 20px;\n\n    display: flex;\n    align-items: center;\n  }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
+};
 
-var DropdownIndicator = function DropdownIndicator(props) {
-  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: 'DropdownArrow'
-  }));
+var SelectList = /*#__PURE__*/styled.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  & ", " {\n    position: absolute;\n\n    top: 13px;\n    right: 16px;\n  }\n"])), function (_ref7) {
+  var width = _ref7.width,
+      height = _ref7.height;
+  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
+}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
+
+var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
+  var selectRef = _ref.selectRef,
+      optionsRef = _ref.optionsRef,
+      shouldHighlightOption = _ref.shouldHighlightOption;
+
+  var _useState = useState(-1),
+      itemToHighlight = _useState[0],
+      setItemToHighlight = _useState[1];
+
+  var clampIndex = function clampIndex(index) {
+    if (index < -1) return -1;
+    if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
+    return index;
+  };
+
+  var highlightNextOption = function highlightNextOption() {
+    return setItemToHighlight(function (prev) {
+      return clampIndex(prev + 1);
+    });
+  };
+
+  var highlightPrevOption = function highlightPrevOption() {
+    return setItemToHighlight(function (prev) {
+      return clampIndex(prev - 1);
+    });
+  };
+
+  var reset = function reset() {
+    var _selectRef$current;
+
+    (_selectRef$current = selectRef.current) == null ? void 0 : _selectRef$current.blur();
+    setItemToHighlight(-1);
+  };
+
+  var handleKeyUp = function handleKeyUp(event) {
+    if (!shouldHighlightOption) return;
+    var shouldHighlightOptionNext = event.key === 'ArrowDown';
+    var shouldHighlightOptionPrev = event.key === 'ArrowUp';
+    if (shouldHighlightOptionNext) return highlightNextOption();
+    if (shouldHighlightOptionPrev) return highlightPrevOption();
+  };
+
+  var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
+    if (!shouldHighlightOption) return;
+    if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
+    event.preventDefault();
+  };
+
+  var handleHighlighted = function handleHighlighted(cb) {
+    return function (event) {
+      if (itemToHighlight === -1) return;
+      if (event.key !== 'Enter') return;
+      cb(itemToHighlight);
+      reset();
+    };
+  };
+
+  useEffect(function () {
+    if (shouldHighlightOption) return;
+    reset();
+  }, [shouldHighlightOption]);
+  return {
+    handleKeyUp: handleKeyUp,
+    preventScrollingWhileNavigating: preventScrollingWhileNavigating,
+    handleHighlighted: handleHighlighted,
+    itemToHighlight: itemToHighlight
+  };
 };
 
-function Select(_ref) {
-  var label = _ref.label,
-      darkMode = _ref.darkMode,
-      width = _ref.width,
-      error = _ref.error,
-      _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "darkMode", "width", "error", "isSearchable"]);
+var useVisualAccessibility = function useVisualAccessibility(_ref2) {
+  var selectRef = _ref2.selectRef,
+      isSelectDisabled = _ref2.isSelectDisabled;
 
-  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
-    darkMode: darkMode,
-    "data-testid": "text-field-text-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper, {
-    width: width,
-    error: error
-  }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
-    components: {
-      DropdownIndicator: DropdownIndicator
+  var addFocusClass = function addFocusClass() {
+    var _selectRef$current2;
+
+    (_selectRef$current2 = selectRef.current) == null ? void 0 : _selectRef$current2.classList.add('focus');
+  };
+
+  var removeFocusClass = function removeFocusClass() {
+    var _selectRef$current3;
+
+    (_selectRef$current3 = selectRef.current) == null ? void 0 : _selectRef$current3.classList.remove('focus');
+  };
+
+  var toggleFocus = function toggleFocus() {
+    var _selectRef$current4;
+
+    if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
+  };
+
+  var withClickAwayHandler = function withClickAwayHandler(cb) {
+    return function (event) {
+      if (!selectRef.current) return;
+      if (selectRef.current.contains(event.target)) return;
+      removeFocusClass();
+      cb();
+    };
+  };
+
+  useEffect(function () {
+    if (!selectRef.current) return;
+
+    if (isSelectDisabled) {
+      selectRef.current.classList.add('disabled');
+    } else selectRef.current.classList.remove('disabled');
+  }, [isSelectDisabled]);
+  return {
+    withClickAwayHandler: withClickAwayHandler,
+    toggleFocus: toggleFocus,
+    addFocusClass: addFocusClass,
+    removeFocusClass: removeFocusClass
+  };
+};
+
+var useAccessibility = function useAccessibility(props) {
+  var selectRef = props.selectRef;
+
+  var _useKeyboardAccessibi = useKeyboardAccessibility(props),
+      handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
+      preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
+      handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
+      itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
+
+  var _useVisualAccessibili = useVisualAccessibility(props),
+      addFocusClass = _useVisualAccessibili.addFocusClass,
+      removeFocusClass = _useVisualAccessibili.removeFocusClass,
+      toggleFocus = _useVisualAccessibili.toggleFocus,
+      withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
+
+  useEffect(function () {
+    if (!selectRef.current) return;
+    selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
+    selectRef.current.addEventListener('keyup', handleKeyUp);
+    selectRef.current.addEventListener('click', toggleFocus);
+    selectRef.current.addEventListener('focus', addFocusClass);
+    selectRef.current.addEventListener('blur', removeFocusClass);
+    return function () {
+      var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
+
+      (_selectRef$current5 = selectRef.current) == null ? void 0 : _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
+      (_selectRef$current6 = selectRef.current) == null ? void 0 : _selectRef$current6.removeEventListener('keyup', handleKeyUp);
+      (_selectRef$current7 = selectRef.current) == null ? void 0 : _selectRef$current7.removeEventListener('click', toggleFocus);
+      (_selectRef$current8 = selectRef.current) == null ? void 0 : _selectRef$current8.removeEventListener('focus', addFocusClass);
+      (_selectRef$current9 = selectRef.current) == null ? void 0 : _selectRef$current9.removeEventListener('blur', removeFocusClass);
+    };
+  });
+  return {
+    withClickAwayHandler: withClickAwayHandler,
+    handleHighlighted: handleHighlighted,
+    itemToHighlight: itemToHighlight
+  };
+};
+/**
+ * A select component, created using <ul> and <li> elements, with bespoke accessibility
+ * logic.
+ *
+ * # Usage
+ * ## Defining a component that uses a typical Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component that uses a disabled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       disabled // Select component disabled explicitely
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *     <Select
+ *       label="This is a label"
+ *       options={[]} // Select component disabled implicitely by passing an empty array of options
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Defining a component with a non-labelled Select element
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   return <>
+ *     <Select
+ *       label=""
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *     />
+ *   </>
+ * }
+ * ```
+ *
+ * ## Changing the dimensions of a Select element (px)
+ * ```tsx
+ * const MyComponent = () => {
+ *   const handleSelect = (value: number, text: string) => {
+ *     console.log("Selected", value);
+ *   };
+ *
+ *   const selectWidthPx = 100;
+ *   const selectHeightPx = 27;
+ *
+ *   return <>
+ *     <Select
+ *       label="This is a label"
+ *       options={[
+ *         { text: "Option 1", value: 1 },
+ *         { text: "Option 2", value: 2 },
+ *       ]}
+ *       onSelect={handleSelect}
+ *       width={selectWidthPx}
+ *       height={selectHeightPx}
+ *     />
+ *   </>
+ * }
+ * ```
+ */
+
+
+function Select(_ref3) {
+  var _ref4, _selectedValue$text, _options$;
+
+  var label = _ref3.label,
+      options = _ref3.options,
+      onSelect = _ref3.onSelect,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      _ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
+      resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
+      _ref3$width = _ref3.width,
+      width = _ref3$width === void 0 ? 'default' : _ref3$width,
+      _ref3$height = _ref3.height,
+      height = _ref3$height === void 0 ? 'default' : _ref3$height;
+  var selectRef = useRef(null);
+  var optionsRef = useRef([]);
+
+  var _useState2 = useState(null),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      isOpen = _useState3[0],
+      setIsOpen = _useState3[1];
+
+  var isDisabled = disabled || options.length === 0;
+
+  var _useAccessibility = useAccessibility({
+    selectRef: selectRef,
+    optionsRef: optionsRef,
+    shouldHighlightOption: isOpen,
+    isSelectDisabled: isDisabled
+  }),
+      withClickAwayHandler = _useAccessibility.withClickAwayHandler,
+      handleHighlighted = _useAccessibility.handleHighlighted,
+      itemToHighlight = _useAccessibility.itemToHighlight;
+
+  var openSelect = function openSelect() {
+    return setIsOpen(true);
+  };
+
+  var closeSelect = function closeSelect() {
+    return setIsOpen(false);
+  };
+
+  var toggleSelect = function toggleSelect() {
+    return setIsOpen(function (prev) {
+      return !prev;
+    });
+  };
+
+  var closeSelectOnBlur = withClickAwayHandler(closeSelect);
+
+  var handleOptionSelection = function handleOptionSelection(index) {
+    var option = options[index];
+    setSelectedValue(option);
+    onSelect(option.value, option.text);
+  };
+
+  useEffect(function () {
+    document.addEventListener('click', closeSelectOnBlur, false);
+    return function () {
+      document.removeEventListener('click', closeSelectOnBlur, false);
+    };
+  }, []);
+  useEffect(function () {
+    if (!resetWhenOptionsUpdate) return;
+
+    if (options.length === 0) {
+      setSelectedValue(null);
+      return;
+    }
+
+    setSelectedValue(options[0]);
+  }, [options, resetWhenOptionsUpdate]);
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1,
+    tag: "p",
+    "data-testid": "select-label"
+  }, label), /*#__PURE__*/React__default.createElement(SelectList, {
+    id: "select",
+    ref: selectRef,
+    onClick: toggleSelect,
+    onFocus: openSelect,
+    onBlur: closeSelect,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
     },
-    isSearchable: isSearchable,
-    className: "chord-select-container",
-    classNamePrefix: "chord-select"
-  }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
-    darkMode: darkMode,
-    "data-testid": "text-field-error-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, error)));
+    onKeyUp: handleHighlighted(handleOptionSelection),
+    width: width,
+    height: height,
+    role: "listbox",
+    tabIndex: 0,
+    "aria-labelledby": label,
+    "aria-selected": isOpen,
+    "aria-disabled": isDisabled,
+    "data-testid": "select"
+  }, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1,
+    tag: "p",
+    "data-testid": "selected-value"
+  }, (_ref4 = (_selectedValue$text = selectedValue == null ? void 0 : selectedValue.text) != null ? _selectedValue$text : (_options$ = options[0]) == null ? void 0 : _options$.text) != null ? _ref4 : ''), isOpen && /*#__PURE__*/React__default.createElement(Options, {
+    "data-testid": "options"
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React__default.createElement(Option, {
+      ref: function ref(element) {
+        if (!element || optionsRef.current.length === options.length) return;
+        optionsRef.current.push(element);
+      },
+      role: "option",
+      tabIndex: index + 1,
+      hover: index === itemToHighlight,
+      key: option.text,
+      onClick: function onClick() {
+        return handleOptionSelection(index);
+      }
+    }, /*#__PURE__*/React__default.createElement(BodyText, {
+      level: 1,
+      tag: "p"
+    }, option.text));
+  }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
 }
 
 var _templateObject$15;
@@ -7919,7 +8327,7 @@ var TextOnly = function TextOnly(_ref) {
 };
 
 var _templateObject$16, _templateObject2$N;
-var Wrapper$5 = /*#__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 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;
@@ -7958,7 +8366,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       return window.removeEventListener('resize', setWrapperHeight);
     };
   }, [wrapperRef]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$5, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
@@ -7997,13 +8405,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$n, _templateObject6$i;
+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$n || (_templateObject5$n = /*#__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 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$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,
@@ -8143,101 +8551,19 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
-var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled.ul(_templateObject2$R || (_templateObject2$R = /*#__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$I || (_templateObject3$I = /*#__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$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: none;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n  @media ", " {\n    display: block;\n  }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
-
-/**
- * Vertical menu component uses for navigation
- * inside website chapter. It looks like a vertical
- * list with clickable items on desktop and dropdown
- * list on mobile.
- *
- * ## Menu items
- * Menu items should be passed as `items` prop. This
- * should be an array of objects. Each object should
- * have `text` (text displayed as a menu item) and
- * `onClick` (click handler function)
- *
- * ## Active menu item
- * Active menu item should be passed as component `activeItem`
- * prop. This indicates on which menu item should be highlighted
- * as active one. Should be equal to `text` prop from one of the `items`
- */
-
-var AuxiliaryNav = function AuxiliaryNav(_ref) {
-  var items = _ref.items,
-      activeItem = _ref.activeItem;
-
-  var _useState = useState(false),
-      mobileOpen = _useState[0],
-      setMobileOpen = _useState[1];
-
-  var containerRef = useRef(null);
-
-  var mobileButtonClickHandler = function mobileButtonClickHandler() {
-    setMobileOpen(function (prev) {
-      return !prev;
-    });
-  };
-
-  var outsideClickHandler = function outsideClickHandler(event) {
-    if (containerRef.current && !containerRef.current.contains(event.target)) {
-      setMobileOpen(false);
-    }
-  };
-
-  useEffect(function () {
-    document.addEventListener('mousedown', outsideClickHandler);
-    return function () {
-      document.removeEventListener('mousedown', outsideClickHandler);
-    };
-  }, [containerRef]);
-  return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
-    ref: containerRef,
-    "data-testid": "nav-menu-container"
-  }, /*#__PURE__*/React__default.createElement(MobileButton, {
-    mobileOpen: mobileOpen,
-    onClick: mobileButtonClickHandler,
-    "data-testid": "nav-menu-mobile-button"
-  }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
-    iconName: "DropdownArrow",
-    direction: mobileOpen ? 'left' : 'right'
-  })), /*#__PURE__*/React__default.createElement(MenuList, {
-    mobileOpen: mobileOpen,
-    "data-testid": "nav-menu-list"
-  }, items.map(function (item, idx) {
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: item.text + "-" + idx
-    }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
-      onClick: item.onClick,
-      active: item.text === activeItem,
-      "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
-    }, item.text));
-  })));
-};
-
-var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z, _templateObject5$o, _templateObject6$j;
-var Container$2 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+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$z || (_templateObject4$z = /*#__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$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+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$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+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 + ")";
 });
@@ -8298,7 +8624,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
     return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
   };
 
-  return /*#__PURE__*/React__default.createElement(Container$2, {
+  return /*#__PURE__*/React__default.createElement(Container$1, {
     "data-testid": "password-strength-container"
   }, /*#__PURE__*/React__default.createElement(Sections, {
     "data-testid": "password-strength-sections"
@@ -8323,6 +8649,88 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, 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,
@@ -8447,6 +8855,7 @@ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$U || (_templateObj
 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;
 
 if (Modal.defaultStyles.content) {
@@ -8523,7 +8932,7 @@ var ModalWindow = function ModalWindow(_ref) {
       setIsOpen = _ref.setIsOpen,
       children = _ref.children,
       appElementId = _ref.appElementId,
-      modalProps = _objectWithoutPropertiesLoose(_ref, ["isOpen", "setIsOpen", "children", "appElementId"]);
+      modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   var isMobile = useMobile();
   var customStyles = {