@royaloperahouse/harmonic 0.1.10-a → 0.2.0

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 (62) hide show
  1. package/README.GIT +278 -0
  2. package/README.md +43 -252
  3. package/dist/components/Typography/Typography.d.ts +1 -1
  4. package/dist/components/Typography/utils.d.ts +7 -0
  5. package/dist/components/atoms/Buttons/Primary/utils.d.ts +2 -0
  6. package/dist/components/atoms/Buttons/Secondary/utils.d.ts +2 -1
  7. package/dist/components/atoms/Buttons/Tertiary/utils.d.ts +1 -1
  8. package/dist/components/index.d.ts +3 -3
  9. package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
  10. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  11. package/dist/components/molecules/Information/Information.style.d.ts +3 -12
  12. package/dist/components/molecules/Information/utils.d.ts +11 -0
  13. package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +5 -0
  14. package/dist/components/molecules/PageHeading/Promo/Promo.style.d.ts +28 -0
  15. package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +10 -0
  16. package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +10 -0
  17. package/dist/components/molecules/PageHeading/Promo/components/Image.d.ts +4 -0
  18. package/dist/components/molecules/PageHeading/Promo/index.d.ts +2 -0
  19. package/dist/components/molecules/PageHeading/index.d.ts +2 -1
  20. package/dist/components/molecules/Swipe/Swipe.d.ts +13 -0
  21. package/dist/components/molecules/Swipe/Swipe.style.d.ts +8 -0
  22. package/dist/components/molecules/Swipe/helper.d.ts +2 -0
  23. package/dist/components/molecules/Swipe/index.d.ts +2 -0
  24. package/dist/components/molecules/index.d.ts +2 -2
  25. package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +4 -0
  26. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +11 -0
  27. package/dist/components/organisms/Carousels/Carousel/helper.d.ts +26 -0
  28. package/dist/components/organisms/Carousels/Carousel/index.d.ts +2 -0
  29. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +4 -0
  30. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.style.d.ts +21 -0
  31. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCinema.d.ts +4 -0
  32. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCore.d.ts +4 -0
  33. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsStream.d.ts +4 -0
  34. package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +5 -0
  35. package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +10 -0
  36. package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +12 -0
  37. package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +291 -0
  38. package/dist/components/organisms/Carousels/HighlightsCarousel/index.d.ts +5 -0
  39. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.d.ts +4 -0
  40. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.style.d.ts +4 -0
  41. package/dist/components/organisms/Carousels/MinimalCarousel/index.d.ts +2 -0
  42. package/dist/components/organisms/index.d.ts +4 -1
  43. package/dist/harmonic.cjs.development.css +72 -32
  44. package/dist/harmonic.cjs.development.js +1939 -717
  45. package/dist/harmonic.cjs.development.js.map +1 -1
  46. package/dist/harmonic.cjs.production.min.js +1 -1
  47. package/dist/harmonic.cjs.production.min.js.map +1 -1
  48. package/dist/harmonic.esm.js +1942 -730
  49. package/dist/harmonic.esm.js.map +1 -1
  50. package/dist/index.d.ts +5 -3
  51. package/dist/types/buttonTypes.d.ts +6 -2
  52. package/dist/types/card.d.ts +2 -2
  53. package/dist/types/carousel.d.ts +68 -9
  54. package/dist/types/editorial.d.ts +18 -6
  55. package/dist/types/image.d.ts +9 -3
  56. package/dist/types/impactHeader.d.ts +52 -1
  57. package/dist/types/index.d.ts +3 -3
  58. package/dist/types/information.d.ts +18 -41
  59. package/dist/types/progress.d.ts +4 -0
  60. package/dist/types/types.d.ts +5 -1
  61. package/dist/types/typography.d.ts +11 -5
  62. package/package.json +2 -1
package/dist/harmonic.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, cloneElement, useLayoutEffect } from 'react';
1
+ import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, useImperativeHandle, cloneElement, useLayoutEffect } from 'react';
2
2
  import styled, { css, ThemeProvider, createGlobalStyle } from 'styled-components';
3
3
  import moment from 'moment';
4
4
  import Modal from 'react-modal';
@@ -382,10 +382,22 @@ function styleInject(css, ref) {
382
382
  }
383
383
  }
384
384
 
385
- var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n color: var(--color-base-dark-grey);\n}\n\n.styles_em__v4FoO {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.styles_large__vqVxY {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -3px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.styles_small__e7YDe {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.styles_small__e7YDe {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.styles_small__e7YDe {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
385
+ var css_248z = "/* ~~~~~ General Styling Classes ~~~~~ */\n.styles_color-primary__UYod1 {\n color: var(--color-primary);\n}\n\n.styles_color-black__a05Fo {\n color: var(--color-base-black);\n}\n\n.styles_color-white__HiYDT {\n color: var(--color-base-white);\n}\n\n.styles_color-red__zwTZW {\n color: var(--color-primary-red);\n}\n\n.styles_color-grey__Gc0wv {\n color: var(--color-base-dark-grey);\n}\n\n.styles_color-inherit__Y12df {\n color: inherit;\n}\n\n.styles_em__v4FoO {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.styles_display__VgnTB {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.styles_large__vqVxY {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -3px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.styles_header__UDH-H {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.styles_serif__b-ZjM,\n &.styles_em__v4FoO {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.styles_small__e7YDe {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.styles_large__vqVxY.styles_serif__b-ZjM,\n &.styles_large__vqVxY.styles_em__v4FoO,\n &.styles_medium__WQPZj.styles_serif__b-ZjM,\n &.styles_medium__WQPZj.styles_em__v4FoO,\n &.styles_small__e7YDe.styles_serif__b-ZjM,\n &.styles_small__e7YDe.styles_em__v4FoO {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.styles_subtitle__os3DH {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.styles_bodycopy__uEx9r {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.styles_large__vqVxY {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_small__e7YDe {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.styles_medium__WQPZj {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.styles_small__e7YDe {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.styles_overline__5xGDa {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.styles_large__vqVxY {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.styles_small__e7YDe {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.styles_large__vqVxY {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.styles_small__e7YDe {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.styles_buttontext__UPumF {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n font-weight: 400;\n\n @media (max-width: 699px) {\n font-weight: 500;\n line-height: 17px;\n }\n}\n\n/* Caption Text */\n.styles_captiontext__-TA6x {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n\n @media (max-width: 699px) {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n}\n\n/* Navigation Text */\n.styles_navigationtext__qnnIo {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n font-weight: 500;\n\n @media (max-width: 699px) {\n font-size: 17px;\n line-height: 17px;\n }\n}\n";
386
386
  styleInject(css_248z);
387
387
 
388
- var _excluded = ["children", "size", "color", "className"];
388
+ // Utility function for creating className strings
389
+ var createClassNames = function createClassNames(baseClass, options) {
390
+ var size = options.size,
391
+ _options$color = options.color,
392
+ color = _options$color === void 0 ? 'primary' : _options$color,
393
+ serif = options.serif,
394
+ em = options.em,
395
+ className = options.className;
396
+ return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
397
+ };
398
+
399
+ var _excluded = ["children", "size", "color", "className"],
400
+ _excluded2 = ["children", "size", "color", "className"];
389
401
  /* ~~~ Headers - size and hierarchy set separately ~~~ */
390
402
  var HarmonicHeader = function HarmonicHeader(_ref2) {
391
403
  var children = _ref2.children,
@@ -396,20 +408,50 @@ var HarmonicHeader = function HarmonicHeader(_ref2) {
396
408
  serif = _ref2.serif,
397
409
  Tag = _ref2.hierarchy,
398
410
  className = _ref2.className;
411
+ var classNames = createClassNames('header', {
412
+ size: size,
413
+ color: color,
414
+ serif: serif,
415
+ em: em,
416
+ className: className
417
+ });
399
418
  return /*#__PURE__*/React__default.createElement(Tag, {
400
- className: "header " + size + " color-" + color + " " + (serif ? "serif" : '') + " " + (em ? "em" : '') + " " + className
419
+ className: classNames
420
+ }, children);
421
+ };
422
+ /* ~~~ Subtitle - (use case) ~~~ */
423
+ var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
424
+ var children = _ref3.children,
425
+ size = _ref3.size,
426
+ _ref3$color = _ref3.color,
427
+ color = _ref3$color === void 0 ? 'primary' : _ref3$color,
428
+ className = _ref3.className;
429
+ var classNames = createClassNames('subtitle', {
430
+ size: size,
431
+ color: color,
432
+ className: className
433
+ });
434
+ return /*#__PURE__*/React__default.createElement("p", {
435
+ className: classNames
401
436
  }, children);
402
437
  };
403
438
  /* ~~~ Body Copy Text - (use case) ~~~ */
404
439
  var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
405
440
  var children = _ref4.children,
406
- size = _ref4.size,
441
+ _ref4$size = _ref4.size,
442
+ size = _ref4$size === void 0 ? 'medium' : _ref4$size,
407
443
  _ref4$color = _ref4.color,
408
444
  color = _ref4$color === void 0 ? 'primary' : _ref4$color,
409
- className = _ref4.className;
410
- return /*#__PURE__*/React__default.createElement("p", {
411
- className: "bodycopy " + size + " color-" + color + " " + className
412
- }, children);
445
+ className = _ref4.className,
446
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded);
447
+ var classNames = createClassNames('bodycopy', {
448
+ size: size,
449
+ color: color,
450
+ className: className
451
+ });
452
+ return /*#__PURE__*/React__default.createElement("p", Object.assign({
453
+ className: classNames
454
+ }, props), children);
413
455
  };
414
456
  /* ~~~ Overline - (use case) ~~~ */
415
457
  var HarmonicOverline = function HarmonicOverline(_ref5) {
@@ -418,9 +460,14 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
418
460
  _ref5$color = _ref5.color,
419
461
  color = _ref5$color === void 0 ? 'primary' : _ref5$color,
420
462
  className = _ref5.className,
421
- props = _objectWithoutPropertiesLoose(_ref5, _excluded);
463
+ props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
464
+ var classNames = createClassNames('overline', {
465
+ size: size,
466
+ color: color,
467
+ className: className
468
+ });
422
469
  return /*#__PURE__*/React__default.createElement("p", Object.assign({
423
- className: "overline " + size + " color-" + color + " " + className
470
+ className: classNames
424
471
  }, props), children);
425
472
  };
426
473
 
@@ -711,11 +758,11 @@ var devices = {
711
758
  };
712
759
 
713
760
  var _templateObject$1, _templateObject2;
714
- var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--button-color);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
761
+ var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
715
762
  var iconName = _ref.iconName;
716
763
  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
717
764
  }, devices.mobile);
718
- var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n\n span {\n svg > path {\n fill: var(--button-color);\n }\n }\n"])));
765
+ var ButtonIconWrapper = /*#__PURE__*/styled.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n display: inline-block;\n"])));
719
766
 
720
767
  var _templateObject$2;
721
768
  var Directions = {
@@ -2659,9 +2706,31 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
2659
2706
  }
2660
2707
  return COLORS.background;
2661
2708
  };
2709
+ var getHoveredColor = function getHoveredColor(_ref3) {
2710
+ var disabled = _ref3.disabled,
2711
+ hoveredColor = _ref3.hoveredColor;
2712
+ if (disabled) {
2713
+ return COLORS.darkGrey;
2714
+ }
2715
+ if (hoveredColor) {
2716
+ return "var(--color-" + hoveredColor + ")";
2717
+ }
2718
+ return COLORS.hover;
2719
+ };
2720
+ var getPressedColor = function getPressedColor(_ref4) {
2721
+ var disabled = _ref4.disabled,
2722
+ pressedColor = _ref4.pressedColor;
2723
+ if (disabled) {
2724
+ return COLORS.darkGrey;
2725
+ }
2726
+ if (pressedColor) {
2727
+ return "var(--color-" + pressedColor + ")";
2728
+ }
2729
+ return COLORS.pressed;
2730
+ };
2662
2731
 
2663
2732
  var _templateObject$3, _templateObject2$1;
2664
- var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n && span svg * {\n fill: ", ";\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, COLORS.hover, COLORS.hover, COLORS.hover, COLORS.pressed, COLORS.pressed, COLORS.pressed, getTextColor);
2733
+ var PrimaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n background-color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor, getBackgroundColor, getBackgroundColor, getPointerEvents, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor);
2665
2734
  var AriaDescription = /*#__PURE__*/styled.span(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
2666
2735
 
2667
2736
  var _excluded$3 = ["children", "disabled", "className"];
@@ -2714,13 +2783,9 @@ var getTextColor$1 = function getTextColor(_ref) {
2714
2783
  }
2715
2784
  return COLORS$1["default"];
2716
2785
  };
2717
- var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
2718
- var disabled = _ref2.disabled;
2719
- return disabled ? COLORS$1.disabled : COLORS$1.transparent;
2720
- };
2721
- var getBorderColor = function getBorderColor(_ref3) {
2722
- var disabled = _ref3.disabled,
2723
- borderColor = _ref3.borderColor;
2786
+ var getBorderColor = function getBorderColor(_ref2) {
2787
+ var disabled = _ref2.disabled,
2788
+ borderColor = _ref2.borderColor;
2724
2789
  if (disabled) {
2725
2790
  return COLORS$1.disabled;
2726
2791
  }
@@ -2729,9 +2794,34 @@ var getBorderColor = function getBorderColor(_ref3) {
2729
2794
  }
2730
2795
  return COLORS$1.border;
2731
2796
  };
2797
+ var getHoveredColor$1 = function getHoveredColor(_ref3) {
2798
+ var disabled = _ref3.disabled,
2799
+ hoveredColor = _ref3.hoveredColor;
2800
+ if (disabled) {
2801
+ return COLORS$1.disabled;
2802
+ }
2803
+ if (hoveredColor) {
2804
+ return "var(--color-" + hoveredColor + ")";
2805
+ }
2806
+ return COLORS$1.hover;
2807
+ };
2808
+ var getPressedColor$1 = function getPressedColor(_ref4) {
2809
+ var disabled = _ref4.disabled,
2810
+ pressedColor = _ref4.pressedColor;
2811
+ if (disabled) {
2812
+ return COLORS$1.disabled;
2813
+ }
2814
+ if (pressedColor) {
2815
+ return "var(--color-" + pressedColor + ")";
2816
+ }
2817
+ return COLORS$1.pressed;
2818
+ };
2732
2819
 
2733
2820
  var _templateObject$4, _templateObject2$2;
2734
- var SecondaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n pointer-events: ", ";\n\n :hover:not(:active) {\n color: ", ";\n border-color: ", ";\n\n && svg * {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n border-color: ", ";\n\n && svg * {\n fill: ", ";\n }\n }\n\n && span svg * {\n fill: ", ";\n }\n"])), getTextColor$1, getBackgroundColor$1, getBorderColor, getPointerEvents, COLORS$1.hover, COLORS$1.hover, COLORS$1.hover, COLORS$1.pressed, COLORS$1.pressed, COLORS$1.pressed, getTextColor$1);
2821
+ var SecondaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n ", "\n border-color: ", ";\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n border-color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$1, function (_ref) {
2822
+ var disabled = _ref.disabled;
2823
+ return disabled && COLORS$1.disabled;
2824
+ }, getBorderColor, getPointerEvents, getTextColor$1, getHoveredColor$1, getHoveredColor$1, getHoveredColor$1, getPressedColor$1, getPressedColor$1, getPressedColor$1);
2735
2825
  var AriaDescription$1 = /*#__PURE__*/styled.span(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
2736
2826
 
2737
2827
  var _excluded$4 = ["children", "disabled", "className"];
@@ -2770,7 +2860,7 @@ var COLORS$2 = {
2770
2860
  hover: 'var(--button-tertiary-hover-color)',
2771
2861
  pressed: 'var(--button-tertiary-pressed-color)'
2772
2862
  };
2773
- var getButtonColor = function getButtonColor(_ref) {
2863
+ var getTextColor$2 = function getTextColor(_ref) {
2774
2864
  var disabled = _ref.disabled,
2775
2865
  textColor = _ref.textColor;
2776
2866
  if (disabled) {
@@ -2783,7 +2873,7 @@ var getButtonColor = function getButtonColor(_ref) {
2783
2873
  };
2784
2874
 
2785
2875
  var _templateObject$5, _templateObject2$3;
2786
- var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n :hover:not(:active) {\n color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n && svg path {\n fill: ", ";\n }\n }\n\n && span svg * {\n fill: ", ";\n }\n"])), getButtonColor, getPointerEvents, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed, getButtonColor);
2876
+ var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
2787
2877
  var TertiaryIconWrapper = /*#__PURE__*/styled.span(_templateObject2$3 || (_templateObject2$3 = /*#__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"])));
2788
2878
 
2789
2879
  var _excluded$5 = ["children", "className"];
@@ -2991,6 +3081,8 @@ var AspectRatio;
2991
3081
  AspectRatio["4:3"] = "4 / 3";
2992
3082
  AspectRatio["8:3"] = "8 / 3";
2993
3083
  AspectRatio["16:9"] = "16 / 9";
3084
+ AspectRatio["90:17"] = "90 / 17";
3085
+ AspectRatio["75:32"] = "75 / 32";
2994
3086
  })(AspectRatio || (AspectRatio = {}));
2995
3087
  var AspectRatioLegacy;
2996
3088
  (function (AspectRatioLegacy) {
@@ -2999,6 +3091,8 @@ var AspectRatioLegacy;
2999
3091
  AspectRatioLegacy["4 / 3"] = "75";
3000
3092
  AspectRatioLegacy["8 / 3"] = "37.5";
3001
3093
  AspectRatioLegacy["16 / 9"] = "56.25";
3094
+ AspectRatioLegacy["90 / 17"] = "18.88";
3095
+ AspectRatioLegacy["75 / 32"] = "15";
3002
3096
  })(AspectRatioLegacy || (AspectRatioLegacy = {}));
3003
3097
  var AspectRatioWidth;
3004
3098
  (function (AspectRatioWidth) {
@@ -3007,6 +3101,8 @@ var AspectRatioWidth;
3007
3101
  AspectRatioWidth["4 / 3"] = "1.33";
3008
3102
  AspectRatioWidth["8 / 3"] = "2.67";
3009
3103
  AspectRatioWidth["16 / 9"] = "1.78";
3104
+ AspectRatioWidth["90 / 17"] = "5.29";
3105
+ AspectRatioWidth["75 / 32"] = "2.34";
3010
3106
  })(AspectRatioWidth || (AspectRatioWidth = {}));
3011
3107
 
3012
3108
  var _templateObject$a;
@@ -3047,36 +3143,39 @@ var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
3047
3143
  };
3048
3144
 
3049
3145
  var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
3050
- var ProgressView = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
3146
+ var ProgressView = /*#__PURE__*/styled.div(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: ", ";\n box-shadow: ", ";\n width: 100%;\n display: flex;\n flex-direction: row;\n"])), function (_ref) {
3051
3147
  var height = _ref.height;
3052
3148
  return height ? height + "px" : '6px';
3149
+ }, function (_ref2) {
3150
+ var shadow = _ref2.shadow;
3151
+ return shadow ? '0px 1px 4px 0px rgba(0, 0, 0, 0.15)' : 'none';
3053
3152
  });
3054
- var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n padding-left: ", ";\n\n @media ", " {\n padding-left: ", ";\n }\n"])), function (_ref2) {
3055
- var color = _ref2.color;
3056
- return color ? "var(--base-color-" + color + ")" : 'var(--base-color-progress)';
3057
- }, function (_ref3) {
3058
- var progress = _ref3.progress;
3059
- return progress;
3153
+ var ElapsedProgressView = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n z-index: ", ";\n padding-left: ", ";\n\n @media ", " {\n padding-left: ", ";\n }\n"])), function (_ref3) {
3154
+ var color = _ref3.color;
3155
+ return color ? "var(--color-base-" + color + ")" : 'var(--color-base-white)';
3060
3156
  }, function (_ref4) {
3061
- var isProgressWithSteps = _ref4.isProgressWithSteps;
3062
- return isProgressWithSteps ? '34px' : '0';
3063
- }, devices.mobile, function (_ref5) {
3157
+ var progress = _ref4.progress;
3158
+ return progress;
3159
+ }, zIndexes.contentOverlay, function (_ref5) {
3064
3160
  var isProgressWithSteps = _ref5.isProgressWithSteps;
3161
+ return isProgressWithSteps ? '34px' : '0';
3162
+ }, devices.mobile, function (_ref6) {
3163
+ var isProgressWithSteps = _ref6.isProgressWithSteps;
3065
3164
  return isProgressWithSteps ? '24px' : '0';
3066
3165
  });
3067
- var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref6) {
3068
- var color = _ref6.color;
3069
- return color ? "var(--base-color-" + color + ")" : 'var(--base-color-light-grey)';
3070
- }, function (_ref7) {
3071
- var progress = _ref7.progress;
3166
+ var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n z-index: ", ";\n"])), function (_ref7) {
3167
+ var color = _ref7.color;
3168
+ return color ? "var(--color-base-" + color + ")" : 'var(--color-base-mid-grey)';
3169
+ }, function (_ref8) {
3170
+ var progress = _ref8.progress;
3072
3171
  return progress;
3073
- });
3172
+ }, zIndexes.contentOverlay);
3074
3173
  var StepsWrapper = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n\n @media ", " {\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n }\n"])), devices.mobile);
3075
- var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (_ref8) {
3076
- var isVisible = _ref8.isVisible;
3174
+ var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (_ref9) {
3175
+ var isVisible = _ref9.isVisible;
3077
3176
  return isVisible ? "visible" : 'hidden';
3078
- }, function (_ref9) {
3079
- var isActive = _ref9.isActive;
3177
+ }, function (_ref10) {
3178
+ var isActive = _ref10.isActive;
3080
3179
  return isActive ? "var(--base-color-black)" : 'var(--base-color-mid-grey)';
3081
3180
  });
3082
3181
 
@@ -3086,6 +3185,8 @@ var Progress = function Progress(_ref) {
3086
3185
  progress = _ref$progress === void 0 ? 0 : _ref$progress,
3087
3186
  _ref$height = _ref.height,
3088
3187
  height = _ref$height === void 0 ? 6 : _ref$height,
3188
+ _ref$shadow = _ref.shadow,
3189
+ shadow = _ref$shadow === void 0 ? true : _ref$shadow,
3089
3190
  elapsedLineColor = _ref.elapsedLineColor,
3090
3191
  pendingLineColor = _ref.pendingLineColor,
3091
3192
  steps = _ref.steps;
@@ -3112,6 +3213,7 @@ var Progress = function Progress(_ref) {
3112
3213
  var progressValue = getProgressValue();
3113
3214
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressView, {
3114
3215
  height: height,
3216
+ shadow: shadow,
3115
3217
  "data-testid": "progress-container"
3116
3218
  }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
3117
3219
  color: elapsedLineColor,
@@ -3445,7 +3547,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
3445
3547
  onKeyDown: onPrevKeyDownHandler,
3446
3548
  tabIndex: 0,
3447
3549
  "data-testid": "iconprev",
3448
- className: "carousel-icon-wrapper-left"
3550
+ className: "carousel-icon-wrapper-left",
3551
+ "aria-label": "Previous slide",
3552
+ role: "button"
3449
3553
  }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
3450
3554
  "data-testid": "iconprevnoavailable"
3451
3555
  }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
@@ -3453,7 +3557,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
3453
3557
  onKeyDown: onNextKeyDownHandler,
3454
3558
  tabIndex: 0,
3455
3559
  "data-testid": "iconnext",
3456
- className: "carousel-icon-wrapper-right"
3560
+ className: "carousel-icon-wrapper-right",
3561
+ "aria-label": "Next slide",
3562
+ role: "button"
3457
3563
  }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
3458
3564
  "data-testid": "iconnextnoavailable"
3459
3565
  }, renderNextIcon())));
@@ -4218,7 +4324,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
4218
4324
  };
4219
4325
 
4220
4326
  var _templateObject$p, _templateObject2$h;
4221
- var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
4327
+ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-sans);\n font-size: 19px;\n font-weight: 500;\n line-height: 17px;\n letter-spacing: 0.4px;\n color: var(--color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n @media ", " {\n font-size: 17px;\n }\n"])), function (_ref) {
4222
4328
  var iconName = _ref.iconName;
4223
4329
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
4224
4330
  }, function (_ref2) {
@@ -4227,23 +4333,23 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
4227
4333
  }, devices.mobile);
4228
4334
  var TextLinkIconWrapper = /*#__PURE__*/styled.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
4229
4335
 
4230
- var _excluded$b = ["children", "iconName", "iconDirection", "color"];
4336
+ var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
4231
4337
  var TextLink = function TextLink(_ref) {
4232
4338
  var children = _ref.children,
4233
4339
  iconName = _ref.iconName,
4234
4340
  iconDirection = _ref.iconDirection,
4235
- color = _ref.color,
4341
+ textColor = _ref.textColor,
4236
4342
  rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
4237
4343
  var truncatedString = children.substring(0, 30);
4238
4344
  return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
4239
- color: color,
4345
+ color: textColor,
4240
4346
  iconName: iconName
4241
4347
  }, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
4242
4348
  "data-testid": "text-link-icon"
4243
4349
  }, /*#__PURE__*/React__default.createElement(Icon, {
4244
4350
  iconName: iconName,
4245
4351
  direction: iconDirection,
4246
- color: color
4352
+ color: textColor
4247
4353
  }))) : null);
4248
4354
  };
4249
4355
 
@@ -4489,18 +4595,21 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
4489
4595
  var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
4490
4596
 
4491
4597
  var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4492
- var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
4598
+ var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-", ");\n\n .color-primary {\n color: var(--color-base-", ");\n }\n"])), function (_ref) {
4493
4599
  var color = _ref.color;
4494
4600
  return color;
