@royaloperahouse/chord 2.2.5-b-select-test → 2.2.5-d-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 (22) hide show
  1. package/CHANGELOG.md +210 -7
  2. package/dist/chord.cjs.development.js +658 -199
  3. package/dist/chord.cjs.development.js.map +1 -1
  4. package/dist/chord.cjs.production.min.js +1 -1
  5. package/dist/chord.cjs.production.min.js.map +1 -1
  6. package/dist/chord.esm.js +658 -198
  7. package/dist/chord.esm.js.map +1 -1
  8. package/dist/components/atoms/Icons/SvgIcons/Descriptors/Seat.svg.d.ts +4 -0
  9. package/dist/components/atoms/Icons/SvgIcons/Descriptors/Standing.svg.d.ts +4 -0
  10. package/dist/components/atoms/Icons/SvgIcons/Descriptors/Wheelchair.svg.d.ts +4 -0
  11. package/dist/components/atoms/Icons/SvgIcons/index.d.ts +3 -0
  12. package/dist/components/molecules/Card/Card.style.d.ts +1 -0
  13. package/dist/components/molecules/PageHeading/index.d.ts +1 -1
  14. package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
  15. package/dist/components/molecules/Select/Select.d.ts +97 -1
  16. package/dist/components/molecules/Select/Select.style.d.ts +13 -4
  17. package/dist/components/molecules/index.d.ts +1 -1
  18. package/dist/index.d.ts +3 -2
  19. package/dist/types/card.d.ts +4 -0
  20. package/dist/types/formTypes.d.ts +41 -29
  21. package/dist/types/passwordStrength.d.ts +6 -6
  22. package/package.json +3 -4
package/dist/chord.esm.js CHANGED
@@ -2,7 +2,6 @@ import React__default, { createElement, memo, useRef, useCallback, useEffect, us
2
2
  import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
3
3
  import moment from 'moment';
4
4
  import { renderToString } from 'react-dom/server';
5
- import ReactSelect, { components } from 'react-select';
6
5
  import Modal from 'react-modal';
7
6
  import ScrollLock from 'react-scrolllock';
8
7
 
@@ -1266,6 +1265,24 @@ var Print = (function (_ref) {
1266
1265
  }));
1267
1266
  });
1268
1267
 
1268
+ var Seat = (function (_ref) {
1269
+ var _ref$color = _ref.color,
1270
+ color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
1271
+ return /*#__PURE__*/createElement("svg", {
1272
+ width: "100%",
1273
+ height: "100%",
1274
+ viewBox: "0 0 24 24",
1275
+ fill: "none",
1276
+ xmlns: "http://www.w3.org/2000/svg"
1277
+ }, /*#__PURE__*/createElement("path", {
1278
+ d: "M17.5 7.8V4.9c0-2.7-2.2-4.9-4.9-4.9H7.2C4.5 0 2.3 2.2 2.3 4.9v2.9H0V20h4.2v-3.7h11.3V20h4.2V7.8h-2.2ZM3 4.8h.3v.1C3.3 2.8 5 1 7.2 1h5.4c2.2 0 3.9 1.8 3.9 3.9v2.8h-1v4.6H4.2V7.8H3v-3ZM1 19V8.7h2.2v3.6H1.9v4h1.3V19H1Zm1.9-3.6v-2h13.9v2H2.9ZM18.8 19h-2.2v-2.7h1.3v-4h-1.3V8.7h2.2V19Z",
1279
+ fill: color
1280
+ }), /*#__PURE__*/createElement("path", {
1281
+ d: "M3.3 7.8v-3H3v3h.3Z",
1282
+ fill: color
1283
+ }));
1284
+ });
1285
+
1269
1286
  var Secure = (function (_ref) {
1270
1287
  var _ref$color = _ref.color,
1271
1288
  color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1284,6 +1301,21 @@ var Secure = (function (_ref) {
1284
1301
  }));
1285
1302
  });
1286
1303
 
1304
+ var Standing = (function (_ref) {
1305
+ var _ref$color = _ref.color,
1306
+ color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
1307
+ return /*#__PURE__*/createElement("svg", {
1308
+ width: "100%",
1309
+ height: "100%",
1310
+ viewBox: "0 0 24 24",
1311
+ fill: "none",
1312
+ xmlns: "http://www.w3.org/2000/svg"
1313
+ }, /*#__PURE__*/createElement("path", {
1314
+ d: "M9.8 3.9c1.1 0 1.9-.9 1.9-1.9 0-1-.8-2-1.9-2-1.1 0-1.9.9-1.9 2s.9 1.9 1.9 1.9Zm0-2.9c.5 0 .9.4.9.9s-.4.9-.9.9-.9-.3-.9-.8.4-1 .9-1Zm2 3.2H8c-1.3 0-2.3 1-2.3 2.2v6.4h1.7V20h4.9v-7h1.8V6.4c0-1.2-1.1-2.2-2.3-2.2Zm1.3 7.8h-.8V7.4c0-.2-.2-.4-.5-.4-.2 0-.5.2-.5.4V19h-.9v-6.3c0-.2-.2-.4-.5-.4-.2 0-.5.2-.5.4V19h-1V7.4c0-.2-.2-.4-.5-.4-.2 0-.5.2-.5.4v4.5h-.7V6.5c0-.7.6-1.2 1.3-1.2h3.7c.7 0 1.3.5 1.3 1.2l.1 5.5Z",
1315
+ fill: color
1316
+ }));
1317
+ });
1318
+
1287
1319
  var Tickets = (function (_ref) {
1288
1320
  var _ref$color = _ref.color,
1289
1321
  color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -1305,6 +1337,21 @@ var Tickets = (function (_ref) {
1305
1337
  }));
1306
1338
  });
1307
1339
 
1340
+ var Wheelchair = (function (_ref) {
1341
+ var _ref$color = _ref.color,
1342
+ color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
1343
+ return /*#__PURE__*/createElement("svg", {
1344
+ width: "100%",
1345
+ height: "100%",
1346
+ viewBox: "0 0 24 24",
1347
+ fill: "none",
1348
+ xmlns: "http://www.w3.org/2000/svg"
1349
+ }, /*#__PURE__*/createElement("path", {
1350
+ d: "M8.4 18.8c-1.1 0-2.2-.4-3-1.1-.8-.8-1.3-1.8-1.3-2.9-.1-1.6.9-3.2 2.3-3.9l-.4-1c-1.9.9-3 2.8-3 4.9.1 2.8 2.4 5.1 5.3 5.1h.2c2.6-.1 4.7-2.1 5.1-4.6l-1.1-.1c-.3 2-2 3.6-4.1 3.6ZM9.8 4.5c1.2 0 2.2-1 2.2-2.2C12 1.1 11 .1 9.8.1c-1.2 0-2.2 1-2.2 2.2 0 1.2.9 2.2 2.2 2.2Zm0-3.3c.6 0 1.1.5 1.1 1.1 0 .6-.5 1.1-1.1 1.1-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1Zm4.9 12c-.3-.5-.9-.8-1.6-.8h-2.6V6.3c0-.6-.5-1.2-1.1-1.2H6.2c-.5.1-.9.5-.9 1v3.2h1.1V6.2l2.9.1v7.2h3.8c.3 0 .5.1.6.3l3.4 5.4.9-.6-3.3-5.4Z",
1351
+ fill: color
1352
+ }));
1353
+ });
1354
+
1308
1355
  var BalletAndDance = (function (_ref) {
1309
1356
  var _ref$color = _ref.color,
1310
1357
  color = _ref$color === void 0 ? '#1A1A1A' : _ref$color;
@@ -2134,10 +2181,12 @@ var IconLibrary = {
2134
2181
  Remove: Remove,
2135
2182
  Restart: Restart,
2136
2183
  Search: Search,
2184
+ Seat: Seat,
2137
2185
  Secure: Secure,
2138
2186
  Settings: Settings,
2139
2187
  Shift: Shift,
2140
2188
  Space: Space,
2189
+ Standing: Standing,
2141
2190
  Star: Star,
2142
2191
  Subscribe: Subscribe,
2143
2192
  Subtitles: Subtitles,
@@ -2150,6 +2199,7 @@ var IconLibrary = {
2150
2199
  UserSignedIn: UserSignedIn,
2151
2200
  Volume: Volume,
2152
2201
  Watch: Watch,
2202
+ Wheelchair: Wheelchair,
2153
2203
  X: X,
2154
2204
  Youtube: Youtube
2155
2205
  };
@@ -2172,12 +2222,14 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
2172
2222
  });
2173
2223
  Icon.displayName = 'Icon';
2174
2224
 
2225
+ var _excluded = ["children", "iconName", "iconDirection", "color"];
2226
+
2175
2227
  var Button = function Button(_ref) {
2176
2228
  var children = _ref.children,
2177
2229
  iconName = _ref.iconName,
2178
2230
  iconDirection = _ref.iconDirection,
2179
2231
  color = _ref.color,
2180
- rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
2232
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
2181
2233
 
2182
2234
  var truncatedString = children.substring(0, 30);
2183
2235
  return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
@@ -2253,9 +2305,11 @@ var ButtonType;
2253
2305
  ButtonType["Tertiary"] = "Tertiary";
2254
2306
  })(ButtonType || (ButtonType = {}));
