@royaloperahouse/chord 2.2.11 → 2.2.13-a-chord-development

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 +217 -7
  2. package/README.md +250 -40
  3. package/dist/chord.cjs.development.js +398 -138
  4. package/dist/chord.cjs.development.js.map +1 -1
  5. package/dist/chord.cjs.production.min.js +1 -1
  6. package/dist/chord.cjs.production.min.js.map +1 -1
  7. package/dist/chord.esm.js +397 -139
  8. package/dist/chord.esm.js.map +1 -1
  9. package/dist/components/index.d.ts +2 -2
  10. package/dist/components/molecules/PageHeading/index.d.ts +1 -1
  11. package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
  12. package/dist/components/molecules/Select2/Select2.d.ts +7 -1
  13. package/dist/components/molecules/Select2/Select2.style.d.ts +2 -2
  14. package/dist/components/molecules/Select2Async/Select2Async.d.ts +18 -0
  15. package/dist/components/molecules/Select2Async/index.d.ts +2 -0
  16. package/dist/components/molecules/Table/Table.d.ts +4 -0
  17. package/dist/components/molecules/Table/Table.style.d.ts +17 -0
  18. package/dist/components/molecules/Table/index.d.ts +2 -0
  19. package/dist/components/molecules/index.d.ts +4 -2
  20. package/dist/index.d.ts +3 -2
  21. package/dist/types/formTypes.d.ts +19 -12
  22. package/dist/types/passwordStrength.d.ts +6 -6
  23. package/dist/types/tableTypes.d.ts +42 -0
  24. package/package.json +2 -2
  25. package/README.GIT +0 -277
package/dist/chord.esm.js CHANGED
@@ -3,6 +3,7 @@ import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components
3
3
  import moment from 'moment';
4
4
  import { renderToString } from 'react-dom/server';
5
5
  import Select$1, { components } from 'react-select';
6
+ import Select$2 from 'react-select/async';
6
7
  import Modal from 'react-modal';
7
8
  import ScrollLock from 'react-scrolllock';
8
9
 
@@ -3606,7 +3607,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$c || (_templateObjec
3606
3607
  if (!width) return 'none';
3607
3608
  return width + 'px';
3608
3609
  });
3609
- var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3610
+ var Input = /*#__PURE__*/styled.input(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n border-radius: 0;\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none; \n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3610
3611
  var isPasswordField = _ref2.isPasswordField;
3611
3612
  if (isPasswordField) return "80px";
3612
3613
  return "20px";
@@ -3714,7 +3715,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3714
3715
  "data-testid": "text-field-input",
3715
3716
  ref: ref
3716
3717
  }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
3717
- type: "button",
3718
+ type: 'button',
3718
3719
  onClick: showHideClickHandler
3719
3720
  }, /*#__PURE__*/React__default.createElement(Overline, {
3720
3721
  level: 1
@@ -3884,7 +3885,10 @@ var Tickbox = function Tickbox(_ref) {
3884
3885
  onKeyPress: spaceButtonHandler,
3885
3886
  dark: isDarkMode,
3886
3887
  disabled: disabled,
3887
- "data-testid": "tickbox"
3888
+ "data-testid": "tickbox",
3889
+ role: "checkbox",
3890
+ "aria-checked": selected ? 'true' : 'false',
3891
+ "aria-labelledby": dataLabel
3888
3892
  }, /*#__PURE__*/React__default.createElement(BodyText, {
3889
3893
  level: 1,
3890
3894
  tag: "span"
@@ -3895,6 +3899,7 @@ var Tickbox = function Tickbox(_ref) {
3895
3899
  dark: isDarkMode,
3896
3900
  "aria-labelledby": dataLabel,
3897
3901
  whiteBox: whiteBox,
3902
+ "aria-checked": selected ? 'true' : 'false',
3898
3903
  disabled: disabled
3899
3904
  }), /*#__PURE__*/React__default.createElement(TickboxCheckmark, {
3900
3905
  dark: isDarkMode,
@@ -6087,7 +6092,8 @@ var Accordions = function Accordions(_ref) {
6087
6092
  visibleStandfirst: accordion.visibleStandfirst,
6088
6093
  contentType: accordion.contentType,
6089
6094
  displayLevel: accordion.displayLevel,
6090
- semanticLevel: accordion.semanticLevel
6095
+ semanticLevel: accordion.semanticLevel,
6096
+ initOpen: accordion.initOpen
6091
6097
  }, accordion.children);
6092
6098
  }));
6093
6099
  };