4495
- });
4496
- var Line = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref2) {
4601
+ }, function (_ref2) {
4497
4602
  var color = _ref2.color;
4498
4603
  return color;
4604
+ });
4605
+ var Line = /*#__PURE__*/styled.div(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 1px;\n background-color: var(--base-color-", ");\n margin-top: 32px;\n\n @media ", " {\n margin-top: 20px;\n }\n"])), function (_ref3) {
4606
+ var color = _ref3.color;
4607
+ return color;
4499
4608
  }, devices.mobileAndTablet);
4500
4609
  var TitleWrapper = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 16px;\n\n @media ", " {\n margin-bottom: 8px;\n }\n"])), devices.mobileAndTablet);
4501
- var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n display: flex;\n\n @media ", " {\n font-size: var(--font-size-header-5);\n }\n"])), devices.tablet);
4502
- var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n margin-top: 4px;\n"])));
4503
- var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.tablet, devices.mobile);
4610
+ var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
4611
+ var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
4612
+ var TimerValueSeparator = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 20px;\n\n @media ", " {\n margin: 0 12px;\n }\n"])), devices.mobileAndTablet);
4504
4613
  var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4505
4614
  var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4506
4615
 
@@ -4533,9 +4642,17 @@ var Timer = function Timer(_ref) {
4533
4642
  }
4534
4643
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4535
4644
  className: "harmonic-timer-value"
4536
- }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
4645
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4646
+ hierarchy: "h3",
4647
+ size: "medium"
4648
+ }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4537
4649
  className: "harmonic-timer-label"
4538
- }, label)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
4650
+ }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4651
+ size: "large"
4652
+ }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4653
+ hierarchy: "h3",
4654
+ size: "medium"
4655
+ }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4539
4656
  };
4540
4657
  React__default.useEffect(function () {
4541
4658
  if (isEndDateReached) return undefined;
@@ -4575,8 +4692,8 @@ var Timer = function Timer(_ref) {
4575
4692
  color: color
4576
4693
  }, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
4577
4694
  className: "harmonic-timer-title-wrapper"
4578
- }, /*#__PURE__*/React__default.createElement(AltHeader, {
4579
- level: 5
4695
+ }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
4696
+ size: "large"
4580
4697
  }, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
4581
4698
  className: "harmonic-timer-values-wrapper"
4582
4699
  }, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
@@ -4592,11 +4709,11 @@ var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateOb
4592
4709
  var TypeTags = function TypeTags(_ref) {
4593
4710
  var list = _ref.list;
4594
4711
  return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
4595
- return /*#__PURE__*/React__default.createElement(Overline, {
4596
- level: 1,
4597
- tag: "li",
4712
+ return /*#__PURE__*/React__default.createElement("li", {
4598
4713
  key: t
4599
- }, t);
4714
+ }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4715
+ size: "large"
4716
+ }, t));
4600
4717
  }));
4601
4718
  };
4602
4719
 
@@ -5006,8 +5123,82 @@ var _templateObject$w, _templateObject2$n;
5006
5123
  var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
5007
5124
  var MediaIconWrapper = /*#__PURE__*/styled.a(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-media-icon-height);\n width: var(--footer-media-icon-width);\n\n &:focus {\n outline: 2px solid var(--color-base-white);\n }\n"])));
5008
5125
 
5126
+ // WARNING: Do not use this on server side rendering, it may throw an error.
5127
+ var isIOS = function isIOS() {
5128
+ try {
5129
+ console.warn('Do not use this on server side rendering, it may throw an error.');
5130
+ if (typeof navigator === undefined) return false;
5131
+ return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
5132
+ // iPad on iOS 13 detection
5133
+ navigator.userAgent.includes('Mac') && 'ontouchend' in document;
5134
+ } catch (e) {
5135
+ console.warn('Error checking if device is iOS.', e);
5136
+ return false;
5137
+ }
5138
+ };
5139
+ // React hook version of isIOS (for server side rendering)
5140
+ var useIOS = function useIOS() {
5141
+ var _useState = useState(false),
5142
+ IOS = _useState[0],
5143
+ setIOS = _useState[1];
5144
+ useEffect(function () {
5145
+ if (typeof navigator === undefined) return;
5146
+ setIOS(isIOS());
5147
+ }, []);
5148
+ return IOS;
5149
+ };
5150
+ // Checks device size based on window width
5151
+ var isMobile = function isMobile() {
5152
+ try {
5153
+ console.warn('Do not use this on server side rendering, it may throw an error.');
5154
+ if (typeof window === undefined) return false;
5155
+ return window.innerWidth < breakpoints.sm;
5156
+ } catch (e) {
5157
+ console.warn('Error checking if device is mobile.', e);
5158
+ return false;
5159
+ }
5160
+ };
5161
+ // React hook version of isMobile (for server side rendering)
5162
+ var useMobile = function useMobile() {
5163
+ var _useState2 = useState(false),
5164
+ mobile = _useState2[0],
5165
+ setMobile = _useState2[1];
5166
+ useEffect(function () {
5167
+ if (typeof window === undefined) return;
5168
+ setMobile(isMobile());
5169
+ }, []);
5170
+ return mobile;
5171
+ };
5172
+ var useViewport = function useViewport() {
5173
+ var _useState3 = useState({
5174
+ width: window.innerWidth,
5175
+ isMobile: window.innerWidth < breakpoints.sm,
5176
+ isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5177
+ isDesktop: window.innerWidth >= breakpoints.md
5178
+ }),
5179
+ viewport = _useState3[0],
5180
+ setViewport = _useState3[1];
5181
+ useEffect(function () {
5182
+ var handleResize = function handleResize() {
5183
+ setViewport({
5184
+ width: window.innerWidth,
5185
+ isMobile: window.innerWidth < breakpoints.sm,
5186
+ isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5187
+ isDesktop: window.innerWidth >= breakpoints.md
5188
+ });
5189
+ };
5190
+ window.addEventListener('resize', handleResize);
5191
+ return function () {
5192
+ return window.removeEventListener('resize', handleResize);
5193
+ };
5194
+ }, []);
5195
+ return viewport;
5196
+ };
5197
+
5009
5198
  var SocialLinks = function SocialLinks(_ref) {
5010
5199
  var items = _ref.items;
5200
+ var _useViewport = useViewport(),
5201
+ isMobile = _useViewport.isMobile;
5011
5202
  return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
5012
5203
  return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
5013
5204
  key: mediaLink.name + "-" + idx,
@@ -5016,7 +5207,8 @@ var SocialLinks = function SocialLinks(_ref) {
5016
5207
  "aria-label": mediaLink.name,
5017
5208
  rel: "noopener noreferrer" // Ensures security for external links
5018
5209
  ,
5019
- target: "_blank"
5210
+ target: "_blank",
5211
+ tabIndex: isMobile ? 1 : undefined
5020
5212
  }, /*#__PURE__*/React__default.createElement(Icon, {
5021
5213
  iconName: mediaLink.name,
5022
5214
  color: "white",
@@ -5030,8 +5222,8 @@ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateO
5030
5222
  var isMenuOpen = _ref.isMenuOpen;
5031
5223
  return isMenuOpen && "\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: " + zIndexes.overlay + ";\n background-color: var(--color-base-white);\n overflow-y: auto;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n ";
5032
5224
  });
5033
- var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n width: 100vw;\n position: absolute;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
5034
- var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
5225
+ var FullScreenContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-white);\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: ", ";\n opacity: 0;\n animation: fadeIn 0.3s ease forwards;\n\n @media ", " {\n top: 230px;\n background-color: var(--color-base-black);\n }\n\n @keyframes fadeIn {\n to {\n opacity: 0.5;\n }\n }\n"])), zIndexes.searchOverlay, devices.mobileAndTablet);
5226
+ var NavigationGrid = /*#__PURE__*/styled(Grid)(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n background-color: var(--color-base-white);\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n z-index: ", ";\n\n @media ", " {\n height: 60px;\n }\n"])), zIndexes.navigation, devices.mobileAndTablet);
5035
5227
  var SearchBackground = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n opacity: ", ";\n transform: ", ";\n transition:\n opacity 0.3s ease,\n transform 0.3s ease,\n visibility 0.3s ease;\n background-color: var(--color-base-white);\n height: 100px;\n border-top: 1px solid var(--color-base-light-grey);\n width: 100%;\n position: absolute;\n top: 140px;\n z-index: ", ";\n\n @media ", " {\n height: 86px;\n top: 144px;\n }\n"])), function (_ref2) {
5036
5228
  var visible = _ref2.visible;
5037
5229
  return visible ? 'visible' : 'hidden';
@@ -5057,13 +5249,13 @@ var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$2 || (_temp
5057
5249
  var showSearch = _ref8.showSearch;
5058
5250
  return showSearch ? '110px' : '12px';
5059
5251
  });
5060
- var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &&& .logoImg {\n height: 96px;\n width: 80px;\n }\n\n span > svg path,\n span > svg g path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5061
- var LogoContainerMobile = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 235px;\n padding: 16px;\n\n &&& .logoImg {\n width: 235px;\n }\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n }\n"])), devices.mobileAndTablet);
5062
- var MenuContainer = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n width: 100%;\n\n @media ", " {\n flex-direction: row;\n justify-content: space-between;\n height: 60px;\n width 100%;\n }\n"])), devices.mobileAndTablet);
5063
- var NavWrapper = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n height: 50%;\n width: 100%;\n gap: 32px;\n\n @media ", " {\n flex-direction: row;\n height: 60px;\n width: 30%;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
5064
- var NavContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 50%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-gap: 32px;\n width: fit-content;\n\n @media ", " {\n flex-gap: 0;\n height: auto;\n width: fit-content;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobileAndTablet);
5252
+ var LogoContainer = /*#__PURE__*/styled.a(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n &&& .logoImg {\n height: 96px;\n width: 80px;\n }\n\n span > svg path,\n span > svg g path {\n fill: var(--color-primary-black);\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5253
+ var LogoContainerMobile = /*#__PURE__*/styled.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 16px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n }\n"])), devices.mobileAndTablet);
5254
+ var MenuContainer = /*#__PURE__*/styled.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 140px;\n justify-content: space-evenly;\n width: 100%;\n\n @media ", " {\n flex-direction: row;\n justify-content: space-between;\n height: 60px;\n width 100%;\n }\n"])), devices.mobileAndTablet);
5255
+ var NavWrapper = /*#__PURE__*/styled.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 32px;\n\n @media ", " {\n flex-direction: row;\n height: 60px;\n justify-content: flex-end;\n }\n"])), devices.mobileAndTablet);
5256
+ var NavContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n flex-gap: 32px;\n width: fit-content;\n\n @media ", " {\n flex-gap: 0;\n height: auto;\n width: fit-content;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobileAndTablet);
5065
5257
  var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
5066
- var NavTopContainer = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 50%;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5258
+ var NavTopContainer = /*#__PURE__*/styled.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
5067
5259
  var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: flex;\n width: fit-content;\n align-items: center;\n height: 10%;\n margin-left: 20px;\n padding-bottom: 36px;\n }\n"])), devices.mobileAndTablet);
5068
5260
 
5069
5261
  var _templateObject$y;
@@ -5085,7 +5277,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObj
5085
5277
  });
5086
5278
  var SvgContainer = /*#__PURE__*/styled.div(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5087
5279
  var NumContainer = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n width: 12px;\n height: 12px;\n position: absolute;\n top: 8px;\n margin-left: 6px;\n"])));
5088
- var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
5280
+ var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
5089
5281
  var BasketNum = /*#__PURE__*/styled.span(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n font-size: 10px;\n font-family: var(--font-family-sans);\n"])));
5090
5282
  var BasketText = /*#__PURE__*/styled.a(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n color: var(--color-primary-black);\n margin-left: 6px;\n text-decoration: none;\n"])));
5091
5283
 
@@ -5630,78 +5822,6 @@ var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObj
5630
5822
  var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
5631
5823
  var SearchArrowContainer = /*#__PURE__*/styled.a(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-right: 8px;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n }\n"])));
5632
5824
 
5633
- // WARNING: Do not use this on server side rendering, it may throw an error.
5634
- var isIOS = function isIOS() {
5635
- try {
5636
- console.warn('Do not use this on server side rendering, it may throw an error.');
5637
- if (typeof navigator === undefined) return false;
5638
- return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
5639
- // iPad on iOS 13 detection
5640
- navigator.userAgent.includes('Mac') && 'ontouchend' in document;
5641
- } catch (e) {
5642
- console.warn('Error checking if device is iOS.', e);
5643
- return false;
5644
- }
5645
- };
5646
- // React hook version of isIOS (for server side rendering)
5647
- var useIOS = function useIOS() {
5648
- var _useState = useState(false),
5649
- IOS = _useState[0],
5650
- setIOS = _useState[1];
5651
- useEffect(function () {
5652
- if (typeof navigator === undefined) return;
5653
- setIOS(isIOS());
5654
- }, []);
5655
- return IOS;
5656
- };
5657
- // Checks device size based on window width
5658
- var isMobile = function isMobile() {
5659
- try {
5660
- console.warn('Do not use this on server side rendering, it may throw an error.');
5661
- if (typeof window === undefined) return false;
5662
- return window.innerWidth < breakpoints.sm;
5663
- } catch (e) {
5664
- console.warn('Error checking if device is mobile.', e);
5665
- return false;
5666
- }
5667
- };
5668
- // React hook version of isMobile (for server side rendering)
5669
- var useMobile = function useMobile() {
5670
- var _useState2 = useState(false),
5671
- mobile = _useState2[0],
5672
- setMobile = _useState2[1];
5673
- useEffect(function () {
5674
- if (typeof window === undefined) return;
5675
- setMobile(isMobile());
5676
- }, []);
5677
- return mobile;
5678
- };
5679
- var useViewport = function useViewport() {
5680
- var _useState3 = useState({
5681
- width: window.innerWidth,
5682
- isMobile: window.innerWidth < breakpoints.sm,
5683
- isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5684
- isDesktop: window.innerWidth >= breakpoints.md
5685
- }),
5686
- viewport = _useState3[0],
5687
- setViewport = _useState3[1];
5688
- useEffect(function () {
5689
- var handleResize = function handleResize() {
5690
- setViewport({
5691
- width: window.innerWidth,
5692
- isMobile: window.innerWidth < breakpoints.sm,
5693
- isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5694
- isDesktop: window.innerWidth >= breakpoints.md
5695
- });
5696
- };
5697
- window.addEventListener('resize', handleResize);
5698
- return function () {
5699
- return window.removeEventListener('resize', handleResize);
5700
- };
5701
- }, []);
5702
- return viewport;
5703
- };
5704
-
5705
5825
  var SearchBar = function SearchBar(_ref) {
5706
5826
  var onClick = _ref.onClick,
5707
5827
  onClose = _ref.onClose,
@@ -5809,7 +5929,8 @@ var Navigation = function Navigation(_ref) {
5809
5929
  menuData = _ref.menuData,
5810
5930
  onSearch = _ref.onSearch,
5811
5931
  onLink = _ref.onLink,
5812
- crest = _ref.crest,
5932
+ _ref$crest = _ref.crest,
5933
+ crest = _ref$crest === void 0 ? true : _ref$crest,
5813
5934
  className = _ref.className;
5814
5935
  var _useState = useState(dataNavTop),
5815
5936
  navTopData = _useState[0],
@@ -5955,13 +6076,16 @@ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$E
5955
6076
 
5956
6077
  var PolicyLinks = function PolicyLinks(_ref) {
5957
6078
  var items = _ref.items;
6079
+ var _useViewport = useViewport(),
6080
+ isMobile = _useViewport.isMobile;
5958
6081
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
5959
6082
  return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
5960
6083
  key: link.href + "-" + idx,
5961
6084
  target: link.href,
5962
6085
  href: link.href,
5963
6086
  "data-roh": link.dataRoh,
5964
- "aria-label": link.title
6087
+ "aria-label": link.title,
6088
+ tabIndex: isMobile ? 4 : undefined
5965
6089
  }, link.title);
5966
6090
  }));
5967
6091
  };
@@ -5981,7 +6105,9 @@ var Footer = function Footer(_ref) {
5981
6105
  var _useViewport = useViewport(),
5982
6106
  isMobile = _useViewport.isMobile;
5983
6107
  return /*#__PURE__*/React__default.createElement(FooterSection, {
5984
- className: className
6108
+ className: className,
6109
+ "aria-label": "Footer",
6110
+ role: "contentinfo"
5985
6111
  }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
5986
6112
  "data-testid": "policy-links"
5987
6113
  }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
@@ -5992,14 +6118,16 @@ var Footer = function Footer(_ref) {
5992
6118
  items: rawSocialMediaLinks
5993
6119
  }), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
5994
6120
  href: contact.href,
5995
- "aria-label": contact.title
6121
+ "aria-label": contact.title,
6122
+ tabIndex: isMobile ? 2 : undefined
5996
6123
  }, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
5997
6124
  size: "large",
5998
6125
  color: "white"
5999
6126
  }, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
6000
6127
  href: newsletter.link.href,
6001
6128
  "data-roh": newsletter.link.dataRoh,
6002
- "aria-label": newsletter.link.title
6129
+ "aria-label": newsletter.link.title,
6130
+ tabIndex: isMobile ? 3 : undefined
6003
6131
  }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
6004
6132
  "data-testid": "arts-logo"
6005
6133
  }, /*#__PURE__*/React__default.createElement("a", Object.assign({
@@ -6290,7 +6418,7 @@ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObj
6290
6418
  var MessageWrapperMobile = /*#__PURE__*/styled.div(_templateObject10$2 || (_templateObject10$2 = /*#__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);
6291
6419
 
6292
6420
  var _excluded$f = ["text"],
6293
- _excluded2 = ["text"];
6421
+ _excluded2$1 = ["text"];
6294
6422
  var TitleWithCTA = function TitleWithCTA(_ref) {
6295
6423
  var title = _ref.title,
6296
6424
  links = _ref.links,
@@ -6302,7 +6430,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
6302
6430
  primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
6303
6431
  var _ref3 = (links == null ? void 0 : links[1]) || {},
6304
6432
  secondaryButtonText = _ref3.text,
6305
- secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
6433
+ secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
6306
6434
  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
6307
6435
  sticky: sticky
6308
6436
  }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
@@ -6917,7 +7045,7 @@ var TextOnly = function TextOnly(_ref) {
6917
7045
  })));
6918
7046
  };
6919
7047
 
6920
- // eslint-disable-next-line no-shadow
7048
+ /* eslint-disable no-shadow */
6921
7049
  var CarouselType;
6922
7050
  (function (CarouselType) {
6923
7051
  CarouselType["Image"] = "image";
@@ -6933,32 +7061,6 @@ var ButtonType;
6933
7061
  ButtonType["Tertiary"] = "Tertiary";
6934
7062
  })(ButtonType || (ButtonType = {}));
6935
7063
 
6936
- var IInformationCtaVariant;
6937
- (function (IInformationCtaVariant) {
6938
- IInformationCtaVariant["Primary"] = "Primary";
6939
- IInformationCtaVariant["Secondary"] = "Secondary";
6940
- IInformationCtaVariant["Tertiary"] = "Tertiary";
6941
- IInformationCtaVariant["TextLink"] = "TextLink";
6942
- })(IInformationCtaVariant || (IInformationCtaVariant = {}));
6943
- var IInformationCtaTheme;
6944
- (function (IInformationCtaTheme) {
6945
- IInformationCtaTheme["Cinema"] = "Cinema";
6946
- IInformationCtaTheme["Core"] = "Core";
6947
- IInformationCtaTheme["Stream"] = "Stream";
6948
- })(IInformationCtaTheme || (IInformationCtaTheme = {}));
6949
- var IInformationTitleVariant;
6950
- (function (IInformationTitleVariant) {
6951
- IInformationTitleVariant["Header"] = "Header";
6952
- IInformationTitleVariant["AltHeader"] = "AltHeader";
6953
- })(IInformationTitleVariant || (IInformationTitleVariant = {}));
6954
- var IInformationBackgroundColour;
6955
- (function (IInformationBackgroundColour) {
6956
- IInformationBackgroundColour["Cinema"] = "cinema";
6957
- IInformationBackgroundColour["Core"] = "core";
6958
- IInformationBackgroundColour["Stream"] = "stream";
6959
- IInformationBackgroundColour["White"] = "white";
6960
- })(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
6961
-
6962
7064
  var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
6963
7065
  var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-light-grey);\n padding: 40px;\n\n display: block;\n position: relative;\n\n @media ", " {\n margin-top: 0;\n padding: 40px 20px;\n }\n"])), devices.tablet);
6964
7066
  var PromoLabelWrapper = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-self: flex-end;\n height: 15px;\n"])));
@@ -7247,31 +7349,723 @@ var ModalWindow = function ModalWindow(_ref) {
7247
7349
  })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
7248
7350
  };
7249
7351
 
7250
- var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
7251
- var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
7252
- var LineContainer = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
7253
- var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
7254
- var isVisible = _ref.isVisible;
7255
- return isVisible ? 'visible' : 'hidden';
7256
- }, devices.mobile);
7257
- var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
7258
- var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref2) {
7259
- var textHeight = _ref2.textHeight;
7260
- return textHeight;
7261
- }, devices.mobile);
7262
- var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
7352
+ var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
7353
+ var GRID_VALUES = {
7354
+ desktop: {
7355
+ gapsNumber: 13,
7356
+ columnsNumber: 13,
7357
+ gapsNumberOffset: 15,
7358
+ columnsNumberOffset: 14,
7359
+ largeCard: {
7360
+ gapsPerSlide: 4,
7361
+ columnsPerSlide: 5
7362
+ },
7363
+ smallCard: {
7364
+ gapsPerSlide: 3,
7365
+ columnsPerSlide: 4
7366
+ }
7367
+ },
7368
+ mobile: {
7369
+ columnsNumber: 12,
7370
+ gapsNumber: 13,
7371
+ columnsPerSlide: 10,
7372
+ gapsPerSlide: 9
7373
+ }
7374
+ };
7375
+ // Grid Calculations
7376
+ var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
7377
+ return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
7378
+ };
7379
+ var calculateGapsSpaceInMainGrid = function calculateGapsSpaceInMainGrid(gapsNumber) {
7380
+ return "calc(" + gapsNumber + " * " + GRID_COLUMN_GAP + ")";
7381
+ };
7382
+ var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
7383
+ return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
7384
+ };
7385
+ // Slide styles
7386
+ var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
7387
+ var _GRID_VALUES$desktop = GRID_VALUES.desktop,
7388
+ gapsNumber = _GRID_VALUES$desktop.gapsNumber,
7389
+ columnsNumber = _GRID_VALUES$desktop.columnsNumber,
7390
+ columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
7391
+ gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
7392
+ var _ref = type === CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
7393
+ gapsPerSlide = _ref.gapsPerSlide,
7394
+ columnsPerSlide = _ref.columnsPerSlide;
7395
+ var columns = isActive ? columnsNumberOffset : columnsNumber;
7396
+ var gaps = isActive ? gapsNumberOffset : gapsNumber;
7397
+ var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
7398
+ var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
7399
+ return "\n width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n margin-right: " + GRID_COLUMN_GAP + ";\n ";
7400
+ };
7401
+ var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
7402
+ var _GRID_VALUES$mobile = GRID_VALUES.mobile,
7403
+ columnsNumber = _GRID_VALUES$mobile.columnsNumber,
7404
+ gapsNumber = _GRID_VALUES$mobile.gapsNumber,
7405
+ columnsPerSlide = _GRID_VALUES$mobile.columnsPerSlide,
7406
+ gapsPerSlide = _GRID_VALUES$mobile.gapsPerSlide;
7407
+ var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
7408
+ return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
7409
+ };
7410
+ var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
7411
+ return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
7412
+ };
7413
+
7414
+ var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5;
7415
+ var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n"])), function (_ref) {
7416
+ var imagesHeightDesktop = _ref.imagesHeightDesktop;
7417
+ return "& {\n .swipe-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n\n > figure {\n margin: 0px;\n " + getImageSlideStyles(imagesHeightDesktop) + "\n }\n }\n }";
7418
+ }, devices.mobile, function (_ref2) {
7419
+ var imagesHeightDevice = _ref2.imagesHeightDevice;
7420
+ return "&&& {\n .swipe-slide > figure {\n " + getImageSlideStyles(imagesHeightDevice) + "\n }\n }";
7421
+ });
7422
+ var CardsCarouselWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n && {\n .swipe-slide {\n ", "\n }\n }\n}}"])), function (_ref3) {
7423
+ var type = _ref3.type,
7424
+ isActive = _ref3.isActive;
7425
+ return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n ";
7426
+ }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
7427
+ var TitleButtonsGrid = /*#__PURE__*/styled(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 28px;\n\n @media ", " {\n padding-bottom: 0;\n }\n\n @media ", " {\n margin-bottom: 20px;\n }\n"])), devices.mobile, devices.mobile);
7428
+ var CarouselInfoWrapper = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
7429
+ var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
7430
+ var isDescriptionPresent = _ref4.isDescriptionPresent;
7431
+ return isDescriptionPresent && 'margin: 20px 0';
7432
+ });
7433
+ var ButtonsWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7434
+ var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
7435
+ var SwipeGridWrapper = /*#__PURE__*/styled(GridItem)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n\n @media ", " {\n grid-column: 1 / span 14;\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
7436
+ var active = _ref5.active;
7437
+ return active ? 'grid-column: 1 / span 16' : '';
7438
+ }, devices.tablet, devices.mobile);
7263
7439
 