2255
2307
 
2308
+ var _excluded$1 = ["children"];
2309
+
2256
2310
  var PrimaryButton = function PrimaryButton(_ref) {
2257
2311
  var children = _ref.children,
2258
- props = _objectWithoutPropertiesLoose(_ref, ["children"]);
2312
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
2259
2313
 
2260
2314
  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
2261
2315
  color: Colors.White
@@ -2269,9 +2323,11 @@ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled(Button)(_templateObject$5 || (_
2269
2323
  return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
2270
2324
  });
2271
2325
 
2326
+ var _excluded$2 = ["children"];
2327
+
2272
2328
  var SecondaryButton = function SecondaryButton(_ref) {
2273
2329
  var children = _ref.children,
2274
- props = _objectWithoutPropertiesLoose(_ref, ["children"]);
2330
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
2275
2331
 
2276
2332
  return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
2277
2333
  color: Colors.Primary
@@ -2285,10 +2341,12 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$6 || (_templat
2285
2341
  });
2286
2342
  var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
2287
2343
 
2344
+ var _excluded$3 = ["children", "color"];
2345
+
2288
2346
  var Button$1 = function Button(_ref) {
2289
2347
  var children = _ref.children,
2290
2348
  color = _ref.color,
2291
- rest = _objectWithoutPropertiesLoose(_ref, ["children", "color"]);
2349
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
2292
2350
 
2293
2351
  var truncatedString = children.substring(0, 100);
2294
2352
  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
@@ -3250,6 +3308,8 @@ var TabLinkWrapper = /*#__PURE__*/styled.a(_templateObject$l || (_templateObject
3250
3308
  });
3251
3309
  var TabLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
3252
3310
 
3311
+ var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
3312
+
3253
3313
  var TabLink = function TabLink(_ref) {
3254
3314
  var children = _ref.children,
3255
3315
  iconName = _ref.iconName,
@@ -3258,7 +3318,7 @@ var TabLink = function TabLink(_ref) {
3258
3318
  color = _ref$color === void 0 ? Colors.DarkGrey : _ref$color,
3259
3319
  _ref$hoverColor = _ref.hoverColor,
3260
3320
  hoverColor = _ref$hoverColor === void 0 ? Colors.Primary : _ref$hoverColor,
3261
- rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color", "hoverColor"]);
3321
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
3262
3322
 
3263
3323
  return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
3264
3324
  color: color,
@@ -3308,6 +3368,7 @@ var TextAreaError = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObje
3308
3368
  return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
3309
3369
  });
3310
3370
 
3371
+ var _excluded$5 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
3311
3372
  /**
3312
3373
  * An HTML textarea component for Chord.
3313
3374
  *
@@ -3369,7 +3430,7 @@ var TextArea = function TextArea(_ref) {
3369
3430
  maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
3370
3431
  _ref$tabIndex = _ref.tabIndex,
3371
3432
  tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
3372
- textareaProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"]);
3433
+ textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$5);
3373
3434
 
3374
3435
  return /*#__PURE__*/React__default.createElement(GridItem, {
3375
3436
  columnStartDesktop: columnStartDesktop,
@@ -3404,7 +3465,7 @@ var InputWrapper = /*#__PURE__*/styled.div(_templateObject2$b || (_templateObjec
3404
3465
  if (!width) return 'none';
3405
3466
  return width + 'px';
3406
3467
  });
3407
- var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none;\n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3468
+ var Input = /*#__PURE__*/styled.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n width: 100%;\n height: 48px;\n padding-left: 20px;\n -moz-appearance: textfield;\n padding-right: ", ";\n outline: none;\n border: ", ";\n &:disabled {\n background-color: var(--base-color-lightgrey);\n border: 1px solid transparent;\n outline: none;\n }\n\n &:focus {\n outline: ", ";\n }\n\n /* remove search decoration */\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n display: none; \n }\n\n /* remove number decoration */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), function (_ref2) {
3408
3469
  var isPasswordField = _ref2.isPasswordField;
3409
3470
  if (isPasswordField) return "80px";
3410
3471
  return "20px";
@@ -3429,6 +3490,7 @@ var ErrorLabel = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 =
3429
3490
  return "var(--base-color-errorstate)";
3430
3491
  });
3431
3492
 
3493
+ var _excluded$6 = ["label", "type", "error", "darkMode", "width"];
3432
3494
  /**
3433
3495
  * A text field component, that wraps around the native `<input />` element
3434
3496
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -3476,7 +3538,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3476
3538
  _ref$darkMode = _ref.darkMode,
3477
3539
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
3478
3540
  width = _ref.width,
3479
- inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width"]);
3541
+ inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
3480
3542
 
3481
3543
  var _useState = useState(false),
3482
3544
  showPassword = _useState[0],
@@ -3512,7 +3574,7 @@ var TextField = /*#__PURE__*/forwardRef(function (_ref, ref) {
3512
3574
  "data-testid": "text-field-input",
3513
3575
  ref: ref
3514
3576
  }, inputProps)), isPasswordField && /*#__PURE__*/React__default.createElement(ShowHideButton, {
3515
- type: "button",
3577
+ type: 'button',
3516
3578
  onClick: showHideClickHandler
3517
3579
  }, /*#__PURE__*/React__default.createElement(Overline, {
3518
3580
  level: 1
@@ -3534,12 +3596,14 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$o || (_templateObjec
3534
3596
  });
3535
3597
  var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
3536
3598
 
3599
+ var _excluded$7 = ["children", "iconName", "iconDirection", "color"];
3600
+
3537
3601
  var TextLink = function TextLink(_ref) {
3538
3602
  var children = _ref.children,
3539
3603
  iconName = _ref.iconName,
3540
3604
  iconDirection = _ref.iconDirection,
3541
3605
  color = _ref.color,
3542
- rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
3606
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
3543
3607
 
3544
3608
  var truncatedString = children.substring(0, 30);
3545
3609
  return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
@@ -5147,6 +5211,8 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
5147
5211
  }, contact.title))));
5148
5212
  };
5149
5213
 
5214
+ var _excluded$8 = ["dataRoh"];
5215
+
5150
5216
  var Footer = function Footer(_ref) {
5151
5217
  var data = _ref.data;
5152
5218
  var policyLinks = data.policyLinks;
@@ -5156,7 +5222,7 @@ var Footer = function Footer(_ref) {
5156
5222
 
5157
5223
  var _data$artsLogo = data.artsLogo,
5158
5224
  artsDataRoh = _data$artsLogo.dataRoh,
5159
- artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, ["dataRoh"]);
5225
+ artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, _excluded$8);
5160
5226
 