@@ -6452,9 +6458,9 @@ var Card = function Card(_ref) {
6452
6458
  dangerouslySetInnerHTML: {
6453
6459
  __html: truncatedText
6454
6460
  }
6455
- }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
6461
+ }))), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
6456
6462
  level: 1
6457
- }, highlightText)))), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
6463
+ }, highlightText)), auxiliaryCTA && /*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
6458
6464
  fullWidth: fullWidth
6459
6465
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text)), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
6460
6466
  ref: node,
@@ -7234,7 +7240,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
7234
7240
  var isIOS = function isIOS() {
7235
7241
  try {
7236
7242
  console.warn('Do not use this on server side rendering, it may throw an error.');
7237
- if (typeof navigator === undefined) return false;
7243
+ if (typeof navigator === 'undefined') return false;
7238
7244
  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
7239
7245
  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
7240
7246
  } catch (e) {
@@ -7250,7 +7256,7 @@ var useIOS = function useIOS() {
7250
7256
  setIOS = _useState[1];
7251
7257
 
7252
7258
  useEffect(function () {
7253
- if (typeof navigator === undefined) return;
7259
+ if (typeof navigator === 'undefined') return;
7254
7260
  setIOS(isIOS());
7255
7261
  }, []);
7256
7262
  return IOS;
@@ -7569,8 +7575,8 @@ var PeopleListing = function PeopleListing(_ref) {
7569
7575
  var _templateObject$11, _templateObject2$K, _templateObject3$C, _templateObject4$u;
7570
7576
  var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
7571
7577
  var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
7572
- var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
7573
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
7578
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
7579
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
7574
7580
 
7575
7581
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
7576
7582
  return array.reduce(function (acc, item) {
@@ -7581,12 +7587,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
7581
7587
  var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
7582
7588
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
7583
7589
  if (musicTitle.length > 1 && index === musicTitle.length - 1) {
7584
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
7590
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
7591
+ key: index
7592
+ }, title));
7585
7593
  } else if (index > 0) {
7586
- return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
7594
+ return /*#__PURE__*/React__default.createElement("i", {
7595
+ key: index
7596
+ }, ", ", title);
7587
7597
  }
7588
7598
 
7589
- return /*#__PURE__*/React__default.createElement("i", null, title);
7599
+ return /*#__PURE__*/React__default.createElement("i", {
7600
+ key: index
7601
+ }, title);
7590
7602
  }));
7591
7603
  };
7592
7604
 
@@ -8697,7 +8709,7 @@ function Select(_ref3) {
8697
8709
 
8698
8710
  var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
8699
8711
  var Container$4 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
8700
- var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__indicator-separator {\n display: none;\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 15px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-darkgrey);\n text-align: left;\n }\n"])), function (_ref) {
8712
+ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__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) {
8701
8713
  var width = _ref.width;
8702
8714
  if (!width) return 'none';
8703
8715
  return width + 'px';
@@ -8714,12 +8726,12 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateOb
8714
8726
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
8715
8727
  return "0 0 0 3px var(--base-color-lapislazuli)";
8716
8728
  });
8717
- var TextLabel$3 = /*#__PURE__*/styled.p(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
8729
+ var TextLabel$3 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
8718
8730
  var darkMode = _ref5.darkMode;
8719
8731
  if (darkMode) return "var(--base-color-white)";
8720
8732
  return "var(--base-color-black)";
8721
8733
  });
