@royaloperahouse/chord 2.2.10-e-chord-development → 2.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +12 -211
  2. package/README.GIT +277 -0
  3. package/README.md +40 -250
  4. package/dist/chord.cjs.development.js +163 -412
  5. package/dist/chord.cjs.development.js.map +1 -1
  6. package/dist/chord.cjs.production.min.js +1 -1
  7. package/dist/chord.cjs.production.min.js.map +1 -1
  8. package/dist/chord.esm.js +164 -411
  9. package/dist/chord.esm.js.map +1 -1
  10. package/dist/components/index.d.ts +2 -2
  11. package/dist/components/molecules/Card/Card.style.d.ts +3 -1
  12. package/dist/components/molecules/PageHeading/index.d.ts +1 -1
  13. package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +0 -1
  14. package/dist/components/molecules/Select2/Select2.d.ts +1 -7
  15. package/dist/components/molecules/index.d.ts +2 -4
  16. package/dist/index.d.ts +2 -3
  17. package/dist/types/formTypes.d.ts +12 -19
  18. package/dist/types/passwordStrength.d.ts +6 -6
  19. package/package.json +1 -1
  20. package/dist/components/molecules/Select2Async/Select2Async.d.ts +0 -18
  21. package/dist/components/molecules/Select2Async/index.d.ts +0 -2
  22. package/dist/components/molecules/Table/Table.d.ts +0 -4
  23. package/dist/components/molecules/Table/Table.style.d.ts +0 -16
  24. package/dist/components/molecules/Table/index.d.ts +0 -2
  25. package/dist/types/tableTypes.d.ts +0 -42
package/dist/chord.cjs.development.js CHANGED
@@ -12,7 +12,6 @@ var moment = _interopDefault(require('moment'));
12
12
  var server = require('react-dom/server');
13
13
  var Select$1 = require('react-select');
14
14
  var Select$1__default = _interopDefault(Select$1);
15
- var Select$2 = _interopDefault(require('react-select/async'));
16
15
  var Modal = _interopDefault(require('react-modal'));
17
16
  var ScrollLock = _interopDefault(require('react-scrolllock'));
18
17
 
@@ -3604,7 +3603,7 @@ var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject2$c || (_temp
3604
3603
  if (!width) return 'none';
3605
3604
  return width + 'px';
3606
3605
  });
3607
- var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none; \n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3606
+ var Input = /*#__PURE__*/styled__default.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3608
3607
  var isPasswordField = _ref2.isPasswordField;
3609
3608
  if (isPasswordField) return "80px";
3610
3609
  return "20px";
@@ -3712,7 +3711,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3712
3711
  "data-testid": "text-field-input",
3713
3712
  ref: ref
3714
3713
  }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
3715
- type: 'button',
3714
+ type: "button",
3716
3715
  onClick: showHideClickHandler
3717
3716
  }, /*#__PURE__*/React__default.createElement(Overline, {
3718
3717
  level: 1
@@ -3882,10 +3881,7 @@ var Tickbox = function Tickbox(_ref) {
3882
3881
  onKeyPress: spaceButtonHandler,
3883
3882
  dark: isDarkMode,
3884
3883
  disabled: disabled,
3885
- "data-testid": "tickbox",
3886
- role: "checkbox",
3887
- "aria-checked": selected ? 'true' : 'false',
3888
- "aria-labelledby": dataLabel
3884
+ "data-testid": "tickbox"
3889
3885
  }, /*#__PURE__*/React__default.createElement(BodyText, {
3890
3886
  level: 1,
3891
3887
  tag: "span"
@@ -3896,7 +3892,6 @@ var Tickbox = function Tickbox(_ref) {
3896
3892
  dark: isDarkMode,
3897
3893
  "aria-labelledby": dataLabel,
3898
3894
  whiteBox: whiteBox,
3899
- "aria-checked": selected ? 'true' : 'false',
3900
3895
  disabled: disabled
3901
3896
  }), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
3902
3897
  dark: isDarkMode,
@@ -6089,8 +6084,7 @@ var Accordions = function Accordions(_ref) {
6089
6084
  visibleStandfirst: accordion.visibleStandfirst,
6090
6085
  contentType: accordion.contentType,
6091
6086
  displayLevel: accordion.displayLevel,
6092
- semanticLevel: accordion.semanticLevel,
6093
- initOpen: accordion.initOpen
6087
+ semanticLevel: accordion.semanticLevel
6094
6088
  }, accordion.children);
6095
6089
  }));