5161
5227
  var additionalInfo = data.additionalInfo;
5162
5228
  return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -5211,6 +5277,8 @@ var ArrowsContainer = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateOb
5211
5277
  });
5212
5278
  var ArrowWrapper = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
5213
5279
 
5280
+ var _excluded$9 = ["id", "text"];
5281
+
5214
5282
  var AnchorTabBar = function AnchorTabBar(_ref) {
5215
5283
  var tabs = _ref.tabs,
5216
5284
  onTabClick = _ref.onTabClick,
@@ -5425,7 +5493,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
5425
5493
  }, tabs.map(function (_ref4) {
5426
5494
  var id = _ref4.id,
5427
5495
  text = _ref4.text,
5428
- rest = _objectWithoutPropertiesLoose(_ref4, ["id", "text"]);
5496
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded$9);
5429
5497
 
5430
5498
  return /*#__PURE__*/React__default.createElement("li", {
5431
5499
  key: id
@@ -5481,6 +5549,9 @@ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3
5481
5549
  var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
5482
5550
  var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
5483
5551
 
5552
+ var _excluded$a = ["text"],
5553
+ _excluded2 = ["text"];
5554
+
5484
5555
  var TitleWithCTA = function TitleWithCTA(_ref) {
5485
5556
  var title = _ref.title,
5486
5557
  links = _ref.links,
@@ -5490,11 +5561,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
5490
5561
 
5491
5562
  var _ref2 = (links == null ? void 0 : links[0]) || {},
5492
5563
  primaryButtonText = _ref2.text,
5493
- primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, ["text"]);
5564
+ primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$a);
5494
5565
 
5495
5566
  var _ref3 = (links == null ? void 0 : links[1]) || {},
5496
5567
  secondaryButtonText = _ref3.text,
5497
- secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, ["text"]);
5568
+ secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
5498
5569
 
5499
5570
  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
5500
5571
  sticky: sticky
@@ -5770,7 +5841,8 @@ var Accordions = function Accordions(_ref) {
5770
5841
  visibleStandfirst: accordion.visibleStandfirst,
5771
5842
  contentType: accordion.contentType,
5772
5843
  displayLevel: accordion.displayLevel,
5773
- semanticLevel: accordion.semanticLevel
5844
+ semanticLevel: accordion.semanticLevel,
5845
+ initOpen: accordion.initOpen
5774
5846
  }, accordion.children);
5775
5847
  }));
5776
5848
  };
@@ -5827,7 +5899,7 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
5827
5899
  }))))));
5828
5900
  };
5829
5901
 
5830
- var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12;
5902
+ var _templateObject$N, _templateObject2$w, _templateObject3$p, _templateObject4$i, _templateObject5$c, _templateObject6$a, _templateObject7$7, _templateObject8$5, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12, _templateObject13;
5831
5903
  var LENGTH_LARGE_TEXT = 28;
5832
5904
  var LENGTH_SMALL_TEXT$1 = 19;
5833
5905
  var LENGTH_TEXT_TABLET = 10;
@@ -5855,20 +5927,21 @@ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$i || (_templat
5855
5927
  var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5856
5928
  var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobileAndTablet);
5857
5929
  var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n text-transform: var(--text-transform-body);\n margin-top: var(--editorial-spacing-hover);\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n em {\n font-family: var(--font-family-body-italics);\n }\n"])));
5858
- var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
5859
- var LabelContainer = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
5930
+ var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$1)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
5931
+ var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-2);\n font-weight: var(--font-weight-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n text-transform: var(--text-transform-subtitle);\n display: block;\n overflow-wrap: break-word;\n"])));
5932
+ var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
5860
5933
  var isVisible = _ref6.isVisible;
5861
5934
  return isVisible ? "visible" : 'hidden';
5862
5935
  }, devices.mobile, function (_ref7) {
5863
5936
  var isGridCard = _ref7.isGridCard;
5864
5937
  return isGridCard ? '20px' : '0';
5865
5938
  });
5866
- var LabelElements = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 8px;\n background-color: ", ";\n color: var(--base-color-white);\n"])), function (_ref8) {
5939
+ var LabelElements = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 30px;\n padding: 0 8px;\n background-color: ", ";\n color: var(--base-color-white);\n"])), function (_ref8) {
5867
5940
  var bgColor = _ref8.bgColor,
5868
5941
  theme = _ref8.theme;
5869
5942
  return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
5870
5943
  });
5871
- var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
5944
+ var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
5872
5945
 
5873
5946
  var getButtonsOpacity = function getButtonsOpacity(_ref9) {
5874
5947
  var onlyShowButtonsOnHover = _ref9.onlyShowButtonsOnHover;
@@ -5880,7 +5953,7 @@ var getButtonsMinHeight = function getButtonsMinHeight(_ref10) {
5880
5953
  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
5881
5954
  };
5882
5955
 
5883
- var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref11) {
5956
+ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref11) {
5884
5957
  var size = _ref11.size,
5885
5958
  primaryButtonTextLength = _ref11.primaryButtonTextLength,
5886
5959
  tertiaryButtonTextLength = _ref11.tertiaryButtonTextLength;
@@ -5975,6 +6048,9 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
5975
6048
  return truncateHtmlString(nodeString, resultLength, addDots);
5976
6049
  };
5977
6050
 
6051
+ var _excluded$b = ["text"],
6052
+ _excluded2$1 = ["text"];
6053
+
5978
6054
  var _buttonTypeToButton;
5979
6055
  var LENGTH_LARGE_TEXT$1 = 28;
5980
6056
  var LENGTH_SMALL_TEXT$2 = 19;