8722
- var ErrorLabel$4 = /*#__PURE__*/styled.p(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
8734
+ var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
8723
8735
  var darkMode = _ref6.darkMode;
8724
8736
  if (darkMode) return "var(--base-color-white)";
8725
8737
  return "var(--base-color-errorstate)";
@@ -8730,6 +8742,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
8730
8742
  iconName: "DropdownArrow"
8731
8743
  }));
8732
8744
  };
8745
+ var WrapperComponent = function WrapperComponent(_ref) {
8746
+ var label = _ref.label,
8747
+ error = _ref.error,
8748
+ width = _ref.width,
8749
+ darkMode = _ref.darkMode,
8750
+ children = _ref.children;
8751
+ return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
8752
+ darkMode: darkMode,
8753
+ "data-testid": "select2-text-label"
8754
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
8755
+ level: 6
8756
+ }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
8757
+ width: width,
8758
+ error: error,
8759
+ darkMode: darkMode
8760
+ }, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
8761
+ darkMode: darkMode,
8762
+ "data-testid": "select2-error-label"
8763
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
8764
+ level: 6
8765
+ }, error)));
8766
+ };
8733
8767
  /**
8734
8768
  * A Select2 component wraps react-select with Chord styling and additional elements like
8735
8769
  * text and error labels. This should be used just as usual react-select component.
@@ -8745,42 +8779,72 @@ var DropdownIndicator = function DropdownIndicator(props) {
8745
8779
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
8746
8780
  */
8747
8781
 
8782
+ var SelectComponent = function SelectComponent(_ref2) {
8783
+ var label = _ref2.label,
8784
+ error = _ref2.error,
8785
+ width = _ref2.width,
8786
+ _ref2$darkMode = _ref2.darkMode,
8787
+ darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
8788
+ _ref2$isSearchable = _ref2.isSearchable,
8789
+ isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
8790
+ components = _ref2.components,
8791
+ selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode", "isSearchable", "components"]);
8792
+
8793
+ return /*#__PURE__*/React__default.createElement(WrapperComponent, {
8794
+ label: label,
8795
+ error: error,
8796
+ width: width,
8797
+ darkMode: darkMode
8798
+ }, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({}, selectProps, {
8799
+ components: _extends({
8800
+ DropdownIndicator: DropdownIndicator,
8801
+ LoadingIndicator: undefined,
8802
+ IndicatorSeparator: undefined
8803
+ }, components),
8804
+ className: "chord-select-container",
8805
+ classNamePrefix: "chord-select",
8806
+ isSearchable: isSearchable
8807
+ })));
8808
+ };
8809
+
8810
+ /**
8811
+ * The Select2Async component is similar to Select 2, but uses react-select async
8812
+ * component for select instead of regular react-select component. This can be used
8813
+ * for selects with dynamically loaded options, live search components etc.
8814
+ *
8815
+ * # Error state
8816
+ * An error label will be shown below the select if the `error` prop exists.
8817
+ * Also select will be rendered with a red border. An empty string can be passed to
8818
+ * render only error state without error message.
8819
+ *
8820
+ * # Light / Dark mode
8821
+ * The component can also adapt its styles for light / dark mode. If you want this component
8822
+ * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
8823
+ */
8748
8824
 
8749
- var SelectComponent = function SelectComponent(_ref) {
8825
+ var SelectComponent$1 = function SelectComponent(_ref) {
8750
8826
  var label = _ref.label,
8751
8827
  error = _ref.error,
8752
8828
  width = _ref.width,
8753
8829
  _ref$darkMode = _ref.darkMode,
8754
8830
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
8755
- _ref$isSearchable = _ref.isSearchable,
8756
- isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
8757
- _ref$placeholder = _ref.placeholder,
8758
- placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
8759
- selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
8831
+ components = _ref.components,
8832
+ selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "components"]);
8760
8833
 