6096
6090
  };
@@ -6206,28 +6200,34 @@ var LabelContainer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_t
6206
6200
  var isGridCard = _ref7.isGridCard;
6207
6201
  return isGridCard ? '20px' : '0';
6208
6202
  });
6209
- var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: var(--editorial-margin-between);\n"])));
6210
- var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 8px;\n background-color: ", ";\n color: var(--base-color-white);\n"])), function (_ref8) {
6211
- var bgColor = _ref8.bgColor,
6212
- theme = _ref8.theme;
6203
+ var ExtraActionsContainer = /*#__PURE__*/styled__default.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref8) {
6204
+ var fullWidth = _ref8.fullWidth;
6205
+ return fullWidth ? '0' : '20px';
6206
+ }, function (_ref9) {
6207
+ var fullWidth = _ref9.fullWidth;
6208
+ return fullWidth ? '0' : '20px';
6209
+ });
6210
+ var LabelElements = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 8px;\n background-color: ", ";\n color: var(--base-color-white);\n"])), function (_ref10) {
6211
+ var bgColor = _ref10.bgColor,
6212
+ theme = _ref10.theme;
6213
6213
  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
6214
6214
  });
6215
6215
  var LabelIconWrapper = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
6216
6216
 
6217
- var getButtonsOpacity = function getButtonsOpacity(_ref9) {
6218
- var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
6217
+ var getButtonsOpacity = function getButtonsOpacity(_ref11) {
6218
+ var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
6219
6219
  return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
6220
6220
  };
6221
6221
 
6222
- var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
6223
- var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
6222
+ var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
6223
+ var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
6224
6224
  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
6225
6225
  };
6226
6226
 
6227
- var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref11) {
6228
- var size = _ref11.size,
6229
- primaryButtonTextLength = _ref11.primaryButtonTextLength,
6230
- tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
6227
+ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref13) {
6228
+ var size = _ref13.size,
6229
+ primaryButtonTextLength = _ref13.primaryButtonTextLength,
6230
+ tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
6231
6231
  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
6232
6232
 
6233
6233
  if (isLinksLayoutColumn) {
@@ -6235,15 +6235,15 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject14 || (
6235
6235
  }
6236
6236
 
6237
6237
  return '';
6238
- }, devices.mobile, getButtonsMinHeight, function (_ref12) {
6239
- var fullWidth = _ref12.fullWidth;
6238
+ }, devices.mobile, getButtonsMinHeight, function (_ref14) {
6239
+ var fullWidth = _ref14.fullWidth;
6240
6240
  return fullWidth ? '0' : '20px';
6241
- }, function (_ref13) {
6242
- var fullWidth = _ref13.fullWidth;
6241
+ }, function (_ref15) {
6242
+ var fullWidth = _ref15.fullWidth;
6243
6243
  return fullWidth ? '0' : '20px';
6244
- }, devices.tablet, getButtonsMinHeight, function (_ref14) {
6245
- var primaryButtonTextLength = _ref14.primaryButtonTextLength,
6246
- tertiaryButtonTextLength = _ref14.tertiaryButtonTextLength;
6244
+ }, devices.tablet, getButtonsMinHeight, function (_ref16) {
6245
+ var primaryButtonTextLength = _ref16.primaryButtonTextLength,
6246
+ tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
6247
6247
  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
6248
6248
 
6249
6249
  if (isLinksLayoutColumnTablet) {
@@ -6449,9 +6449,11 @@ var Card = function Card(_ref) {
6449
6449
  dangerouslySetInnerHTML: {
6450
6450
  __html: truncatedText
6451
6451
  }
6452
- }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
6452
+ }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
6453
6453
  level: 1
6454
- }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
6454
+ }, highlightText)))), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
6455
+ fullWidth: fullWidth
6456
+ }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
6455
6457
  ref: node,