@@ -5990,6 +6066,8 @@ var Card = function Card(_ref) {
5990
6066
  subtitle = _ref.subtitle,
5991
6067
  _ref$text = _ref.text,
5992
6068
  text = _ref$text === void 0 ? '' : _ref$text,
6069
+ _ref$highlightText = _ref.highlightText,
6070
+ highlightText = _ref$highlightText === void 0 ? '' : _ref$highlightText,
5993
6071
  links = _ref.links,
5994
6072
  _ref$tags = _ref.tags,
5995
6073
  tags = _ref$tags === void 0 ? [] : _ref$tags,
@@ -6025,7 +6103,7 @@ var Card = function Card(_ref) {
6025
6103
  var _ref2 = firstButton || {},
6026
6104
  _ref2$text = _ref2.text,
6027
6105
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
6028
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
6106
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
6029
6107
 
6030
6108
  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
6031
6109
  var secondButton = links == null ? void 0 : links[1];
@@ -6033,7 +6111,7 @@ var Card = function Card(_ref) {
6033
6111
  var _ref3 = secondButton || {},
6034
6112
  _ref3$text = _ref3.text,
6035
6113
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
6036
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
6114
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
6037
6115
 
6038
6116
  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
6039
6117
 
@@ -6102,7 +6180,9 @@ var Card = function Card(_ref) {
6102
6180
  dangerouslySetInnerHTML: {
6103
6181
  __html: truncatedText
6104
6182
  }
6105
- }))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
6183
+ }), highlightText && /*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
6184
+ level: 1
6185
+ }, highlightText)))), links && /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
6106
6186
  ref: node,
6107
6187
  "data-testid": "buttonscontainer",
6108
6188
  size: size,
@@ -6146,6 +6226,7 @@ var Cards = function Cards(_ref) {
6146
6226
  title: card.title,
6147
6227
  subtitle: card.subtitle,
6148
6228
  text: card.text,
6229
+ highlightText: card.highlightText,
6149
6230
  links: card.links,
6150
6231
  tags: card.tags,
6151
6232
  withContinueWatching: card.withContinueWatching,
@@ -6537,6 +6618,8 @@ var LogoWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObje
6537
6618
  var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
6538
6619
  var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
6539
6620
 
6621
+ var _excluded$c = ["text"];
6622
+
6540
6623
  var PageHeading = function PageHeading(_ref) {
6541
6624
  var title = _ref.title,
6542
6625
  text = _ref.text,
@@ -6547,7 +6630,7 @@ var PageHeading = function PageHeading(_ref) {
6547
6630
 
6548
6631
  var _ref2 = link || {},
6549
6632
  linkText = _ref2.text,
6550
- restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
6633
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
6551
6634
 
6552
6635
  var truncatedText = text == null ? void 0 : text.substring(0, 250);
6553
6636
  var truncatedTitle = title && title.substring(0, 40);
@@ -6575,9 +6658,11 @@ var PageHeading = function PageHeading(_ref) {
6575
6658
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
6576
6659
  };
6577
6660
 
6661
+ var _excluded$d = ["link"];
6662
+
6578
6663
  var PageHeadingCore = function PageHeadingCore(_ref) {
6579
6664
  var link = _ref.link,
6580
- rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
6665
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
6581
6666
 
6582
6667
  var coreLink = link && _extends({}, link, {
6583
6668
  color: Colors.White,
@@ -6591,9 +6676,11 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
6591
6676
  })));
6592
6677
  };
6593
6678
 
6679
+ var _excluded$e = ["link"];
6680
+
6594
6681
  var PageHeadingCinema = function PageHeadingCinema(_ref) {
6595
6682
  var link = _ref.link,
6596
- rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
6683
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
6597
6684
 
6598
6685
  var cinemaLink = link && _extends({}, link, {
6599
6686
  color: Colors.Black,
@@ -6617,6 +6704,8 @@ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObje
6617
6704
  var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
6618
6705
  var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
6619
6706
 
6707
+ var _excluded$f = ["text"];
6708
+
6620
6709
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
6621
6710
  var children = _ref.children,
6622
6711
  text = _ref.text,
@@ -6633,7 +6722,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
6633
6722
 
6634
6723
  var _ref2 = link || {},
6635
6724
  linkText = _ref2.text,
6636
- restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
6725
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
6637
6726
 
6638
6727
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
6639
6728
  bgUrlDesktop: bgUrlDesktop,
@@ -6726,9 +6815,11 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
6726
6815
  var _templateObject$W;
6727
6816
  var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
6728
6817
 
6818
+ var _excluded$g = ["link"];
6819
+
6729
6820
  var PageHeadingStream = function PageHeadingStream(_ref) {
6730
6821
  var link = _ref.link,
6731
- rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
6822
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
6732
6823
 
6733
6824
  var streamLink = link && _extends({}, link, {
6734
6825
  color: Colors.Black,
@@ -6877,7 +6968,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
6877
6968
  var isIOS = function isIOS() {
6878
6969
  try {
6879
6970
  console.warn('Do not use this on server side rendering, it may throw an error.');
6880
- if (typeof navigator === undefined) return false;
6971
+ if (typeof navigator === 'undefined') return false;
6881
6972
  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
6882
6973
  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
6883
6974
  } catch (e) {
@@ -6893,7 +6984,7 @@ var useIOS = function useIOS() {
6893
6984
  setIOS = _useState[1];
6894
6985
 
6895
6986
  useEffect(function () {
6896
- if (typeof navigator === undefined) return;
6987
+ if (typeof navigator === 'undefined') return;
6897
6988
  setIOS(isIOS());
6898
6989
  }, []);
6899
6990
  return IOS;
@@ -6922,6 +7013,8 @@ var useMobile = function useMobile() {
6922
7013
  return mobile;
6923
7014
  };
6924
7015
 
7016
+ var _excluded$h = ["text"];
7017
+
6925
7018
  var useResponsiveVideo = function useResponsiveVideo(video, poster) {
6926
7019
  var mobileVideo = video.mobile || video.desktop;
6927
7020
  var desktopVideo = video.desktop || video.mobile;
@@ -7036,7 +7129,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
7036
7129
 
7037
7130
  var _ref5 = link || {},
7038
7131
  linkText = _ref5.text,
7039
- restLink = _objectWithoutPropertiesLoose(_ref5, ["text"]);
7132
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$h);
7040
7133
 
7041
7134
  var titleSize = title && title.length > 20 ? 4 : 3;
7042
7135
  var video = {
@@ -7212,8 +7305,8 @@ var PeopleListing = function PeopleListing(_ref) {
7212
7305
  var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
7213
7306
  var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
7214
7307
  var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
7215
- var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
7216
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
7308
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
7309
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
7217
7310
 
7218
7311
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
7219
7312
  return array.reduce(function (acc, item) {
@@ -7224,12 +7317,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
7224
7317
  var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
7225
7318
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
7226
7319
  if (musicTitle.length > 1 && index === musicTitle.length - 1) {
7227
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", null, title));
7320
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
7321
+ key: index
7322
+ }, title));
7228
7323
  } else if (index > 0) {
7229
- return /*#__PURE__*/React__default.createElement("i", null, ", ", title);
7324
+ return /*#__PURE__*/React__default.createElement("i", {
7325
+ key: index
7326
+ }, ", ", title);
7230
7327
  }
7231
7328
 
7232
- return /*#__PURE__*/React__default.createElement("i", null, title);
7329
+ return /*#__PURE__*/React__default.createElement("i", {
7330
+ key: index
7331
+ }, title);
7233
7332
  }));
7234
7333
  };
7235
7334
 
@@ -7281,7 +7380,7 @@ var CreditListing = function CreditListing(_ref) {
7281
7380
  }));
7282
7381
  };
7283
7382
 
7284
- var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7383
+ var _templateObject$$, _templateObject2$J, _templateObject3$B, _templateObject4$t, _templateObject5$l, _templateObject6$g, _templateObject7$c, _templateObject8$9, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
7285
7384
  var LENGTH_TEXT = 28;
7286
7385
  var LENGTH_TEXT_TABLET$1 = 12;
7287
7386
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -7348,7 +7447,7 @@ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templa
7348
7447
  var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
7349
7448
  var PrimaryButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
7350
7449
  var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7351
- var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
7450
+ var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
7352
7451
  var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
7353
7452
  var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
7354
7453
  var asCardOverrides = /*#__PURE__*/css(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n font-size: var(--font-size-subtitle-2);\n }\n\n ", " {\n font-size: var(--font-size-overline-1);\n }\n\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n\n ", " {\n font-size: var(--font-size-overline-2);\n font-weight: var(--font-weight-overline-2);\n line-height: var(--line-height-overline-2);\n letter-spacing: var(--letter-spacing-overline-2);\n }\n"])), PromoWithTagsSubtitle, PromoWithTagsTypeTags, ButtonsContainer$2, devices.tablet, PromoWithTagsTextLink);
@@ -7370,6 +7469,10 @@ var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_temp
7370
7469
  var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
7371
7470
  var EndDateText = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
7372
7471
 
7472
+ var _excluded$i = ["text"],
7473
+ _excluded2$2 = ["text"],
7474
+ _excluded3 = ["text"];
7475
+
7373
7476
  var _buttonTypeToButton$1;
7374
7477
  var LENGTH_TEXT$1 = 28;
7375
7478
  var LENGTH_TEXT_PARAGRAPH = 130;
@@ -7440,7 +7543,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
7440
7543
  var _ref2 = firstButton || {},
7441
7544
  _ref2$text = _ref2.text,
7442
7545
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7443
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
7546
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
7444
7547
 
7445
7548
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
7446
7549
  var secondButton = links == null ? void 0 : links[1];
@@ -7448,7 +7551,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
7448
7551
  var _ref3 = secondButton || {},
7449
7552
  _ref3$text = _ref3.text,
7450
7553
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7451
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
7554
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
7452
7555
 
7453
7556
  var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
7454
7557
  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