8761
- return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
8762
- darkMode: darkMode,
8763
- "data-testid": "select2-text-label"
8764
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
8765
- level: 6
8766
- }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
8767
- width: width,
8834
+ return /*#__PURE__*/React__default.createElement(WrapperComponent, {
8835
+ label: label,
8768
8836
  error: error,
8837
+ width: width,
8769
8838
  darkMode: darkMode
8770
- }, /*#__PURE__*/React__default.createElement(Select$1, Object.assign({
8771
- components: {
8772
- DropdownIndicator: DropdownIndicator
8773
- },
8774
- isSearchable: isSearchable,
8775
- placeholder: placeholder,
8839
+ }, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({}, selectProps, {
8840
+ components: _extends({
8841
+ DropdownIndicator: DropdownIndicator,
8842
+ LoadingIndicator: undefined,
8843
+ IndicatorSeparator: undefined
8844
+ }, components),
8776
8845
  className: "chord-select-container",
8777
8846
  classNamePrefix: "chord-select"
8778
- }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
8779
- darkMode: darkMode,
8780
- "data-testid": "select2-error-label"
8781
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
8782
- level: 6
8783
- }, error)));
8847
+ })));
8784
8848
  };
8785
8849
 
8786
8850
  var _templateObject$1a;
@@ -9037,96 +9101,14 @@ var ReadMore = function ReadMore(_ref) {
9037
9101
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
9038
9102
  };
9039
9103
 
9040
- var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B;
9041
- var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
9042
- var MenuList = /*#__PURE__*/styled.ul(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
9043
- var mobileOpen = _ref.mobileOpen;
9044
- return mobileOpen ? "block" : 'none';
9045
- }, Colors.White, Colors.DarkGrey);
9046
- var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
9047
- var active = _ref2.active;
9048
- return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
9049
- }, Colors.MidGrey, devices.mobile);
9050
- var MobileButton = /*#__PURE__*/styled.button(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
9051
-
9052
- /**
9053
- * Vertical menu component uses for navigation
9054
- * inside website chapter. It looks like a vertical
9055
- * list with clickable items on desktop and dropdown
9056
- * list on mobile.
9057
- *
9058
- * ## Menu items
9059
- * Menu items should be passed as `items` prop. This
9060
- * should be an array of objects. Each object should
9061
- * have `text` (text displayed as a menu item) and
9062
- * `onClick` (click handler function)
9063
- *
9064
- * ## Active menu item
9065
- * Active menu item should be passed as component `activeItem`
9066
- * prop. This indicates on which menu item should be highlighted
9067
- * as active one. Should be equal to `text` prop from one of the `items`
9068
- */
9069
-
9070
- var AuxiliaryNav = function AuxiliaryNav(_ref) {
9071
- var items = _ref.items,
9072
- activeItem = _ref.activeItem;
9073
-
9074
- var _useState = useState(false),
9075
- mobileOpen = _useState[0],
9076
- setMobileOpen = _useState[1];
9077
-
9078
- var containerRef = useRef(null);
9079
-
9080
- var mobileButtonClickHandler = function mobileButtonClickHandler() {
9081
- setMobileOpen(function (prev) {
9082
- return !prev;
9083
- });
9084
- };
9085
-
9086
- var outsideClickHandler = function outsideClickHandler(event) {
9087
- if (containerRef.current && !containerRef.current.contains(event.target)) {
9088
- setMobileOpen(false);
9089
- }
9090
- };
9091
-
9092
- useEffect(function () {
9093
- document.addEventListener('mousedown', outsideClickHandler);
9094
- return function () {
9095
- document.removeEventListener('mousedown', outsideClickHandler);
9096
- };
9097
- }, [containerRef]);
9098
- return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
9099
- ref: containerRef,
9100
- "data-testid": "nav-menu-container"
9101
- }, /*#__PURE__*/React__default.createElement(MobileButton, {
9102
- mobileOpen: mobileOpen,
9103
- onClick: mobileButtonClickHandler,
9104
- "data-testid": "nav-menu-mobile-button"
9105
- }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
9106
- iconName: "DropdownArrow",
9107
- direction: mobileOpen ? 'left' : 'right'
9108
- })), /*#__PURE__*/React__default.createElement(MenuList, {
9109
- mobileOpen: mobileOpen,
9110
- "data-testid": "nav-menu-list"
9111
- }, items.map(function (item, idx) {
9112
- return /*#__PURE__*/React__default.createElement("li", {
9113
- key: item.text + "-" + idx
9114
- }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
9115
- onClick: item.onClick,
9116
- active: item.text === activeItem,
9117
- "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
9118
- }, item.text));
9119
- })));
9120
- };
9121
-
9122
- var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$r, _templateObject6$m;
9123
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
9124
- var Sections = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
9125
- var Section = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
9104
+ var _templateObject$1f, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$r, _templateObject6$m;
9105
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
9106
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
9107
+ var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
9126
9108
  var color = _ref.color;