6456
6458
  "data-testid": "buttonscontainer",
6457
6459
  className: "cardButtonsContainer",
@@ -7229,7 +7231,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
7229
7231
  var isIOS = function isIOS() {
7230
7232
  try {
7231
7233
  console.warn('Do not use this on server side rendering, it may throw an error.');
7232
- if (typeof navigator === 'undefined') return false;
7234
+ if (typeof navigator === undefined) return false;
7233
7235
  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
7234
7236
  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
7235
7237
  } catch (e) {
@@ -7245,7 +7247,7 @@ var useIOS = function useIOS() {
7245
7247
  setIOS = _useState[1];
7246
7248
 
7247
7249
  React.useEffect(function () {
7248
- if (typeof navigator === 'undefined') return;
7250
+ if (typeof navigator === undefined) return;
7249
7251
  setIOS(isIOS());
7250
7252
  }, []);
7251
7253
  return IOS;
@@ -7564,8 +7566,8 @@ var PeopleListing = function PeopleListing(_ref) {
7564
7566
  var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
7565
7567
  var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
7566
7568
  var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
7567
- var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
7568
- var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
7569
+ var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
7570
+ var RoleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
7569
7571
 
7570
7572
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
7571
7573
  return array.reduce(function (acc, item) {
@@ -7576,18 +7578,12 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
7576
7578
  var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
7577
7579
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
7578
7580
  if (musicTitle.length > 1 && index === musicTitle.length - 1) {
7579
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
7580
- key: index
7581
- }, title));
7581
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
7582
7582
  } else if (index > 0) {
7583
- return /*#__PURE__*/React__default.createElement("i", {
7584
- key: index
7585
- }, ", ", title);
7583
+ return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
7586
7584
  }
7587
7585
 
7588
- return /*#__PURE__*/React__default.createElement("i", {
7589
- key: index
7590
- }, title);
7586
+ return /*#__PURE__*/React__default.createElement("i", null, title);
7591
7587
  }));
7592
7588
  };
7593
7589
 
@@ -8698,7 +8694,7 @@ function Select(_ref3) {
8698
8694
 
8699
8695
  var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
8700
8696
  var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
8701
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__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: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 20px 20px;\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 letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .chord-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
8697
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__indicator-separator {\n display: none;\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 15px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-darkgrey);\n text-align: left;\n }\n"])), function (_ref) {
8702
8698
  var width = _ref.width;
8703
8699
  if (!width) return 'none';
8704
8700
  return width + 'px';
@@ -8731,28 +8727,6 @@ var DropdownIndicator = function DropdownIndicator(props) {
8731
8727
  iconName: "DropdownArrow"
8732
8728
  }));
8733
8729
  };
8734
- var WrapperComponent = function WrapperComponent(_ref) {
8735
- var label = _ref.label,
8736
- error = _ref.error,
8737
- width = _ref.width,
8738
- darkMode = _ref.darkMode,
8739
- children = _ref.children;
8740
- return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
8741
- darkMode: darkMode,
8742
- "data-testid": "select2-text-label"
8743
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
8744
- level: 6
8745
- }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
8746
- width: width,
8747
- error: error,
8748
- darkMode: darkMode
8749
- }, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
8750
- darkMode: darkMode,
8751
- "data-testid": "select2-error-label"
8752
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
8753
- level: 6
8754
- }, error)));
8755
- };
8756
8730
  /**
8757
8731
  * A Select2 component wraps react-select with Chord styling and additional elements like
8758
8732
  * text and error labels. This should be used just as usual react-select component.
@@ -8768,72 +8742,42 @@ var WrapperComponent = function WrapperComponent(_ref) {
8768
8742
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
8769
8743
  */