7264
- /* eslint-disable react/no-unstable-nested-components */
7265
- var Accordion = function Accordion(_ref) {
7266
- var _ref$title = _ref.title,
7267
- title = _ref$title === void 0 ? '' : _ref$title,
7268
- _ref$showLine = _ref.showLine,
7269
- showLine = _ref$showLine === void 0 ? true : _ref$showLine,
7270
- children = _ref.children,
7271
- visibleStandfirst = _ref.visibleStandfirst,
7272
- _ref$initOpen = _ref.initOpen,
7273
- initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
7274
- _ref$contentType = _ref.contentType,
7440
+ var _templateObject$O, _templateObject2$B;
7441
+ var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
7442
+ var SwipeContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
7443
+ var SwipeTrack = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
7444
+ var transitioning = _ref.transitioning;
7445
+ return transitioning ? 'transform 0.3s ease' : 'none';
7446
+ }, function (_ref2) {
7447
+ var translateX = _ref2.translateX;
7448
+ return translateX + "px";
7449
+ }, SWIPE_SLIDE_CLASS_NAME);
7450
+
7451
+ /**
7452
+ * Generates a random string in the format XXX-XXX.
7453
+ * Does not meet UUID standards.
7454
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
7455
+ *
7456
+ * @return {string} A random string in the format XXX-XXX.
7457
+ */
7458
+ var generateDomElementId = function generateDomElementId() {
7459
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
7460
+ var datePart = Date.now().toString().slice(-3);
7461
+ return randomPart + "-" + datePart;
7462
+ };
7463
+
7464
+ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
7465
+ var widthSoFar = 0;
7466
+ var visible = [];
7467
+ for (var i = currentIndex; i < slidesLength; i++) {
7468
+ var _slideWidths$i;
7469
+ var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
7470
+ if (widthSoFar + width > containerWidth) break;
7471
+ visible.push(i);
7472
+ widthSoFar += width;
7473
+ }
7474
+ return visible;
7475
+ };
7476
+ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
7477
+ var absDelta = Math.abs(delta);
7478
+ var movedSlides = 0;
7479
+ var accumulated = 0;
7480
+ for (var i = 0; i < slideWidths.length; i++) {
7481
+ accumulated += slideWidths[i];
7482
+ // Allow partial slide (e.g. 50% of next slide) to count
7483
+ var partialThreshold = slideWidths[i] * 0.5;
7484
+ if (absDelta > accumulated - partialThreshold) {
7485
+ movedSlides++;
7486
+ } else {
7487
+ break;
7488
+ }
7489
+ }
7490
+ return movedSlides;
7491
+ };
7492
+
7493
+ var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
7494
+ var MAX_CLONES_NUMBER = 6;
7495
+ var CLICK_DRAG_THRESHOLD = 10;
7496
+ var getClonesCount = function getClonesCount(infinite, childrenLength) {
7497
+ if (!infinite) return 0;
7498
+ if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
7499
+ return childrenLength;
7500
+ };
7501
+ var getSlidedWidth = function getSlidedWidth(slide) {
7502
+ if (!slide) return 0;
7503
+ var style = window.getComputedStyle(slide);
7504
+ var marginLeft = parseFloat(style.marginLeft) || 0;
7505
+ var marginRight = parseFloat(style.marginRight) || 0;
7506
+ return slide.getBoundingClientRect().width + marginLeft + marginRight;
7507
+ };
7508
+ var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
7509
+ var children = _ref.children,
7510
+ _ref$infinite = _ref.infinite,
7511
+ infinite = _ref$infinite === void 0 ? false : _ref$infinite,
7512
+ onIndexChange = _ref.onIndexChange,
7513
+ _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
7514
+ slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
7515
+ onActiveChange = _ref.onActiveChange,
7516
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
7517
+ var containerRef = useRef(null);
7518
+ var childRefs = useRef([]);
7519
+ var startX = useRef(0);
7520
+ var currentTranslate = useRef(0);
7521
+ var isDragging = useRef(false);
7522
+ var isMouseDown = useRef(false);
7523
+ var isActive = useRef(false);
7524
+ var isClickPrevented = useRef(false);
7525
+ var uniqueIdRef = useRef(generateDomElementId());
7526
+ var _useState = useState(null),
7527
+ dragTranslateX = _useState[0],
7528
+ setDragTranslateX = _useState[1];
7529
+ var _useState2 = useState(false),
7530
+ transitioning = _useState2[0],
7531
+ setTransitioning = _useState2[1];
7532
+ var _useState3 = useState([]),
7533
+ slideWidths = _useState3[0],
7534
+ setSlideWidths = _useState3[1];
7535
+ var _useState4 = useState(0),
7536
+ containerWidth = _useState4[0],
7537
+ setContainerWidth = _useState4[1];
7538
+ var _useMemo = useMemo(function () {
7539
+ var count = getClonesCount(infinite, children.length);
7540
+ var leftClones = infinite ? children.slice(-count) : [];
7541
+ var rightClones = infinite ? children.slice(0, count) : [];
7542
+ var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
7543
+ return {
7544
+ slides: allSlides,
7545
+ clonesCount: count
7546
+ };
7547
+ }, [children, infinite]),
7548
+ slides = _useMemo.slides,
7549
+ clonesCount = _useMemo.clonesCount;
7550
+ var _useState5 = useState(infinite ? clonesCount : 0),
7551
+ currentIndex = _useState5[0],
7552
+ setCurrentIndex = _useState5[1];
7553
+ useEffect(function () {
7554
+ var handler = function handler(e) {
7555
+ if (isClickPrevented.current) {
7556
+ e.preventDefault();
7557
+ e.stopPropagation();
7558
+ }
7559
+ };
7560
+ var containerElement = containerRef.current;
7561
+ containerElement == null || containerElement.addEventListener('click', handler, true);
7562
+ return function () {
7563
+ return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
7564
+ };
7565
+ }, []);
7566
+ useEffect(function () {
7567
+ if (!onIndexChange) return;
7568
+ if (!infinite) {
7569
+ onIndexChange(currentIndex);
7570
+ } else {
7571
+ var offset = currentIndex - clonesCount + children.length;
7572
+ var realIndex = offset % children.length;
7573
+ onIndexChange(realIndex);
7574
+ }
7575
+ }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7576
+ var updateDimensions = useCallback(function () {
7577
+ if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
7578
+ if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
7579
+ }, []);
7580
+ useEffect(function () {
7581
+ var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7582
+ return function () {
7583
+ return cancelAnimationFrame(animationFrameRequestId);
7584
+ };
7585
+ }, [children]);
7586
+ useEffect(function () {
7587
+ var observer = new ResizeObserver(updateDimensions);
7588
+ if (containerRef.current) observer.observe(containerRef.current);
7589
+ return function () {
7590
+ return observer.disconnect();
7591
+ };
7592
+ }, [children]);
7593
+ var setIsActive = function setIsActive() {
7594
+ if (!isActive.current) {
7595
+ isActive.current = true;
7596
+ onActiveChange == null || onActiveChange(true);
7597
+ }
7598
+ };
7599
+ var getTranslateX = function getTranslateX() {
7600
+ var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7601
+ return acc + width;
7602
+ }, 0);
7603
+ return offset + (slidesOffsetBefore || 0);
7604
+ };
7605
+ var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7606
+ var delta = currentTranslate.current - getTranslateX();
7607
+ var direction = delta > 0 ? -1 : 1;
7608
+ var movedSlides = getMovedSlides(delta, slideWidths);
7609
+ if (Math.abs(delta) > 20) {
7610
+ movedSlides = Math.max(1, movedSlides);
7611
+ var targetIndex = currentIndex + direction * movedSlides;
7612
+ var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7613
+ setTransitioning(true);
7614
+ setCurrentIndex(finalIndex);
7615
+ } else {
7616
+ setTransitioning(true);
7617
+ setCurrentIndex(function (prev) {
7618
+ return prev;
7619
+ });
7620
+ }
7621
+ setDragTranslateX(null);
7622
+ };
7623
+ var canMoveNext = function canMoveNext() {
7624
+ var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
7625
+ return acc + width;
7626
+ }, 0);
7627
+ return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
7628
+ };
7629
+ var handleTransitionEnd = function handleTransitionEnd() {
7630
+ setTransitioning(false);
7631
+ if (!infinite) return;
7632
+ if (currentIndex >= children.length + clonesCount) {
7633
+ setCurrentIndex(clonesCount);
7634
+ } else if (currentIndex < clonesCount) {
7635
+ setCurrentIndex(children.length + currentIndex);
7636
+ }
7637
+ };
7638
+ var goToPrev = function goToPrev() {
7639
+ if (transitioning) return;
7640
+ setIsActive();
7641
+ setTransitioning(true);
7642
+ setCurrentIndex(function (prev) {
7643
+ return infinite ? prev - 1 : Math.max(0, prev - 1);
7644
+ });
7645
+ };
7646
+ var goToNext = function goToNext() {
7647
+ if (transitioning || !canMoveNext()) return;
7648
+ setIsActive();
7649
+ setTransitioning(true);
7650
+ setCurrentIndex(function (prev) {
7651
+ return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7652
+ });
7653
+ };
7654
+ useImperativeHandle(ref, function () {
7655
+ return {
7656
+ nextSlide: goToNext,
7657
+ prevSlide: goToPrev
7658
+ };
7659
+ });
7660
+ var handleTouchStart = function handleTouchStart(e) {
7661
+ setIsActive();
7662
+ startX.current = e.touches[0].clientX;
7663
+ isDragging.current = true;
7664
+ isClickPrevented.current = false;
7665
+ setTransitioning(false);
7666
+ };
7667
+ var handleTouchMove = function handleTouchMove(e) {
7668
+ if (!isDragging.current) return;
7669
+ var deltaX = e.touches[0].clientX - startX.current;
7670
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7671
+ isClickPrevented.current = true;
7672
+ }
7673
+ var visualOffset = getTranslateX() + deltaX;
7674
+ currentTranslate.current = visualOffset;
7675
+ setDragTranslateX(visualOffset);
7676
+ };
7677
+ var handleTouchEnd = function handleTouchEnd() {
7678
+ isDragging.current = false;
7679
+ navigateOnSwipeEnd();
7680
+ };
7681
+ var handleMouseMove = function handleMouseMove(e) {
7682
+ if (!isDragging.current || !isMouseDown.current || transitioning) return;
7683
+ var deltaX = e.clientX - startX.current;
7684
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7685
+ isClickPrevented.current = true;
7686
+ }
7687
+ var visualOffset = getTranslateX() + deltaX;
7688
+ currentTranslate.current = visualOffset;
7689
+ setDragTranslateX(visualOffset);
7690
+ };
7691
+ var _handleMouseUp = function handleMouseUp() {
7692
+ if (!isMouseDown.current) return;
7693
+ isMouseDown.current = false;
7694
+ isDragging.current = false;
7695
+ if (isClickPrevented.current) {
7696
+ navigateOnSwipeEnd();
7697
+ } else {
7698
+ setDragTranslateX(null);
7699
+ }
7700
+ window.removeEventListener('mousemove', handleMouseMove);
7701
+ window.removeEventListener('mouseup', _handleMouseUp);
7702
+ };
7703
+ var handleMouseDown = function handleMouseDown(e) {
7704
+ if (transitioning || e.button !== 0) return;
7705
+ e.preventDefault();
7706
+ setIsActive();
7707
+ startX.current = e.clientX;
7708
+ isDragging.current = true;
7709
+ isMouseDown.current = true;
7710
+ isClickPrevented.current = false;
7711
+ setTransitioning(false);
7712
+ window.addEventListener('mousemove', handleMouseMove);
7713
+ window.addEventListener('mouseup', _handleMouseUp);
7714
+ };
7715
+ var onSlideFocus = function onSlideFocus(isVisible, index) {
7716
+ if (!isVisible) {
7717
+ setCurrentIndex(index);
7718
+ }
7719
+ };
7720
+ var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7721
+ return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
7722
+ ref: containerRef,
7723
+ onTouchStart: handleTouchStart,
7724
+ onTouchMove: handleTouchMove,
7725
+ onTouchEnd: handleTouchEnd,
7726
+ onMouseDown: handleMouseDown,
7727
+ className: "swipe"
7728
+ }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
7729
+ className: "swipe-track-wrapper",
7730
+ translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
7731
+ transitioning: transitioning && dragTranslateX === null,
7732
+ onTransitionEnd: handleTransitionEnd
7733
+ }, slides.map(function (child, index) {
7734
+ var isVisible = visibleIndexes.includes(index);
7735
+ return /*#__PURE__*/React__default.cloneElement(child, {
7736
+ key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
7737
+ ariaHidden: !isVisible,
7738
+ className: SWIPE_SLIDE_CLASS_NAME,
7739
+ ref: function ref(el) {
7740
+ childRefs.current[index] = el;
7741
+ },
7742
+ onFocus: function onFocus() {
7743
+ return onSlideFocus(isVisible, index);
7744
+ }
7745
+ });
7746
+ })));
7747
+ });
7748
+ Swipe.displayName = 'Swipe';
7749
+
7750
+ var SCREEN_WIDTH_PERCENTAGE = 0.05;
7751
+ var GRID_OFFSET_MARGIN = {
7752
+ mobile: 0,
7753
+ tablet: 15,
7754
+ desktop: 3
7755
+ };
7756
+ var Carousel = function Carousel(_ref) {
7757
+ var children = _ref.children,
7758
+ type = _ref.type,
7759
+ title = _ref.title,
7760
+ description = _ref.description,
7761
+ className = _ref.className,
7762
+ _ref$titleSemanticLev = _ref.titleSemanticLevel,
7763
+ titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 3 : _ref$titleSemanticLev,
7764
+ _ref$imagesHeightDevi = _ref.imagesHeightDevice,
7765
+ imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
7766
+ _ref$imagesHeightDesk = _ref.imagesHeightDesktop,
7767
+ imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
7768
+ _ref$infinite = _ref.infinite,
7769
+ infinite = _ref$infinite === void 0 ? true : _ref$infinite,
7770
+ _ref$useOffset = _ref.useOffset,
7771
+ useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
7772
+ var _useState = useState(false),
7773
+ active = _useState[0],
7774
+ setActive = _useState[1];
7775
+ var _useState2 = useState(0),
7776
+ slidesOffsetBefore = _useState2[0],
7777
+ setSlidesOffsetBefore = _useState2[1];
7778
+ var swipeRef = useRef(null);
7779
+ useEffect(function () {
7780
+ if (!useOffset || !active) return undefined;
7781
+ var updateWindowDimensions = function updateWindowDimensions() {
7782
+ if (window.matchMedia(devices.mobile).matches) {
7783
+ setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
7784
+ } else if (window.matchMedia(devices.tablet).matches) {
7785
+ setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
7786
+ } else {
7787
+ setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
7788
+ }
7789
+ };
7790
+ window.addEventListener('resize', updateWindowDimensions);
7791
+ updateWindowDimensions();
7792
+ return function () {
7793
+ window.removeEventListener('resize', updateWindowDimensions);
7794
+ };
7795
+ }, [useOffset, active]);
7796
+ var onNext = function onNext() {
7797
+ var _swipeRef$current;
7798
+ (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
7799
+ };
7800
+ var onPrev = function onPrev() {
7801
+ var _swipeRef$current2;
7802
+ (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
7803
+ };
7804
+ var onActiveChangeHandler = function onActiveChangeHandler(value) {
7805
+ if (useOffset && !active) {
7806
+ setActive(value);
7807
+ }
7808
+ };
7809
+ var carouselTitleId = "carousel-title-" + title;
7810
+ var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
7811
+ return /*#__PURE__*/React__default.createElement(Wrapper, {
7812
+ className: className,
7813
+ type: type,
7814
+ isActive: active,
7815
+ imagesHeightDevice: imagesHeightDevice,
7816
+ imagesHeightDesktop: imagesHeightDesktop,
7817
+ role: "region",
7818
+ "aria-labelledby": carouselTitleId
7819
+ }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
7820
+ columnStartDesktop: 3,
7821
+ columnSpanDesktop: 10,
7822
+ columnStartDevice: 2,
7823
+ columnSpanDevice: 12
7824
+ }, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
7825
+ "data-testid": "carousel-title-wrapper"
7826
+ }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
7827
+ id: carouselTitleId,
7828
+ isDescriptionPresent: !!description
7829
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7830
+ size: "small",
7831
+ serif: true,
7832
+ hierarchy: "h" + titleSemanticLevel
7833
+ }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7834
+ size: "large"
7835
+ }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
7836
+ columnStartDesktop: 14,
7837
+ columnSpanDesktop: 2,
7838
+ columnStartDevice: 12,
7839
+ columnSpanDevice: 2
7840
+ }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
7841
+ "data-testid": "carousel-buttons-wrapper"
7842
+ }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7843
+ onClickNext: onNext,
7844
+ onClickPrev: onPrev,
7845
+ availablePrev: true
7846
+ })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
7847
+ active: active,
7848
+ columnStartDesktop: 3,
7849
+ columnSpanDesktop: 14,
7850
+ columnStartDevice: 2,
7851
+ columnSpanDevice: 13
7852
+ }, /*#__PURE__*/React__default.createElement(Swipe, {
7853
+ onActiveChange: function onActiveChange(value) {
7854
+ return onActiveChangeHandler(value);
7855
+ },
7856
+ "data-testid": "carousel-swipe",
7857
+ ref: swipeRef,
7858
+ infinite: infinite,
7859
+ slidesOffsetBefore: slidesOffsetBefore,
7860
+ role: "list",
7861
+ "aria-roledescription": "carousel"
7862
+ }, React__default.Children.toArray(children).map(function (child, index) {
7863
+ return /*#__PURE__*/React__default.createElement("div", {
7864
+ key: "carousel-slide-" + index,
7865
+ "aria-roledescription": "slide"
7866
+ }, child);
7867
+ })))));
7868
+ };
7869
+
7870
+ var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$8, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
7871
+ var HighlightsGrid = /*#__PURE__*/styled(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n .color-primary {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
7872
+ var CarouselTitleWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
7873
+ var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7874
+ var InfoWrapper = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
7875
+ var InfoLogoWrapper = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n width: 132px;\n height: 36px;\n\n @media ", " {\n & {\n margin-bottom: 16px;\n width: 102px;\n height: 28px;\n }\n }\n\n @media ", " {\n & {\n margin-bottom: 20px;\n width: 102px;\n height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
7876
+ var InfoTitleWrapper = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
7877
+ var InfoTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
7878
+ var InfoLinkWrapper = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n flex-direction: row;\n\n @media ", " {\n & {\n margin-top: 16px;\n }\n }\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n display: flex;\n flex-direction: column;\n }\n"])), devices.tablet, devices.mobile);
7879
+ var CarouselWrapper = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n\n .swipe-slide {\n width: calc(100% - 50px - var(--rotator-button-width));\n -webkit-transform: translate3d(0, 0, 0);\n }\n\n @media ", " {\n & {\n grid-area: 2 / 7 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swipe-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), devices.tablet, devices.mobile);
7880
+ var RotatorButtonsWrapper = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: 50px;\n top: calc(50% - calc(var(--rotator-button-width) / 2));\n z-index: 2;\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.mobileAndTablet);
7881
+ var RotatorButtonsWrapperMobile = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 12 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white);\n }\n\n & {\n display: flex;\n grid-area: 1 / 11 / 2 / 14;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.tablet, devices.mobile);
7882
+ var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
7883
+ var FirstButtonComponentWrapper = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 16px;\n\n @media ", " {\n & {\n display: flex;\n flex-direction: column;\n margin-right: 0;\n margin-bottom: 10px;\n }\n }\n"])), devices.mobile);
7884
+ var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
7885
+ var AdditionalInfoWrapper = /*#__PURE__*/styled.div(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
7886
+ var InfoSubtitleWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n"])));
7887
+ var VideoWithControlsWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n width: 100%;\n height: 100%;\n\n .video-with-controls-container {\n height: 100%;\n }\n\n .video-controls-container {\n display: ", ";\n position: fixed;\n\n > div {\n margin: 0 40px 30px 40px;\n\n @media ", " {\n margin: 0 20px 20px 20px;\n }\n }\n }\n\n button#play {\n height: 48px;\n width: 48px;\n }\n"])), function (_ref) {
7888
+ var isCurrentSlide = _ref.isCurrentSlide;
7889
+ return isCurrentSlide ? 'block' : 'none';
7890
+ }, devices.mobile);
7891
+
7892
+ var COLORS$3 = {
7893
+ "default": 'var(--button-auxiliary-color)',
7894
+ background: 'var(--button-auxiliary-bg-color)'
7895
+ };
7896
+ var getTextColor$3 = function getTextColor(_ref) {
7897
+ var textColor = _ref.textColor;
7898
+ return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
7899
+ };
7900
+ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7901
+ var backgroundColor = _ref2.backgroundColor;
7902
+ return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
7903
+ };
7904
+
7905
+ var _templateObject$Q;
7906
+ var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
7907
+
7908
+ var _excluded$i = ["children", "className"];
7909
+ var AuxiliaryButton = function AuxiliaryButton(_ref) {
7910
+ var children = _ref.children,
7911
+ className = _ref.className,
7912
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
7913
+ return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
7914
+ iconClassName: "auxiliaryButtonIcon",
7915
+ className: className
7916
+ }), children);
7917
+ };
7918
+
7919
+ var _excluded$j = ["text"],
7920
+ _excluded2$2 = ["text"];
7921
+ var _buttonTypeToButton;
7922
+ var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
7923
+ var Buttons = function Buttons(_ref) {
7924
+ var auxiliaryCTA = _ref.auxiliaryCTA,
7925
+ links = _ref.links;
7926
+ var firstButton = links == null ? void 0 : links[0];
7927
+ var _ref2 = firstButton || {},
7928
+ _ref2$text = _ref2.text,
7929
+ firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7930
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
7931
+ var secondButton = links == null ? void 0 : links[1];
7932
+ var _ref3 = secondButton || {},
7933
+ _ref3$text = _ref3.text,
7934
+ secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7935
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
7936
+ var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
7937
+ var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : SecondaryButton;
7938
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, (firstButton == null ? void 0 : firstButton.text) && (/*#__PURE__*/React__default.createElement(FirstButtonComponentWrapper, null, /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), firstButtonText))), (secondButton == null ? void 0 : secondButton.text) && /*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), secondButtonText)), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(InfoLinkWrapper, null, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA, {
7939
+ textColor: ThemeColor['base-white']
7940
+ }), auxiliaryCTA.text))));
7941
+ };
7942
+
7943
+ var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
7944
+ return htmlString.replace(/<[^>]*>/g, '');
7945
+ };
7946
+ var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
7947
+ if (addDots === void 0) {
7948
+ addDots = false;
7949
+ }
7950
+ var textContent = stripAllHtmlTags(htmlString);
7951
+ if (textContent.length <= resultLength) {
7952
+ return htmlString;
7953
+ }
7954
+ var accumulatedText = '';
7955
+ var tagStack = [];
7956
+ var charCount = 0;
7957
+ var closeTags = function closeTags() {
7958
+ while (tagStack.length > 0) {
7959
+ accumulatedText += "</" + tagStack.pop() + ">";
7960
+ }
7961
+ };
7962
+ for (var i = 0; i < htmlString.length; i++) {
7963
+ var _char = htmlString[i];
7964
+ if (_char === '<') {
7965
+ accumulatedText += _char;
7966
+ if (htmlString[i + 1] !== '/') {
7967
+ var tagNameEnd = htmlString.indexOf('>', i);
7968
+ var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
7969
+ tagStack.push(tagName);
7970
+ accumulatedText += tagName + ">";
7971
+ i = tagNameEnd;
7972
+ }
7973
+ } else if (_char === '>') {
7974
+ accumulatedText += _char;
7975
+ } else if (charCount < resultLength) {
7976
+ accumulatedText += _char;
7977
+ charCount++;
7978
+ }
7979
+ if (charCount >= resultLength) {
7980
+ if (addDots) {
7981
+ accumulatedText += '...';
7982
+ }
7983
+ break;
7984
+ }
7985
+ }
7986
+ closeTags();
7987
+ return accumulatedText;
7988
+ };
7989
+ var truncate = function truncate(str, n) {
7990
+ return str.length >= n ? str.substring(0, n) : str;
7991
+ };
7992
+ var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
7993
+ if (addDots === void 0) {
7994
+ addDots = false;
7995
+ }
7996
+ var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
7997
+ return truncateHtmlString(nodeString, resultLength, addDots);
7998
+ };
7999
+
8000
+ var InfoSection = function InfoSection(_ref) {
8001
+ var logo = _ref.logo,
8002
+ slide = _ref.slide,
8003
+ currentSlideIndex = _ref.currentSlideIndex;
8004
+ var _useState = useState([]),
8005
+ finishedTimers = _useState[0],
8006
+ setFinishedTimers = _useState[1];
8007
+ var infoText = slide.infoText,
8008
+ infoTitle = slide.infoTitle,
8009
+ infoTimeframe = slide.infoTimeframe,
8010
+ infoSubtitle = slide.infoSubtitle,
8011
+ timerParams = slide.timerParams,
8012
+ additionalInfo = slide.additionalInfo;
8013
+ var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
8014
+ var handleEndDate = function handleEndDate() {
8015
+ return setFinishedTimers([].concat(finishedTimers, [currentSlideIndex]));
8016
+ };
8017
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
8018
+ "data-testid": "highlight-carousel-timer-wrapper"
8019
+ }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8020
+ size: "large"
8021
+ }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
8022
+ color: Colors.White,
8023
+ endDateHandler: handleEndDate,
8024
+ endDate: timerParams.endDate,
8025
+ title: timerParams.title
8026
+ })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8027
+ size: "large",
8028
+ hierarchy: "h3"
8029
+ }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8030
+ size: "large"
8031
+ }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8032
+ size: "large"
8033
+ }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8034
+ size: "large"
8035
+ }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
8036
+ dangerouslySetInnerHTML: {
8037
+ __html: description
8038
+ }
8039
+ })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8040
+ size: "large"
8041
+ }, additionalInfo)))));
8042
+ };
8043
+
8044
+ var _templateObject$R, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$e;
8045
+ var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n div {\n overflow: hidden;\n }\n"])));
8046
+ var LineContainer = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 2px;\n background-color: var(--base-color-light-grey);\n width: 100%;\n"])));
8047
+ var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0px 20px 28px 20px;\n\n visibility: ", ";\n\n @media ", " {\n margin: 12px 0px 24px 0px;\n }\n \n @media print { \n visibility: visible;\n }\n}\n"])), function (_ref) {
8048
+ var isVisible = _ref.isVisible;
8049
+ return isVisible ? 'visible' : 'hidden';
8050
+ }, devices.mobile);
8051
+ var TitleContainer$3 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n\n && h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n div {\n margin: 21px 20px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n @media ", " {\n margin: 12px 20px 12px 0px;\n }\n }\n\n && svg {\n width: var(--navigation-middle-gap);\n height: var(--navigation-middle-gap);\n margin-right: 20px;\n\n @media ", " {\n margin-right: 0px;\n }\n }\n\n :hover {\n cursor: pointer;\n }\n"])), devices.mobile, devices.mobile);
8052
+ var ContentContainer = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n max-height: ", ";\n\n @media print {\n max-height: max-content;\n }\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n @media ", " {\n transition: 100% 0.2s ease;\n }\n"])), function (_ref2) {
8053
+ var textHeight = _ref2.textHeight;
8054
+ return textHeight;
8055
+ }, devices.mobile);
8056
+ var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8057
+
8058
+ /* eslint-disable react/no-unstable-nested-components */
8059
+ var Accordion = function Accordion(_ref) {
8060
+ var _ref$title = _ref.title,
8061
+ title = _ref$title === void 0 ? '' : _ref$title,
8062
+ _ref$showLine = _ref.showLine,
8063
+ showLine = _ref$showLine === void 0 ? true : _ref$showLine,
8064
+ children = _ref.children,
8065
+ visibleStandfirst = _ref.visibleStandfirst,
8066
+ _ref$initOpen = _ref.initOpen,
8067
+ initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
8068
+ _ref$contentType = _ref.contentType,
7275
8069
  contentType = _ref$contentType === void 0 ? 'subtitle' : _ref$contentType,
7276
8070
  _ref$semanticLevel = _ref.semanticLevel,
7277
8071
  semanticLevel = _ref$semanticLevel === void 0 ? 4 : _ref$semanticLevel,
@@ -7364,8 +8158,8 @@ var Accordion = function Accordion(_ref) {
7364
8158
  }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
7365
8159
  };