@@ -7457,7 +7560,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
7457
7560
  var textLinkItems = textLinks ? textLinks.map(function (link, index) {
7458
7561
  var _link$text = link.text,
7459
7562
  textLinkText = _link$text === void 0 ? '' : _link$text,
7460
- restTextLink = _objectWithoutPropertiesLoose(link, ["text"]);
7563
+ restTextLink = _objectWithoutPropertiesLoose(link, _excluded3);
7461
7564
 
7462
7565
  return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
7463
7566
  key: index
@@ -7615,6 +7718,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$d || (_templat
7615
7718
  return '';
7616
7719
  });
7617
7720
 
7721
+ var _excluded$j = ["text"],
7722
+ _excluded2$3 = ["text"];
7618
7723
  var LENGTH_TEXT$3 = 28;
7619
7724
 
7620
7725
  var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -7640,7 +7745,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
7640
7745
  var _ref2 = primaryButton || {},
7641
7746
  _ref2$text = _ref2.text,
7642
7747
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7643
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
7748
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
7644
7749
 
7645
7750
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
7646
7751
  var tertiaryButton = links == null ? void 0 : links[1];
@@ -7648,7 +7753,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
7648
7753
  var _ref3 = tertiaryButton || {},
7649
7754
  _ref3$text = _ref3.text,
7650
7755
  tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7651
- restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
7756
+ restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
7652
7757
 
7653
7758
  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
7654
7759
  return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
@@ -7821,72 +7926,426 @@ var SectionTitle = function SectionTitle(_ref) {
7821
7926
  }, description))));
7822
7927
  };
7823
7928
 
7824
- var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v;
7825
- var Container$1 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
7826
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__indicator-separator {\n display: none;\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 15px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-darkgrey);\n padding: 10px 20px;\n text-align: left;\n }\n .chord-select__group-heading {\n padding: 0 20px;\n text-transform: none;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n color: var(--base-color-darkgrey);\n &:not(:empty) {\n margin-bottom: 5px;\n }\n }\n .chord-select__group {\n padding-top: 0;\n padding-bottom: 10px;\n &:last-child {\n padding-bottom: 0;\n }\n }\n"])), function (_ref) {
7827
- var width = _ref.width;
7828
- if (!width) return 'none';
7829
- return width + 'px';
7929
+ var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
7930
+ var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
7931
+ var theme = _ref.theme;
7932
+ return "3px solid " + theme.colors.lapisLazuli;
7830
7933
  }, function (_ref2) {
7831
- var error = _ref2.error;
7832
- if (error !== undefined) return "1px solid var(--base-color-errorstate)";
7833
- return "1px solid var(--base-color-darkgrey)";
7934
+ var theme = _ref2.theme;
7935
+ return theme.colors.lightgrey;
7834
7936
  }, function (_ref3) {
7835
- var error = _ref3.error;
7836
- if (error !== undefined) return "var(--base-color-errorstate)";
7837
- return "var(--base-color-darkgrey)";
7838
- }, function (_ref4) {
7839
- var darkMode = _ref4.darkMode;
7840
- if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
7841
- return "0 0 0 3px var(--base-color-lapislazuli)";
7842
- });
7843
- var TextLabel$1 = /*#__PURE__*/styled.p(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
7844
- var darkMode = _ref5.darkMode;
7845
- if (darkMode) return "var(--base-color-white)";
7846
- return "var(--base-color-black)";
7937
+ var theme = _ref3.theme;
7938
+ return theme.colors.lightgrey;
7847
7939
  });
7848
- var ErrorLabel$1 = /*#__PURE__*/styled.p(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
7849
- var darkMode = _ref6.darkMode;
7850
- if (darkMode) return "var(--base-color-white)";
7851
- return "var(--base-color-errorstate)";
7940
+ var borderStyles = /*#__PURE__*/css(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
7941
+ var theme = _ref4.theme;
7942
+ return theme.colors.darkgrey;
7852
7943
  });
7944
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7945
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
7946
+ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
7947
+ var theme = _ref5.theme;
7948
+ return {
7949
+ iconName: 'DropdownArrow',
7950
+ color: theme.colors.black,
7951
+ title: 'Select Arrow'
7952
+ };
7953
+ })(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
7954
+ var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
7955
+ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
7956
+ var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
7957
+ var Option = /*#__PURE__*/styled.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
7958
+ var theme = _ref6.theme,
7959
+ hover = _ref6.hover;
7960
+ var _theme$colors = theme.colors,
7961
+ lightgrey = _theme$colors.lightgrey,
7962
+ midgrey = _theme$colors.midgrey;
7963
+ if (hover) return "background-color: " + midgrey;
7964
+ return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
7965
+ });
7966
+
7967
+ var selectStyles = function selectStyles(width, height) {
7968
+ return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
7969
+ };
7853
7970
 
7854
- var DropdownIndicator = function DropdownIndicator(props) {
7855
- return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
7856
- iconName: 'DropdownArrow'
7857
- }));
7971
+ var SelectList = /*#__PURE__*/styled.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
7972
+ var width = _ref7.width,
7973
+ height = _ref7.height;
7974
+ return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
7975
+ }, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
7976
+
7977
+ var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
7978
+ var selectRef = _ref.selectRef,
7979
+ optionsRef = _ref.optionsRef,
7980
+ shouldHighlightOption = _ref.shouldHighlightOption;
7981
+
7982
+ var _useState = useState(-1),
7983
+ itemToHighlight = _useState[0],
7984
+ setItemToHighlight = _useState[1];
7985
+
7986
+ var clampIndex = function clampIndex(index) {
7987
+ if (index < -1) return -1;
7988
+ if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
7989
+ return index;
7990
+ };
7991
+
7992
+ var highlightNextOption = function highlightNextOption() {
7993
+ return setItemToHighlight(function (prev) {
7994
+ return clampIndex(prev + 1);
7995
+ });
7996
+ };
7997
+
7998
+ var highlightPrevOption = function highlightPrevOption() {
7999
+ return setItemToHighlight(function (prev) {
8000
+ return clampIndex(prev - 1);
8001
+ });
8002
+ };
8003
+
8004
+ var reset = function reset() {
8005
+ var _selectRef$current;
8006
+
8007
+ (_selectRef$current = selectRef.current) == null ? void 0 : _selectRef$current.blur();
8008
+ setItemToHighlight(-1);
8009
+ };
8010
+
8011
+ var handleKeyUp = function handleKeyUp(event) {
8012
+ if (!shouldHighlightOption) return;
8013
+ var shouldHighlightOptionNext = event.key === 'ArrowDown';
8014
+ var shouldHighlightOptionPrev = event.key === 'ArrowUp';
8015
+ if (shouldHighlightOptionNext) return highlightNextOption();
8016
+ if (shouldHighlightOptionPrev) return highlightPrevOption();
8017
+ };
8018
+
8019
+ var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
8020
+ if (!shouldHighlightOption) return;
8021
+ if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
8022
+ event.preventDefault();
8023
+ };
8024
+
8025
+ var handleHighlighted = function handleHighlighted(cb) {
8026
+ return function (event) {
8027
+ if (itemToHighlight === -1) return;
8028
+ if (event.key !== 'Enter') return;
8029
+ cb(itemToHighlight);
8030
+ reset();
8031
+ };
8032
+ };
8033
+
8034
+ useEffect(function () {
8035
+ if (shouldHighlightOption) return;
8036
+ reset();
8037
+ }, [shouldHighlightOption]);
8038
+ return {
8039
+ handleKeyUp: handleKeyUp,
8040
+ preventScrollingWhileNavigating: preventScrollingWhileNavigating,
8041
+ handleHighlighted: handleHighlighted,
8042
+ itemToHighlight: itemToHighlight
8043
+ };
7858
8044
  };
7859
8045
 
