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

package/dist/chord.cjs.development.js

@@ -10,6 +10,8 @@ var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var moment = _interopDefault(require('moment'));
 var server = require('react-dom/server');
+var ReactSelect = require('react-select');
+var ReactSelect__default = _interopDefault(ReactSelect);
 var Modal = _interopDefault(require('react-modal'));
 var ScrollLock = _interopDefault(require('react-scrolllock'));
 
@@ -2175,14 +2177,12 @@ var Icon = /*#__PURE__*/React.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, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
@@ -2250,11 +2250,9 @@ var AspectRatioWidth;
   ButtonType["Tertiary"] = "Tertiary";
 })(exports.ButtonType || (exports.ButtonType = {}));
 
-var _excluded$1 = ["children"];
-
 var PrimaryButton = function PrimaryButton(_ref) {
   var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
     color: exports.Colors.White
@@ -2268,11 +2266,9 @@ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default(Button)(_templateObjec
   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, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
 
   return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
     color: exports.Colors.Primary
@@ -2286,12 +2282,10 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$6 ||
 });
 var TertiaryIconWrapper = /*#__PURE__*/styled__default.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, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "color"]);
 
   var truncatedString = children.substring(0, 100);
   return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
@@ -3253,8 +3247,6 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled__default.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,
@@ -3263,7 +3255,7 @@ var TabLink = function TabLink(_ref) {
       color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
       _ref$hoverColor = _ref.hoverColor,
       hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color", "hoverColor"]);
 
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
@@ -3313,7 +3305,6 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_tem
   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.
  *
@@ -3375,7 +3366,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, _excluded$5);
+      textareaProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"]);
 
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
@@ -3435,7 +3426,6 @@ var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_template
   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,
@@ -3483,7 +3473,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       width = _ref.width,
-      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width"]);
 
   var _useState = React.useState(false),
       showPassword = _useState[0],
@@ -3541,14 +3531,12 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$o || (_temp
 });
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.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, _excluded$7);
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
 
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
@@ -5156,8 +5144,6 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
   }, contact.title))));
 };
 
-var _excluded$8 = ["dataRoh"];
-
 var Footer = function Footer(_ref) {
   var data = _ref.data;
   var policyLinks = data.policyLinks;
@@ -5167,7 +5153,7 @@ var Footer = function Footer(_ref) {
 
   var _data$artsLogo = data.artsLogo,
       artsDataRoh = _data$artsLogo.dataRoh,
-      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$8);
+      artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, ["dataRoh"]);
 
   var additionalInfo = data.additionalInfo;
   return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -5222,8 +5208,6 @@ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_t
 });
 var ArrowWrapper = /*#__PURE__*/styled__default.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,
@@ -5438,7 +5422,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
         text = _ref4.text,
-        rest = _objectWithoutPropertiesLoose(_ref4, _excluded$9);
+        rest = _objectWithoutPropertiesLoose(_ref4, ["id", "text"]);
 
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
@@ -5494,9 +5478,6 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
 var MessageWrapper = /*#__PURE__*/styled__default.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__default.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,
@@ -5506,11 +5487,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
 
   var _ref2 = (links == null ? void 0 : links[0]) || {},
       primaryButtonText = _ref2.text,
-      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$a);
+      primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   var _ref3 = (links == null ? void 0 : links[1]) || {},
       secondaryButtonText = _ref3.text,
-      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+      secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, ["text"]);
 
   return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
     sticky: sticky
@@ -5786,8 +5767,7 @@ var Accordions = function Accordions(_ref) {
       visibleStandfirst: accordion.visibleStandfirst,
       contentType: accordion.contentType,
       displayLevel: accordion.displayLevel,
-      semanticLevel: accordion.semanticLevel,
-      initOpen: accordion.initOpen
+      semanticLevel: accordion.semanticLevel
     }, accordion.children);
   }));
 };
@@ -5992,9 +5972,6 @@ 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;
@@ -6045,7 +6022,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
@@ -6053,7 +6030,7 @@ var Card = function Card(_ref) {
   var _ref3 = secondButton || {},
       _ref3$text = _ref3.text,
       secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
+      restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
 
   var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
 
@@ -6557,8 +6534,6 @@ var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$c || (_tem
 var ButtonWrapper$1 = /*#__PURE__*/styled__default.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__default.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,
@@ -6569,7 +6544,7 @@ var PageHeading = function PageHeading(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   var truncatedText = text == null ? void 0 : text.substring(0, 250);
   var truncatedTitle = title && title.substring(0, 40);
@@ -6597,11 +6572,9 @@ 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, _excluded$d);
+      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
 
   var coreLink = link && _extends({}, link, {
     color: exports.Colors.White,
@@ -6615,11 +6588,9 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
   })));
 };
 