7366
8160
 
7367
- var _templateObject$O;
7368
- var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
8161
+ var _templateObject$S;
8162
+ var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
7369
8163
 
7370
8164
  var Accordions = function Accordions(_ref) {
7371
8165
  var _ref$items = _ref.items,
@@ -7386,18 +8180,18 @@ var Accordions = function Accordions(_ref) {
7386
8180
  }));
7387
8181
  };
7388
8182
 
7389
- var _templateObject$P, _templateObject2$B, _templateObject3$p, _templateObject4$k, _templateObject5$f;
7390
- var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
7391
- var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
8183
+ var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
8184
+ var AnnouncementBannerWrapper = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 28px 0;\n background-color: var(--announcement-banner-bg-color);\n color: var(--announcement-banner-color);\n\n @media ", " {\n padding: 20px 0;\n }\n"])), devices.mobile);
8185
+ var SvgContainer$2 = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n cursor: ", ";\n\n ", "\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n\n path {\n fill: var(--announcement-banner-color);\n }\n }\n"])), function (_ref) {
7392
8186
  var isClickable = _ref.isClickable;
7393
8187
  return isClickable ? 'pointer' : 'default';
7394
8188
  }, function (_ref2) {
7395
8189
  var isClickable = _ref2.isClickable;
7396
8190
  return isClickable && "\n :hover:not(:active) {\n && svg path {\n fill: var(--announcement-banner-hover-color);\n }\n }\n :active {\n && svg path {\n fill: var(--announcement-banner-pressed-color);\n }\n }\n ";
7397
8191
  });
7398
- var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n"])));
7399
- var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
7400
- var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
8192
+ var ContentContainer$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.2s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--announcement-banner-color);\n a {\n color: var(--announcement-banner-color);\n text-decoration: underline;\n }\n\n * {\n margin-block-start: 0;\n margin-block-end: 0;\n margin-inline-start: 0;\n margin-inline-end: 0;\n }\n"])));
8193
+ var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
8194
+ var BannerContentWrapper = /*#__PURE__*/styled(GridItem)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n grid-column: 3 / span 10;\n }\n\n @media ", ", ", " {\n && {\n grid-column: 3 / span 12;\n }\n }\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.desktop, devices.largeDesktop, devices.mobile, function (_ref3) {
7401
8195
  var variant = _ref3.variant;
7402
8196
  return variant === BannerVariants['service-persistent'] ? '8px' : '0px';
7403
8197
  }, function (_ref4) {
@@ -7469,109 +8263,76 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
7469
8263
  }))))));
7470
8264
  };
7471
8265
 
7472
- var COLORS$3 = {
7473
- "default": 'var(--button-auxiliary-color)',
7474
- background: 'var(--button-auxiliary-bg-color)'
7475
- };
7476
- var getTextColor$2 = function getTextColor(_ref) {
7477
- var textColor = _ref.textColor;
7478
- return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
7479
- };
7480
- var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
7481
- var backgroundColor = _ref2.backgroundColor;
7482
- return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
7483
- };
7484
-
7485
- var _templateObject$Q;
7486
- var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n\n && span svg * {\n fill: ", ";\n }\n\n .auxiliaryButtonIcon {\n width: 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])), getBackgroundColor$2, getTextColor$2, getTextColor$2);
7487
-
7488
- var _excluded$h = ["children", "className"];
7489
- var AuxiliaryButton = function AuxiliaryButton(_ref) {
7490
- var children = _ref.children,
7491
- className = _ref.className,
7492
- props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
7493
- return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
7494
- iconClassName: "auxiliaryButtonIcon",
7495
- className: className
7496
- }), children);
7497
- };
7498
-
7499
- var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
8266
+ var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$f, _templateObject7$9, _templateObject8$7, _templateObject9$4, _templateObject10$4, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
7500
8267
  var LENGTH_LARGE_TEXT = 28;
7501
8268
  var LENGTH_SMALL_TEXT$1 = 19;
7502
8269
  var LENGTH_TEXT_TABLET = 10;
7503
- var CardContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
8270
+ var CardContainer = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: ", ";\n position: relative;\n ", "\n\n .targetLink {\n text-decoration: none;\n color: inherit;\n }\n"])), function (_ref) {
7504
8271
  var isCardClickable = _ref.isCardClickable;
7505
8272
  return isCardClickable ? 'pointer' : 'default';
7506
8273
  }, function (_ref2) {
7507
8274
  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
7508
8275
  return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
7509
8276
  });
7510
- var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--editorial-spacing-hover);\n background-color: ", ";\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), function (_ref3) {
7511
- var lineColor = _ref3.lineColor,
7512
- theme = _ref3.theme;
7513
- if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
7514
- return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
7515
- }, zIndexes.contentOverlay);
7516
- var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
7517
- var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref4) {
7518
- var fullWidth = _ref4.fullWidth;
8277
+ var HoverContainer = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 4px;\n background-color: var(--button-bg-color);\n position: absolute;\n width: 100%;\n z-index: ", ";\n"])), zIndexes.contentOverlay);
8278
+ var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
8279
+ var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n margin-top: 24px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref3) {
8280
+ var fullWidth = _ref3.fullWidth;
7519
8281
  return fullWidth ? '0' : '20px';
7520
- }, function (_ref5) {
7521
- var fullWidth = _ref5.fullWidth;
8282
+ }, function (_ref4) {
8283
+ var fullWidth = _ref4.fullWidth;
7522
8284
  return fullWidth ? '0' : '20px';
7523
8285
  });
7524
- var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$g || (_templateObject5$g = /*#__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);
7525
- var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__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);
7526
- var TextContainer$2 = /*#__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"])));
7527
- var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$2)(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
7528
- var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$3 || (_templateObject9$3 = /*#__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"])));
7529
- var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 30px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref6) {
7530
- var isVisible = _ref6.isVisible;
8286
+ var TitleContainer$4 = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8287
+ var TitleContainerMobile = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 12px 0;\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8288
+ var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8289
+ var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
8290
+ var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
8291
+ var LabelContainer = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n width: fit-content;\n height: 26px;\n\n @media ", " {\n margin-left: ", ";\n }\n"])), function (_ref5) {
8292
+ var isVisible = _ref5.isVisible;
7531
8293
  return isVisible ? "visible" : 'hidden';
7532
- }, devices.mobile, function (_ref7) {
7533
- var isGridCard = _ref7.isGridCard;
8294
+ }, devices.mobile, function (_ref6) {
8295
+ var isGridCard = _ref6.isGridCard;
7534
8296
  return isGridCard ? '20px' : '0';
7535
8297
  });
7536
- var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: var(--editorial-margin-between);\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref8) {
7537
- var fullWidth = _ref8.fullWidth;
8298
+ var ExtraActionsContainer = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 26px;\n\n @media ", " {\n margin-left: ", ";\n margin-right: ", ";\n }\n"])), devices.mobile, function (_ref7) {
8299
+ var fullWidth = _ref7.fullWidth;
7538
8300
  return fullWidth ? '0' : '20px';
7539
- }, function (_ref9) {
7540
- var fullWidth = _ref9.fullWidth;
8301
+ }, function (_ref8) {
8302
+ var fullWidth = _ref8.fullWidth;
7541
8303
  return fullWidth ? '0' : '20px';
7542
8304
  });
7543
- var LabelElements = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$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 (_ref10) {
7544
- var bgColor = _ref10.bgColor,
7545
- theme = _ref10.theme;
7546
- return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
8305
+ var LabelElements = /*#__PURE__*/styled.div(_templateObject12$2 || (_templateObject12$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n height: 26px;\n padding: 0 8px;\n background-color: ", ";\n"])), function (_ref9) {
8306
+ var bgColor = _ref9.bgColor;
8307
+ return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
7547
8308
  });
7548
- var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
7549
- var getButtonsOpacity = function getButtonsOpacity(_ref11) {
7550
- var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
8309
+ var LabelIconWrapper = /*#__PURE__*/styled.div(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-left: 10px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n"])));
8310
+ var getButtonsOpacity = function getButtonsOpacity(_ref10) {
8311
+ var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
7551
8312
  return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
7552
8313
  };
7553
- var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
7554
- var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
8314
+ var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
8315
+ var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
7555
8316
  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
7556
8317
  };
7557
- var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templateObject14$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 16px;\n margin-top: var(--editorial-margin-between);\n\n ", "\n\n @media ", " {\n ", ";\n margin-left: ", ";\n margin-right: ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n ", ";\n opacity: 1 !important;\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), getButtonsOpacity, function (_ref13) {
7558
- var size = _ref13.size,
7559
- primaryButtonTextLength = _ref13.primaryButtonTextLength,
7560
- tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
8318
+ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n gap: 24px;\n margin-top: 24px;\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 (_ref12) {
8319
+ var size = _ref12.size,
8320
+ primaryButtonTextLength = _ref12.primaryButtonTextLength,
8321
+ tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
7561
8322
  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
7562
8323
  if (isLinksLayoutColumn) {
7563
8324
  return "\n flex-direction: column;\n ";
7564
8325
  }
7565
8326
  return '';
7566
- }, devices.mobile, getButtonsMinHeight, function (_ref14) {
7567
- var fullWidth = _ref14.fullWidth;
8327
+ }, devices.mobile, getButtonsMinHeight, function (_ref13) {
8328
+ var fullWidth = _ref13.fullWidth;
7568
8329
  return fullWidth ? '0' : '20px';
7569
- }, function (_ref15) {
7570
- var fullWidth = _ref15.fullWidth;
8330
+ }, function (_ref14) {
8331
+ var fullWidth = _ref14.fullWidth;
7571
8332
  return fullWidth ? '0' : '20px';
7572
- }, devices.tablet, getButtonsMinHeight, function (_ref16) {
7573
- var primaryButtonTextLength = _ref16.primaryButtonTextLength,
7574
- tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
8333
+ }, devices.tablet, getButtonsMinHeight, function (_ref15) {
8334
+ var primaryButtonTextLength = _ref15.primaryButtonTextLength,
8335
+ tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
7575
8336
  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
7576
8337
  if (isLinksLayoutColumnTablet) {
7577
8338
  return "\n flex-direction: column;\n ";
@@ -7579,69 +8340,12 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$1 || (_templa
7579
8340
  return '';
7580
8341
  });
7581
8342
 
7582
- var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
7583
- return htmlString.replace(/<[^>]*>/g, '');
7584
- };
7585
- var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
7586
- if (addDots === void 0) {
7587
- addDots = false;
7588
- }
7589
- var textContent = stripAllHtmlTags(htmlString);
7590
- if (textContent.length <= resultLength) {
7591
- return htmlString;
7592
- }
7593
- var accumulatedText = '';
7594
- var tagStack = [];
7595
- var charCount = 0;
7596
- var closeTags = function closeTags() {
7597
- while (tagStack.length > 0) {
7598
- accumulatedText += "</" + tagStack.pop() + ">";
7599
- }
7600
- };
7601
- for (var i = 0; i < htmlString.length; i++) {
7602
- var _char = htmlString[i];
7603
- if (_char === '<') {
7604
- accumulatedText += _char;
7605
- if (htmlString[i + 1] !== '/') {
7606
- var tagNameEnd = htmlString.indexOf('>', i);
7607
- var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
7608
- tagStack.push(tagName);
7609
- accumulatedText += tagName + ">";
7610
- i = tagNameEnd;
7611
- }
7612
- } else if (_char === '>') {
7613
- accumulatedText += _char;
7614
- } else if (charCount < resultLength) {
7615
- accumulatedText += _char;
7616
- charCount++;
7617
- }
7618
- if (charCount >= resultLength) {
7619
- if (addDots) {
7620
- accumulatedText += '...';
7621
- }
7622
- break;
7623
- }
7624
- }
7625
- closeTags();
7626
- return accumulatedText;
7627
- };
7628
- var truncate = function truncate(str, n) {
7629
- return str.length >= n ? str.substring(0, n) : str;
7630
- };
7631
- var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
7632
- if (addDots === void 0) {
7633
- addDots = false;
7634
- }
7635
- var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
7636
- return truncateHtmlString(nodeString, resultLength, addDots);
7637
- };
7638
-
7639
- var _excluded$i = ["text"],
7640
- _excluded2$1 = ["text"];
7641
- var _buttonTypeToButton;
8343
+ var _excluded$k = ["text"],
8344
+ _excluded2$3 = ["text"];
8345
+ var _buttonTypeToButton$1;
7642
8346
  var LENGTH_LARGE_TEXT$1 = 28;
7643
8347
  var LENGTH_SMALL_TEXT$2 = 19;
7644
- var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
8348
+ var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
7645
8349
  var Card = function Card(_ref) {
7646
8350
  var _labelParams$color;
7647
8351
  var _ref$progress = _ref.progress,
@@ -7679,18 +8383,20 @@ var Card = function Card(_ref) {
7679
8383
  var _useState = useState(false),
7680
8384
  hovered = _useState[0],
7681
8385
  setHovered = _useState[1];
8386
+ var cardTitleId = "card-title-" + title;
8387
+ var cardDescriptionId = "card-desc-" + title;
7682
8388
  var truncatedText = truncateHtmlString(text, 185, true);
7683
8389
  var firstButton = links == null ? void 0 : links[0];
7684
8390
  var _ref2 = firstButton || {},
7685
8391
  _ref2$text = _ref2.text,
7686
8392
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7687
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
8393
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7688
8394
  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
7689
8395
  var secondButton = links == null ? void 0 : links[1];
7690
8396
  var _ref3 = secondButton || {},
7691
8397
  _ref3$text = _ref3.text,
7692
8398
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7693
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
8399
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
7694
8400
  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
7695
8401
  var hoverHandler = function hoverHandler(value) {
7696
8402
  if (value) {
@@ -7702,8 +8408,8 @@ var Card = function Card(_ref) {
7702
8408
  }
7703
8409
  setHovered(value);
7704
8410
  };
7705
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
7706
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
8411
+ var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
8412
+ var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
7707
8413
  return /*#__PURE__*/React__default.createElement(CardContainer, {
7708
8414
  onMouseOver: function onMouseOver() {
7709
8415
  return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -7713,21 +8419,26 @@ var Card = function Card(_ref) {
7713
8419
  },
7714
8420
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
7715
8421
  "data-testid": "cardcontainer",
7716
- isCardClickable: !!firstButton
8422
+ isCardClickable: !!firstButton,
8423
+ role: "region",
8424
+ "aria-labelledby": cardTitleId,
8425
+ "aria-describedby": cardDescriptionId
7717
8426
  }, /*#__PURE__*/React__default.createElement("a", {
7718
8427
  href: firstButton == null ? void 0 : firstButton.href,
7719
8428
  target: firstButton == null ? void 0 : firstButton.target,
7720
8429
  className: "targetLink",
7721
8430
  style: {
7722
8431
  flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
7723
- }
8432
+ },
8433
+ "aria-label": "Navigate to " + title
7724
8434
  }, /*#__PURE__*/React__default.createElement(LabelContainer, {
7725
8435
  isGridCard: isGridCard,
7726
8436
  isVisible: !!labelParams
7727
8437
  }, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
7728
8438
  bgColor: labelParams == null ? void 0 : labelParams.bgColor
7729
- }, /*#__PURE__*/React__default.createElement(Overline, {
7730
- level: 2
8439
+ }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8440
+ size: "small",
8441
+ color: "white"
7731
8442
  }, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
7732
8443
  iconName: labelParams.iconName,
7733
8444
  direction: labelParams.iconDirection,
@@ -7739,24 +8450,36 @@ var Card = function Card(_ref) {
7739
8450
  aspectRatio: AspectRatio['4:3']
7740
8451
  }, /*#__PURE__*/React__default.createElement("img", {
7741
8452
  src: image,
7742
- alt: imageAltText
8453
+ alt: imageAltText || title
7743
8454
  })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
7744
8455
  progress: progress,
7745
- height: 10
8456
+ height: 6
7746
8457
  }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
7747
8458
  fullWidth: fullWidth
7748
8459
  }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
7749
8460
  list: tags
7750
- }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(Header, {
7751
- level: size === 'small' ? 6 : 5
7752
- }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
7753
- level: 6
7754
- }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer$2, {
8461
+ }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
8462
+ id: cardTitleId
8463
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8464
+ hierarchy: "h3",
8465
+ size: "small"
8466
+ }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
8467
+ id: cardTitleId
8468
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8469
+ hierarchy: "h3",
8470
+ size: "medium"
8471
+ }, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8472
+ size: "large"
8473
+ }, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8474
+ size: "large"
8475
+ }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
8476
+ id: cardDescriptionId,
7755
8477
  dangerouslySetInnerHTML: {
7756
8478
  __html: truncatedText
7757
8479
  }
7758
- }), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7759
- level: 1
8480
+ })), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8481
+ size: "large",
8482
+ color: "red"
7760
8483
  }, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
7761
8484
  fullWidth: fullWidth
7762
8485
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
@@ -7768,12 +8491,16 @@ var Card = function Card(_ref) {
7768
8491
  tertiaryButtonTextLength: secondButtonText.length,
7769
8492
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
7770
8493
  fullWidth: fullWidth
7771
- }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
8494
+ }, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
8495
+ "aria-label": firstButtonText
8496
+ }, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
8497
+ "aria-label": secondButtonText
8498
+ }, restSecondButton), tertiaryButtonTextTruncate)))));
7772
8499
  };
7773
8500
 
7774
- var _templateObject$S, _templateObject2$D;
7775
- var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
7776
- var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
8501
+ var _templateObject$V, _templateObject2$G;
8502
+ var CardsContainer = /*#__PURE__*/styled(Grid)(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n @media ", " {\n grid-row-gap: var(--cards-spacing-stack);\n }\n"])), devices.mobile);
8503
+ var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
7777
8504
 
7778
8505
  var Cards = function Cards(_ref) {
7779
8506
  var cards = _ref.cards,
@@ -7815,18 +8542,18 @@ var Cards = function Cards(_ref) {
7815
8542
  }));
7816
8543
  };
7817
8544
 
7818
- var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
7819
- var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
7820
- var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
8545
+ var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
8546
+ var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > div {\n margin-bottom: 2px;\n\n &:first-child {\n margin-bottom: 4px;\n\n @media ", " {\n margin-bottom: 6px;\n }\n }\n }\n\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobile, devices.mobileAndTablet);
8547
+ var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n padding: 30px 0;\n\n @media ", " {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n }\n"])), function (_ref) {
7821
8548
  var hideBottomBorder = _ref.hideBottomBorder;
7822
8549
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
7823
8550
  }, function (_ref2) {
7824
8551
  var hideTopBorder = _ref2.hideTopBorder;
7825
8552
  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
7826
8553
  }, devices.mobileAndTablet);
7827
- var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7828
- var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7829
- var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
8554
+ var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8555
+ var AddressWrapperMobile = /*#__PURE__*/styled.div(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n & > div {\n margin-bottom: 2px;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
8556
+ var DetailsWrapper = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n\n @media ", " {\n flex-direction: column;\n margin: 4px 0;\n }\n\n a {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-decoration: underline;\n\n &:before {\n display: inline-block;\n content: '';\n background-color: var(--base-color-black);\n width: 1px;\n height: 18px;\n margin: 0 8px -4px;\n\n @media ", " {\n display: none;\n }\n }\n\n &:first-child:before {\n display: none;\n }\n }\n"])), devices.mobile, devices.mobile);
7830
8557
 
7831
8558
  var divideAddressString = function divideAddressString(address) {
7832
8559
  return address.split(',').map(function (chunk, i) {
@@ -7883,18 +8610,18 @@ var ContactCard = function ContactCard(_ref) {
7883
8610
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
7884
8611
  };
7885
8612
 
7886
- var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
7887
- var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7888
- var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
8613
+ var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$g, _templateObject7$a;
8614
+ var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8615
+ var ContentSummaryWrapper = /*#__PURE__*/styled.article(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 24px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
7889
8616
  return props.clickable ? 'pointer' : 'default';
7890
8617
  }, devices.mobile);
7891
- var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7892
- var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
8618
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
8619
+ var ContentSummaryTextWrapper = /*#__PURE__*/styled.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 22px;\n\n & > * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n gap: 12px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
7893
8620
  return props.showImage ? 2 : '1 / span 4';
7894
8621
  }, devices.mobile);
7895
- var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
7896
- var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
7897
- var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
8622
+ var ContentSummaryTitleWrapper = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin: 0;\n }\n\n @media ", " {\n & > * {\n font-size: var(--font-size-header-5);\n font-weight: var(--font-weight-header-5);\n }\n }\n"])), devices.mobile);
8623
+ var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
8624
+ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & p:not(:last-child):after {\n content: '\\A\\A';\n white-space: pre;\n }\n\n ", "\n"], ["\n & p:not(:last-child):after {\n content: '\\\\A\\\\A';\n white-space: pre;\n }\n\n ", "\n"])), function (props) {
7898
8625
  return !!props.truncate && "\n overflow: hidden;\n position: relative;\n display: -webkit-box;\n -webkit-line-clamp: " + props.truncate + ";\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n min-height: 1em;\n max-height: 3em;\n ";
7899
8626
  });
7900
8627
 
@@ -7966,21 +8693,21 @@ var ContentSummary = function ContentSummary(_ref) {
7966
8693
  }), link.text))));
7967
8694
  };
7968
8695
 
7969
- var _templateObject$V, _templateObject2$G, _templateObject3$t, _templateObject4$o, _templateObject5$j;
7970
- var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
8696
+ var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$l;
8697
+ var EditorialGrid = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--grid-column-gap);\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: min-content 24px min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2';\n }\n }\n"])), function (_ref) {
7971
8698
  var imageToLeft = _ref.imageToLeft;
7972
8699
  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7973
8700
  }, devices.mobile);
7974
- var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
8701
+ var EditorialImageWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
7975
8702
  var imageToLeft = _ref2.imageToLeft;
7976
8703
  return imageToLeft ? 'left' : 'right';
7977
8704
  }, devices.mobile);
7978
- var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
8705
+ var EditorialTextWrapper = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
7979
8706
  var imageToLeft = _ref3.imageToLeft;
7980
8707
  return imageToLeft ? 'right' : 'left';
7981
8708
  }, devices.mobile);
7982
- var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$o || (_templateObject4$o = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
7983
- var EditorialText = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__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: 0;\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"])));
8709
+ var EditorialSubtitle = /*#__PURE__*/styled.span(_templateObject4$q || (_templateObject4$q = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8710
+ var EditorialText = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__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: 0;\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"])));
7984
8711
 
7985
8712
  var Editorial = function Editorial(_ref) {
7986
8713
  var _ref$imagePosition = _ref.imagePosition,
@@ -8011,26 +8738,82 @@ var Editorial = function Editorial(_ref) {
8011
8738
  })))));
8012
8739
  };
8013
8740
 