7860
- function Select(_ref) {
7861
- var label = _ref.label,
7862
- darkMode = _ref.darkMode,
7863
- width = _ref.width,
7864
- error = _ref.error,
7865
- _ref$isSearchable = _ref.isSearchable,
7866
- isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
7867
- selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "darkMode", "width", "error", "isSearchable"]);
8046
+ var useVisualAccessibility = function useVisualAccessibility(_ref2) {
8047
+ var selectRef = _ref2.selectRef,
8048
+ isSelectDisabled = _ref2.isSelectDisabled;
7868
8049
 
7869
- return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
7870
- darkMode: darkMode,
7871
- "data-testid": "text-field-text-label"
7872
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
7873
- level: 6
7874
- }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper, {
7875
- width: width,
7876
- error: error
7877
- }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
7878
- components: {
7879
- DropdownIndicator: DropdownIndicator
8050
+ var addFocusClass = function addFocusClass() {
8051
+ var _selectRef$current2;
8052
+
8053
+ (_selectRef$current2 = selectRef.current) == null ? void 0 : _selectRef$current2.classList.add('focus');
8054
+ };
8055
+
8056
+ var removeFocusClass = function removeFocusClass() {
8057
+ var _selectRef$current3;
8058
+
8059
+ (_selectRef$current3 = selectRef.current) == null ? void 0 : _selectRef$current3.classList.remove('focus');
8060
+ };
8061
+
8062
+ var toggleFocus = function toggleFocus() {
8063
+ var _selectRef$current4;
8064
+
8065
+ if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
8066
+ };
8067
+
8068
+ var withClickAwayHandler = function withClickAwayHandler(cb) {
8069
+ return function (event) {
8070
+ if (!selectRef.current) return;
8071
+ if (selectRef.current.contains(event.target)) return;
8072
+ removeFocusClass();
8073
+ cb();
8074
+ };
8075
+ };
8076
+
8077
+ useEffect(function () {
8078
+ if (!selectRef.current) return;
8079
+
8080
+ if (isSelectDisabled) {
8081
+ selectRef.current.classList.add('disabled');
8082
+ } else selectRef.current.classList.remove('disabled');
8083
+ }, [isSelectDisabled]);
8084
+ return {
8085
+ withClickAwayHandler: withClickAwayHandler,
8086
+ toggleFocus: toggleFocus,
8087
+ addFocusClass: addFocusClass,
8088
+ removeFocusClass: removeFocusClass
8089
+ };
8090
+ };
8091
+
8092
+ var useAccessibility = function useAccessibility(props) {
8093
+ var selectRef = props.selectRef;
8094
+
8095
+ var _useKeyboardAccessibi = useKeyboardAccessibility(props),
8096
+ handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
8097
+ preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
8098
+ handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
8099
+ itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
8100
+
8101
+ var _useVisualAccessibili = useVisualAccessibility(props),
8102
+ addFocusClass = _useVisualAccessibili.addFocusClass,
8103
+ removeFocusClass = _useVisualAccessibili.removeFocusClass,
8104
+ toggleFocus = _useVisualAccessibili.toggleFocus,
8105
+ withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
8106
+
8107
+ useEffect(function () {
8108
+ if (!selectRef.current) return;
8109
+ selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
8110
+ selectRef.current.addEventListener('keyup', handleKeyUp);
8111
+ selectRef.current.addEventListener('click', toggleFocus);
8112
+ selectRef.current.addEventListener('focus', addFocusClass);
8113
+ selectRef.current.addEventListener('blur', removeFocusClass);
8114
+ return function () {
8115
+ var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
8116
+
8117
+ (_selectRef$current5 = selectRef.current) == null ? void 0 : _selectRef$current5.removeEventListener('keydown', preventScrollingWhileNavigating);
8118
+ (_selectRef$current6 = selectRef.current) == null ? void 0 : _selectRef$current6.removeEventListener('keyup', handleKeyUp);
8119
+ (_selectRef$current7 = selectRef.current) == null ? void 0 : _selectRef$current7.removeEventListener('click', toggleFocus);
8120
+ (_selectRef$current8 = selectRef.current) == null ? void 0 : _selectRef$current8.removeEventListener('focus', addFocusClass);
8121
+ (_selectRef$current9 = selectRef.current) == null ? void 0 : _selectRef$current9.removeEventListener('blur', removeFocusClass);
8122
+ };
8123
+ });
8124
+ return {
8125
+ withClickAwayHandler: withClickAwayHandler,
8126
+ handleHighlighted: handleHighlighted,
8127
+ itemToHighlight: itemToHighlight
8128
+ };
8129
+ };
8130
+ /**
8131
+ * A select component, created using <ul> and <li> elements, with bespoke accessibility
8132
+ * logic.
8133
+ *
8134
+ * # Usage
8135
+ * ## Defining a component that uses a typical Select element
8136
+ * ```tsx
8137
+ * const MyComponent = () => {
8138
+ * const handleSelect = (value: number, text: string) => {
8139
+ * console.log("Selected", value);
8140
+ * };
8141
+ *
8142
+ * return <>
8143
+ * <Select
8144
+ * label="This is a label"
8145
+ * options={[
8146
+ * { text: "Option 1", value: 1 },
8147
+ * { text: "Option 2", value: 2 },
8148
+ * ]}
8149
+ * onSelect={handleSelect}
8150
+ * />
8151
+ * </>
8152
+ * }
8153
+ * ```
8154
+ *
8155
+ * ## Defining a component that uses a disabled Select element
8156
+ * ```tsx
8157
+ * const MyComponent = () => {
8158
+ * const handleSelect = (value: number, text: string) => {
8159
+ * console.log("Selected", value);
8160
+ * };
8161
+ *
8162
+ * return <>
8163
+ * <Select
8164
+ * disabled // Select component disabled explicitely
8165
+ * label="This is a label"
8166
+ * options={[
8167
+ * { text: "Option 1", value: 1 },
8168
+ * { text: "Option 2", value: 2 },
8169
+ * ]}
8170
+ * onSelect={handleSelect}
8171
+ * />
8172
+ * <Select
8173
+ * label="This is a label"
8174
+ * options={[]} // Select component disabled implicitely by passing an empty array of options
8175
+ * onSelect={handleSelect}
8176
+ * />
8177
+ * </>
8178
+ * }
8179
+ * ```
8180
+ *
8181
+ * ## Defining a component with a non-labelled Select element
8182
+ * ```tsx
8183
+ * const MyComponent = () => {
8184
+ * const handleSelect = (value: number, text: string) => {
8185
+ * console.log("Selected", value);
8186
+ * };
8187
+ *
8188
+ * return <>
8189
+ * <Select
8190
+ * label=""
8191
+ * options={[
8192
+ * { text: "Option 1", value: 1 },
8193
+ * { text: "Option 2", value: 2 },
8194
+ * ]}
8195
+ * onSelect={handleSelect}
8196
+ * />
8197
+ * </>
8198
+ * }
8199
+ * ```
8200
+ *
8201
+ * ## Changing the dimensions of a Select element (px)
8202
+ * ```tsx
8203
+ * const MyComponent = () => {
8204
+ * const handleSelect = (value: number, text: string) => {
8205
+ * console.log("Selected", value);
8206
+ * };
8207
+ *
8208
+ * const selectWidthPx = 100;
8209
+ * const selectHeightPx = 27;
8210
+ *
8211
+ * return <>
8212
+ * <Select
8213
+ * label="This is a label"
8214
+ * options={[
8215
+ * { text: "Option 1", value: 1 },
8216
+ * { text: "Option 2", value: 2 },
8217
+ * ]}
8218
+ * onSelect={handleSelect}
8219
+ * width={selectWidthPx}
8220
+ * height={selectHeightPx}
8221
+ * />
8222
+ * </>
8223
+ * }
8224
+ * ```
8225
+ */
8226
+
8227
+
8228
+ function Select(_ref3) {
8229
+ var _ref4, _selectedValue$text, _options$;
8230
+
8231
+ var label = _ref3.label,
8232
+ options = _ref3.options,
8233
+ onSelect = _ref3.onSelect,
8234
+ _ref3$disabled = _ref3.disabled,
8235
+ disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
8236
+ _ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
8237
+ resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
8238
+ _ref3$width = _ref3.width,
8239
+ width = _ref3$width === void 0 ? 'default' : _ref3$width,
8240
+ _ref3$height = _ref3.height,
8241
+ height = _ref3$height === void 0 ? 'default' : _ref3$height;
8242
+ var selectRef = useRef(null);
8243
+ var optionsRef = useRef([]);
8244
+
8245
+ var _useState2 = useState(null),
8246
+ selectedValue = _useState2[0],
8247
+ setSelectedValue = _useState2[1];
8248
+
8249
+ var _useState3 = useState(false),
8250
+ isOpen = _useState3[0],
8251
+ setIsOpen = _useState3[1];
8252
+
8253
+ var isDisabled = disabled || options.length === 0;
8254
+
8255
+ var _useAccessibility = useAccessibility({
8256
+ selectRef: selectRef,
8257
+ optionsRef: optionsRef,
8258
+ shouldHighlightOption: isOpen,
8259
+ isSelectDisabled: isDisabled
8260
+ }),
8261
+ withClickAwayHandler = _useAccessibility.withClickAwayHandler,
8262
+ handleHighlighted = _useAccessibility.handleHighlighted,
8263
+ itemToHighlight = _useAccessibility.itemToHighlight;
8264
+
8265
+ var openSelect = function openSelect() {
8266
+ return setIsOpen(true);
8267
+ };
8268
+
8269
+ var closeSelect = function closeSelect() {
8270
+ return setIsOpen(false);
8271
+ };
8272
+
8273
+ var toggleSelect = function toggleSelect() {
8274
+ return setIsOpen(function (prev) {
8275
+ return !prev;
8276
+ });
8277
+ };
8278
+
8279
+ var closeSelectOnBlur = withClickAwayHandler(closeSelect);
8280
+
8281
+ var handleOptionSelection = function handleOptionSelection(index) {
8282
+ var option = options[index];
8283
+ setSelectedValue(option);
8284
+ onSelect(option.value, option.text);
8285
+ };
8286
+
8287
+ useEffect(function () {
8288
+ document.addEventListener('click', closeSelectOnBlur, false);
8289
+ return function () {
8290
+ document.removeEventListener('click', closeSelectOnBlur, false);
8291
+ };
8292
+ }, []);
8293
+ useEffect(function () {
8294
+ if (!resetWhenOptionsUpdate) return;
8295
+
8296
+ if (options.length === 0) {
8297
+ setSelectedValue(null);
8298
+ return;
8299
+ }
8300
+
8301
+ setSelectedValue(options[0]);
8302
+ }, [options, resetWhenOptionsUpdate]);
8303
+ return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && /*#__PURE__*/React__default.createElement(BodyText, {
8304
+ level: 1,
8305
+ tag: "p",
8306
+ "data-testid": "select-label"
8307
+ }, label), /*#__PURE__*/React__default.createElement(SelectList, {
8308
+ id: "select",
8309
+ ref: selectRef,
8310
+ onClick: toggleSelect,
8311
+ onFocus: openSelect,
8312
+ onBlur: closeSelect,
8313
+ onMouseDown: function onMouseDown(e) {
8314
+ return e.preventDefault();
7880
8315
  },
7881
- isSearchable: isSearchable,
7882
- className: "chord-select-container",
7883
- classNamePrefix: "chord-select"
7884
- }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
7885
- darkMode: darkMode,
7886
- "data-testid": "text-field-error-label"
7887
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
7888
- level: 6
7889
- }, error)));
8316
+ onKeyUp: handleHighlighted(handleOptionSelection),
8317
+ width: width,
8318
+ height: height,
8319
+ role: "listbox",
8320
+ tabIndex: 0,
8321
+ "aria-labelledby": label,
8322
+ "aria-selected": isOpen,
8323
+ "aria-disabled": isDisabled,
8324
+ "data-testid": "select"
8325
+ }, /*#__PURE__*/React__default.createElement(SelectWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
8326
+ level: 1,
8327
+ tag: "p",
8328
+ "data-testid": "selected-value"
8329
+ }, (_ref4 = (_selectedValue$text = selectedValue == null ? void 0 : selectedValue.text) != null ? _selectedValue$text : (_options$ = options[0]) == null ? void 0 : _options$.text) != null ? _ref4 : ''), isOpen && /*#__PURE__*/React__default.createElement(Options, {
8330
+ "data-testid": "options"
8331
+ }, options.map(function (option, index) {
8332
+ return /*#__PURE__*/React__default.createElement(Option, {
8333
+ ref: function ref(element) {
8334
+ if (!element || optionsRef.current.length === options.length) return;
8335
+ optionsRef.current.push(element);
8336
+ },
8337
+ role: "option",
8338
+ tabIndex: index + 1,
8339
+ hover: index === itemToHighlight,
8340
+ key: option.text,
8341
+ onClick: function onClick() {
8342
+ return handleOptionSelection(index);
8343
+ }
8344
+ }, /*#__PURE__*/React__default.createElement(BodyText, {
8345
+ level: 1,
8346
+ tag: "p"
8347
+ }, option.text));
8348
+ }))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
7890
8349
  }