-var _excluded$e = ["link"];
-
 var PageHeadingCinema = function PageHeadingCinema(_ref) {
   var link = _ref.link,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
 
   var cinemaLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -6643,8 +6614,6 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.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__default.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,
@@ -6661,7 +6630,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
 
   var _ref2 = link || {},
       linkText = _ref2.text,
-      restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+      restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
@@ -6754,11 +6723,9 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
 var _templateObject$W;
 var StreamWrapper = /*#__PURE__*/styled__default.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, _excluded$g);
+      rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
 
   var streamLink = link && _extends({}, link, {
     color: exports.Colors.Black,
@@ -6907,7 +6874,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) {
@@ -6923,7 +6890,7 @@ var useIOS = function useIOS() {
       setIOS = _useState[1];
 
   React.useEffect(function () {
-    if (typeof navigator === 'undefined') return;
+    if (typeof navigator === undefined) return;
     setIOS(isIOS());
   }, []);
   return IOS;
@@ -6952,8 +6919,6 @@ 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;
@@ -7068,7 +7033,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
 
   var _ref5 = link || {},
       linkText = _ref5.text,
-      restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$h);
+      restLink = _objectWithoutPropertiesLoose(_ref5, ["text"]);
 
   var titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
@@ -7244,8 +7209,8 @@ var PeopleListing = function PeopleListing(_ref) {
 var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
 var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n"])));
-var DescriptionWrapper = /*#__PURE__*/styled__default.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__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
+var DescriptionWrapper = /*#__PURE__*/styled__default.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__default.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 getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
   return array.reduce(function (acc, item) {
@@ -7256,18 +7221,12 @@ 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", {
-        key: index
-      }, title));
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
     } else if (index > 0) {
-      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);
+    return /*#__PURE__*/React__default.createElement("i", null, title);
   }));
 };
 
@@ -7408,10 +7367,6 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
 var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled__default.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;
@@ -7482,7 +7437,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
       _ref2$text = _ref2.text,
       firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+      restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
@@ -7490,7 +7445,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref3 = secondButton || {},
       _ref3$text = _ref3.text,
       secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+      restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
 
   var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
   var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
@@ -7499,7 +7454,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, _excluded3);
+        restTextLink = _objectWithoutPropertiesLoose(link, ["text"]);
 
     return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
       key: index
@@ -7657,8 +7612,6 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
   return '';
 });
 
-var _excluded$j = ["text"],
-    _excluded2$3 = ["text"];
 var LENGTH_TEXT$3 = 28;
 
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -7684,7 +7637,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
       _ref2$text = _ref2.text,
       primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+      restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
 
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
@@ -7692,7 +7645,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref3 = tertiaryButton || {},
       _ref3$text = _ref3.text,
       tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
-      restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
+      restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
 
   var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
   return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
@@ -7865,426 +7818,72 @@ var SectionTitle = function SectionTitle(_ref) {
   }, description))));
 };
 
-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__*/styled.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;
+var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v;
+var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var SelectWrapper = /*#__PURE__*/styled__default.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';
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.colors.lightgrey;
+  var error = _ref2.error;
+  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
+  return "1px solid var(--base-color-darkgrey)";
 }, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.colors.lightgrey;
+  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 borderStyles = /*#__PURE__*/styled.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 TextLabel$1 = /*#__PURE__*/styled__default.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 ErrorLabel$1 = /*#__PURE__*/styled__default.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 noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n"])));
-var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  list-style: none;\n  user-select: none;\n"])));
-var ArrowIcon = /*#__PURE__*/styled__default(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__default.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__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  height: inherit;\n"])), noMarginAndPaddingStyles);
-var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  z-index: 1;\n\n  ", "\n  ", "\n"])), noMarginAndPaddingStyles, borderStyles);
-var Option = /*#__PURE__*/styled__default.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 styled.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 SelectList = /*#__PURE__*/styled__default.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 = React.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();
-    };
-  };
-
-  React.useEffect(function () {
-    if (shouldHighlightOption) return;
-    reset();
-  }, [shouldHighlightOption]);
-  return {
-    handleKeyUp: handleKeyUp,
-    preventScrollingWhileNavigating: preventScrollingWhileNavigating,
-    handleHighlighted: handleHighlighted,
-    itemToHighlight: itemToHighlight
-  };
-};
-
-var useVisualAccessibility = function useVisualAccessibility(_ref2) {
-  var selectRef = _ref2.selectRef,
-      isSelectDisabled = _ref2.isSelectDisabled;
-
-  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();
-    };
-  };
-
-  React.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;
-
-  React.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
-  };
+var DropdownIndicator = function DropdownIndicator(props) {
+  return /*#__PURE__*/React__default.createElement(ReactSelect.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
+    iconName: 'DropdownArrow'
+  }));
 };