8014
- var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$k;
8015
- var InfoContent = /*#__PURE__*/styled('div')(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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 -webkit-letter-spacing: var(--letter-spacing-altHeader-6);\n -moz-letter-spacing: var(--letter-spacing-altHeader-6);\n -ms-letter-spacing: var(--letter-spacing-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n word-break: var(--word-break-altHeader);\n"])));
8016
- var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
8017
- var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
8018
- if (!props.infoThemed) {
8019
- return '';
8741
+ var InformationCtaVariants = {
8742
+ Primary: 'Primary',
8743
+ Secondary: 'Secondary',
8744
+ Tertiary: 'Tertiary',
8745
+ TextLink: 'TextLink'
8746
+ };
8747
+
8748
+ var COLORS$4 = {
8749
+ "default": 'var(--information-panel-button-color)',
8750
+ background: 'var(--information-panel-button-bg-color)',
8751
+ hover: 'var(--information-panel-button-hover-color)',
8752
+ pressed: 'var(--information-panel-button-pressed-color)'
8753
+ };
8754
+ var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
8755
+ if (theme === ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
8756
+ return 'var(--color-primary-black)';
8020
8757
  }
8021
- if (props.variant === IInformationCtaVariant.Primary || props.variant === IInformationCtaVariant.Secondary) {
8022
- return "a {\n color: var(--base-color-black);\n background: var(--base-color-white);\n border-color: var(--base-color-transparent);\n }";
8758
+ if (variant === InformationCtaVariants.Primary) {
8759
+ return COLORS$4["default"];
8023
8760
  }
8024
- return "a {\n color: var(--base-color-white);\n background: var(--base-color-transparent});\n }\n svg > path {\n fill: var(--base-color-white);\n stroke: var(--base-color-white);\n stroke-width: 1;\n }\n ";
8025
- });
8026
- var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
8027
- return props.background !== IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
8028
- }, function (props) {
8029
- return "var(--base-color-" + props.background + ")";
8030
- });
8031
- var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), function (props) {
8032
- return props.background === IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
8761
+ return colorValue;
8762
+ };
8763
+ var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
8764
+ return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
8765
+ };
8766
+ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
8767
+ return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
8768
+ };
8769
+
8770
+ var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
8771
+ var InfoWrapper$1 = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: var(--information-panel-color);\n background-color: var(--information-panel-bg-color);\n\n @media ", " {\n padding: 40px 0;\n }\n"])), devices.mobile);
8772
+ var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
8773
+ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n\n a {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n ", "\n ", "\n\n svg path {\n fill: ", ";\n }\n }\n }\n"])), devices.mobile, function (_ref) {
8774
+ var variant = _ref.variant,
8775
+ theme = _ref.theme;
8776
+ return getTextColor$4(variant, theme, COLORS$4.background);
8777
+ }, function (_ref2) {
8778
+ var variant = _ref2.variant;
8779
+ return getBackgroundColor$2(variant, COLORS$4.background);
8780
+ }, function (_ref3) {
8781
+ var variant = _ref3.variant;
8782
+ return getBorderColor$1(variant, COLORS$4.background);
8783
+ }, function (_ref4) {
8784
+ var variant = _ref4.variant,
8785
+ theme = _ref4.theme;
8786
+ return getTextColor$4(variant, theme, COLORS$4.background);
8787
+ }, function (_ref5) {
8788
+ var variant = _ref5.variant,
8789
+ theme = _ref5.theme;
8790
+ return getTextColor$4(variant, theme, COLORS$4.hover);
8791
+ }, function (_ref6) {
8792
+ var variant = _ref6.variant;
8793
+ return getBackgroundColor$2(variant, COLORS$4.hover);
8794
+ }, function (_ref7) {
8795
+ var variant = _ref7.variant;
8796
+ return getBorderColor$1(variant, COLORS$4.hover);
8797
+ }, function (_ref8) {
8798
+ var variant = _ref8.variant,
8799
+ theme = _ref8.theme;
8800
+ return getTextColor$4(variant, theme, COLORS$4.hover);
8801
+ }, function (_ref9) {
8802
+ var variant = _ref9.variant,
8803
+ theme = _ref9.theme;
8804
+ return getTextColor$4(variant, theme, COLORS$4.pressed);
8805
+ }, function (_ref10) {
8806
+ var variant = _ref10.variant;
8807
+ return getBackgroundColor$2(variant, COLORS$4.pressed);
8808
+ }, function (_ref11) {
8809
+ var variant = _ref11.variant;
8810
+ return getBorderColor$1(variant, COLORS$4.pressed);
8811
+ }, function (_ref12) {
8812
+ var variant = _ref12.variant,
8813
+ theme = _ref12.theme;
8814
+ return getTextColor$4(variant, theme, COLORS$4.pressed);
8033
8815
  });
8816
+ var InfoBodyWrapper = /*#__PURE__*/styled(BodyCopyHarmonic)(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
8034
8817
 
8035
8818
  // Helper function for rendering buttons based on the variant
8036
8819
  var renderButton = function renderButton(_ref) {
@@ -8041,7 +8824,7 @@ var renderButton = function renderButton(_ref) {
8041
8824
  iconDirection = _ref.iconDirection,
8042
8825
  target = _ref.target;
8043
8826
  switch (variant) {
8044
- case IInformationCtaVariant.Secondary:
8827
+ case InformationCtaVariants.Secondary:
8045
8828
  return /*#__PURE__*/React__default.createElement(SecondaryButton, {
8046
8829
  href: link,
8047
8830
  iconName: iconName,
@@ -8049,13 +8832,13 @@ var renderButton = function renderButton(_ref) {
8049
8832
  target: target,
8050
8833
  "aria-label": text
8051
8834
  }, text);
8052
- case IInformationCtaVariant.Tertiary:
8835
+ case InformationCtaVariants.Tertiary:
8053
8836
  return /*#__PURE__*/React__default.createElement(TertiaryButton, {
8054
8837
  href: link,
8055
8838
  target: target,
8056
8839
  "aria-label": text
8057
8840
  }, text);
8058
- case IInformationCtaVariant.TextLink:
8841
+ case InformationCtaVariants.TextLink:
8059
8842
  return /*#__PURE__*/React__default.createElement(TextLink, {
8060
8843
  href: link,
8061
8844
  iconName: iconName,
@@ -8075,17 +8858,17 @@ var renderButton = function renderButton(_ref) {
8075
8858
  };
8076
8859
  var InfoCta = function InfoCta(_ref2) {
8077
8860
  var _ref2$variant = _ref2.variant,
8078
- variant = _ref2$variant === void 0 ? IInformationCtaVariant.Primary : _ref2$variant,
8861
+ variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
8079
8862
  link = _ref2.link,
8080
8863
  text = _ref2.text,
8081
8864
  iconName = _ref2.iconName,
8082
8865
  iconDirection = _ref2.iconDirection,
8083
- infoThemed = _ref2.infoThemed,
8084
8866
  _ref2$target = _ref2.target,
8085
- target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
8867
+ target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
8868
+ theme = _ref2.theme;
8086
8869
  return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
8087
8870
  variant: variant,
8088
- infoThemed: infoThemed
8871
+ theme: theme
8089
8872
  }, renderButton({
8090
8873
  variant: variant,
8091
8874
  link: link,
@@ -8101,40 +8884,28 @@ var smallColumnSpan = 4;
8101
8884
  var largeColumnSpan = 9;
8102
8885
  var mediumWordBreakpoint = 8;
8103
8886
  var longWordBreakpoint = 13;
8104
- var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
8105
- if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
8887
+ var getColumnSpan = function getColumnSpan(longestWordLength) {
8106
8888
  if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
8107
8889
  if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
8108
8890
  return defaultColumnSpan;
8109
8891
  };
8110
- var renderTitle = function renderTitle(props) {
8111
- var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
8112
- return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
8113
- level: headerLevel
8114
- }, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
8115
- level: headerLevel
8116
- }, props.text));
8117
- };
8118
8892
  var Information = function Information(_ref) {
8119
8893
  var body = _ref.body,
8120
8894
  title = _ref.title,
8121
- background = _ref.background,
8122
8895
  cta = _ref.cta,
8123
- className = _ref.className;
8896
+ className = _ref.className,
8897
+ theme = _ref.theme;
8124
8898
  var safeTitle = title || {
8125
8899
  text: '',
8126
- variant: IInformationTitleVariant.Header,
8127
- textSize: 5
8900
+ textSize: 'medium'
8128
8901
  }; // Provide a fallback
8129
8902
  var titleWords = safeTitle.text.split(' ');
8130
8903
  var titleWordLengths = titleWords.map(function (word) {
8131
8904
  return word.length;
8132
8905
  });
8133
8906
  var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
8134
- var titleColumnSpan = getColumnSpan(safeTitle.variant, safeTitle.textSize, maxTitleWordLength);
8135
- var bgColour = background != null ? background : IInformationBackgroundColour.White;
8136
- return /*#__PURE__*/React__default.createElement(InfoWrapper, {
8137
- background: bgColour,
8907
+ var titleColumnSpan = getColumnSpan(maxTitleWordLength);
8908
+ return /*#__PURE__*/React__default.createElement(InfoWrapper$1, {
8138
8909
  "data-testid": "infoWrapper",
8139
8910
  className: className
8140
8911
  }, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -8142,50 +8913,53 @@ var Information = function Information(_ref) {
8142
8913
  columnStartDevice: 2,
8143
8914
  columnSpanDesktop: titleColumnSpan,
8144
8915
  columnSpanDevice: 12
8145
- }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(safeTitle))), /*#__PURE__*/React__default.createElement(GridItem, {
8916
+ }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8917
+ hierarchy: "h2",
8918
+ size: safeTitle.textSize,
8919
+ color: "inherit"
8920
+ }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
8146
8921
  columnStartDesktop: titleColumnSpan + 2,
8147
8922
  columnStartDevice: 2,
8148
8923
  columnSpanDesktop: 14 - titleColumnSpan,
8149
8924
  columnSpanDevice: 12
8150
- }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
8151
- background: bgColour,
8925
+ }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
8152
8926
  dangerouslySetInnerHTML: {
8153
8927
  __html: body
8154
8928
  }
8155
8929
  }), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
8156
8930
  link: cta.link,
8157
8931
  variant: cta.variant,
8158
- infoThemed: bgColour !== IInformationBackgroundColour.White,
8159
8932
  text: cta.text,
8160
8933
  iconName: cta.iconName,
8161
8934
  iconDirection: cta.iconDirection,
8162
- target: cta.target
8935
+ target: cta.target,
8936
+ theme: theme
8163
8937
  })))));
8164
8938
  };
8165
8939
 
8166
- var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$f, _templateObject7$9, _templateObject8$6;
8167
- var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
8940
+ var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
8941
+ var PageHeadingWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: ", ";\n color: var(--base-color-white);\n\n ", ";\n\n // remove spacing above/below for all semantic levels of the title\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
8168
8942
  var theme = _ref.theme;
8169
8943
  return theme.colors.primary;
8170
8944
  }, function (_ref2) {
8171
8945
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
8172
8946
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
8173
8947
  }, devices.mobile);
8174
- var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
8175
- var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
8948
+ var PageHeadingGrid = /*#__PURE__*/styled(Grid)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content;\n grid-template-areas:\n '. . title title title title title title title title title title . . logo .'\n '. . text text text text text text text text text button button button . .';\n\n @media ", " {\n & {\n grid-template-rows: 20px min-content min-content min-content 20px;\n grid-template-areas:\n '. . . . . . . . . . . . . .'\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .'\n '. . . . . . . . . . . . . .';\n }\n }\n\n @media ", " {\n & {\n grid-template-areas:\n '. title title title title title title title title title title logo logo .'\n '. text text text text text text text text text button button button .';\n }\n }\n"])), devices.mobile, devices.tablet);
8949
+ var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: title;\n margin-top: 80px;\n\n ", ";\n\n @media ", " {\n & {\n margin-top: 0;\n }\n }\n"])), function (_ref3) {
8176
8950
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
8177
8951
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
8178
8952
  }, devices.mobile);
8179
- var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
8953
+ var ChildrenWrapper = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
8180
8954
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
8181
8955
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
8182
8956
  }, devices.mobile);
8183
- var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
8184
- var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
8185
- 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);
8186
- 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"])));
8957
+ var TextWrapper = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
8958
+ var LogoWrapper = /*#__PURE__*/styled.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n }\n }\n"])), devices.mobile);
8959
+ var ButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__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);
8960
+ var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__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"])));
8187
8961
 
8188
- var _excluded$j = ["text"];
8962
+ var _excluded$l = ["text"];
8189
8963
  var PageHeading = function PageHeading(_ref) {
8190
8964
  var title = _ref.title,
8191
8965
  text = _ref.text,
@@ -8201,14 +8975,14 @@ var PageHeading = function PageHeading(_ref) {
8201
8975
  titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
8202
8976
  var _ref2 = link || {},
8203
8977
  linkText = _ref2.text,
8204
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
8978
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8205
8979
  var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
8206
8980
  var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
8207
8981
  var isTitleUnAvailable = !title;
8208
8982
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
8209
8983
  "data-testid": "page-heading-wrapper",
8210
8984
  isPageHeadingWithoutTitle: isTitleUnAvailable
8211
- }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
8985
+ }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
8212
8986
  "data-testid": "page-heading-title",
8213
8987
  isPageHeadingWithoutTitle: isTitleUnAvailable
8214
8988
  }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -8229,13 +9003,13 @@ var PageHeading = function PageHeading(_ref) {
8229
9003
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
8230
9004
  };
8231
9005
 
8232
- var _excluded$k = ["link"];
9006
+ var _excluded$m = ["link"];
8233
9007
  var PageHeadingCore = function PageHeadingCore(_ref) {
8234
9008
  var link = _ref.link,
8235
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
9009
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
8236
9010
  var coreLink = link && _extends({}, link, {
8237
- color: Colors.White,
8238
- bgColor: Colors.Black
9011
+ color: ThemeColor['base-white'],
9012
+ bgColor: ThemeColor['base-black']
8239
9013
  });
8240
9014
  return /*#__PURE__*/React__default.createElement(Theme, {
8241
9015
  theme: ThemeType.Core
@@ -8244,13 +9018,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
8244
9018
  })));
8245
9019
  };
8246
9020
 
8247
- var _excluded$l = ["link"];
9021
+ var _excluded$n = ["link"];
8248
9022
  var PageHeadingCinema = function PageHeadingCinema(_ref) {
8249
9023
  var link = _ref.link,
8250
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
9024
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
8251
9025
  var cinemaLink = link && _extends({}, link, {
8252
- color: Colors.Black,
8253
- bgColor: Colors.White
9026
+ color: ThemeColor['base-black'],
9027
+ bgColor: ThemeColor['base-white']
8254
9028
  });
8255
9029
  return /*#__PURE__*/React__default.createElement(Theme, {
8256
9030
  theme: ThemeType.Cinema
@@ -8261,17 +9035,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
8261
9035
  })));
8262
9036
  };
8263
9037
 
8264
- var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$a, _templateObject8$7;
8265
- var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
8266
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
8267
- var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
8268
- var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
8269
- var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
8270
- var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
8271
- 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);
8272
- 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);
9038
+ var _templateObject$$, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
9039
+ var ImpactWrapper = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n position: relative;\n display: flex;\n background: var(--base-color-black);\n\n @media ", " {\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n }\n"])), devices.mobile);
9040
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n overflow: hidden;\n aspect-ratio: 16 / 9;\n @supports not (aspect-ratio: 16 / 9) {\n height: 56.25vw;\n }\n\n img {\n width: 100%;\n filter: brightness(0.7);\n opacity: 0.95;\n }\n\n @media ", " {\n height: fit-content;\n aspect-ratio: 1 / 1;\n @supports not (aspect-ratio: 1 / 1) {\n height: 100vw;\n }\n\n img {\n height: 100%;\n object-fit: cover;\n }\n }\n"])), devices.mobile);
9041
+ var ImpactGrid = /*#__PURE__*/styled(Grid)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n align-self: center;\n width: 100%;\n z-index: ", ";\n gap: 0 var(--grid-column-gap);\n grid-template-rows: min-content min-content min-content;\n grid-template-areas:\n '. . . . . logo logo logo logo logo logo . . . . .'\n '. . . text text text text text text text text text text . . .'\n '. . . button button button button button button button button button button . . .';\n\n @media ", " {\n & {\n height: 100%;\n grid-template-rows: 1fr max-content 1fr;\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. text text text text text text text text text text text text .'\n '. button button button button button button button button button button button button .';\n }\n }\n\n @media ", " {\n align-content: center;\n\n & {\n grid-template-areas:\n '. . . logo logo logo logo logo logo logo logo . . .'\n '. . text text text text text text text text text text . .'\n '. . button button button button button button button button button button . .';\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
9042
+ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
9043
+ var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9044
+ var TextWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: text;\n color: var(--base-color-white);\n text-align: center;\n margin-top: 40px;\n max-height: calc(2 * var(--line-height-header-3));\n overflow: hidden;\n\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n max-height: calc(4 * var(--line-height-header-3));\n }\n }\n\n @media ", " {\n & {\n margin-top: 12px;\n max-height: calc(4 * var(--line-height-header-3));\n }\n\n h3 {\n font-size: var(--font-size-header-3);\n letter-spacing: var(--letter-spacing-header-5);\n line-height: var(--line-height-header-5);\n }\n }\n"])), devices.tablet, devices.mobile);
9045
+ var ButtonWrapper$2 = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__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);
9046
+ var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__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);
8273
9047
 
8274
- var _excluded$m = ["text"];
9048
+ var _excluded$o = ["text"];
8275
9049
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
8276
9050
  var children = _ref.children,
8277
9051
  text = _ref.text,
@@ -8289,7 +9063,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
8289
9063
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
8290
9064
  var _ref2 = link || {},
8291
9065
  linkText = _ref2.text,
8292
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9066
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
8293
9067
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
8294
9068
  bgUrlDesktop: bgUrlDesktop,
8295
9069
  bgUrlDevice: bgUrlDevice,
@@ -8334,21 +9108,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
8334
9108
  }, "Scroll Down"))) : null);
8335
9109
  };
8336
9110
 
8337
- var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$n;
8338
- var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
9111
+ var _templateObject$10, _templateObject2$N, _templateObject3$z, _templateObject4$u, _templateObject5$o;
9112
+ var PanelGrid = /*#__PURE__*/styled(Grid)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n\n ", "\n\n @media ", " {\n grid-template-rows: 48px max-content max-content;\n }\n"])), function (_ref) {
8339
9113
  var color = _ref.color;
8340
9114
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
8341
9115
  }, devices.mobileAndTablet);
8342
- var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
9116
+ var LeftPanel = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0px 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
8343
9117
  var hasImage = _ref2.hasImage;
8344
9118
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
8345
9119
  }, devices.mobileAndTablet, function (_ref3) {
8346
9120
  var hasImage = _ref3.hasImage;
8347
9121
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
8348
9122
  });
8349
- var RightPanel = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
8350
- var InfoWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
8351
- var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\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\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
9123
+ var RightPanel = /*#__PURE__*/styled.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--base-color-black);\n\n @media ", " {\n grid-area: 2 / 1 / 3 / 15;\n }\n"])), devices.mobileAndTablet);
9124
+ var InfoWrapper$2 = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px;\n max-height: 33vw;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
9125
+ var ScrollDownWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0 0 25px 36px;\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\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n display: none;\n }\n"])), devices.mobileAndTablet);
8352
9126
 
8353
9127
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
8354
9128
  var _image$src, _image$alt;
@@ -8362,7 +9136,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
8362
9136
  "data-testid": "wrapper"
8363
9137
  }, /*#__PURE__*/React__default.createElement(LeftPanel, {
8364
9138
  hasImage: hasImage
8365
- }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
9139
+ }, /*#__PURE__*/React__default.createElement(InfoWrapper$2, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
8366
9140
  "data-testid": "scroll-link"
8367
9141
  }, /*#__PURE__*/React__default.createElement(TabLink, {
8368
9142
  iconName: "Arrow",
@@ -8378,16 +9152,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
8378
9152
  })))));
8379
9153
  };
8380
9154
 
8381
- var _templateObject$_;
8382
- var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
9155
+ var _templateObject$11;
9156
+ var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
8383
9157
 
8384
- var _excluded$n = ["link"];
9158
+ var _excluded$p = ["link"];
8385
9159
  var PageHeadingStream = function PageHeadingStream(_ref) {
8386
9160
  var link = _ref.link,
8387
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
9161
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
8388
9162
  var streamLink = link && _extends({}, link, {
8389
- color: Colors.Black,
8390
- bgColor: Colors.White
9163
+ color: ThemeColor['base-black'],
9164
+ bgColor: ThemeColor['base-white']
8391
9165
  });
8392
9166
  return /*#__PURE__*/React__default.createElement(Theme, {
8393
9167
  theme: ThemeType.Stream
@@ -8398,12 +9172,199 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
8398
9172
  }))));
8399
9173
  };
8400
9174
 
8401
- var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$b, _templateObject8$8, _templateObject9$4, _templateObject10$4;
8402
- var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
8403
- var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
8404
- var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8405
- var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
8406
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
9175
+ var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
9176
+ var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9177
+ var ImageWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
9178
+ var SponsorWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n height: 40px;\n width: 40px;\n }\n \n & iframe {\n height: 80px;\n transform: scale(0.5) translate(-40px, -40px);\n width: 80px;\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet, devices.tablet);
9179
+ var ImageButtonWrapper = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n right: var(--grid-outer-margin);\n bottom: 20px;\n z-index: 10;\n\n @media ", " {\n right: var(--grid-margin);\n bottom: 10px;\n }\n"])), devices.tablet);
9180
+ var ContentSection = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--heading-promo-bg-color);\n border-bottom: ", ";\n display: ", ";\n\n @media ", " {\n padding: 12px 0 20px;\n }\n"])), function (_ref) {
9181
+ var theme = _ref.theme;
9182
+ return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
9183
+ }, function (_ref2) {
9184
+ var showBlock = _ref2.showBlock;
9185
+ return showBlock ? 'block' : 'none';
9186
+ }, devices.mobile);
9187
+ var BadgeWrapper$1 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
9188
+ var AdditionalContentWrapper = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: start;\n align-items: center;\n width: 200px;\n\n @media ", " {\n order: ", ";\n width: 100%;\n justify-content: center;\n }\n"])), devices.mobile, function (_ref3) {
9189
+ var isBadgePresent = _ref3.isBadgePresent;
9190
+ return isBadgePresent ? '1' : '4';
9191
+ });
9192
+ var MainButtonWrapper = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: end;\n width: 200px;\n\n @media ", " {\n margin-bottom: ", ";\n width: 100%;\n order: 3;\n }\n"])), devices.mobile, function (_ref4) {
9193
+ var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
9194
+ return isAdditionalButtonPresent ? '20px' : '0';
9195
+ });
9196
+ var AdditionalButtonWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
9197
+ var TitleWrapper$3 = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
9198
+ var theme = _ref5.theme;
9199
+ return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
9200
+ }, devices.mobile, function (_ref6) {
9201
+ var isButtonPresent = _ref6.isButtonPresent;
9202
+ return isButtonPresent ? '20px' : '0';
9203
+ });
9204
+ var ContentWrapper$2 = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
9205
+
9206
+ var PageHeadingPromoBadge;
9207
+ (function (PageHeadingPromoBadge) {
9208
+ PageHeadingPromoBadge["Stream"] = "Stream";
9209
+ PageHeadingPromoBadge["Cinema"] = "Cinema";
9210
+ })(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
9211
+
9212
+ var Badge = function Badge(_ref) {
9213
+ var isMobile = _ref.isMobile,
9214
+ theme = _ref.theme,
9215
+ badge = _ref.badge;
9216
+ if (!badge) return null;
9217
+ var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
9218
+ var alignment = isMobile ? 'center' : 'left';
9219
+ return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
9220
+ "data-testid": "promo-heading-badge"
9221
+ }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
9222
+ fillColor: color,
9223
+ align: alignment
9224
+ })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
9225
+ fillColor: color,
9226
+ align: alignment
9227
+ })));
9228
+ };
9229
+
9230
+ var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
9231
+ var link = _ref.link,
9232
+ theme = _ref.theme;
9233
+ var text = link.text;
9234
+ if (theme === ThemeType.Cinema) {
9235
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9236
+ textColor: ThemeColor['base-white'],
9237
+ backgroundColor: ThemeColor['base-black'],
9238
+ hoveredColor: ThemeColor['rbo-black-hovered'],
9239
+ pressedColor: ThemeColor['rbo-black-pressed']
9240
+ }), text);
9241
+ }
9242
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9243
+ textColor: ThemeColor['base-black'],
9244
+ backgroundColor: ThemeColor['base-white'],
9245
+ hoveredColor: ThemeColor['white-hovered'],
9246
+ pressedColor: ThemeColor['white-pressed']
9247
+ }), text);
9248
+ };
9249
+ var Button$1 = function Button(_ref2) {
9250
+ var link = _ref2.link,
9251
+ theme = _ref2.theme,
9252
+ isMobile = _ref2.isMobile;
9253
+ var text = link.text;
9254
+ if (isMobile) {
9255
+ return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
9256
+ theme: theme,
9257
+ link: link
9258
+ });
9259
+ }
9260
+ var buttonColor = theme === ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
9261
+ if (link.isTextLink) {
9262
+ return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
9263
+ color: buttonColor,
9264
+ iconName: undefined
9265
+ }), text);
9266
+ }
9267
+ return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
9268
+ textColor: buttonColor,
9269
+ borderColor: buttonColor,
9270
+ hoveredColor: buttonColor,
9271
+ pressedColor: buttonColor
9272
+ }), text);
9273
+ };
9274
+
9275
+ var Image = function Image(_ref) {
9276
+ var desktop = _ref.desktop,
9277
+ mobile = _ref.mobile,
9278
+ alt = _ref.alt;
9279
+ var isMobile = useMobile();
9280
+ return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
9281
+ aspectRatio: isMobile ? AspectRatio['75:32'] : AspectRatio['90:17']
9282
+ }, /*#__PURE__*/React__default.createElement("picture", {
9283
+ "data-testid": "promo-heading-picture"
9284
+ }, /*#__PURE__*/React__default.createElement("source", {
9285
+ srcSet: mobile,
9286
+ media: "(max-width: 768px)"
9287
+ }), /*#__PURE__*/React__default.createElement("source", {
9288
+ srcSet: desktop,
9289
+ media: "(min-width: 769px)"
9290
+ }), /*#__PURE__*/React__default.createElement("img", {
9291
+ src: desktop,
9292
+ alt: alt,
9293
+ "data-testid": "promo-heading-image"
9294
+ })));
9295
+ };
9296
+
9297
+ var TITLE_MAX_LENGTH = 40;
9298
+ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9299
+ var _ref$sponsor = _ref.sponsor,
9300
+ sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
9301
+ className = _ref.className,
9302
+ theme = _ref.theme,
9303
+ badge = _ref.badge,
9304
+ mainLink = _ref.mainLink,
9305
+ title = _ref.title,
9306
+ titleSemanticLevel = _ref.titleSemanticLevel,
9307
+ additionalLink = _ref.additionalLink,
9308
+ image = _ref.image;
9309
+ var isMobile = useMobile();
9310
+ var showImageButton = !title && !badge && !additionalLink && !isMobile;
9311
+ var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
9312
+ var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
9313
+ return /*#__PURE__*/React__default.createElement(Wrapper$5, {
9314
+ className: className
9315
+ }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9316
+ "data-testid": "promo-heading-sponsor"
9317
+ }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
9318
+ mobile: image.mobile,
9319
+ desktop: image.desktop,
9320
+ alt: image.alt
9321
+ }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
9322
+ "data-testid": "promo-heading-image-button"
9323
+ }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
9324
+ textColor: ThemeColor['base-black'],
9325
+ backgroundColor: ThemeColor['base-white'],
9326
+ hoveredColor: ThemeColor['white-hovered'],
9327
+ pressedColor: ThemeColor['white-pressed']
9328
+ }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
9329
+ theme: theme,
9330
+ showBlock: showContentBlock
9331
+ }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
9332
+ columnStartDesktop: 2,
9333
+ columnSpanDesktop: 14,
9334
+ columnStartDevice: 2,
9335
+ columnSpanDevice: 12
9336
+ }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
9337
+ theme: theme
9338
+ }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9339
+ isBadgePresent: !!badge
9340
+ }, /*#__PURE__*/React__default.createElement(Badge, {
9341
+ theme: theme,
9342
+ badge: badge,
9343
+ isMobile: isMobile
9344
+ }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
9345
+ theme: theme,
9346
+ link: additionalLink
9347
+ }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9348
+ theme: theme,
9349
+ isButtonPresent: !!mainLink || !!additionalLink
9350
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9351
+ hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
9352
+ size: "large"
9353
+ }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
9354
+ isAdditionalButtonPresent: !!additionalLink && !badge
9355
+ }, /*#__PURE__*/React__default.createElement(Button$1, {
9356
+ theme: theme,
9357
+ link: mainLink,
9358
+ isMobile: isMobile
9359
+ }))))))));
9360
+ };
9361
+
9362
+ var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;
9363
+ var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
9364
+ var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-body);\n font-size: var(--font-size-heading-6);\n line-height: var(--line-height-heading-6);\n"])));
9365
+ var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9366
+ var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 37.5vw;\n width: 100%;\n position: relative;\n overflow: hidden;\n background-color: #000;\n img {\n position: relative;\n height: 100%;\n width: 100%;\n object-fit: cover;\n }\n video {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n object-fit: contain;\n @media ", " {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n margin: auto;\n height: auto;\n max-height: 100vh;\n width: 100%;\n object-fit: contain;\n }\n }\n @media ", " {\n height: 85vw;\n max-height: 100vh;\n }\n"])), devices.mobile, devices.mobile);
9367
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n height: 160px;\n grid-template-rows: min-content min-content;\n grid-template-rows: min-content min-content;\n grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n align-content: center;\n gap: 0;\n background-color: ", ";\n color: ", ";\n\n svg {\n width: 210px;\n fill: ", ";\n }\n\n h1::selection,\n div::selection {\n ", ";\n }\n\n @media ", " {\n svg {\n width: 145px;\n }\n }\n\n @media ", " {\n display: flex;\n flex-direction: column;\n height: auto;\n padding: 32px 20px;\n\n svg {\n width: 180px;\n }\n }\n"])), function (_ref) {
8407
9368
  var invert = _ref.invert,