7891
8350
 
7892
8351
  var _templateObject$15;
@@ -7919,7 +8378,7 @@ var TextOnly = function TextOnly(_ref) {
7919
8378
  };
7920
8379
 
7921
8380
  var _templateObject$16, _templateObject2$N;
7922
- var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
8381
+ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
7923
8382
  var _ref$aspectRatio = _ref.aspectRatio,
7924
8383
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
7925
8384
  return aspectRatio;
@@ -7958,7 +8417,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
7958
8417
  return window.removeEventListener('resize', setWrapperHeight);
7959
8418
  };
7960
8419
  }, [wrapperRef]);
7961
- return /*#__PURE__*/React__default.createElement(Wrapper$5, {
8420
+ return /*#__PURE__*/React__default.createElement(Wrapper$6, {
7962
8421
  aspectRatio: aspectRatio,
7963
8422
  ref: wrapperRef,
7964
8423
  height: height
@@ -7997,13 +8456,13 @@ var Quote = function Quote(_ref) {
7997
8456
  }, attribution))));
7998
8457
  };
7999
8458
 
8000
- var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$n, _templateObject6$i;
8459
+ var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$o, _templateObject6$j;
8001
8460
  var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
8002
8461
  var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
8003
8462
  var StyledImage = /*#__PURE__*/styled.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
8004
8463
  var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8005
- var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
8006
- var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
8464
+ var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
8465
+ var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
8007
8466
 
8008
8467
  var MiniCard = function MiniCard(_ref) {
8009
8468
  var _ref$title = _ref.title,
@@ -8143,101 +8602,19 @@ var ReadMore = function ReadMore(_ref) {
8143
8602
  }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
8144
8603
  };
8145
8604
 