-/**
- * 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 = React.useRef(null);
-  var optionsRef = React.useRef([]);
 
-  var _useState2 = React.useState(null),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
-
-  var _useState3 = React.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);
-  };
-
-  React.useEffect(function () {
-    document.addEventListener('click', closeSelectOnBlur, false);
-    return function () {
-      document.removeEventListener('click', closeSelectOnBlur, false);
-    };
-  }, []);
-  React.useEffect(function () {
-    if (!resetWhenOptionsUpdate) return;
-
-    if (options.length === 0) {
-      setSelectedValue(null);
-      return;
-    }
+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"]);
 
-    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();
-    },
-    onKeyUp: handleHighlighted(handleOptionSelection),
+  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,
-    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)));
+    error: error
+  }, /*#__PURE__*/React__default.createElement(ReactSelect__default, Object.assign({
+    components: {
+      DropdownIndicator: DropdownIndicator
+    },
+    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)));
 }
 
 var _templateObject$15;
@@ -8317,7 +7916,7 @@ var TextOnly = function TextOnly(_ref) {
 };
 
 var _templateObject$16, _templateObject2$N;
-var Wrapper$6 = /*#__PURE__*/styled__default.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$5 = /*#__PURE__*/styled__default.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 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
   return aspectRatio;
@@ -8356,7 +7955,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
       return window.removeEventListener('resize', setWrapperHeight);
     };
   }, [wrapperRef]);
-  return /*#__PURE__*/React__default.createElement(Wrapper$6, {
+  return /*#__PURE__*/React__default.createElement(Wrapper$5, {
     aspectRatio: aspectRatio,
     ref: wrapperRef,
     height: height
@@ -8395,13 +7994,13 @@ var Quote = function Quote(_ref) {
   }, attribution))));
 };
 
-var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$o, _templateObject6$j;
+var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$n, _templateObject6$i;
 var CardContainer$1 = /*#__PURE__*/styled__default.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__default.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__default.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--base-color-white);\n"])));
 var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var IconWrapper$3 = /*#__PURE__*/styled__default.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__default.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 IconWrapper$3 = /*#__PURE__*/styled__default.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__default.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 MiniCard = function MiniCard(_ref) {
   var _ref$title = _ref.title,
@@ -8541,19 +8140,101 @@ 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__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Sections = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
-var Section = /*#__PURE__*/styled__default.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
+var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
+var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
+var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
+  var mobileOpen = _ref.mobileOpen;
+  return mobileOpen ? "block" : 'none';
+}, exports.Colors.White, exports.Colors.DarkGrey);
+var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref2) {
+  var active = _ref2.active;
+  return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
+}, exports.Colors.MidGrey, devices.mobile);
+var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.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 = React.useState(false),
+      mobileOpen = _useState[0],
+      setMobileOpen = _useState[1];
+
+  var containerRef = React.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);
+    }
+  };
+
+  React.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__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Sections = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
+var Section = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__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__default.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__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var BottomLine = /*#__PURE__*/styled__default.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__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
-var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
+var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 1px;\n  white-space: nowrap;\n  color: ", ";\n"])), function (_ref3) {
   var color = _ref3.color;
   return "var(--base-color-" + color + ")";
 });
@@ -8614,7 +8295,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
     return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
   };
 
-  return /*#__PURE__*/React__default.createElement(Container$1, {
+  return /*#__PURE__*/React__default.createElement(Container$2, {
     "data-testid": "password-strength-container"
   }, /*#__PURE__*/React__default.createElement(Sections, {
     "data-testid": "password-strength-sections"
@@ -8639,88 +8320,6 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z;
-var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
-var MenuList = /*#__PURE__*/styled__default.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"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
-  var mobileOpen = _ref.mobileOpen;
-  return mobileOpen ? "block" : 'none';
-}, exports.Colors.White, exports.Colors.DarkGrey);
-var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref2) {
-  var active = _ref2.active;
-  return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
-}, exports.Colors.MidGrey, devices.mobile);
-var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.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 = React.useState(false),
-      mobileOpen = _useState[0],
-      setMobileOpen = _useState[1];
-
-  var containerRef = React.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);
-    }
-  };
-
-  React.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,
@@ -8845,7 +8444,6 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$U || (_te
 var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(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) {
@@ -8922,7 +8520,7 @@ var ModalWindow = function ModalWindow(_ref) {
       setIsOpen = _ref.setIsOpen,
       children = _ref.children,
       appElementId = _ref.appElementId,
-      modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      modalProps = _objectWithoutPropertiesLoose(_ref, ["isOpen", "setIsOpen", "children", "appElementId"]);
 
   var isMobile = useMobile();
   var customStyles = {