8408
9369
  theme = _ref.theme;
8409
9370
  return invert ? theme.colors.white : theme.colors.primary;
@@ -8419,10 +9380,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$h || (
8419
9380
  var theme = _ref4.theme;
8420
9381
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
8421
9382
  }, devices.tablet, devices.mobile);
8422
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
8423
- var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
8424
- var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
8425
- var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
9383
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: logo;\n padding-left: 50px;\n justify-content: left;\n align-items: center;\n width: 100%;\n @media ", " {\n padding-left: 0px;\n justify-content: center;\n }\n @media ", " {\n width: fit-content;\n }\n"])), devices.mobile, devices.tablet);
9384
+ var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
9385
+ var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: cta;\n justify-content: right;\n align-items: center;\n padding-right: 50px;\n @media ", " {\n padding-right: 0px;\n justify-content: center;\n }\n"])), devices.mobile);
9386
+ var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
8426
9387
  var invert = _ref5.invert,
8427
9388
  theme = _ref5.theme;
8428
9389
  return invert ? theme.colors.primary : theme.colors.white;
@@ -8474,7 +9435,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
8474
9435
  // eslint-disable-next-line react-hooks/rules-of-hooks
8475
9436
  var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
8476
9437
  var target = sameSiteUrl ? '_self' : '_blank';
8477
- var color = invert ? Colors.Black : Colors.White;
9438
+ var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
8478
9439
  switch (brandingStyle) {
8479
9440
  case 'BlockText':
8480
9441
  return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
@@ -8511,7 +9472,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8511
9472
  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
8512
9473
  };
8513
9474
 
8514
- var _excluded$o = ["text"];
9475
+ var _excluded$q = ["text"];
8515
9476
  var useResponsiveVideo = function useResponsiveVideo(video, poster) {
8516
9477
  var mobileVideo = video.mobile || video.desktop;
8517
9478
  var desktopVideo = video.desktop || video.mobile;
@@ -8618,7 +9579,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8618
9579
  semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
8619
9580
  var _ref5 = link || {},
8620
9581
  linkText = _ref5.text,
8621
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
9582
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$q);
8622
9583
  var titleSize = title && title.length > 20 ? 4 : 3;
8623
9584
  var video = {
8624
9585
  elementId: 'compact-header-video',
@@ -8656,15 +9617,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8656
9617
  }), linkText))))));
8657
9618
  };
8658
9619
 
8659
- var _templateObject$10, _templateObject2$M, _templateObject3$z, _templateObject4$t;
8660
- var MorePages = /*#__PURE__*/styled.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
8661
- var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"])));
9620
+ var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
9621
+ var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9622
+ var PageNumberWrapper = /*#__PURE__*/styled.ol(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 40px;\n margin-bottom: 40px;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0);\n }\n"])));
8662
9623
  // PageNumber extends bodyText but uses subtitle-1 font size
8663
- var PageNumber = /*#__PURE__*/styled.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
9624
+ var PageNumber = /*#__PURE__*/styled.a(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: inherit;\n margin: 0;\n border-bottom: 1px solid transparent;\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n :hover {\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n /* active state - string used because react returns error for bool */\n ", "\n"])), function (_ref) {
8664
9625
  var active = _ref.active;
8665
9626
  return active === 'true' && " \n color: var(--base-color-core);\n ";
8666
9627
  });
8667
- var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
9628
+ var NextPage = /*#__PURE__*/styled(PageNumber)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
8668
9629
 
8669
9630
  var reducePages = function reducePages(pages, currentPage) {
8670
9631
  // If there are less than 6 pages, return all pages
@@ -8730,14 +9691,14 @@ var Pagination = function Pagination(_ref) {
8730
9691
  })))));
8731
9692
  };
8732
9693
 
8733
- var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$c;
8734
- var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
8735
- var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
8736
- var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
8737
- var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
8738
- var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
8739
- var PersonLink = /*#__PURE__*/styled.a(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
8740
- var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9694
+ var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9695
+ var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n p {\n margin: 0;\n }\n\n grid-template-columns: 1fr 1fr 1fr;\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr;\n }\n\n @media ", " {\n grid-template-columns: 1fr 1fr 1fr 1fr;\n }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
9696
+ var PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 60px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 10px;\n"])));
9697
+ var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 60px;\n height: 60px;\n }\n"])));
9698
+ var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n overflow-wrap: break-word;\n margin-bottom: 4px;\n"])));
9699
+ var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9700
+ var PersonLink = /*#__PURE__*/styled.a(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n text-decoration: underline;\n\n :hover {\n color: var(--base-color-primary);\n :after {\n color: var(--base-color-black);\n }\n }\n\n :visited {\n color: var(--base-color-black);\n }\n"])));
9701
+ var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
8741
9702
 
8742
9703
  var Person = function Person(_ref) {
8743
9704
  var person = _ref.person,
@@ -8794,14 +9755,14 @@ var PeopleListing = function PeopleListing(_ref) {
8794
9755
  }));
8795
9756
  };
8796
9757
 
8797
- var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$v;
8798
- var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8799
- var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
9758
+ var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y;
9759
+ var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9760
+ var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n\n grid-template-columns: ", ";\n\n @media ", " {\n grid-template-columns: 1fr;\n }\n\n @media ", " {\n grid-template-columns: repeat(2, 1fr);\n }\n"])), function (_ref) {
8800
9761
  var columnCount = _ref.columnCount;
8801
9762
  return "repeat(" + columnCount + ", 1fr)";
8802
9763
  }, devices.mobile, devices.tablet);
8803
- var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8804
- var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
9764
+ var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
9765
+ var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8805
9766
 
8806
9767
  // Get the total character length of a property in an array of objects
8807
9768
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8861,8 +9822,8 @@ var CreditListing = function CreditListing(_ref) {
8861
9822
  var span = namesLength > characterThreshold ? largeColumnSpan : 1;
8862
9823
  var unboundedEnd = nextColumnStart + span;
8863
9824
  var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
8864
- var columnEnd = start + span;
8865
- nextColumnStart = columnEnd % columnCount || columnCount;
9825
+ var end = start + span;
9826
+ nextColumnStart = end % columnCount || columnCount;
8866
9827
  return {
8867
9828
  columnStart: start,
8868
9829
  columnSpan: span
@@ -8919,14 +9880,14 @@ var CreditListing = function CreditListing(_ref) {
8919
9880
  }, creditEntries);
8920
9881
  };
8921
9882
 
8922
- var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$d, _templateObject8$9, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
9883
+ var _templateObject$17, _templateObject2$T, _templateObject3$F, _templateObject4$z, _templateObject5$s, _templateObject6$m, _templateObject7$g, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
8923
9884
  var LENGTH_TEXT = 28;
8924
9885
  var LENGTH_TEXT_TABLET$1 = 12;
8925
9886
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
8926
9887
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
8927
9888
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
8928
9889
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
8929
- var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
9890
+ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n\n /* Overwrite template for card */\n ", "\n"])), function (_ref) {
8930
9891
  var imageToLeft = _ref.imageToLeft;
8931
9892
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
8932
9893
  }, devices.tablet, function (_ref2) {
@@ -8936,9 +9897,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$13 || (_templa
8936
9897
  var asCard = _ref3.asCard;
8937
9898
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
8938
9899
  });
8939
- var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$P || (_templateObject2$P = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
8940
- var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__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: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
8941
- var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
9900
+ var PromoWithTagsSubtitle = /*#__PURE__*/styled.span(_templateObject2$T || (_templateObject2$T = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
9901
+ var PromoWithTagsText = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__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: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
9902
+ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 24px;\n\n ", ";\n\n ", "\n\n @media ", " {\n gap: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref4) {
8942
9903
  var hasTextLinks = _ref4.hasTextLinks;
8943
9904
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
8944
9905
  }, function (_ref5) {
@@ -8962,22 +9923,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$w || (_templat
8962
9923
  }
8963
9924
  return '';
8964
9925
  });
8965
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
9926
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
8966
9927
  var marginBottom = _ref7.marginBottom;
8967
9928
  return marginBottom + "px";
8968
9929
  });
8969
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
8970
- var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8971
- var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8972
- var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
8973
- var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateObject10$5 = /*#__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);
8974
- var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8975
- var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$2 || (_templateObject12$2 = /*#__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);
8976
- var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8977
- var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8978
- var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8979
- 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);
8980
- var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref8) {
9930
+ var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
9931
+ var TextLinksContainer = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
9932
+ var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
9933
+ var ExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
9934
+ var IconWrapper$2 = /*#__PURE__*/styled.div(_templateObject10$7 || (_templateObject10$7 = /*#__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);
9935
+ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
9936
+ var MobileTitleWrapper = /*#__PURE__*/styled.div(_templateObject12$3 || (_templateObject12$3 = /*#__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);
9937
+ var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9938
+ var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9939
+ var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9940
+ var asCardOverrides = /*#__PURE__*/css(_templateObject16$1 || (_templateObject16$1 = /*#__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);
9941
+ var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled.div(_templateObject17$1 || (_templateObject17$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-area: left;\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref8) {
8981
9942
  var imageToLeft = _ref8.imageToLeft;
8982
9943
  return imageToLeft ? 'left' : 'right';
8983
9944
  }, devices.mobile);
@@ -8992,16 +9953,16 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject18 || (
8992
9953
  return asCard && asCardOverrides;
8993
9954
  });
8994
9955
  var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
8995
- var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
9956
+ var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
8996
9957
  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);
8997
9958
 
8998
- var _excluded$p = ["text"],
8999
- _excluded2$2 = ["text"],
9959
+ var _excluded$r = ["text"],
9960
+ _excluded2$4 = ["text"],
9000
9961
  _excluded3 = ["text"];
9001
- var _buttonTypeToButton$1;
9962
+ var _buttonTypeToButton$2;
9002
9963
  var LENGTH_TEXT$1 = 28;
9003
9964
  var LENGTH_TEXT_PARAGRAPH = 130;
9004
- var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
9965
+ var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
9005
9966
  var PromoWithTags = function PromoWithTags(_ref) {
9006
9967
  var _ref$imagePosition = _ref.imagePosition,
9007
9968
  imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
@@ -9058,17 +10019,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
9058
10019
  var _ref2 = firstButton || {},
9059
10020
  _ref2$text = _ref2.text,
9060
10021
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9061
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
10022
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
9062
10023
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
9063
10024
  var secondButton = links == null ? void 0 : links[1];
9064
10025
  var _ref3 = secondButton || {},
9065
10026
  _ref3$text = _ref3.text,
9066
10027
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
9067
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
10028
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
9068
10029
  var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
9069
10030
  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
9070
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
9071
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
10031
+ var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
10032
+ var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
9072
10033
  var textLinkItems = textLinks ? textLinks.map(function (link, index) {
9073
10034
  var _link$text = link.text,
9074
10035
  textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -9086,7 +10047,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
9086
10047
  level: 5
9087
10048
  }, timerParams.endDateText));
9088
10049
  }
9089
- return /*#__PURE__*/React__default.createElement(TimerWrapper$1, {
10050
+ return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
9090
10051
  "data-testid": "promo-with-tags-timer-wrapper"
9091
10052
  }, /*#__PURE__*/React__default.createElement(Timer, {
9092
10053
  endDateHandler: function endDateHandler() {
@@ -9171,28 +10132,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
9171
10132
  }))));
9172
10133
  };
9173
10134
 
9174
- var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$e;
10135
+ var _templateObject$18, _templateObject2$U, _templateObject3$G, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h;
9175
10136
  var LENGTH_TEXT$2 = 28;
9176
10137
  var LENGTH_TEXT_TABLET$2 = 10;
9177
- var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
10138
+ var PromoWithTitleGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-template-areas: ", ";\n\n @media ", " {\n & {\n grid-template-areas: ", ";\n }\n }\n\n @media ", " {\n & {\n grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n grid-template-rows: min-content 24px min-content;\n gap: 0;\n grid-template-areas:\n 'row1 row1 row1'\n '. . .'\n '. row2 .';\n }\n }\n"])), function (_ref) {
9178
10139
  var imageToLeft = _ref.imageToLeft;
9179
10140
  return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
9180
10141
  }, devices.tablet, function (_ref2) {
9181
10142
  var imageToLeft = _ref2.imageToLeft;
9182
10143
  return imageToLeft ? "'left left left left left left left right right right right right right .'" : "'. left left left left left left right right right right right right right'";
9183
10144
  }, devices.mobile);
9184
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
10145
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
9185
10146
  var imageToLeft = _ref3.imageToLeft;
9186
10147
  return imageToLeft ? 'left' : 'right';
9187
10148
  }, devices.mobile);
9188
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
10149
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
9189
10150
  var imageToLeft = _ref4.imageToLeft;
9190
10151
  return imageToLeft ? 'right' : 'left';
9191
10152
  }, devices.mobile);
9192
- var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
9193
- var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
9194
- var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\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 margin: 0;\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\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
9195
- var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
10153
+ var PromoWithTitleContainer = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 32px;\n\n @media ", " {\n & {\n margin: 0 0 24px;\n }\n }\n }\n"])), devices.mobile);
10154
+ var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$t || (_templateObject5$t = /*#__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-1);\n font-weight: var(--font-weight-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
10155
+ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__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: 0;\n padding: 0;\n white-space: break-spaces;\n overflow-wrap: break-word;\n\n h5,\n h6 {\n margin: 0 0 4px 0;\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 overflow-wrap: break-word;\n }\n\n em {\n font-family: var(--font-family-body-italics);\n }\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n"])));
10156
+ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
9196
10157
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
9197
10158
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
9198
10159
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -9214,8 +10175,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$e || (_templat
9214
10175
  return '';
9215
10176
  });
9216
10177
 
9217
- var _templateObject$15;
9218
- var VideoContainer = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
10178
+ var _templateObject$19;
10179
+ var VideoContainer = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n aspect-ratio: ", ";\n\n @supports not (aspect-ratio: ", ") {\n width: 100%;\n padding-top: ", "%;\n }\n\n video {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @supports not (aspect-ratio: ", ") {\n position: absolute;\n top: 0;\n left: 0;\n }\n }\n"])), function (_ref) {
9219
10180
  var _ref$aspectRatio = _ref.aspectRatio,
9220
10181
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
9221
10182
  return aspectRatio;
@@ -9246,19 +10207,6 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
9246
10207
  return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
9247
10208
  };
9248
10209
 
9249
- /**
9250
- * Generates a random string in the format XXX-XXX.
9251
- * Does not meet UUID standards.
9252
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
9253
- *
9254
- * @return {string} A random string in the format XXX-XXX.
9255
- */
9256
- var generateDomElementId = function generateDomElementId() {
9257
- var randomPart = Math.floor(100 + Math.random() * 900).toString();
9258
- var datePart = Date.now().toString().slice(-3);
9259
- return randomPart + "-" + datePart;
9260
- };
9261
-
9262
10210
  var VideoWithControls$1 = function VideoWithControls(_ref) {
9263
10211
  var video = _ref.video,
9264
10212
  settings = _ref.settings;
@@ -9340,8 +10288,8 @@ var PromoChild = function PromoChild(_ref) {
9340
10288
  }));
9341
10289
  };
9342
10290
 
9343
- var _excluded$q = ["text"],
9344
- _excluded2$3 = ["text"];
10291
+ var _excluded$s = ["text"],
10292
+ _excluded2$5 = ["text"];
9345
10293
  var LENGTH_TEXT$3 = 28;
9346
10294
  var PromoWithTitle = function PromoWithTitle(_ref) {
9347
10295
  var _ref$imagePosition = _ref.imagePosition,
@@ -9350,28 +10298,29 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9350
10298
  title = _ref$title === void 0 ? '' : _ref$title,
9351
10299
  _ref$titleSize = _ref.titleSize,
9352
10300
  titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
9353
- titleHierarchy = _ref.titleHierarchy,
9354
10301
  subtitle = _ref.subtitle,
9355
10302
  text = _ref.text,
9356
10303
  links = _ref.links,
9357
10304
  children = _ref.children,
9358
10305
  videoSettings = _ref.videoSettings,
10306
+ titleSemanticLevel = _ref.titleSemanticLevel,
9359
10307
  className = _ref.className;
9360
10308
  var truncate = function truncate(str, n) {
9361
10309
  return str.length >= n ? str.substr(0, n) : str;
9362
10310
  };
9363
10311
  var imageToLeft = imagePosition === 'left';
10312
+ var titleLevel = titleSize === 'large' ? 2 : 3;
9364
10313
  var primaryButton = links == null ? void 0 : links[0];
9365
10314
  var _ref2 = primaryButton || {},
9366
10315
  _ref2$text = _ref2.text,
9367
10316
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9368
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
10317
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
9369
10318
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
9370
10319
  var tertiaryButton = links == null ? void 0 : links[1];
9371
10320
  var _ref3 = tertiaryButton || {},
9372
10321
  _ref3$text = _ref3.text,
9373
10322
  tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
9374
- restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
10323
+ restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
9375
10324
  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
9376
10325
  var defaultVideoSettings = {
9377
10326
  muted: true,
@@ -9384,15 +10333,19 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9384
10333
  imageToLeft: imageToLeft,
9385
10334
  className: className,
9386
10335
  "data-testid": "promo-with-title"
9387
- }, /*#__PURE__*/React__default.createElement(PromoChild, {
10336
+ }, /*#__PURE__*/React__default.createElement(PromoChild
10337
+ // eslint-disable-next-line react/no-children-prop
10338
+ , {
10339
+ // eslint-disable-next-line react/no-children-prop
10340
+ children: children,
9388
10341
  videoSettings: _extends({}, defaultVideoSettings, videoSettings),
9389
10342
  imageToLeft: imageToLeft
9390
- }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
10343
+ }), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
9391
10344
  "data-testid": "content-wrapper",
9392
10345
  imageToLeft: imageToLeft
9393
- }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9394
- size: titleSize,
9395
- hierarchy: titleHierarchy
10346
+ }, /*#__PURE__*/React__default.createElement(PromoWithTitleContainer, null, /*#__PURE__*/React__default.createElement(Header, {
10347
+ level: titleLevel,
10348
+ semanticLevel: titleSemanticLevel != null ? titleSemanticLevel : titleLevel
9396
10349
  }, title)), subtitle ? /*#__PURE__*/React__default.createElement(PromoWithTitleSubtitle, null, subtitle) : null, /*#__PURE__*/React__default.createElement(PromoWithTitleText, {
9397
10350
  dangerouslySetInnerHTML: {
9398
10351
  __html: text
@@ -9404,8 +10357,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9404
10357
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
9405
10358
  };
9406
10359
 
9407
- var _templateObject$16;
9408
- var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
10360
+ var _templateObject$1a;
10361
+ var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9409
10362
 
9410
10363
  /**
9411
10364
  * DEPRECATED. Use RadioGroup2 instead
@@ -9460,9 +10413,9 @@ var RadioGroup = function RadioGroup(_ref) {
9460
10413
  })));
9461
10414
  };
9462
10415
 
9463
- var _templateObject$17, _templateObject2$R, _templateObject3$E;
9464
- var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9465
- var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
10416
+ var _templateObject$1b, _templateObject2$V, _templateObject3$H;
10417
+ var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10418
+ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9466
10419
  var horizontalMode = _ref.horizontalMode;
9467
10420
  if (horizontalMode) return 'row';
9468
10421
  return 'column';
@@ -9470,7 +10423,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObjec
9470
10423
  var gap = _ref2.gap;
9471
10424
  return gap + "px";
9472
10425
  });
9473
- var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
10426
+ var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9474
10427
  var darkMode = _ref3.darkMode;
9475
10428
  if (darkMode) return 'var(--base-color-white)';
9476
10429
  return 'var(--base-color-errorstate)';
@@ -9547,10 +10500,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9547
10500
  }, error))));
9548
10501
  };
9549
10502
 
9550
- var _templateObject$18, _templateObject2$S, _templateObject3$F;
9551
- var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
9552
- var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
9553
- var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
10503
+ var _templateObject$1c, _templateObject2$W, _templateObject3$I;
10504
+ var StatusBannerWrapper = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-light-grey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
10505
+ var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
10506
+ var SvgContainer$3 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
9554
10507
 
9555
10508
  /* eslint-disable react/no-danger */
9556
10509
  var StatusBanner = function StatusBanner(_ref) {
@@ -9606,8 +10559,8 @@ var StatusBanner = function StatusBanner(_ref) {
9606
10559
  return null;
9607
10560
  };
9608
10561
 
9609
- var _templateObject$19;
9610
- var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
10562
+ var _templateObject$1d;
10563
+ var SectionTitleWrapper = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
9611
10564
 
9612
10565
  var SectionTitle = function SectionTitle(_ref) {
9613
10566
  var title = _ref.title,
@@ -9635,8 +10588,8 @@ var SectionTitle = function SectionTitle(_ref) {
9635
10588
  }, description)))));
9636
10589
  };
9637
10590
 
9638
- var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9639
- var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /*#__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) {
10591
+ var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$5;
10592
+ var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /*#__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) {
9640
10593
  var theme = _ref.theme;
9641
10594
  return "3px solid " + theme.colors.lapisLazuli;
9642
10595
  }, function (_ref2) {
@@ -9646,12 +10599,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1a || (_templateObject$1a = /
9646
10599
  var theme = _ref3.theme;
9647
10600
  return theme.colors.lightgrey;
9648
10601
  });
9649
- var borderStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
10602
+ var borderStyles = /*#__PURE__*/css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9650
10603
  var theme = _ref4.theme;
9651
10604
  return theme.colors.darkgrey;
9652
10605
  });
9653
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9654
- var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10606
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10607
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9655
10608
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
9656
10609
  var theme = _ref5.theme;