9127
9109
  return "var(--base-color-" + color + ")";
9128
9110
  });
9129
- var BottomLine = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
9111
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
9130
9112
  var Text = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
9131
9113
  var color = _ref2.color;
9132
9114
  return "var(--base-color-" + color + ")";
@@ -9217,6 +9199,282 @@ var PasswordStrength = function PasswordStrength(_ref) {
9217
9199
  }, strengthLabel))));
9218
9200
  };
9219
9201
 
9202
+ var _templateObject$1g, _templateObject2$W, _templateObject3$N, _templateObject4$C;
9203
+ var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
9204
+ var MenuList = /*#__PURE__*/styled.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
9205
+ var mobileOpen = _ref.mobileOpen;
9206
+ return mobileOpen ? "block" : 'none';
9207
+ }, Colors.White, Colors.DarkGrey);
9208
+ var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
9209
+ var active = _ref2.active;
9210
+ return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
9211
+ }, Colors.MidGrey, devices.mobile);
9212
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
9213
+
9214
+ /**
9215
+ * Vertical menu component uses for navigation
9216
+ * inside website chapter. It looks like a vertical
9217
+ * list with clickable items on desktop and dropdown
9218
+ * list on mobile.
9219
+ *
9220
+ * ## Menu items
9221
+ * Menu items should be passed as `items` prop. This
9222
+ * should be an array of objects. Each object should
9223
+ * have `text` (text displayed as a menu item) and
9224
+ * `onClick` (click handler function)
9225
+ *
9226
+ * ## Active menu item
9227
+ * Active menu item should be passed as component `activeItem`
9228
+ * prop. This indicates on which menu item should be highlighted
9229
+ * as active one. Should be equal to `text` prop from one of the `items`
9230
+ */
9231
+
9232
+ var AuxiliaryNav = function AuxiliaryNav(_ref) {
9233
+ var items = _ref.items,
9234
+ activeItem = _ref.activeItem;
9235
+
9236
+ var _useState = useState(false),
9237
+ mobileOpen = _useState[0],
9238
+ setMobileOpen = _useState[1];
9239
+
9240
+ var containerRef = useRef(null);
9241
+
9242
+ var mobileButtonClickHandler = function mobileButtonClickHandler() {
9243
+ setMobileOpen(function (prev) {
9244
+ return !prev;
9245
+ });
9246
+ };
9247
+
9248
+ var outsideClickHandler = function outsideClickHandler(event) {
9249
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
9250
+ setMobileOpen(false);
9251
+ }
9252
+ };
9253
+
9254
+ useEffect(function () {
9255
+ document.addEventListener('mousedown', outsideClickHandler);
9256
+ return function () {
9257
+ document.removeEventListener('mousedown', outsideClickHandler);
9258
+ };
9259
+ }, [containerRef]);
9260
+ return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
9261
+ ref: containerRef,
9262
+ "data-testid": "nav-menu-container"
9263
+ }, /*#__PURE__*/React__default.createElement(MobileButton, {
9264
+ mobileOpen: mobileOpen,
9265
+ onClick: mobileButtonClickHandler,
9266
+ "data-testid": "nav-menu-mobile-button"
9267
+ }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
9268
+ iconName: "DropdownArrow",
9269
+ direction: mobileOpen ? 'left' : 'right'
9270
+ })), /*#__PURE__*/React__default.createElement(MenuList, {
9271
+ mobileOpen: mobileOpen,
9272
+ "data-testid": "nav-menu-list"
9273
+ }, items.map(function (item, idx) {
9274
+ return /*#__PURE__*/React__default.createElement("li", {
9275
+ key: item.text + "-" + idx
9276
+ }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
9277
+ onClick: item.onClick,
9278
+ active: item.text === activeItem,
9279
+ "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
9280
+ }, item.text));
9281
+ })));
9282
+ };
9283
+
9284
+ var _templateObject$1h, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$s, _templateObject6$n, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6;
9285
+ var TableContainer = /*#__PURE__*/styled.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
9286
+ var Container$6 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
9287
+ var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9288
+ var TableHeader = /*#__PURE__*/styled.th(_templateObject4$D || (_templateObject4$D = /*#__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 30px 24px 0;\n text-align: left;\n text-transform: uppercase;\n white-space: nowrap;\n\n @media ", " {\n padding: 24px 20px 24px 0;\n }\n"])), devices.mobile);
9289
+ var TableCell = /*#__PURE__*/styled.td(_templateObject5$s || (_templateObject5$s = /*#__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 @media ", " {\n padding: 24px 20px 24px 0;\n }\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n"])), devices.mobile, function (props) {
9290
+ return "calc(100% / " + (props.columns - 1) + ")";
9291
+ });
9292
+ var LineContainer$1 = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: ", ";\n width: 100%;\n"])), function (props) {
9293
+ return "var(--base-color-" + props.lineColor + ")";
9294
+ });
9295
+ var Pagination$1 = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__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: none;\n }\n"])));
9296
+ var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject8$b || (_templateObject8$b = /*#__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) {
9297
+ var active = _ref.active;
9298
+ return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
9299
+ });
9300
+ var Next = /*#__PURE__*/styled.span(_templateObject9$6 || (_templateObject9$6 = /*#__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"])));
9301
+ var ScrollButtons = /*#__PURE__*/styled.div(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
9302
+
9303
+ var Table = function Table(_ref) {
9304
+ var columns = _ref.columns,
9305
+ headings = _ref.headings,
9306
+ children = _ref.children,
9307
+ lineColors = _ref.lineColors,
9308
+ rowsPerPage = _ref.rowsPerPage,
9309
+ pagination = _ref.pagination;
9310
+
9311
+ var _useState = useState(0),
9312
+ currentPage = _useState[0],
9313
+ setCurrentPage = _useState[1];
9314
+
9315
+ var _useState2 = useState(false),
9316
+ showScrollButtons = _useState2[0],
9317
+ setShowScrollButtons = _useState2[1];
9318
+
9319
+ var Content = function Content(_ref2) {
9320
+ var content = _ref2.content;
9321
+ return typeof content === 'string' ? /*#__PURE__*/React__default.createElement("div", {
9322
+ dangerouslySetInnerHTML: {
9323
+ __html: content
9324
+ }
9325
+ }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
9326
+ };
9327
+
9328
+ var Cell = function Cell(_ref3) {
9329
+ var cell = _ref3.cell,
9330
+ cellIndex = _ref3.cellIndex,
9331
+ columns = _ref3.columns;
9332
+ return /*#__PURE__*/React__default.createElement(TableCell, {
9333
+ key: cellIndex,
9334
+ columns: columns
9335
+ }, /*#__PURE__*/React__default.createElement(Content, {
9336
+ content: cell
9337
+ }));
9338
+ };
9339
+
9340
+ var Row = function Row(_ref4) {
9341
+ var row = _ref4.row,
9342
+ rowIndex = _ref4.rowIndex,
9343
+ columns = _ref4.columns,
9344
+ lineColor = _ref4.lineColor;
9345
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
9346
+ key: rowIndex
9347
+ }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
9348
+ return /*#__PURE__*/React__default.createElement(Cell, {
9349
+ key: index,
9350
+ cell: cell,
9351
+ cellIndex: index,
9352
+ columns: columns
9353
+ });
9354
+ })), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
9355
+ colSpan: columns
9356
+ }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
9357
+ lineColor: lineColor,
9358
+ role: "presentation"
9359
+ }))));
9360
+ };
9361
+
9362
+ var lineColor = lineColors != null ? lineColors : Colors.Cinema;
9363
+ var tableRef = useRef(null);
9364
+ useEffect(function () {
9365
+ if (tableRef.current) {
9366
+ tableRef.current.scrollTo(0, 0);
9367
+ }
9368
+ }, [children]);
9369
+
9370
+ var horizontalScroll = function horizontalScroll() {
9371
+ if (tableRef.current) {
9372
+ setShowScrollButtons(tableRef.current.scrollWidth > tableRef.current.clientWidth);
9373
+ }
9374
+ };
9375
+
9376
+ useEffect(function () {
9377
+ horizontalScroll();
9378
+ window.addEventListener('resize', horizontalScroll);
9379
+ return function () {
9380
+ return window.removeEventListener('resize', horizontalScroll);
9381
+ };
9382
+ }, []);
9383
+
9384
+ var scrollTable = function scrollTable(direction) {
9385
+ if (tableRef.current) {
9386
+ var currentScroll = tableRef.current.scrollLeft;
9387
+ var scrollAmount = direction === 'left' ? -300 : 300;
9388
+ tableRef.current.scrollTo({
9389
+ left: currentScroll + scrollAmount,
9390
+ behavior: 'smooth'
9391
+ });
9392
+ }
9393
+ };
9394
+
9395
+ var totalRows = Array.isArray(children) ? children.length : 0;
9396
+ var totalPages = pagination ? Math.ceil(totalRows / rowsPerPage) : 1;
9397
+ var currentRows = pagination ? Array.isArray(children) ? children.slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage) : [] : children;
9398
+ var pageNumbers = Array.from({
9399
+ length: totalPages
9400
+ }, function (_, i) {
9401
+ return i;
9402
+ });
9403
+ var reducedPageNumbers = reducePages(pageNumbers, currentPage);
9404
+ return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && /*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
9405
+ onClickPrev: function onClickPrev() {
9406
+ return scrollTable('left');
9407
+ },
9408
+ onClickNext: function onClickNext() {
9409
+ return scrollTable('right');
9410
+ }
9411
+ })), /*#__PURE__*/React__default.createElement(Container$6, {
9412
+ role: "table",
9413
+ tabIndex: 0,
9414
+ ref: tableRef
9415
+ }, /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("thead", null, /*#__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("thead", null, /*#__PURE__*/React__default.createElement("tr", null, headings && headings.map(function (heading, index) {
9421
+ return /*#__PURE__*/React__default.createElement(TableHeader, {
9422
+ key: index,
9423
+ role: "columnheader"
9424
+ }, /*#__PURE__*/React__default.createElement(Content, {
9425
+ content: heading
9426
+ }));
9427
+ }))), /*#__PURE__*/React__default.createElement("tr", null, /*#__PURE__*/React__default.createElement("td", {
9428
+ colSpan: columns
9429
+ }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
9430
+ lineColor: lineColor,
9431
+ role: "presentation"
9432
+ }))), /*#__PURE__*/React__default.createElement("tbody", null, Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
9433
+ return /*#__PURE__*/React__default.createElement(Row, {
9434
+ key: rowIndex,
9435
+ row: row,
9436
+ rowIndex: rowIndex,
9437
+ columns: columns,
9438
+ lineColor: lineColor
9439
+ });
9440
+ }))), pagination && totalPages > 1 && /*#__PURE__*/React__default.createElement(Pagination$1, null, currentPage > 0 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9441
+ key: "previous-page",
9442
+ onClick: function onClick() {
9443
+ return setCurrentPage(currentPage - 1);
9444
+ },
9445
+ tabIndex: 0,
9446
+ "aria-label": "Previous page"
9447
+ }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
9448
+ iconName: "DropdownArrow",
9449
+ direction: "down"
9450
+ })))), currentPage > 2 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9451
+ key: "more-before"
9452
+ }, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), reducedPageNumbers.map(function (number) {
9453
+ return /*#__PURE__*/React__default.createElement("li", {
9454
+ key: number
9455
+ }, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9456
+ key: number,
9457
+ onClick: function onClick() {
9458
+ return setCurrentPage(number);
9459
+ },
9460
+ tabIndex: 0,
9461
+ active: "" + (number === currentPage)
9462
+ }, number + 1));
9463
+ }), currentPage + 4 < totalPages && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9464
+ key: "more-after"
9465
+ }, /*#__PURE__*/React__default.createElement(MorePages, null, "..."))), currentPage < totalPages - 1 && /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(PageNumber$1, {
9466
+ key: "next-page",
9467
+ onClick: function onClick() {
9468
+ return setCurrentPage(currentPage + 1);
9469
+ },
9470
+ tabIndex: 0,
9471
+ "aria-label": "Next page"
9472
+ }, /*#__PURE__*/React__default.createElement(Next, null, /*#__PURE__*/React__default.createElement(Icon, {
9473
+ iconName: "DropdownArrow",
9474
+ direction: "up"
9475
+ })))))));
9476
+ };
9477
+
9220
9478
  var UpsellSection = function UpsellSection(_ref) {
9221
9479
  var title = _ref.title,
9222
9480
  richText = _ref.richText,
@@ -9305,9 +9563,9 @@ var LiveChat = function LiveChat() {
9305
9563
  });