8770
8744
 
8771
- var SelectComponent = function SelectComponent(_ref2) {
8772
- var label = _ref2.label,
8773
- error = _ref2.error,
8774
- width = _ref2.width,
8775
- _ref2$darkMode = _ref2.darkMode,
8776
- darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
8777
- _ref2$isSearchable = _ref2.isSearchable,
8778
- isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
8779
- components = _ref2.components,
8780
- selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
8781
-
8782
- return /*#__PURE__*/React__default.createElement(WrapperComponent, {
8783
- label: label,
8784
- error: error,
8785
- width: width,
8786
- darkMode: darkMode
8787
- }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
8788
- components: _extends({
8789
- DropdownIndicator: DropdownIndicator,
8790
- LoadingIndicator: undefined,
8791
- IndicatorSeparator: undefined
8792
- }, components),
8793
- className: "chord-select-container",
8794
- classNamePrefix: "chord-select",
8795
- isSearchable: isSearchable
8796
- })));
8797
- };
8798
-
8799
- /**
8800
- * The Select2Async component is similar to Select 2, but uses react-select async
8801
- * component for select instead of regular react-select component. This can be used
8802
- * for selects with dynamically loaded options, live search components etc.
8803
- *
8804
- * # Error state
8805
- * An error label will be shown below the select if the `error` prop exists.
8806
- * Also select will be rendered with a red border. An empty string can be passed to
8807
- * render only error state without error message.
8808
- *
8809
- * # Light / Dark mode
8810
- * The component can also adapt its styles for light / dark mode. If you want this component
8811
- * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
8812
- */
8813
8745
 
8814
- var SelectComponent$1 = function SelectComponent(_ref) {
8746
+ var SelectComponent = function SelectComponent(_ref) {
8815
8747
  var label = _ref.label,
8816
8748
  error = _ref.error,
8817
8749
  width = _ref.width,
8818
8750
  _ref$darkMode = _ref.darkMode,
8819
8751
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
8820
- components = _ref.components,
8821
- selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
8752
+ _ref$isSearchable = _ref.isSearchable,
8753
+ isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
8754
+ _ref$placeholder = _ref.placeholder,
8755
+ placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
8756
+ selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
8822
8757
 
8823
- return /*#__PURE__*/React__default.createElement(WrapperComponent, {
8824
- label: label,
8825
- error: error,
8758
+ return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
8759
+ darkMode: darkMode,
8760
+ "data-testid": "select2-text-label"
8761
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
8762
+ level: 6
8763
+ }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
8826
8764
  width: width,
8765
+ error: error,
8827
8766
  darkMode: darkMode
8828
- }, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
8829
- components: _extends({
8830
- DropdownIndicator: DropdownIndicator,
8831
- LoadingIndicator: undefined,
8832
- IndicatorSeparator: undefined
8833
- }, components),
8767
+ }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
8768
+ components: {
8769
+ DropdownIndicator: DropdownIndicator
8770
+ },
8771
+ isSearchable: isSearchable,
8772
+ placeholder: placeholder,
8834
8773
  className: "chord-select-container",
8835
8774
  classNamePrefix: "chord-select"
8836
- })));
8775
+ }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
8776
+ darkMode: darkMode,
8777
+ "data-testid": "select2-error-label"
8778
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
8779
+ level: 6
8780
+ }, error)));
8837
8781
  };
8838
8782
 
8839
8783
  var _templateObject$1a;
@@ -9090,14 +9034,96 @@ var ReadMore = function ReadMore(_ref) {
9090
9034
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
9091
9035
  };
9092
9036
 