9657
10610
  return {
@@ -9659,11 +10612,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
9659
10612
  color: theme.colors.black,
9660
10613
  title: 'Select Arrow'
9661
10614
  };
9662
- })(_templateObject5$s || (_templateObject5$s = /*#__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"])));
9663
- var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9664
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9665
- var Options = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9666
- var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10615
+ })(_templateObject5$u || (_templateObject5$u = /*#__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"])));
10616
+ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10617
+ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10618
+ var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10619
+ var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9667
10620
  var theme = _ref6.theme,
9668
10621
  hover = _ref6.hover;
9669
10622
  var _theme$colors = theme.colors,
@@ -9673,9 +10626,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 =
9673
10626
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
9674
10627
  });
9675
10628
  var selectStyles = function selectStyles(width, height) {
9676
- return css(_templateObject10$6 || (_templateObject10$6 = _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);
10629
+ return css(_templateObject10$8 || (_templateObject10$8 = _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);
9677
10630
  };
9678
- 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) {
10631
+ var SelectList = /*#__PURE__*/styled.ul(_templateObject11$5 || (_templateObject11$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
9679
10632
  var width = _ref7.width,
9680
10633
  height = _ref7.height;
9681
10634
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9969,7 +10922,7 @@ function Select(_ref3) {
9969
10922
  }
9970
10923
  setSelectedValue(options[0]);
9971
10924
  }, [options, resetWhenOptionsUpdate]);
9972
- return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
10925
+ return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
9973
10926
  level: 1,
9974
10927
  tag: "p",
9975
10928
  "data-testid": "select-label"
@@ -10016,9 +10969,9 @@ function Select(_ref3) {
10016
10969
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
10017
10970
  }
10018
10971
 
10019
- var _templateObject$1b, _templateObject2$U, _templateObject3$H, _templateObject4$z;
10020
- var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10021
- var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
10972
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$C;
10973
+ var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10974
+ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-select__menu-notice {\n padding: 20px 20px;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-1);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n color: var(--base-color-black);\n text-align: left;\n }\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
10022
10975
  var width = _ref.width;
10023
10976
  if (!width) return 'none';
10024
10977
  return width + "px";
@@ -10035,18 +10988,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$U || (_templateOb
10035
10988
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
10036
10989
  return "0 0 0 3px var(--base-color-lapislazuli)";
10037
10990
  });
10038
- var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
10991
+ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
10039
10992
  var darkMode = _ref5.darkMode;
10040
10993
  if (darkMode) return "var(--base-color-white)";
10041
10994
  return "var(--base-color-black)";
10042
10995
  });
10043
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
10996
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
10044
10997
  var darkMode = _ref6.darkMode;
10045
10998
  if (darkMode) return "var(--base-color-white)";
10046
10999
  return "var(--base-color-errorstate)";
10047
11000
  });
10048
11001
 
10049
- var _excluded$r = ["label", "error", "width", "darkMode", "isSearchable", "components"];
11002
+ var _excluded$t = ["label", "error", "width", "darkMode", "isSearchable", "components"];
10050
11003
  var DropdownIndicator = function DropdownIndicator(props) {
10051
11004
  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
10052
11005
  iconName: "DropdownArrow"
@@ -10097,7 +11050,7 @@ var SelectComponent = function SelectComponent(_ref2) {
10097
11050
  _ref2$isSearchable = _ref2.isSearchable,
10098
11051
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
10099
11052
  components = _ref2.components,
10100
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
11053
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
10101
11054
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10102
11055
  label: label,
10103
11056
  error: error,
@@ -10115,7 +11068,7 @@ var SelectComponent = function SelectComponent(_ref2) {
10115
11068
  })));
10116
11069
  };
10117
11070
 
10118
- var _excluded$s = ["label", "error", "width", "darkMode", "components"];
11071
+ var _excluded$u = ["label", "error", "width", "darkMode", "components"];
10119
11072
  /**
10120
11073
  * The Select2Async component is similar to Select 2, but uses react-select async
10121
11074
  * component for select instead of regular react-select component. This can be used
@@ -10137,7 +11090,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
10137
11090
  _ref$darkMode = _ref.darkMode,
10138
11091
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
10139
11092
  components = _ref.components,
10140
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
11093
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
10141
11094
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10142
11095
  label: label,
10143
11096
  error: error,
@@ -10154,8 +11107,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
10154
11107
  })));
10155
11108
  };
10156
11109
 
10157
- var _templateObject$1c, _templateObject2$V;
10158
- var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObject$1c = /*#__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"])), StyledImageAspectRatioWrapper, function (_ref) {
11110
+ var _templateObject$1g, _templateObject2$Z;
11111
+ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObject$1g = /*#__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"])), StyledImageAspectRatioWrapper, function (_ref) {
10159
11112
  var _ref$aspectRatio = _ref.aspectRatio,
10160
11113
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
10161
11114
  return aspectRatio;
@@ -10165,7 +11118,7 @@ var Wrapper$6 = /*#__PURE__*/styled.figure(_templateObject$1c || (_templateObjec
10165
11118
  height = _ref2.height;
10166
11119
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
10167
11120
  });
10168
- var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\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 letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
11121
+ var CaptionWrapper = /*#__PURE__*/styled.figcaption(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\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 letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
10169
11122
 
10170
11123
  var ImageWithCaption = function ImageWithCaption(_ref) {
10171
11124
  var caption = _ref.caption,
@@ -10186,7 +11139,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10186
11139
  return window.removeEventListener('resize', setWrapperHeight);
10187
11140
  };
10188
11141
  }, []);
10189
- return /*#__PURE__*/React__default.createElement(Wrapper$6, {
11142
+ return /*#__PURE__*/React__default.createElement(Wrapper$7, {
10190
11143
  aspectRatio: aspectRatio,
10191
11144
  ref: wrapperRef,
10192
11145
  height: height
@@ -10199,13 +11152,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
10199
11152
  })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
10200
11153
  };
10201
11154
 
10202
- var _templateObject$1d, _templateObject2$W, _templateObject3$I;
10203
- var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
10204
- var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
11155
+ var _templateObject$1h, _templateObject2$_, _templateObject3$L;
11156
+ var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
11157
+ var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
10205
11158
  var displayAttribution = _ref.displayAttribution;
10206
11159
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
10207
11160
  });
10208
- var Line$1 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
11161
+ var Line$1 = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
10209
11162
 
10210
11163
  /* eslint-disable react/no-danger */
10211
11164
  var Quote = function Quote(_ref) {
@@ -10230,13 +11183,13 @@ var Quote = function Quote(_ref) {
10230
11183
  }, attribution))));
10231
11184
  };
10232
11185
 
10233
- var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
10234
- var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
10235
- var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10236
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10237
- var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10238
- var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__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);
10239
- var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$m || (_templateObject6$m = /*#__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);
11186
+ var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$p;
11187
+ var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$1i || (_templateObject$1i = /*#__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"])));
11188
+ var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
11189
+ var StyledImage = /*#__PURE__*/styled.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11190
+ var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11191
+ var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$v || (_templateObject5$v = /*#__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);
11192
+ var TitleWrapper$4 = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__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);
10240
11193
 
10241
11194
  var MiniCard = function MiniCard(_ref) {
10242
11195
  var _ref$title = _ref.title,
@@ -10254,7 +11207,7 @@ var MiniCard = function MiniCard(_ref) {
10254
11207
  columnSpanDevice: 3,
10255
11208
  columnStartDesktop: 1,
10256
11209
  columnSpanDesktop: 3
10257
- }, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
11210
+ }, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
10258
11211
  aspectRatio: AspectRatio['4:3']
10259
11212
  }, /*#__PURE__*/React__default.createElement(StyledImage, {
10260
11213
  src: image,
@@ -10269,23 +11222,23 @@ var MiniCard = function MiniCard(_ref) {
10269
11222
  columnSpanDesktop: 4
10270
11223
  }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
10271
11224
  level: 4
10272
- }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
11225
+ }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
10273
11226
  level: 2
10274
11227
  }, title)))));
10275
11228
  };
10276
11229
 
10277
- var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$u;
10278
- var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
10279
- var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
10280
- var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11230
+ var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w;
11231
+ var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
11232
+ var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n\n @media print {\n visibility: hidden;\n }\n"])));
11233
+ var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10281
11234
  var isVisible = _ref.isVisible;
10282
11235
  return isVisible ? 'visible' : 'hidden';
10283
11236
  });
10284
- var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11237
+ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10285
11238
  var isVisible = _ref2.isVisible;
10286
11239
  return isVisible ? 'visible' : 'hidden';
10287
11240
  });
10288
- var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
11241
+ var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n @media print {\n visibility: visible;\n max-height: 900px !important;\n }\n"])));
10289
11242
 
10290
11243
  var keyDown = function keyDown(e, toggleFunction) {
10291
11244
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -10366,15 +11319,15 @@ var ReadMore = function ReadMore(_ref) {
10366
11319
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
10367
11320
  };
10368
11321
 
10369
- var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$v;
10370
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10371
- var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Z || (_templateObject2$Z = /*#__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 }\n"])), Colors.LightGrey);
10372
- var MobileButton = /*#__PURE__*/styled.button(_templateObject3$L || (_templateObject3$L = /*#__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: block;\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"])), Colors.Black, Colors.White, Colors.DarkGrey);
10373
- var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
11322
+ var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x;
11323
+ var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11324
+ var MenuList = /*#__PURE__*/styled.ul(_templateObject2$11 || (_templateObject2$11 = /*#__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 }\n"])), Colors.LightGrey);
11325
+ var MobileButton = /*#__PURE__*/styled.button(_templateObject3$O || (_templateObject3$O = /*#__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: block;\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"])), Colors.Black, Colors.White, Colors.DarkGrey);
11326
+ var MenuItem$1 = /*#__PURE__*/styled.a(_templateObject4$F || (_templateObject4$F = /*#__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 text-decoration: none;\n margin: 0;\n padding: 16px 20px 15px 5px;\n display: block;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n"])), Colors.Black, function (_ref) {
10374
11327
  var isActive = _ref.isActive;
10375
11328
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
10376
11329
  }, Colors.MidGrey);
10377
- var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$v || (_templateObject5$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\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 padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
11330
+ var MobileMenuList = /*#__PURE__*/styled.ul(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\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 padding: 16px 20px 15px 20px;\n }\n"])), function (_ref2) {
10378
11331
  var isOpen = _ref2.isOpen;
10379
11332
  return isOpen ? 'block' : 'none';
10380
11333
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -10530,19 +11483,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10530
11483
  });
10531
11484
  };
10532
11485
 
10533
- var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
10534
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10535
- var Sections = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10536
- var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11486
+ var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q;
11487
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11488
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11489
+ var Section = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10537
11490
  var color = _ref.color;
10538
11491
  return "var(--base-color-" + color + ")";
10539
11492
  });
10540
- var BottomLine = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10541
- var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11493
+ var BottomLine = /*#__PURE__*/styled.div(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
11494
+ var Text = /*#__PURE__*/styled.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10542
11495
  var color = _ref2.color;
10543
11496
  return "var(--base-color-" + color + ")";
10544
11497
  });
10545
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
11498
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10546
11499
  var color = _ref3.color;
10547
11500
  return "var(--base-color-" + color + ")";
10548
11501
  });
@@ -10624,28 +11577,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
10624
11577
  }, strengthLabel))));
10625
11578
  };
10626
11579
 
10627
- var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$g, _templateObject8$b, _templateObject9$7, _templateObject10$7;
10628
- var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10629
- var Container$6 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10630
- var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10631
- var TableHeader = /*#__PURE__*/styled.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
11580
+ var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$H, _templateObject5$z, _templateObject6$r, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject10$9;
11581
+ var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11582
+ var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11583
+ var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11584
+ var TableHeader = /*#__PURE__*/styled.th(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-subtitle-2);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-2);\n letter-spacing: var(--letter-spacing-subtitle-2);\n line-height: var(--line-height-subtitle-2);\n padding: 30px 30px 30px 0;\n text-align: left;\n text-transform: uppercase;\n border-bottom: 1px solid;\n border-top: 1px solid;\n border-color: ", ";\n\n &:last-child {\n white-space: nowrap;\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n @media ", " {\n &:last-child {\n white-space: nowrap;\n }\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10632
11585
  return "var(--base-color-" + props.lineColor + ")";
10633
11586
  }, function (props) {
10634
11587
  return "calc(100% / " + (props.columns - 1) + ")";
10635
11588
  }, devices.tablet, devices.mobile);
10636
- var TableCell = /*#__PURE__*/styled.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
11589
+ var TableCell = /*#__PURE__*/styled.td(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n padding: 30px 30px 30px 0;\n text-align: left;\n vertical-align: top;\n border-bottom: 1px solid;\n border-color: ", ";\n\n &:last-child {\n width: auto;\n }\n\n &:not(:last-child) {\n width: ", ";\n }\n\n > span > svg {\n width: 24px;\n height: 24px;\n }\n\n @media ", " {\n padding: 20px 20px 20px 0;\n }\n"])), function (props) {
10637
11590
  return "var(--base-color-" + props.lineColor + ")";
10638
11591
  }, function (props) {
10639
11592
  return "calc(100% / " + (props.columns - 1) + ")";
10640
11593
  }, devices.mobile);
10641
- var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
10642
- var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
11594
+ var Pagination$1 = /*#__PURE__*/styled.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 0;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n max-width: fit-content;\n margin: auto;\n li {\n font-size: var(--font-size-subtitle-1);\n font-weight: var(--font-weight-body-1);\n line-height: var(--line-height-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n margin-left: 16px;\n color: var(--base-color-dark-grey);\n display: flex;\n align-items: center;\n border-bottom: none;\n }\n"])));
11595
+ var PageNumber$1 = /*#__PURE__*/styled.button(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: none;\n border: none;\n padding: 0;\n font-size: inherit;\n color: inherit;\n cursor: pointer;\n display: inline-block;\n margin: 0;\n border-bottom: 1px solid var(--base-color-transparent);\n line-height: var(--base-line-height);\n text-decoration: none;\n font-family: var(--font-family-body-1);\n\n :hover {\n outline: none;\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n svg > path {\n fill: var(--base-color-core);\n }\n }\n\n /* Active state */\n ", "\n"])), function (_ref) {
10643
11596
  var active = _ref.active;
10644
11597
  return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
10645
11598
  });
10646
- var Next = /*#__PURE__*/styled.span(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
10647
- var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
10648
- var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11599
+ var Next = /*#__PURE__*/styled.span(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
11600
+ var ScrollButtons = /*#__PURE__*/styled.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
11601
+ var AriaDescription$2 = /*#__PURE__*/styled.span(_templateObject10$9 || (_templateObject10$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10649
11602
 
10650
11603
  /* eslint-disable react/no-danger */
10651
11604
  var Content = function Content(_ref) {
@@ -10753,7 +11706,7 @@ var Table = function Table(_ref) {
10753
11706
  } else {
10754
11707
  visibleRows = totalRows;
10755
11708
  }
10756
- return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11709
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
10757
11710
  onClickPrev: function onClickPrev() {
10758
11711
  return scrollTable(tableRef, 'left');
10759
11712
  },
@@ -10828,32 +11781,32 @@ var Table = function Table(_ref) {
10828
11781
  }))))))))));
10829
11782
  };
10830
11783
 
10831
- var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
10832
- var Wrapper$8 = /*#__PURE__*/styled('div')(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
11784
+ var _templateObject$1n, _templateObject2$14, _templateObject3$R, _templateObject4$I, _templateObject5$A, _templateObject6$s, _templateObject7$k, _templateObject8$f, _templateObject9$a, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$4, _templateObject15$3;
11785
+ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10833
11786
  var theme = _ref.theme;
10834
11787
  return "var(--base-color-" + theme + ")";
10835
11788
  }, function (_ref2) {
10836
11789
  var theme = _ref2.theme;
10837
11790
  return "var(--base-color-" + theme + ")";
10838
11791
  });
10839
- var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
10840
- var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
10841
- var Error$1 = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
10842
- var Form = /*#__PURE__*/styled.form(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
10843
- var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
10844
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
10845
- var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
10846
- var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
10847
- var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$8 || (_templateObject10$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
10848
- var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10849
- var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$3 || (_templateObject12$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
10850
- var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--base-color-black);\n margin: 0;\n }\n"])), function (_ref3) {
11792
+ var SignUpFormWrapper = /*#__PURE__*/styled(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
11793
+ var SignUpTitleWrapper = /*#__PURE__*/styled('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11794
+ var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11795
+ var Form = /*#__PURE__*/styled.form(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
11796
+ var FormFooterWrapper = /*#__PURE__*/styled.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11797
+ var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11798
+ var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
11799
+ var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
11800
+ var FieldsWrapper = /*#__PURE__*/styled.div(_templateObject10$a || (_templateObject10$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
11801
+ var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11802
+ var DropdownAreaWrapper = /*#__PURE__*/styled.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
11803
+ var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--base-color-black);\n margin: 0;\n }\n"])), function (_ref3) {
10851
11804
  var _ref3$isOpen = _ref3.isOpen,
10852
11805
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
10853
11806
  return isOpen ? '180deg' : '0deg';
10854
11807
  });
10855
- var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n"])));
10856
- var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11808
+ var HiddenInstructions = /*#__PURE__*/styled.div(_templateObject14$4 || (_templateObject14$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n"])));
11809
+ var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
10857
11810
 
10858
11811
  var regex = {
10859
11812
  signInEmail:
@@ -11151,7 +12104,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11151
12104
  });
11152
12105
  }
11153
12106
  }, [isSuccess]);
11154
- return /*#__PURE__*/React__default.createElement(Wrapper$8, {
12107
+ return /*#__PURE__*/React__default.createElement(Wrapper$9, {
11155
12108
  theme: themeToColor(theme)
11156
12109
  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
11157
12110
  id: signUpInstructionsId,
@@ -11215,8 +12168,317 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
11215
12168
  }))))));
11216
12169
  };
11217
12170
 
11218
- var _templateObject$1k;
11219
- var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
12171
+ var _BUTTONS_STYLE_VALUES;
12172
+ // Text color, Background color, Border color, Hovered color
12173
+ var BUTTONS_STYLE_VALUES = (_BUTTONS_STYLE_VALUES = {}, _BUTTONS_STYLE_VALUES[ButtonType.Primary] = [ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[ButtonType.Secondary] = [ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['base-white'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES[ButtonType.Tertiary] = [ThemeColor['base-white'], ThemeColor['base-white'], ThemeColor['base-black'], ThemeColor['white-hovered'], ThemeColor['white-pressed']], _BUTTONS_STYLE_VALUES);
12174
+ var getLinkStyle = function getLinkStyle(link, defaultTextColor, defaultBackgroundColor, defaultBorderColor, defaultHoveredColor, defaultPressedColor) {
12175
+ var _link$textColor, _link$backgroundColor, _link$borderColor, _link$hoveredColor, _link$pressedColor;
12176
+ return {
12177
+ textColor: (_link$textColor = link.textColor) != null ? _link$textColor : defaultTextColor,
12178
+ backgroundColor: (_link$backgroundColor = link.backgroundColor) != null ? _link$backgroundColor : defaultBackgroundColor,
12179
+ borderColor: (_link$borderColor = link.borderColor) != null ? _link$borderColor : defaultBorderColor,
12180
+ hoveredColor: (_link$hoveredColor = link.hoveredColor) != null ? _link$hoveredColor : defaultHoveredColor,
12181
+ pressedColor: (_link$pressedColor = link.pressedColor) != null ? _link$pressedColor : defaultPressedColor
12182
+ };
12183
+ };
12184
+ var processSlideLinks = function processSlideLinks(links) {
12185
+ return links.flatMap(function (link) {
12186
+ if (!link) return [];
12187
+ var linkStyle = link.buttonType ? getLinkStyle.apply(void 0, [link].concat(BUTTONS_STYLE_VALUES[link.buttonType])) : {};
12188
+ return _extends({}, link, linkStyle);
12189
+ });
12190
+ };
12191
+ var isVideoSlide = function isVideoSlide(slideMedia) {
12192
+ return slideMedia.video !== undefined;
12193
+ };
12194
+
12195
+ var VideoSlide = function VideoSlide(_ref) {
12196
+ var index = _ref.index,
12197
+ settings = _ref.settings,
12198
+ isCurrentSlide = _ref.isCurrentSlide;
12199
+ var viewport = useViewport();
12200
+ var videoComponentId = settings.key + "-video-" + index;
12201
+ var videoUrl = viewport.isMobile ? settings.video.mobile : settings.video.desktop;
12202
+ var posterUrl = viewport.isMobile ? settings.poster.mobile : settings.poster.desktop;
12203
+ // eslint-disable-next-line jsx-a11y/media-has-caption
12204
+ var video = /*#__PURE__*/React__default.createElement("video", {
12205
+ id: videoComponentId,
12206
+ src: videoUrl,
12207
+ poster: posterUrl
12208
+ });
12209
+ return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
12210
+ isCurrentSlide: isCurrentSlide
12211
+ }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
12212
+ video: video,
12213
+ settings: settings
12214
+ }));
12215
+ };
12216
+ var SwipeCarousel = function SwipeCarousel(_ref2) {
12217
+ var slidesMedia = _ref2.slidesMedia,
12218
+ currentSlide = _ref2.currentSlide,
12219
+ carouselRef = _ref2.carouselRef,
12220
+ hasMultipleSlides = _ref2.hasMultipleSlides,
12221
+ setCurrentSlide = _ref2.setCurrentSlide;
12222
+ var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12223
+ return !isVideoSlide(slide);
12224
+ });
12225
+ return /*#__PURE__*/React__default.createElement(Swipe, {
12226
+ ref: carouselRef,
12227
+ infinite: hasMultipleSlides && hasOnlyImageSlides,
12228
+ onIndexChange: setCurrentSlide,
12229
+ "aria-roledescription": "carousel"
12230
+ }, slidesMedia.map(function (mediaContent, index) {
12231
+ return /*#__PURE__*/React__default.createElement("div", {
12232
+ className: "swiper-slide",
12233
+ key: mediaContent.key,
12234
+ "aria-hidden": index !== currentSlide,
12235
+ "aria-roledescription": "slide"
12236
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
12237
+ aspectRatio: AspectRatio['4:3']
12238
+ }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
12239
+ settings: mediaContent,
12240
+ index: index,
12241
+ isCurrentSlide: index === currentSlide
12242
+ })) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
12243
+ alt: mediaContent.alt
12244
+ }, mediaContent)))));
12245
+ }));
12246
+ };
12247
+
12248
+ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12249
+ var logo = _ref.logo,
12250
+ carouselTitle = _ref.carouselTitle,
12251
+ slides = _ref.slides,
12252
+ titleSemanticLevel = _ref.titleSemanticLevel,
12253
+ className = _ref.className;
12254
+ var slidesMedia = useMemo(function () {
12255
+ return slides.map(function (_ref2) {
12256
+ var mediaContent = _ref2.mediaContent;
12257
+ return mediaContent;
12258
+ });
12259
+ }, []);
12260
+ var _useState = useState(0),
12261
+ currentSlide = _useState[0],
12262
+ setCurrentSlide = _useState[1];
12263
+ var currentSlideData = slides[currentSlide];
12264
+ var links = currentSlideData.links,
12265
+ auxiliaryCTA = currentSlideData.auxiliaryCTA;
12266
+ var hasMultipleSlides = slidesMedia.length > 1;
12267
+ var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12268
+ return !isVideoSlide(slide);
12269
+ });
12270
+ var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
12271
+ var carouselRef = useRef(null);
12272
+ var onNext = function onNext() {
12273
+ var _carouselRef$current;
12274
+ return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12275
+ };
12276
+ var onPrev = function onPrev() {
12277
+ var _carouselRef$current2;
12278
+ return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12279
+ };
12280
+ var handleClickInside = function handleClickInside(e) {
12281
+ e.stopPropagation();
12282
+ };
12283
+ return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
12284
+ role: "region",
12285
+ "aria-labelledby": carouselTitleId,
12286
+ onClick: handleClickInside,
12287
+ className: className
12288
+ }, /*#__PURE__*/React__default.createElement(CarouselTitleWrapper, {
12289
+ "data-testid": "carousel-title"
12290
+ }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12291
+ id: carouselTitleId
12292
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12293
+ size: "small",
12294
+ serif: true,
12295
+ hierarchy: "h" + titleSemanticLevel
12296
+ }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12297
+ onClickNext: onNext,
12298
+ onClickPrev: onPrev
12299
+ }))), /*#__PURE__*/React__default.createElement(InfoWrapper, {
12300
+ "data-testid": "info-wrapper"
12301
+ }, /*#__PURE__*/React__default.createElement(InfoSection, {
12302
+ logo: logo,
12303
+ slide: currentSlideData,
12304
+ currentSlideIndex: currentSlide
12305
+ }), /*#__PURE__*/React__default.createElement(Buttons, {
12306
+ links: links,
12307
+ auxiliaryCTA: auxiliaryCTA
12308
+ })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12309
+ "data-testid": "carousel-wrapper"
12310
+ }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
12311
+ "data-testid": "rotator-buttons"
12312
+ }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12313
+ onClickNext: onNext,
12314
+ onClickPrev: onPrev,
12315
+ availablePrev: hasOnlyImageSlides || currentSlide !== 0,
12316
+ availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
12317
+ }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
12318
+ slidesMedia: slidesMedia,
12319
+ hasMultipleSlides: hasMultipleSlides,
12320
+ carouselRef: carouselRef,
12321
+ currentSlide: currentSlide,
12322
+ setCurrentSlide: setCurrentSlide
12323
+ })));
12324
+ };
12325
+
12326
+ var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
12327
+ styleInject(css_248z$1);
12328
+
12329
+ var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-background: #eb0a0a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n/* ----- Variables already used in Harmonic START ----- */\n --grid-column-gap: 36px;\n --grid-margin: 10%;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --carousel-image-caption-height: 17px;\n \n @media (max-width: 699px) {\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n --carousel-image-caption-height: 14px;\n }\n\n/* ----- Variables already used in Harmonic END ----- */\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 18px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-red);\n --information-panel-button-color: var(--color-primary-black);\n --information-panel-button-bg-color: var(--color-base-white);\n --information-panel-button-hover-color: var(--color-white-hovered);\n --information-panel-button-pressed-color: var(--color-white-pressed);\n\n --heading-promo-bg-color: var(--color-primary-red);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
12330
+ var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
12331
+ styleInject(css_248z$2);
12332
+
12333
+ var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* Stream theme overrides */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-background: #1a1a1a;\n --color-primary-button: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n\n --rotator-button-color: var(--color-base-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n --information-panel-color: var(--color-base-white);\n --information-panel-bg-color: var(--color-primary-black);\n\n --heading-promo-bg-color: var(--color-base-black);\n}\n";
12334
+ var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
12335
+ styleInject(css_248z$3);
12336
+
12337
+ var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n\n --information-panel-color: var(--color-primary-black);\n --information-panel-bg-color: var(--color-base-white);\n --information-panel-button-color: var(--color-base-white);\n --information-panel-button-bg-color: var(--color-primary-red);\n --information-panel-button-hover-color: var(--color-rbo-red-hovered);\n --information-panel-button-pressed-color: var(--color-rbo-red-pressed);\n\n --heading-promo-bg-color: var(--color-base-white);\n}\n";
12338
+ var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
12339
+ styleInject(css_248z$4);
12340
+
12341
+ var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
12342
+ var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
12343
+ styleInject(css_248z$5);
12344
+
12345
+ /* eslint-disable react/jsx-no-useless-fragment */
12346
+ var getThemeClass = function getThemeClass(theme) {
12347
+ // Always include the base (core) theme class
12348
+ var baseThemeClass = coreThemeStyles.coreTheme;
12349
+ var overrideClass = '';
12350
+ switch (theme) {
12351
+ case ThemeType.Core:
12352
+ overrideClass = '';
12353
+ break;
12354
+ case ThemeType.Stream:
12355
+ overrideClass = streamThemeStyles.streamTheme;
12356
+ break;
12357
+ case ThemeType.Cinema:
12358
+ overrideClass = cinemaThemeStyles.cinemaTheme;
12359
+ break;
12360
+ case ThemeType.Schools:
12361
+ overrideClass = schoolsThemeStyles.schoolsTheme;
12362
+ break;
12363
+ default:
12364
+ overrideClass = '';
12365
+ }
12366
+ // Return the combined classes
12367
+ return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
12368
+ };
12369
+ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
12370
+ var theme = _ref.theme,
12371
+ children = _ref.children;
12372
+ var themeClass = getThemeClass(theme);
12373
+ // Convert children to an array (assuming they accept a className prop)
12374
+ var childrenArray = React__default.Children.toArray(children);
12375
+ var themedChildren = childrenArray.map(function (child) {
12376
+ return /*#__PURE__*/React__default.cloneElement(child, {
12377
+ className: ((child.props.className || '') + " " + themeClass).trim(),
12378
+ theme: theme
12379
+ });
12380
+ });
12381
+ return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
12382
+ };
12383
+
12384
+ var _excluded$v = ["logo", "slides"];
12385
+ var HighlightsCinema = function HighlightsCinema(_ref) {
12386
+ var logo = _ref.logo,
12387
+ slides = _ref.slides,
12388
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12389
+ var slidesWithLinks = slides.map(function (slide) {
12390
+ var links = processSlideLinks(slide.links);
12391
+ return _extends({}, slide, {
12392
+ links: links
12393
+ });
12394
+ });
12395
+ return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12396
+ theme: ThemeType.Cinema
12397
+ }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12398
+ slides: slidesWithLinks,
12399
+ logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, {
12400
+ align: "left"
12401
+ }) : null
12402
+ })));
12403
+ };
12404
+
12405
+ var _excluded$w = ["slides"];
12406
+ var HighlightsCore = function HighlightsCore(_ref) {
12407
+ var slides = _ref.slides,
12408
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12409
+ var slidesWithLinks = slides.map(function (slide) {
12410
+ var links = processSlideLinks(slide.links);
12411
+ return _extends({}, slide, {
12412
+ links: links
12413
+ });
12414
+ });
12415
+ return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12416
+ theme: ThemeType.Core
12417
+ }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12418
+ slides: slidesWithLinks
12419
+ })));
12420
+ };
12421
+
12422
+ var _excluded$x = ["logo", "slides"];
12423
+ var HighlightsStream = function HighlightsStream(_ref) {
12424
+ var logo = _ref.logo,
12425
+ slides = _ref.slides,
12426
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12427
+ var slidesWithLinks = slides.map(function (slide) {
12428
+ var links = processSlideLinks(slide.links);
12429
+ return _extends({}, slide, {
12430
+ links: links
12431
+ });
12432
+ });
12433
+ return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12434
+ theme: ThemeType.Stream
12435
+ }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12436
+ slides: slidesWithLinks,
12437
+ logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
12438
+ align: "left"
12439
+ }) : null
12440
+ })));
12441
+ };
12442
+
12443
+ var _templateObject$1o, _templateObject3$S;
12444
+ var CarouselWrapper$1 = /*#__PURE__*/styled.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12445
+ var ButtonsWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12446
+
12447
+ var MinimalCarousel = function MinimalCarousel(_ref) {
12448
+ var children = _ref.children;
12449
+ var carouselRef = useRef(null);
12450
+ var hasMultipleChildren = React__default.Children.count(children) > 1;
12451
+ var onNext = function onNext() {
12452
+ var _carouselRef$current;
12453
+ return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12454
+ };
12455
+ var onPrev = function onPrev() {
12456
+ var _carouselRef$current2;
12457
+ return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12458
+ };
12459
+ return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
12460
+ columnStartDesktop: 1,
12461
+ columnSpanDesktop: 16,
12462
+ columnStartDevice: 1,
12463
+ columnSpanDevice: 14
12464
+ }, /*#__PURE__*/React__default.createElement(Swipe, {
12465
+ ref: carouselRef,
12466
+ infinite: hasMultipleChildren,
12467
+ "data-testid": "carousel-swipe"
12468
+ }, React__default.Children.toArray(children).map(function (child, index) {
12469
+ return /*#__PURE__*/React__default.createElement("div", {
12470
+ key: "swipe-minimal-carousel-slide-" + index
12471
+ }, child);
12472
+ })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
12473
+ "data-testid": "carousel-buttons-wrapper"
12474
+ }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12475
+ onClickNext: onNext,
12476
+ onClickPrev: onPrev
12477
+ }))));
12478
+ };
12479
+
12480
+ var _templateObject$1p;
12481
+ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n --harmonic-font-family-sans: 'Grey LL Bold', 'Roboto', sans-serif;\n --harmonic-font-family-serif: 'Victor Serif Medium', 'Inria Serif Regular', serif;\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-text-transform-navigation: capitalize;\n --harmonic-font-size-navigation: 19px;\n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
11220
12482
  var theme = _ref.theme;