9306
9564
  };
9307
9565
 
9308
- var _templateObject$1h, _templateObject2$X;
9309
- var StickyBarWrapper = /*#__PURE__*/styled.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);
9310
- var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
9566
+ var _templateObject$1i, _templateObject2$Y;
9567
+ var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
9568
+ var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
9311
9569
  var hideBottomBorder = _ref.hideBottomBorder;
9312
9570
  return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
9313
9571
  }, devices.mobileAndTablet, devices.mobile);
@@ -9335,11 +9593,11 @@ var StickyBar = function StickyBar(_ref) {
9335
9593
  }, children)));
9336
9594
  };
9337
9595
 
9338
- var _templateObject$1i, _templateObject2$Y, _templateObject3$O, _templateObject4$D;
9339
- var InnerModal = /*#__PURE__*/styled.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);
9340
- var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
9341
- var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9342
- var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
9596
+ var _templateObject$1j, _templateObject2$Z, _templateObject3$P, _templateObject4$E;
9597
+ var InnerModal = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
9598
+ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
9599
+ var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9600
+ var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
9343
9601
 
9344
9602
  var MAX_Z_INDEX = 9999999999;
9345
9603
 
@@ -9459,8 +9717,8 @@ var ModalWindow = function ModalWindow(_ref) {
9459
9717
  })), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
9460
9718
  };
9461
9719
 
9462
- var _templateObject$1j;
9463
- var GlobalStyles = /*#__PURE__*/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) {
9720
+ var _templateObject$1k;
9721
+ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
9464
9722
  var theme = _ref.theme;
9465
9723
  return theme.colors.primary;
9466
9724
  }, function (_ref2) {
@@ -10401,5 +10659,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1j || (_templa
10401
10659
  return theme.fonts.tablet.sizes.body[1];
10402
10660
  }, devices.desktop, devices.largeDesktop);
10403
10661
 
10404
- export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
10662
+ export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
10405
10663
  //# sourceMappingURL=chord.esm.js.map