9093
- var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
9094
- var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
9095
- var Sections = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
9096
- var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
9037
+ var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B;
9038
+ var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
9039
+ var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
9040
+ var mobileOpen = _ref.mobileOpen;
9041
+ return mobileOpen ? "block" : 'none';
9042
+ }, exports.Colors.White, exports.Colors.DarkGrey);
9043
+ var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
9044
+ var active = _ref2.active;
9045
+ return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
9046
+ }, exports.Colors.MidGrey, devices.mobile);
9047
+ var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
9048
+
9049
+ /**
9050
+ * Vertical menu component uses for navigation
9051
+ * inside website chapter. It looks like a vertical
9052
+ * list with clickable items on desktop and dropdown
9053
+ * list on mobile.
9054
+ *
9055
+ * ## Menu items
9056
+ * Menu items should be passed as `items` prop. This
9057
+ * should be an array of objects. Each object should
9058
+ * have `text` (text displayed as a menu item) and
9059
+ * `onClick` (click handler function)
9060
+ *
9061
+ * ## Active menu item
9062
+ * Active menu item should be passed as component `activeItem`
9063
+ * prop. This indicates on which menu item should be highlighted
9064
+ * as active one. Should be equal to `text` prop from one of the `items`
9065
+ */
9066
+
9067
+ var AuxiliaryNav = function AuxiliaryNav(_ref) {
9068
+ var items = _ref.items,
9069
+ activeItem = _ref.activeItem;
9070
+
9071
+ var _useState = React.useState(false),
9072
+ mobileOpen = _useState[0],
9073
+ setMobileOpen = _useState[1];
9074
+
9075
+ var containerRef = React.useRef(null);
9076
+
9077
+ var mobileButtonClickHandler = function mobileButtonClickHandler() {
9078
+ setMobileOpen(function (prev) {
9079
+ return !prev;
9080
+ });
9081
+ };
9082
+
9083
+ var outsideClickHandler = function outsideClickHandler(event) {
9084
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
9085
+ setMobileOpen(false);
9086
+ }
9087
+ };
9088
+
9089
+ React.useEffect(function () {
9090
+ document.addEventListener('mousedown', outsideClickHandler);
9091
+ return function () {
9092
+ document.removeEventListener('mousedown', outsideClickHandler);
9093
+ };
9094
+ }, [containerRef]);
9095
+ return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
9096
+ ref: containerRef,
9097
+ "data-testid": "nav-menu-container"
9098
+ }, /*#__PURE__*/React__default.createElement(MobileButton, {
9099
+ mobileOpen: mobileOpen,
9100
+ onClick: mobileButtonClickHandler,
9101
+ "data-testid": "nav-menu-mobile-button"
9102
+ }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
9103
+ iconName: "DropdownArrow",
9104
+ direction: mobileOpen ? 'left' : 'right'
9105
+ })), /*#__PURE__*/React__default.createElement(MenuList, {
9106
+ mobileOpen: mobileOpen,
9107
+ "data-testid": "nav-menu-list"
9108
+ }, items.map(function (item, idx) {
9109
+ return /*#__PURE__*/React__default.createElement("li", {
9110
+ key: item.text + "-" + idx
9111
+ }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
9112
+ onClick: item.onClick,
9113
+ active: item.text === activeItem,
9114
+ "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
9115
+ }, item.text));
9116
+ })));
9117
+ };
9118
+
9119
+ var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
9120
+ var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
9121
+ var Sections = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
9122
+ var Section = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
9097
9123
  var color = _ref.color;
9098
9124
  return "var(--base-color-" + color + ")";
9099
9125
  });
9100
- var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
9126
+ var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
9101
9127
  var Text = /*#__PURE__*/styled__default.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
9102
9128
  var color = _ref2.color;
9103
9129
  return "var(--base-color-" + color + ")";
@@ -9188,279 +9214,6 @@ var PasswordStrength = function PasswordStrength(_ref) {
9188
9214
  }, strengthLabel))));
9189
9215
  };
9190
9216
 