8146
- var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
8147
- var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
8148
- var MenuList = /*#__PURE__*/styled.ul(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
8149
- var mobileOpen = _ref.mobileOpen;
8150
- return mobileOpen ? "block" : 'none';
8151
- }, Colors.White, Colors.DarkGrey);
8152
- var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
8153
- var active = _ref2.active;
8154
- return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
8155
- }, Colors.MidGrey, devices.mobile);
8156
- var MobileButton = /*#__PURE__*/styled.button(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
8157
-
8158
- /**
8159
- * Vertical menu component uses for navigation
8160
- * inside website chapter. It looks like a vertical
8161
- * list with clickable items on desktop and dropdown
8162
- * list on mobile.
8163
- *
8164
- * ## Menu items
8165
- * Menu items should be passed as `items` prop. This
8166
- * should be an array of objects. Each object should
8167
- * have `text` (text displayed as a menu item) and
8168
- * `onClick` (click handler function)
8169
- *
8170
- * ## Active menu item
8171
- * Active menu item should be passed as component `activeItem`
8172
- * prop. This indicates on which menu item should be highlighted
8173
- * as active one. Should be equal to `text` prop from one of the `items`
8174
- */
8175
-
8176
- var AuxiliaryNav = function AuxiliaryNav(_ref) {
8177
- var items = _ref.items,
8178
- activeItem = _ref.activeItem;
8179
-
8180
- var _useState = useState(false),
8181
- mobileOpen = _useState[0],
8182
- setMobileOpen = _useState[1];
8183
-
8184
- var containerRef = useRef(null);
8185
-
8186
- var mobileButtonClickHandler = function mobileButtonClickHandler() {
8187
- setMobileOpen(function (prev) {
8188
- return !prev;
8189
- });
8190
- };
8191
-
8192
- var outsideClickHandler = function outsideClickHandler(event) {
8193
- if (containerRef.current && !containerRef.current.contains(event.target)) {
8194
- setMobileOpen(false);
8195
- }
8196
- };
8197
-
8198
- useEffect(function () {
8199
- document.addEventListener('mousedown', outsideClickHandler);
8200
- return function () {
8201
- document.removeEventListener('mousedown', outsideClickHandler);
8202
- };
8203
- }, [containerRef]);
8204
- return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
8205
- ref: containerRef,
8206
- "data-testid": "nav-menu-container"
8207
- }, /*#__PURE__*/React__default.createElement(MobileButton, {
8208
- mobileOpen: mobileOpen,
8209
- onClick: mobileButtonClickHandler,
8210
- "data-testid": "nav-menu-mobile-button"
8211
- }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
8212
- iconName: "DropdownArrow",
8213
- direction: mobileOpen ? 'left' : 'right'
8214
- })), /*#__PURE__*/React__default.createElement(MenuList, {
8215
- mobileOpen: mobileOpen,
8216
- "data-testid": "nav-menu-list"
8217
- }, items.map(function (item, idx) {
8218
- return /*#__PURE__*/React__default.createElement("li", {
8219
- key: item.text + "-" + idx
8220
- }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
8221
- onClick: item.onClick,
8222
- active: item.text === activeItem,
8223
- "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
8224
- }, item.text));
8225
- })));
8226
- };
8227
-
8228
- var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z, _templateObject5$o, _templateObject6$j;
8229
- var Container$2 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
8230
- var Sections = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
8231
- var Section = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
8605
+ var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y, _templateObject5$p, _templateObject6$k;
8606
+ var Container$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
8607
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
8608
+ var Section = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
8232
8609
  var color = _ref.color;
8233
8610
  return "var(--base-color-" + color + ")";
8234
8611
  });
8235
- var BottomLine = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
8236
- var Text = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
8612
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
8613
+ var Text = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
8237
8614
  var color = _ref2.color;
8238
8615
  return "var(--base-color-" + color + ")";
8239
8616
  });
8240
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
8617
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
8241
8618
  var color = _ref3.color;
8242
8619
  return "var(--base-color-" + color + ")";
8243
8620
  });
@@ -8298,7 +8675,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
8298
8675
  return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
8299
8676
  };
8300
8677
 
8301
- return /*#__PURE__*/React__default.createElement(Container$2, {
8678
+ return /*#__PURE__*/React__default.createElement(Container$1, {
8302
8679
  "data-testid": "password-strength-container"
8303
8680
  }, /*#__PURE__*/React__default.createElement(Sections, {
8304
8681
  "data-testid": "password-strength-sections"
@@ -8323,6 +8700,88 @@ var PasswordStrength = function PasswordStrength(_ref) {
8323
8700
  }, strengthLabel))));
8324
8701
  };
8325
8702
 
8703
+ var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z;
8704
+ var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
8705
+ var MenuList = /*#__PURE__*/styled.ul(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
8706
+ var mobileOpen = _ref.mobileOpen;
8707
+ return mobileOpen ? "block" : 'none';
8708
+ }, Colors.White, Colors.DarkGrey);
8709
+ var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), Colors.Black, function (_ref2) {
8710
+ var active = _ref2.active;
8711
+ return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
8712
+ }, Colors.MidGrey, devices.mobile);
8713
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
8714
+
8715
+ /**
8716
+ * Vertical menu component uses for navigation
8717
+ * inside website chapter. It looks like a vertical
8718
+ * list with clickable items on desktop and dropdown
8719
+ * list on mobile.
8720
+ *
8721
+ * ## Menu items
8722
+ * Menu items should be passed as `items` prop. This
8723
+ * should be an array of objects. Each object should
8724
+ * have `text` (text displayed as a menu item) and
8725
+ * `onClick` (click handler function)
8726
+ *
8727
+ * ## Active menu item
8728
+ * Active menu item should be passed as component `activeItem`
8729
+ * prop. This indicates on which menu item should be highlighted
8730
+ * as active one. Should be equal to `text` prop from one of the `items`
8731
+ */
8732
+
8733
+ var AuxiliaryNav = function AuxiliaryNav(_ref) {
8734
+ var items = _ref.items,
8735
+ activeItem = _ref.activeItem;
8736
+
8737
+ var _useState = useState(false),
8738
+ mobileOpen = _useState[0],
8739
+ setMobileOpen = _useState[1];
8740
+
8741
+ var containerRef = useRef(null);
8742
+
8743
+ var mobileButtonClickHandler = function mobileButtonClickHandler() {
8744
+ setMobileOpen(function (prev) {
8745
+ return !prev;
8746
+ });
8747
+ };
8748
+
8749
+ var outsideClickHandler = function outsideClickHandler(event) {
8750
+ if (containerRef.current && !containerRef.current.contains(event.target)) {
8751
+ setMobileOpen(false);
8752
+ }
8753
+ };
8754
+
8755
+ useEffect(function () {
8756
+ document.addEventListener('mousedown', outsideClickHandler);
8757
+ return function () {
8758
+ document.removeEventListener('mousedown', outsideClickHandler);
8759
+ };
8760
+ }, [containerRef]);
8761
+ return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
8762
+ ref: containerRef,
8763
+ "data-testid": "nav-menu-container"
8764
+ }, /*#__PURE__*/React__default.createElement(MobileButton, {
8765
+ mobileOpen: mobileOpen,
8766
+ onClick: mobileButtonClickHandler,
8767
+ "data-testid": "nav-menu-mobile-button"
8768
+ }, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
8769
+ iconName: "DropdownArrow",
8770
+ direction: mobileOpen ? 'left' : 'right'
8771
+ })), /*#__PURE__*/React__default.createElement(MenuList, {
8772
+ mobileOpen: mobileOpen,
8773
+ "data-testid": "nav-menu-list"
8774
+ }, items.map(function (item, idx) {
8775
+ return /*#__PURE__*/React__default.createElement("li", {
8776
+ key: item.text + "-" + idx
8777
+ }, /*#__PURE__*/React__default.createElement(MenuItem$1, {
8778
+ onClick: item.onClick,
8779
+ active: item.text === activeItem,
8780
+ "data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
8781
+ }, item.text));
8782
+ })));
8783
+ };
8784
+
8326
8785
  var UpsellSection = function UpsellSection(_ref) {
8327
8786
  var title = _ref.title,
8328
8787
  richText = _ref.richText,
@@ -8447,6 +8906,7 @@ var CloseButton = /*#__PURE__*/styled.button(_templateObject2$U || (_templateObj
8447
8906
  var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8448
8907
  var Overlay = /*#__PURE__*/styled(Grid)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
8449
8908
 
8909
+ var _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
8450
8910
  var MAX_Z_INDEX = 9999999999;
8451
8911
 
8452
8912
  if (Modal.defaultStyles.content) {
@@ -8523,7 +8983,7 @@ var ModalWindow = function ModalWindow(_ref) {
8523
8983
  setIsOpen = _ref.setIsOpen,
8524
8984
  children = _ref.children,
8525
8985
  appElementId = _ref.appElementId,
8526
- modalProps = _objectWithoutPropertiesLoose(_ref, ["isOpen", "setIsOpen", "children", "appElementId"]);
8986
+ modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
8527
8987
 
8528
8988
  var isMobile = useMobile();
8529
8989
  var customStyles = {