11221
12483
  return theme.colors.primary;
11222
12484
  }, function (_ref2) {
@@ -12163,62 +13425,12 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1k || (_templa
12163
13425
  return theme.footer.tablet.paddingBottom;
12164
13426
  }, devices.desktop, devices.largeDesktop);
12165
13427
 
12166
- var css_248z$1 = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'GreyLLTT';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/GreyLLTT-Bold.woff2') format('woff2');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')\n format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'VictorSerif';\n src: url('https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')\n format('woff2');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n";
12167
- styleInject(css_248z$1);
12168
-
12169
- var css_248z$2 = ".core-theme-module_coreTheme__pWxYB {\n /* RBO Red */\n /* Primary Palette */\n --color-primary: #1a1a1a;\n --color-primary-red: #eb0a0a;\n --color-primary-black: #1a1a1a;\n\n /* Base Colours */\n --color-base-white: #ffffff;\n --color-base-black: #000000;\n --color-base-dark-grey: #4c4f53;\n --color-base-mid-grey: #72767c;\n --color-base-light-grey: #e9e9e9;\n --color-base-transparent: transparent;\n\n /* States */\n --color-state-error: #cc071e;\n --color-state-medium: #ffce45;\n --color-state-good: #2a874a;\n --color-state-focused: #1e1da0;\n --color-state-disabled: #b3b3b3;\n\n /* RBO Red (Core) */\n --color-rbo-red-hovered: #c40808;\n --color-rbo-red-pressed: #9d0707;\n\n /* RBO Black */\n --color-rbo-black-hovered: #575757;\n --color-rbo-black-pressed: #353535;\n\n /* Black */\n --color-black-hovered: #575757;\n --color-black-pressed: #353535;\n\n /* White */\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n /* Secondary Palette */\n --color-secondary-yellow: #ffce45;\n --color-secondary-pink: #ff36d0;\n --color-secondary-orange: #ff6700;\n --color-secondary-blue: #5f9cff;\n\n /* Core theme colors */\n --base-color-primary: #c8102e;\n --base-color-core: #c8102e;\n --base-color-stream: #1866dc;\n --base-color-cinema: #1a1a1a;\n --base-color-white: #ffffff;\n --base-color-black: #000000;\n --base-color-dark-grey: #4c4f53;\n --base-color-mid-grey: #72767c;\n --base-color-light-grey: #e9e9e9;\n --base-color-transparent: transparent;\n --base-color-errorstate: #eb0a0a;\n --base-color-mediumstate: #ffce45;\n --base-color-goodstate: #2a874a;\n --base-color-progress: #1866dc;\n --base-color-navigation: #c8102e;\n --base-color-lapislazuli: #0060a0;\n --base-color-lemonchiffon: #fffbbe;\n\n --button-height: 48px;\n --button-line-height: 20px;\n --button-padding-x: 20px;\n --button-padding-y: 14px;\n --button-padding-y-icon: 12px;\n --button-icon-margin: 12px;\n --button-icon-width: 20px;\n --button-icon-height: 20px;\n --button-font-size: 14px;\n --button-font-weight: 400;\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-red);\n --button-hover-color: var(--color-rbo-red-hovered);\n --button-pressed-color: var(--color-rbo-red-pressed);\n --button-secondary-color: var(--color-primary-red);\n --button-secondary-hover-color: var(--color-rbo-red-hovered);\n --button-secondary-pressed-color: var(--color-rbo-red-pressed);\n --button-tertiary-color: var(--color-primary-black);\n --button-tertiary-hover-color: var(--color-rbo-black-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-black-pressed);\n --button-auxiliary-color: var(--color-primary-black);\n --button-auxiliary-bg-color: var(--color-base-transparent);\n\n --font-size-header-1: 96px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 2px;\n --line-height-header-1: 110px;\n --margin-header-1: 0.67em 0;\n\n --font-size-header-2: 68px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 72px;\n --margin-header-2: 0.83em 0;\n\n --font-size-header-3: 44px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 48px;\n --margin-header-3: 1em 0;\n\n --font-size-header-4: 34px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 40px;\n --margin-header-4: 1.33em 0;\n\n --font-size-header-5: 24px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 30px;\n --margin-header-5: 1.67em 0;\n\n --font-size-header-6: 20px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 28px;\n --margin-header-6: 2.33em 0;\n\n --font-size-altHeader-3: 44px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 48px;\n\n --font-size-altHeader-4: 34px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 44px;\n\n --font-size-altHeader-5: 24px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 30px;\n\n --font-size-altHeader-6: 20px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 28px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-overline-3: 10px;\n --font-weight-overline-3: 500;\n --letter-spacing-overline-3: 1px;\n --line-height-overline-3: 12px;\n\n --font-size-overline-4: 8px;\n --font-weight-overline-4: 500;\n --letter-spacing-overline-4: 1px;\n --line-height-overline-4: 10px;\n\n --font-size-body-1: 19px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 26px;\n\n --font-size-body-2: 16px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 22px;\n\n --font-size-body-3: 14px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 20px;\n\n --font-size-subtitle-1: 19px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 22px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 22px;\n\n --font-size-title-description: 20px;\n --line-height-title-description: 28px;\n\n --line-height-listing: 36px;\n --font-size-individual-listing-name: 19px;\n --line-height-individual-listing-name: 24px;\n --line-height-people-listing-gap: 24px;\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-subtitle: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --font-family-navigation: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-size-navigation: 13px;\n --font-weight-navigation: 500;\n --line-height-navigation: 16px;\n --text-transform-navigation: uppercase;\n --letter-spacing-navigation: 1px;\n\n --navigation-small-gap: 16px;\n --navigation-middle-gap: 20px;\n --navigation-large-gap: 24px;\n --navigation-xlarge-gap: 36px;\n --navigation-large-margin: 60px;\n\n --rotator-button-width: 60px;\n --rotator-button-icon-width: 36px;\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --font-size-search: 24px;\n --font-family-search: 'adobe-garamond-pro';\n\n --grid-margin: 10%;\n --grid-outer-margin: 50px;\n --grid-template-columns: 14px calc(10% - 86px) repeat(12, minmax(0, 1fr)) calc(10% - 86px) 14px;\n --grid-column-gap: 36px;\n\n --footer-height: 380px;\n --footer-padding-top: 44px;\n --footer-padding-bottom: 44px;\n --footer-items-gap: 32px;\n --footer-media-gap: 32px;\n --footer-media-icon-width: 24px;\n --footer-media-icon-height: 24px;\n --footer-vertical-spacing-lg: 58px;\n --footer-vertical-spacing-sm: 16px;\n\n --text-link-underline-offset: 8px;\n --cards-spacing-stack: 40px;\n\n --editorial-subtitle-margin-bottom: 16px;\n --editorial-margin-between: 24px;\n --editorial-spacing-hover: 4px;\n --anchor-tabs-height: 70px;\n\n --font-family-sans: 'GreyLLTT', 'Roboto', sans-serif;\n --font-family-serif: 'VictorSerif', 'Inria Serif Regular', serif;\n\n --harmonic-text-link-underline-offset: 6px;\n --harmonic-font-size-navigation: 19px;\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-red);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n\n @media (max-width: 699px) {\n --font-size-header-1: 38px;\n --font-weight-header-1: 500;\n --letter-spacing-header-1: 1px;\n --line-height-header-1: 42px;\n\n --font-size-header-2: 30px;\n --font-weight-header-2: 500;\n --letter-spacing-header-2: 1px;\n --line-height-header-2: 34px;\n\n --font-size-header-3: 26px;\n --font-weight-header-3: 500;\n --letter-spacing-header-3: 1px;\n --line-height-header-3: 30px;\n\n --font-size-header-4: 24px;\n --font-weight-header-4: 500;\n --letter-spacing-header-4: 1px;\n --line-height-header-4: 28px;\n\n --font-size-header-5: 20px;\n --font-weight-header-5: 500;\n --letter-spacing-header-5: 1px;\n --line-height-header-5: 28px;\n\n --font-size-header-6: 17px;\n --font-weight-header-6: 500;\n --letter-spacing-header-6: 1px;\n --line-height-header-6: 24px;\n\n --font-size-altHeader-3: 26px;\n --font-weight-altHeader-3: normal;\n --letter-spacing-altHeader-3: normal;\n --line-height-altHeader-3: 30px;\n\n --font-size-altHeader-4: 24px;\n --font-weight-altHeader-4: normal;\n --letter-spacing-altHeader-4: normal;\n --line-height-altHeader-4: 28px;\n\n --font-size-altHeader-5: 20px;\n --font-weight-altHeader-5: normal;\n --letter-spacing-altHeader-5: normal;\n --line-height-altHeader-5: 28px;\n\n --font-size-altHeader-6: 17px;\n --font-weight-altHeader-6: normal;\n --letter-spacing-altHeader-6: normal;\n --line-height-altHeader-6: 24px;\n\n --font-size-overline-1: 14px;\n --font-weight-overline-1: 500;\n --letter-spacing-overline-1: 1px;\n --line-height-overline-1: 16px;\n\n --font-size-overline-2: 12px;\n --font-weight-overline-2: 500;\n --letter-spacing-overline-2: 1px;\n --line-height-overline-2: 14px;\n\n --font-size-body-1: 17px;\n --font-weight-body-1: 400;\n --letter-spacing-body-1: normal;\n --line-height-body-1: 24px;\n\n --font-size-body-2: 12px;\n --font-weight-body-2: 400;\n --letter-spacing-body-2: normal;\n --line-height-body-2: 18px;\n\n --font-size-body-3: 11px;\n --font-weight-body-3: 400;\n --letter-spacing-body-3: normal;\n --line-height-body-3: 16px;\n\n --font-size-subtitle-1: 16px;\n --font-weight-subtitle-1: 500;\n --letter-spacing-subtitle-1: 1px;\n --line-height-subtitle-1: 24px;\n\n --font-size-subtitle-2: 14px;\n --font-weight-subtitle-2: 500;\n --letter-spacing-subtitle-2: 1px;\n --line-height-subtitle-2: 18px;\n\n --font-size-title-description: 17px;\n --line-height-title-description: 24px;\n --line-height-people-listing-gap: 16px;\n\n --font-size-search: 20px;\n --font-family-search: 'adobe-garamond-pro';\n\n --font-family-header: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-altHeader: 'adobe-garamond-pro';\n --font-family-body: 'adobe-garamond-pro';\n --font-family-body-italics: 'adobe-garamond-pro';\n --font-family-buttons: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-overline: 'Gotham SSm Medium', sans-serif;\n --font-family-subtitle: 'Gotham SSm Medium', 'Montserrat', sans-serif;\n --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;\n --font-family-people-listing-name: 'adobe-garamond-pro';\n\n --font-feature-settings-header: 'tnum' on, 'lnum' on;\n --font-feature-settings-altHeader: 'pnum' on, 'onum' on;\n --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;\n --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;\n --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;\n\n --text-transform-header: uppercase;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: uppercase;\n --text-transform-subtitle: uppercase;\n\n --word-break-header: break-word;\n --word-break-altHeader: break-word;\n --word-break-body: break-word;\n --word-break-overline: break-word;\n --word-break-subtitle: break-word;\n\n --grid-template-columns: calc(20px - 12px) repeat(12, minmax(0, 1fr)) calc(20px - 12px);\n --grid-column-gap: 12px;\n --grid-margin: 20px;\n\n --footer-height: auto;\n --footer-padding-top: 20px;\n --footer-padding-bottom: 20px;\n --footer-items-gap: 12px;\n --footer-media-icon-width: 28px;\n --footer-media-icon-height: 28px;\n --footer-vertical-spacing-lg: 24px;\n --footer-vertical-spacing-sm: 24px;\n\n --anchor-tabs-height: 60px;\n\n --rotator-button-width: 40px;\n --rotator-button-icon-width: 24px;\n }\n\n @media (min-width: 700px) and (max-width: 1139px) {\n --grid-template-columns: calc(32px - 20px) repeat(12, minmax(0, 1fr)) calc(32px - 20px);\n --grid-column-gap: 20px;\n --grid-margin: 32px;\n\n --rotator-button-width: 44px;\n --rotator-button-icon-width: 24px;\n\n --font-size-header-6: 17px;\n --font-size-altHeader-4: 24px;\n --font-size-body-1: 17px;\n\n --footer-media-gap: 24px;\n --footer-padding-top: 40px;\n --footer-padding-bottom: 40px;\n }\n}\n";
12170
- var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
12171
- styleInject(css_248z$2);
12172
-
12173
- var css_248z$3 = ".stream-theme-module_streamTheme__lTfqQ {\n /* RBO Black */\n --base-color-primary: #1866dc;\n --color-primary: #1866dc;\n --color-primary-button: #1866dc;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n\n --button-color: var(--color-base-white);\n --button-bg-color: var(--color-primary-black);\n --button-hover-color: var(--color-black-hovered);\n --button-pressed-color: var(--color-black-pressed);\n --button-secondary-color: var(--color-primary-black);\n --button-secondary-hover-color: var(--color-black-hovered);\n --button-secondary-pressed-color: var(--color-black-pressed);\n --button-tertiary-color: var(--color-primary-red);\n --button-tertiary-hover-color: var(--color-rbo-red-hovered);\n --button-tertiary-pressed-color: var(--color-rbo-red-pressed);\n\n --rotator-button-color: var(--color-base-white);\n --rotator-button-bg-color: var(--color-base-black);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-red);\n\n --announcement-banner-color: var(--color-base-white);\n --announcement-banner-bg-color: var(--color-primary-black);\n --announcement-banner-hover-color: var(--color-white-hovered);\n --announcement-banner-pressed-color: var(--color-white-pressed);\n}\n";
12174
- var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
12175
- styleInject(css_248z$3);
12176
-
12177
- var css_248z$4 = ".cinema-theme-module_cinemaTheme__f5QFs {\n /* RBO White */\n --base-color-primary: #1a1a1a;\n --color-primary: #1a1a1a;\n --color-primary-button: #ffffff;\n --color-primary-button-reverse-bg: #ffffff;\n --color-primary-button-reverse: #1a1a1a;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n --color-white-hovered: #fafafa;\n --color-white-pressed: #f2f2f2;\n\n --button-color: var(--color-primary-black);\n --button-bg-color: var(--color-base-white);\n --button-hover-color: var(--color-white-hovered);\n --button-pressed-color: var(--color-white-pressed);\n --button-secondary-color: var(--color-base-white);\n --button-secondary-hover-color: var(--color-white-hovered);\n --button-secondary-pressed-color: var(--color-white-pressed);\n --button-tertiary-color: var(--color-base-white);\n --button-tertiary-hover-color: var(--color-white-hovered);\n --button-tertiary-pressed-color: var(--color-white-pressed);\n\n --rotator-button-color: var(--color-primary-black);\n --rotator-button-bg-color: var(--color-base-light-grey);\n --rotator-button-hover-color: var(--color-base-white);\n --rotator-button-hover-bg-color: var(--color-primary-black);\n\n --announcement-banner-color: var(--color-primary-red);\n --announcement-banner-bg-color: var(--color-base-white);\n --announcement-banner-hover-color: var(--color-rbo-red-hovered);\n --announcement-banner-pressed-color: var(--color-rbo-red-pressed);\n}\n";
12178
- var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
12179
- styleInject(css_248z$4);
12180
-
12181
- var css_248z$5 = ".schools-theme-module_schoolsTheme__CWHba {\n /* Schools theme overrides */\n --base-color-primary: #c8102e;\n --color-primary: #c8102e;\n --color-primary-button: #c8102e;\n --color-primary-button-reverse-bg: #1a1a1a;\n --color-primary-button-reverse: #ffffff;\n --color-secondary-button: #ffffff;\n --color-tertiary-button: transparent;\n --color-auxiliary-button: transparent;\n\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n\n @media only screen and (max-width: calc(var(--breakpoint-sm) - 1px)) {\n --text-transform-header: none;\n --text-transform-altHeader: none;\n --text-transform-body: none;\n --text-transform-overline: none;\n --text-transform-subtitle: none;\n --text-transform-navigation: uppercase;\n }\n}\n";
12182
- var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
12183
- styleInject(css_248z$5);
12184
-
12185
- /* eslint-disable react/jsx-no-useless-fragment */
12186
- var getThemeClass = function getThemeClass(theme) {
12187
- // Always include the base (core) theme class
12188
- var baseThemeClass = coreThemeStyles.coreTheme;
12189
- var overrideClass = '';
12190
- switch (theme) {
12191
- case ThemeType.Core:
12192
- overrideClass = '';
12193
- break;
12194
- case ThemeType.Stream:
12195
- overrideClass = streamThemeStyles.streamTheme;
12196
- break;
12197
- case ThemeType.Cinema:
12198
- overrideClass = cinemaThemeStyles.cinemaTheme;
12199
- break;
12200
- case ThemeType.Schools:
12201
- overrideClass = schoolsThemeStyles.schoolsTheme;
12202
- break;
12203
- default:
12204
- overrideClass = '';
12205
- }
12206
- // Return the combined classes
12207
- return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
12208
- };
12209
- var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
12210
- var theme = _ref.theme,
12211
- children = _ref.children;
12212
- var themeClass = getThemeClass(theme);
12213
- // Convert children to an array (assuming they accept a className prop)
12214
- var childrenArray = React__default.Children.toArray(children);
12215
- var themedChildren = childrenArray.map(function (child) {
12216
- return /*#__PURE__*/React__default.cloneElement(child, {
12217
- className: ((child.props.className || '') + " " + themeClass).trim()
12218
- });
12219
- });
12220
- return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
13428
+ /* ~~~~~~~ new harmonic types ~~~~~~~ */
13429
+ var HarmonicSizes = {
13430
+ Small: 'small',
13431
+ Medium: 'medium',
13432
+ Large: 'large'
12221
13433
  };
12222
13434
 
12223
- export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicThemeProvider, Header, IInformationBackgroundColour, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
13435
+ export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryButton, AuxiliaryNav, BodyText, ButtonType, Card, Cards, Carousel, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, HarmonicSizes, HarmonicThemeProvider, Header, HighlightsCarousel, HighlightsCinema as HighlightsCarouselCinema, HighlightsCore as HighlightsCarouselCore, HighlightsStream as HighlightsCarouselStream, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, MiniCard, MinimalCarousel, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingPromo, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, Radio2, RadioGroup, RadioGroup2, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, SelectComponent as Select2, SelectComponent$1 as Select2Async, SignUpFormComponent as SignUpForm, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Table, Tabs, TertiaryButton, TextArea, TextField, TextFieldLegacy, TextLink, TextOnly, ThemeColor, Theme as ThemeProvider, ThemeType, Tickbox, Tickbox2, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, VideoControls, VideoWithControls$1 as VideoWithControls, breakpoints, devices, zIndexes };
12224
13436
  //# sourceMappingURL=harmonic.esm.js.map