9191
- var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
9192
- var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
9193
- var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
9194
- var mobileOpen = _ref.mobileOpen;
9195
- return mobileOpen ? "block" : 'none';
9196
- }, exports.Colors.White, exports.Colors.DarkGrey);
9197
- var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
9198
- var active = _ref2.active;
9199
- return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
9200
- }, exports.Colors.MidGrey, devices.mobile);
9201
- var MobileButton = /*#__PURE__*/styled__default.button(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey, devices.mobile);
9202
-
9203
- /**
9204
- * Vertical menu component uses for navigation
9205
- * inside website chapter. It looks like a vertical
9206
- * list with clickable items on desktop and dropdown
9207
- * list on mobile.
9208
- *
9209
- * ## Menu items
9210
- * Menu items should be passed as `items` prop. This
9211
- * should be an array of objects. Each object should
9212
- * have `text` (text displayed as a menu item) and
9213
- * `onClick` (click handler function)
9214
- *
9215
- * ## Active menu item
9216
- * Active menu item should be passed as component `activeItem`
9217
- * prop. This indicates on which menu item should be highlighted
9218
- * as active one. Should be equal to `text` prop from one of the `items`
9219
- */
9220
-
9221
- var AuxiliaryNav = function AuxiliaryNav(_ref) {
9222
- var items = _ref.items,
9223
- activeItem = _ref.activeItem;
9224
-
9225
- var _useState = React.useState(false),
9226
- mobileOpen = _useState[0],
9227
- setMobileOpen = _useState[1];
9228
-
9229
- var containerRef = React.useRef(null);
9230
-
9231
- var mobileButtonClickHandler = function mobileButtonClickHandler() {
9232
- setMobileOpen(function (prev) {
9233
- return !prev;
9234
- });
9235
- };
9236
-
9237
- var outsideClickHandler = function outsideClickHandler(event) {
9238
- if (containerRef.current && !containerRef.current.contains(event.target)) {
9239
- setMobileOpen(false);
9240
- }
9241
- };
9242
-
9243
- React.useEffect(function () {
9244
- document.addEventListener('mousedown', outsideClickHandler);
9245
- return function () {
9246
- document.removeEventListener('mousedown', outsideClickHandler);
9247
- };
9248
- }, [containerRef]);
9249
- return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
9250
- ref: containerRef,
9251
- "data-testid": "nav-menu-container"
9252
- }, /*#__PURE__*/React__default.createElement(MobileButton, {
9253
- mobileOpen: mobileOpen,
9254
- onClick: mobileButtonClickHandler,
9255
- "data-testid": "nav-menu-mobile-button"
9256
- }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
9257
- iconName: "DropdownArrow",
9258
- direction: mobileOpen ? 'left' : 'right'
9259
- })), /*#__PURE__*/React__default.createElement(MenuList, {
9260
- mobileOpen: mobileOpen,
9261
- "data-testid": "nav-menu-list"
9262
- }, items.map(function (item, idx) {
9263
- return /*#__PURE__*/React__default.createElement("li", {
9264
- key: item.text + "-" + idx
9265
- }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
9266
- onClick: item.onClick,
9267
- active: item.text === activeItem,
9268
- "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
9269
- }, item.text));
9270
- })));
9271
- };
9272
-
9273
- var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6;
9274
- var TableHeader = /*#__PURE__*/styled__default.th(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 24px 0;\n text-align: left;\n text-transform: uppercase;\n"])));
9275
- var TableCell = /*#__PURE__*/styled__default.td(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 34px 30px 34px 0;\n text-align: left;\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])), function (props) {
9276
- return "calc(100% / " + (props.columns - 1) + ")";
9277
- });
9278
- var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
9279
- return "var(--base-color-" + props.lineColor + ")";
9280
- });
9281
- var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--base-color-transparent);\n }\n"])));
9282
- var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
9283
- var active = _ref.active;
9284
- return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
9285
- });
9286
- var Next = /*#__PURE__*/styled__default.span(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
9287
- var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n"])));
9288
- var TableContainer = /*#__PURE__*/styled__default.table(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
9289
- var Container$6 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
9290
-
9291
- var Table = function Table(_ref) {
9292
- var columns = _ref.columns,
9293
- headings = _ref.headings,
9294
- children = _ref.children,
9295
- lineColors = _ref.lineColors,
9296
- rowsPerPage = _ref.rowsPerPage,
9297
- pagination = _ref.pagination;
9298
-
9299
- var _useState = React.useState(0),
9300
- currentPage = _useState[0],
9301
- setCurrentPage = _useState[1];
9302
-
9303
- var _useState2 = React.useState(false),
9304
- showScrollButtons = _useState2[0],
9305
- setShowScrollButtons = _useState2[1];
9306
-
9307
- var Content = function Content(_ref2) {
9308
- var content = _ref2.content;
9309
- return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
9310
- dangerouslySetInnerHTML: {
9311
- __html: content
9312
- }
9313
- }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
9314
- };
9315
-
9316
- var Cell = function Cell(_ref3) {
9317
- var cell = _ref3.cell,
9318
- cellIndex = _ref3.cellIndex,
9319
- columns = _ref3.columns;
9320
- return /*#__PURE__*/React__default.createElement(TableCell, {
9321
- key: cellIndex,
9322
- columns: columns
9323
- }, /*#__PURE__*/React__default.createElement(Content, {
9324
- content: cell
9325
- }));
9326
- };
9327
-
9328
- var Row = function Row(_ref4) {
9329
- var row = _ref4.row,
9330
- rowIndex = _ref4.rowIndex,
9331
- columns = _ref4.columns,
9332
- lineColor = _ref4.lineColor;
9333
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
9334
- key: rowIndex
9335
- }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
9336
- return /*#__PURE__*/React__default.createElement(Cell, {
9337
- key: index,
9338
- cell: cell,
9339
- cellIndex: index,
9340
- columns: columns
9341
- });
9342
- })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
9343
- colSpan: columns
9344
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
9345
- lineColor: lineColor,
9346
- role: "presentation"
9347
- }))));
9348
- };
9349
-
9350
- var lineColor = lineColors != null ? lineColors : exports.ThemeType.Cinema;
9351
- var tableRef = React.useRef(null);
9352
- React.useEffect(function () {
9353
- if (tableRef.current) {
9354
- tableRef.current.scrollTo(0, 0);
9355
- }
9356
- }, [children]);
9357
-
9358
- var horizontalScroll = function horizontalScroll() {
9359
- if (tableRef.current) {
9360
- setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
9361
- }
9362
- };
9363
-
9364
- React.useEffect(function () {
9365
- horizontalScroll();
9366
- window.addEventListener('resize', horizontalScroll);
9367
- return function () {
9368
- return window.removeEventListener('resize', horizontalScroll);
9369
- };
9370
- }, []);
9371
-
9372
- var scrollTable = function scrollTable(direction) {
9373
- if (tableRef.current) {
9374
- var currentScroll = tableRef.current.scrollLeft;
9375
- var scrollAmount = direction === 'left' ? -300 : 300;
9376
- tableRef.current.scrollTo({
9377
- left: currentScroll + scrollAmount,
9378
- behavior: 'smooth'
9379
- });
9380
- }
9381
- };
9382
-
9383
- var totalRows = Array.isArray(children) ? children.length : 0;
9384
- var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
9385
- var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
9386
- var pageNumbers = Array.from({
9387
- length: totalPages
9388
- }, function (_, i) {
9389
- return i;
9390
- });
9391
- var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9392
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
9393
- onClickPrev: function onClickPrev() {
9394
- return scrollTable('left');
9395
- },
9396
- onClickNext: function onClickNext() {
9397
- return scrollTable('right');
9398
- }
9399
- })), /*#__PURE__*/React__default.createElement(Container$6, {
9400
- role: "table",
9401
- tabIndex: 0,
9402
- ref: tableRef
9403
- }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
9404
- colSpan: columns
9405
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
9406
- lineColor: lineColor,
9407
- role: "presentation"
9408
- })))), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
9409
- return /*#__PURE__*/React__default.createElement(TableHeader, {
9410
- key: index,
9411
- role: "columnheader"
9412
- }, /*#__PURE__*/React__default.createElement(Content, {
9413
- content: heading
9414
- }));
9415
- }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
9416
- colSpan: columns
9417
- }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
9418
- lineColor: lineColor,
9419
- role: "presentation"
9420
- }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
9421
- return /*#__PURE__*/React__default.createElement(Row, {
9422
- key: rowIndex,
9423
- row: row,
9424
- rowIndex: rowIndex,
9425
- columns: columns,
9426
- lineColor: lineColor
9427
- });
9428
- }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9429
- key: "previous-page",
9430
- onClick: function onClick() {
9431
- return setCurrentPage(currentPage - 1);
9432
- },
9433
- tabIndex: 0,
9434
- "aria-label": "Previous page"
9435
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
9436
- iconName: "DropdownArrow",
9437
- direction: "down"
9438
- })))), reducedPageNumbers.map(function (number) {
9439
- return /*#__PURE__*/React__default.createElement("li", {
9440
- key: number
9441
- }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9442
- key: number,
9443
- onClick: function onClick() {
9444
- return setCurrentPage(number);
9445
- },
9446
- tabIndex: 0,
9447
- active: "" + (number === currentPage)
9448
- }, number + 1));
9449
- }), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9450
- key: "more-after"
9451
- }, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9452
- key: "next-page",
9453
- onClick: function onClick() {
9454
- return setCurrentPage(currentPage + 1);
9455
- },
9456
- tabIndex: 0,
9457
- "aria-label": "Next page"
9458
- }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
9459
- iconName: "DropdownArrow",
9460
- direction: "up"
9461
- })))))));
9462
- };
9463
-
9464
9217
  var UpsellSection = function UpsellSection(_ref) {
9465
9218
  var title = _ref.title,
9466
9219
  richText = _ref.richText,
@@ -9549,9 +9302,9 @@ var LiveChat = function LiveChat() {
9549
9302
  });
9550
9303
  };
9551
9304
 
9552
- var _templateObject$1i, _templateObject2$Y;
9553
- var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
9554
- var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
9305
+ var _templateObject$1h, _templateObject2$X;
9306
+ var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
9307
+ var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
9555
9308
  var hideBottomBorder = _ref.hideBottomBorder;
9556
9309
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
9557
9310
  }, devices.mobileAndTablet, devices.mobile);
@@ -9579,11 +9332,11 @@ var StickyBar = function StickyBar(_ref) {
9579
9332
  }, children)));
9580
9333
  };
9581
9334
 
9582
- var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
9583
- var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
9584
- var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
9585
- var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9586
- var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
9335
+ var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D;
9336
+ var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
9337
+ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
9338
+ var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9339
+ var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
9587
9340
 
9588
9341
  var MAX_Z_INDEX = 9999999999;
9589
9342
 
@@ -9703,8 +9456,8 @@ var ModalWindow = function ModalWindow(_ref) {
9703
9456
  })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
9704
9457
  };
9705
9458
 
9706
- var _templateObject$1k;
9707
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
9459
+ var _templateObject$1j;
9460
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
9708
9461
  var theme = _ref.theme;
9709
9462
  return theme.colors.primary;
9710
9463
  }, function (_ref2) {
@@ -10702,7 +10455,6 @@ exports.SectionSplitter = SectionSplitter;
10702
10455
  exports.SectionTitle = SectionTitle;
10703
10456
  exports.Select = Select;
10704
10457
  exports.Select2 = SelectComponent;
10705
- exports.Select2Async = SelectComponent$1;
10706
10458
  exports.Sponsorship = Sponsorship;
10707
10459
  exports.StatusBanner = StatusBanner;
10708
10460
  exports.Stepper = Component;
@@ -10711,7 +10463,6 @@ exports.StreamBadge = StreamBadge;
10711
10463
  exports.Subtitle = Subtitle;
10712
10464
  exports.Tab = Tab;
10713
10465
  exports.TabLink = TabLink;
10714
- exports.Table = Table;
10715
10466
  exports.Tabs = Tabs;
10716
10467
  exports.TertiaryButton = Button$1;
10717
10468
  exports.TextArea = TextArea;