@royaloperahouse/harmonic 0.1.8-q → 0.1.9-a

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 (64) hide show
  1. package/dist/components/Typography/Typography.d.ts +2 -1
  2. package/dist/components/atoms/Buttons/Primary/utils.d.ts +0 -2
  3. package/dist/components/atoms/Buttons/Secondary/utils.d.ts +1 -2
  4. package/dist/components/atoms/Buttons/Tertiary/utils.d.ts +1 -1
  5. package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts +1 -1
  6. package/dist/components/atoms/SponsorLogo/SponsorLogo.style.d.ts +2 -1
  7. package/dist/components/index.d.ts +4 -4
  8. package/dist/components/molecules/AnnouncementBanner/AnnouncementBanner.style.d.ts +1 -1
  9. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  10. package/dist/components/molecules/Information/Information.style.d.ts +12 -3
  11. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  12. package/dist/components/molecules/index.d.ts +2 -2
  13. package/dist/components/organisms/Footer/Footer.style.d.ts +1 -0
  14. package/dist/components/organisms/index.d.ts +1 -4
  15. package/dist/harmonic.cjs.development.css +135 -175
  16. package/dist/harmonic.cjs.development.js +761 -2166
  17. package/dist/harmonic.cjs.development.js.map +1 -1
  18. package/dist/harmonic.cjs.production.min.js +1 -1
  19. package/dist/harmonic.cjs.production.min.js.map +1 -1
  20. package/dist/harmonic.esm.js +793 -2188
  21. package/dist/harmonic.esm.js.map +1 -1
  22. package/dist/index.d.ts +3 -5
  23. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  24. package/dist/types/buttonTypes.d.ts +2 -6
  25. package/dist/types/card.d.ts +2 -2
  26. package/dist/types/carousel.d.ts +9 -68
  27. package/dist/types/editorial.d.ts +3 -15
  28. package/dist/types/image.d.ts +3 -9
  29. package/dist/types/impactHeader.d.ts +1 -52
  30. package/dist/types/index.d.ts +3 -3
  31. package/dist/types/information.d.ts +41 -18
  32. package/dist/types/progress.d.ts +0 -4
  33. package/dist/types/types.d.ts +9 -5
  34. package/dist/types/typography.d.ts +5 -11
  35. package/package.json +1 -2
  36. package/dist/components/Typography/utils.d.ts +0 -7
  37. package/dist/components/molecules/Information/utils.d.ts +0 -11
  38. package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +0 -5
  39. package/dist/components/molecules/PageHeading/Promo/Promo.style.d.ts +0 -28
  40. package/dist/components/molecules/PageHeading/Promo/components/Badge.d.ts +0 -10
  41. package/dist/components/molecules/PageHeading/Promo/components/Button.d.ts +0 -10
  42. package/dist/components/molecules/PageHeading/Promo/components/Image.d.ts +0 -4
  43. package/dist/components/molecules/PageHeading/Promo/index.d.ts +0 -2
  44. package/dist/components/molecules/Swipe/Swipe.d.ts +0 -13
  45. package/dist/components/molecules/Swipe/Swipe.style.d.ts +0 -8
  46. package/dist/components/molecules/Swipe/helper.d.ts +0 -2
  47. package/dist/components/molecules/Swipe/index.d.ts +0 -2
  48. package/dist/components/organisms/Carousels/Carousel/Carousel.d.ts +0 -4
  49. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +0 -11
  50. package/dist/components/organisms/Carousels/Carousel/helper.d.ts +0 -26
  51. package/dist/components/organisms/Carousels/Carousel/index.d.ts +0 -2
  52. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +0 -4
  53. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.style.d.ts +0 -21
  54. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCinema.d.ts +0 -4
  55. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCore.d.ts +0 -4
  56. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsStream.d.ts +0 -4
  57. package/dist/components/organisms/Carousels/HighlightsCarousel/components/Buttons.d.ts +0 -5
  58. package/dist/components/organisms/Carousels/HighlightsCarousel/components/InfoSection.d.ts +0 -10
  59. package/dist/components/organisms/Carousels/HighlightsCarousel/components/SwipeCarousel.d.ts +0 -12
  60. package/dist/components/organisms/Carousels/HighlightsCarousel/helper.d.ts +0 -291
  61. package/dist/components/organisms/Carousels/HighlightsCarousel/index.d.ts +0 -5
  62. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.d.ts +0 -4
  63. package/dist/components/organisms/Carousels/MinimalCarousel/MinimalCarousel.style.d.ts +0 -4
  64. package/dist/components/organisms/Carousels/MinimalCarousel/index.d.ts +0 -2
package/dist/harmonic.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, useImperativeHandle, cloneElement, useLayoutEffect } from 'react';
1
+ import React__default, { createElement, memo, useCallback, useRef, useEffect, useState, forwardRef, useMemo, 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';
@@ -355,73 +355,47 @@ function _taggedTemplateLiteralLoose(e, t) {
355
355
  return t || (t = e.slice(0)), e.raw = t, e;
356
356
  }
357
357
 
358
- // Utility function for creating className strings
359
- var createClassNames = function createClassNames(baseClass, options) {
360
- var size = options.size,
361
- _options$color = options.color,
362
- color = _options$color === void 0 ? 'primary' : _options$color,
363
- serif = options.serif,
364
- em = options.em,
365
- className = options.className;
366
- return [baseClass, size, "color-" + color, serif ? 'serif' : '', em ? 'em' : '', className || ''].filter(Boolean).join(' ');
367
- };
368
-
369
- var _excluded = ["children", "size", "color", "className"],
370
- _excluded2 = ["children", "size", "color", "className"];
371
- /* ~~~ Headers - size and hierarchy set separately ~~~ */
372
- var HarmonicHeader = function HarmonicHeader(_ref2) {
373
- var children = _ref2.children,
374
- size = _ref2.size,
375
- em = _ref2.em,
376
- _ref2$color = _ref2.color,
377
- color = _ref2$color === void 0 ? 'primary' : _ref2$color,
378
- serif = _ref2.serif,
379
- Tag = _ref2.hierarchy,
380
- className = _ref2.className;
381
- var classNames = createClassNames('header', {
382
- size: size,
383
- color: color,
384
- serif: serif,
385
- em: em,
386
- className: className
387
- });
388
- return /*#__PURE__*/React__default.createElement(Tag, {
389
- className: classNames
390
- }, children);
391
- };
392
- /* ~~~ Subtitle - (use case) ~~~ */
393
- var HarmonicSubtitle = function HarmonicSubtitle(_ref3) {
394
- var children = _ref3.children,
395
- size = _ref3.size,
396
- _ref3$color = _ref3.color,
397
- color = _ref3$color === void 0 ? 'primary' : _ref3$color,
398
- className = _ref3.className;
399
- var classNames = createClassNames('subtitle', {
400
- size: size,
401
- color: color,
402
- className: className
403
- });
404
- return /*#__PURE__*/React__default.createElement("p", {
405
- className: classNames
406
- }, children);
407
- };
358
+ function styleInject(css, ref) {
359
+ if ( ref === void 0 ) ref = {};
360
+ var insertAt = ref.insertAt;
361
+
362
+ if (!css || typeof document === 'undefined') { return; }
363
+
364
+ var head = document.head || document.getElementsByTagName('head')[0];
365
+ var style = document.createElement('style');
366
+ style.type = 'text/css';
367
+
368
+ if (insertAt === 'top') {
369
+ if (head.firstChild) {
370
+ head.insertBefore(style, head.firstChild);
371
+ } else {
372
+ head.appendChild(style);
373
+ }
374
+ } else {
375
+ head.appendChild(style);
376
+ }
377
+
378
+ if (style.styleSheet) {
379
+ style.styleSheet.cssText = css;
380
+ } else {
381
+ style.appendChild(document.createTextNode(css));
382
+ }
383
+ }
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";
386
+ styleInject(css_248z);
387
+
388
+ var _excluded = ["children", "size", "color", "className"];
408
389
  /* ~~~ Body Copy Text - (use case) ~~~ */
409
390
  var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
410
391
  var children = _ref4.children,
411
- _ref4$size = _ref4.size,
412
- size = _ref4$size === void 0 ? 'medium' : _ref4$size,
392
+ size = _ref4.size,
413
393
  _ref4$color = _ref4.color,
414
394
  color = _ref4$color === void 0 ? 'primary' : _ref4$color,
415
- className = _ref4.className,
416
- props = _objectWithoutPropertiesLoose(_ref4, _excluded);
417
- var classNames = createClassNames('bodycopy', {
418
- size: size,
419
- color: color,
420
- className: className
421
- });
422
- return /*#__PURE__*/React__default.createElement("p", Object.assign({
423
- className: classNames
424
- }, props), children);
395
+ className = _ref4.className;
396
+ return /*#__PURE__*/React__default.createElement("p", {
397
+ className: "bodycopy " + size + " color-" + color + " " + className
398
+ }, children);
425
399
  };
426
400
  /* ~~~ Overline - (use case) ~~~ */
427
401
  var HarmonicOverline = function HarmonicOverline(_ref5) {
@@ -430,14 +404,9 @@ var HarmonicOverline = function HarmonicOverline(_ref5) {
430
404
  _ref5$color = _ref5.color,
431
405
  color = _ref5$color === void 0 ? 'primary' : _ref5$color,
432
406
  className = _ref5.className,
433
- props = _objectWithoutPropertiesLoose(_ref5, _excluded2);
434
- var classNames = createClassNames('overline', {
435
- size: size,
436
- color: color,
437
- className: className
438
- });
407
+ props = _objectWithoutPropertiesLoose(_ref5, _excluded);
439
408
  return /*#__PURE__*/React__default.createElement("p", Object.assign({
440
- className: classNames
409
+ className: "overline " + size + " color-" + color + " " + className
441
410
  }, props), children);
442
411
  };
443
412
 
@@ -728,11 +697,11 @@ var devices = {
728
697
  };
729
698
 
730
699
  var _templateObject$1, _templateObject2;
731
- 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) {
700
+ 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) {
732
701
  var iconName = _ref.iconName;
733
702
  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
734
703
  }, devices.mobile);
735
- 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"])));
704
+ 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"])));
736
705
 
737
706
  var _templateObject$2;
738
707
  var Directions = {
@@ -2676,31 +2645,9 @@ var getBackgroundColor = function getBackgroundColor(_ref2) {
2676
2645
  }
2677
2646
  return COLORS.background;
2678
2647
  };
2679
- var getHoveredColor = function getHoveredColor(_ref3) {
2680
- var disabled = _ref3.disabled,
2681
- hoveredColor = _ref3.hoveredColor;
2682
- if (disabled) {
2683
- return COLORS.darkGrey;
2684
- }
2685
- if (hoveredColor) {
2686
- return "var(--color-" + hoveredColor + ")";
2687
- }
2688
- return COLORS.hover;
2689
- };
2690
- var getPressedColor = function getPressedColor(_ref4) {
2691
- var disabled = _ref4.disabled,
2692
- pressedColor = _ref4.pressedColor;
2693
- if (disabled) {
2694
- return COLORS.darkGrey;
2695
- }
2696
- if (pressedColor) {
2697
- return "var(--color-" + pressedColor + ")";
2698
- }
2699
- return COLORS.pressed;
2700
- };
2701
2648
 
2702
2649
  var _templateObject$3, _templateObject2$1;
2703
- 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 && 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, getTextColor, getHoveredColor, getHoveredColor, getTextColor, getPressedColor, getPressedColor, getTextColor, getTextColor);
2650
+ 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);
2704
2651
  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"])));
2705
2652
 
2706
2653
  var _excluded$3 = ["children", "disabled", "className"];
@@ -2753,9 +2700,13 @@ var getTextColor$1 = function getTextColor(_ref) {
2753
2700
  }
2754
2701
  return COLORS$1["default"];
2755
2702
  };
2756
- var getBorderColor = function getBorderColor(_ref2) {
2757
- var disabled = _ref2.disabled,
2758
- borderColor = _ref2.borderColor;
2703
+ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
2704
+ var disabled = _ref2.disabled;
2705
+ return disabled ? COLORS$1.disabled : COLORS$1.transparent;
2706
+ };
2707
+ var getBorderColor = function getBorderColor(_ref3) {
2708
+ var disabled = _ref3.disabled,
2709
+ borderColor = _ref3.borderColor;
2759
2710
  if (disabled) {
2760
2711
  return COLORS$1.disabled;
2761
2712
  }
@@ -2764,34 +2715,9 @@ var getBorderColor = function getBorderColor(_ref2) {
2764
2715
  }
2765
2716
  return COLORS$1.border;
2766
2717
  };
2767
- var getHoveredColor$1 = function getHoveredColor(_ref3) {
2768
- var disabled = _ref3.disabled,
2769
- hoveredColor = _ref3.hoveredColor;
2770
- if (disabled) {
2771
- return COLORS$1.disabled;
2772
- }
2773
- if (hoveredColor) {
2774
- return "var(--color-" + hoveredColor + ")";
2775
- }
2776
- return COLORS$1.hover;
2777
- };
2778
- var getPressedColor$1 = function getPressedColor(_ref4) {
2779
- var disabled = _ref4.disabled,
2780
- pressedColor = _ref4.pressedColor;
2781
- if (disabled) {
2782
- return COLORS$1.disabled;
2783
- }
2784
- if (pressedColor) {
2785
- return "var(--color-" + pressedColor + ")";
2786
- }
2787
- return COLORS$1.pressed;
2788
- };
2789
2718
 
2790
2719
  var _templateObject$4, _templateObject2$2;
2791
- 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) {
2792
- var disabled = _ref.disabled;
2793
- return disabled && COLORS$1.disabled;
2794
- }, getBorderColor, getPointerEvents, getTextColor$1, getHoveredColor$1, getHoveredColor$1, getHoveredColor$1, getPressedColor$1, getPressedColor$1, getPressedColor$1);
2720
+ 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);
2795
2721
  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"])));
2796
2722
 
2797
2723
  var _excluded$4 = ["children", "disabled", "className"];
@@ -2830,7 +2756,7 @@ var COLORS$2 = {
2830
2756
  hover: 'var(--button-tertiary-hover-color)',
2831
2757
  pressed: 'var(--button-tertiary-pressed-color)'
2832
2758
  };
2833
- var getTextColor$2 = function getTextColor(_ref) {
2759
+ var getButtonColor = function getButtonColor(_ref) {
2834
2760
  var disabled = _ref.disabled,
2835
2761
  textColor = _ref.textColor;
2836
2762
  if (disabled) {
@@ -2843,7 +2769,7 @@ var getTextColor$2 = function getTextColor(_ref) {
2843
2769
  };
2844
2770
 
2845
2771
  var _templateObject$5, _templateObject2$3;
2846
- 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);
2772
+ 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);
2847
2773
  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"])));
2848
2774
 
2849
2775
  var _excluded$5 = ["children", "className"];
@@ -3051,8 +2977,6 @@ var AspectRatio;
3051
2977
  AspectRatio["4:3"] = "4 / 3";
3052
2978
  AspectRatio["8:3"] = "8 / 3";
3053
2979
  AspectRatio["16:9"] = "16 / 9";
3054
- AspectRatio["90:17"] = "90 / 17";
3055
- AspectRatio["75:32"] = "75 / 32";
3056
2980
  })(AspectRatio || (AspectRatio = {}));
3057
2981
  var AspectRatioLegacy;
3058
2982
  (function (AspectRatioLegacy) {
@@ -3061,8 +2985,6 @@ var AspectRatioLegacy;
3061
2985
  AspectRatioLegacy["4 / 3"] = "75";
3062
2986
  AspectRatioLegacy["8 / 3"] = "37.5";
3063
2987
  AspectRatioLegacy["16 / 9"] = "56.25";
3064
- AspectRatioLegacy["90 / 17"] = "18.88";
3065
- AspectRatioLegacy["75 / 32"] = "15";
3066
2988
  })(AspectRatioLegacy || (AspectRatioLegacy = {}));
3067
2989
  var AspectRatioWidth;
3068
2990
  (function (AspectRatioWidth) {
@@ -3071,8 +2993,6 @@ var AspectRatioWidth;
3071
2993
  AspectRatioWidth["4 / 3"] = "1.33";
3072
2994
  AspectRatioWidth["8 / 3"] = "2.67";
3073
2995
  AspectRatioWidth["16 / 9"] = "1.78";
3074
- AspectRatioWidth["90 / 17"] = "5.29";
3075
- AspectRatioWidth["75 / 32"] = "2.34";
3076
2996
  })(AspectRatioWidth || (AspectRatioWidth = {}));
3077
2997
 
3078
2998
  var _templateObject$a;
@@ -3113,39 +3033,36 @@ var ImageAspectRatioWrapper = function ImageAspectRatioWrapper(_ref) {
3113
3033
  };
3114
3034
 
3115
3035
  var _templateObject$b, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5;
3116
- 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) {
3036
+ 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) {
3117
3037
  var height = _ref.height;
3118
3038
  return height ? height + "px" : '6px';
3119
- }, function (_ref2) {
3120
- var shadow = _ref2.shadow;
3121
- return shadow ? '0px 1px 4px 0px rgba(0, 0, 0, 0.15)' : 'none';
3122
3039
  });
3123
- 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) {
3124
- var color = _ref3.color;
3125
- return color ? "var(--color-base-" + color + ")" : 'var(--color-base-white)';
3126
- }, function (_ref4) {
3127
- var progress = _ref4.progress;
3040
+ 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) {
3041
+ var color = _ref2.color;
3042
+ return color ? "var(--base-color-" + color + ")" : 'var(--base-color-progress)';
3043
+ }, function (_ref3) {
3044
+ var progress = _ref3.progress;
3128
3045
  return progress;
3129
- }, zIndexes.contentOverlay, function (_ref5) {
3130
- var isProgressWithSteps = _ref5.isProgressWithSteps;
3046
+ }, function (_ref4) {
3047
+ var isProgressWithSteps = _ref4.isProgressWithSteps;
3131
3048
  return isProgressWithSteps ? '34px' : '0';
3132
- }, devices.mobile, function (_ref6) {
3133
- var isProgressWithSteps = _ref6.isProgressWithSteps;
3049
+ }, devices.mobile, function (_ref5) {
3050
+ var isProgressWithSteps = _ref5.isProgressWithSteps;
3134
3051
  return isProgressWithSteps ? '24px' : '0';
3135
3052
  });
3136
- var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n flex: ", ";\n z-index: ", ";\n"])), function (_ref7) {
3137
- var color = _ref7.color;
3138
- return color ? "var(--color-base-" + color + ")" : 'var(--color-base-mid-grey)';
3139
- }, function (_ref8) {
3140
- var progress = _ref8.progress;
3053
+ var PendingProgressView = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n opacity: 0.5;\n flex: ", ";\n"])), function (_ref6) {
3054
+ var color = _ref6.color;
3055
+ return color ? "var(--base-color-" + color + ")" : 'var(--base-color-light-grey)';
3056
+ }, function (_ref7) {
3057
+ var progress = _ref7.progress;
3141
3058
  return progress;
3142
- }, zIndexes.contentOverlay);
3059
+ });
3143
3060
  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);
3144
- var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (_ref9) {
3145
- var isVisible = _ref9.isVisible;
3061
+ var StepWrapper = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n color: ", ";\n"])), function (_ref8) {
3062
+ var isVisible = _ref8.isVisible;
3146
3063
  return isVisible ? "visible" : 'hidden';
3147
- }, function (_ref10) {
3148
- var isActive = _ref10.isActive;
3064
+ }, function (_ref9) {
3065
+ var isActive = _ref9.isActive;
3149
3066
  return isActive ? "var(--base-color-black)" : 'var(--base-color-mid-grey)';
3150
3067
  });
3151
3068
 
@@ -3155,8 +3072,6 @@ var Progress = function Progress(_ref) {
3155
3072
  progress = _ref$progress === void 0 ? 0 : _ref$progress,
3156
3073
  _ref$height = _ref.height,
3157
3074
  height = _ref$height === void 0 ? 6 : _ref$height,
3158
- _ref$shadow = _ref.shadow,
3159
- shadow = _ref$shadow === void 0 ? true : _ref$shadow,
3160
3075
  elapsedLineColor = _ref.elapsedLineColor,
3161
3076
  pendingLineColor = _ref.pendingLineColor,
3162
3077
  steps = _ref.steps;
@@ -3183,7 +3098,6 @@ var Progress = function Progress(_ref) {
3183
3098
  var progressValue = getProgressValue();
3184
3099
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ProgressView, {
3185
3100
  height: height,
3186
- shadow: shadow,
3187
3101
  "data-testid": "progress-container"
3188
3102
  }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
3189
3103
  color: elapsedLineColor,
@@ -3517,9 +3431,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
3517
3431
  onKeyDown: onPrevKeyDownHandler,
3518
3432
  tabIndex: 0,
3519
3433
  "data-testid": "iconprev",
3520
- className: "carousel-icon-wrapper-left",
3521
- "aria-label": "Previous slide",
3522
- role: "button"
3434
+ className: "carousel-icon-wrapper-left"
3523
3435
  }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
3524
3436
  "data-testid": "iconprevnoavailable"
3525
3437
  }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
@@ -3527,9 +3439,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
3527
3439
  onKeyDown: onNextKeyDownHandler,
3528
3440
  tabIndex: 0,
3529
3441
  "data-testid": "iconnext",
3530
- className: "carousel-icon-wrapper-right",
3531
- "aria-label": "Next slide",
3532
- role: "button"
3442
+ className: "carousel-icon-wrapper-right"
3533
3443
  }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
3534
3444
  "data-testid": "iconnextnoavailable"
3535
3445
  }, renderNextIcon())));
@@ -3582,219 +3492,51 @@ var SectionSplitter = function SectionSplitter(_ref) {
3582
3492
  };
3583
3493
 
3584
3494
  var _templateObject$i;
3585
- var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n width: 100%;\n max-width: 90%;\n height: auto;\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n\n svg {\n display: block; /* Avoids inline SVG extra spacing issues */\n width: 100%;\n height: auto;\n max-width: 100%;\n }\n"])), devices.tablet, devices.mobile);
3495
+ // export const ArtsCouncilEnglandWrapper = styled.div`
3496
+ // width: 100%;
3497
+ // max-width: 90%;
3498
+ // height: auto;
3499
+ // @media ${devices.tablet} {
3500
+ // max-width: 100%;
3501
+ // }
3502
+ // @media ${devices.mobile} {
3503
+ // max-width: 50%;
3504
+ // }
3505
+ // svg {
3506
+ // display: block; /* Avoids inline SVG extra spacing issues */
3507
+ // width: 100%;
3508
+ // height: auto;
3509
+ // max-width: 100%;
3510
+ // }
3511
+ // `;
3512
+ var SponsorLogoWrapper = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n height: auto;\n width: 100%;\n max-width: 100%;\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
3513
+ /*
3514
+ img {
3515
+ display: block; Avoids inline SVG extra spacing issues
3516
+ width: 100%;
3517
+ height: auto;
3518
+ max-width: 100%;
3519
+ }
3520
+
3521
+ */
3586
3522
 
3587
- /* eslint-disable max-len */
3588
3523
  var SponsorLogo = function SponsorLogo(_ref) {
3589
3524
  var _ref$colorLogo = _ref.colorLogo,
3590
3525
  colorLogo = _ref$colorLogo === void 0 ? '#fff' : _ref$colorLogo,
3591
3526
  _ref$colorBackground = _ref.colorBackground,
3592
3527
  colorBackground = _ref$colorBackground === void 0 ? '#1d1d1b' : _ref$colorBackground,
3593
3528
  _ref$alt = _ref.alt,
3594
- alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt;
3595
- return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, null, /*#__PURE__*/React__default.createElement("svg", {
3596
- xmlns: "http://www.w3.org/2000/svg",
3597
- viewBox: "0 0 258.64 57.26",
3598
- preserveAspectRatio: "xMidYMid meet" // Maintains the aspect ratio while centering
3599
- ,
3600
- role: "img",
3529
+ alt = _ref$alt === void 0 ? 'Sponsor Logo' : _ref$alt,
3530
+ imageSource = _ref.imageSource,
3531
+ children = _ref.children;
3532
+ return /*#__PURE__*/React__default.createElement(SponsorLogoWrapper, {
3533
+ colorLogo: colorLogo,
3534
+ colorBackground: colorBackground,
3601
3535
  "aria-label": alt
3602
- }, /*#__PURE__*/React__default.createElement("g", {
3603
- id: "Layer_2",
3604
- "data-name": "Layer 2"
3605
- }, /*#__PURE__*/React__default.createElement("g", {
3606
- id: "Layer_1-2",
3607
- "data-name": "Layer 1"
3608
- }, /*#__PURE__*/React__default.createElement("path", {
3609
- fill: colorLogo,
3610
- d: "M48.59,20.83l0-1.16-4.8,1.72,0,1.26,4.9,1.44,0-1.1-1.09-.3-.06-1.52Zm-1.89.59,0,1.11-2-.52v0Z"
3611
- }), /*#__PURE__*/React__default.createElement("path", {
3612
- fill: colorLogo,
3613
- d: "M48.8,18.33l.36-1.09-1.87-.6c.13-.4.18-.55.86-.52l1.36,0L49.88,15l-1.66,0c-.61,0-.84.07-1,.39h0a1.14,1.14,0,0,0-.84-1.29c-.85-.27-1.39.26-1.64,1l-.55,1.68ZM45.31,16l.1-.33c.19-.58.6-.52.79-.46a.63.63,0,0,1,.41.84l-.11.33Z"
3614
- }), /*#__PURE__*/React__default.createElement("polygon", {
3615
- fill: colorLogo,
3616
- points: "50.82 13.54 51.47 12.61 48.22 10.32 48.82 9.46 48.1 8.96 46.23 11.62 46.95 12.13 47.56 11.26 50.82 13.54"
3617
- }), /*#__PURE__*/React__default.createElement("path", {
3618
- fill: colorLogo,
3619
- d: "M51.76,5.65a4.57,4.57,0,0,0-1,.61,1.43,1.43,0,0,0-.4,2.14c1.11,1.33,2.28-.25,2.89.46a.62.62,0,0,1-.18.9,2.56,2.56,0,0,1-1,.46l.56.76a4.67,4.67,0,0,0,1.14-.68,1.52,1.52,0,0,0,.35-2.22c-1.11-1.32-2.31.22-2.88-.46-.23-.27-.13-.58.16-.82a2.15,2.15,0,0,1,.89-.42Z"
3620
- }), /*#__PURE__*/React__default.createElement("path", {
3621
- fill: colorLogo,
3622
- d: "M60.54,2.18a2.8,2.8,0,0,0-1.3.06,2.23,2.23,0,0,0-1.56,2.91,2.28,2.28,0,0,0,2.77,2,4,4,0,0,0,1.14-.44l-.26-1a2.05,2.05,0,0,1-.91.47c-.71.17-1.39-.34-1.6-1.26s.11-1.67.85-1.84a1.85,1.85,0,0,1,1,0Z"
3623
- }), /*#__PURE__*/React__default.createElement("path", {
3624
- fill: colorLogo,
3625
- d: "M63.1,4.21c-.17,1.42.35,2.58,1.74,2.75S67,6.13,67.19,4.72,66.84,2.14,65.45,2s-2.17.82-2.35,2.23m1.16.15c.12-.93.44-1.65,1.09-1.57s.8.86.69,1.78-.45,1.65-1.1,1.57-.79-.86-.68-1.78"
3626
- }), /*#__PURE__*/React__default.createElement("path", {
3627
- fill: colorLogo,
3628
- d: "M68.82,5.91a1.65,1.65,0,0,0,.75,2.45A1.65,1.65,0,0,0,72,7.52L73.4,4.77l-1-.52L70.89,7.17c-.22.43-.51.61-.92.41s-.44-.56-.21-1l1.48-2.91-1-.52Z"
3629
- }), /*#__PURE__*/React__default.createElement("polygon", {
3630
- fill: colorLogo,
3631
- points: "72.35 9.88 73.04 10.6 75.57 8.16 75.58 8.17 74.02 11.61 74.96 12.58 78.45 9.21 77.75 8.49 75.34 10.83 75.33 10.82 76.76 7.47 75.84 6.5 72.35 9.88"
3632
- }), /*#__PURE__*/React__default.createElement("path", {
3633
- fill: colorLogo,
3634
- d: "M81.32,14.62A2.92,2.92,0,0,0,81,13.36a2.24,2.24,0,0,0-3.2-.87,2.28,2.28,0,0,0-1.28,3.14,4.1,4.1,0,0,0,.69,1l.89-.49a2,2,0,0,1-.66-.78,1.4,1.4,0,0,1,.86-1.84c.88-.43,1.65-.26,2,.43a1.79,1.79,0,0,1,.18,1Z"
3635
- }), /*#__PURE__*/React__default.createElement("rect", {
3636
- fill: colorLogo,
3637
- x: "77.47",
3638
- y: "17.86",
3639
- width: "4.85",
3640
- height: "1.14",
3641
- transform: "translate(-1.99 14.27) rotate(-10.08)"
3642
- }), /*#__PURE__*/React__default.createElement("polygon", {
3643
- fill: colorLogo,
3644
- points: "77.75 21.16 77.56 23.9 78.43 23.96 78.54 22.36 82.51 22.64 82.59 21.49 77.75 21.16"
3645
- }), /*#__PURE__*/React__default.createElement("polygon", {
3646
- fill: colorLogo,
3647
- points: "48.1 32.49 49.47 34.12 49.78 33.85 48.68 32.56 50.15 31.32 51.15 32.52 51.45 32.25 50.46 31.06 51.78 29.94 52.83 31.2 53.14 30.93 51.81 29.36 48.1 32.49"
3648
- }), /*#__PURE__*/React__default.createElement("polygon", {
3649
- fill: colorLogo,
3650
- points: "51.54 36.09 51.88 36.31 54.27 32.76 54.28 32.77 53.58 37.46 54.04 37.78 56.75 33.74 56.42 33.52 54.01 37.11 53.99 37.1 54.72 32.38 54.26 32.06 51.54 36.09"
3651
- }), /*#__PURE__*/React__default.createElement("path", {
3652
- fill: colorLogo,
3653
- d: "M59.06,37.34l.83.24-.47,1.64a1.43,1.43,0,0,1-.68,0,1.83,1.83,0,0,1-1.05-2.46c.43-1.47,1.47-1.73,2.13-1.53a1.89,1.89,0,0,1,.9.57l.15-.45A2.92,2.92,0,0,0,60,34.8a2.23,2.23,0,0,0-2.7,1.75,2.27,2.27,0,0,0,1.35,3,2.24,2.24,0,0,0,1.15,0l.66-2.3L59.17,37Z"
3654
- }), /*#__PURE__*/React__default.createElement("polygon", {
3655
- fill: colorLogo,
3656
- points: "62.58 40.06 64.59 40.06 64.59 39.67 63.01 39.67 63.01 35.22 62.58 35.22 62.58 40.06"
3657
- }), /*#__PURE__*/React__default.createElement("path", {
3658
- fill: colorLogo,
3659
- d: "M66.56,39.85l.41-.12L67,38.32l1.86-.53L69.66,39l.44-.12L67.21,34.6l-.44.13Zm.55-4.73h0l1.53,2.31L67,37.91Z"
3660
- }), /*#__PURE__*/React__default.createElement("polygon", {
3661
- fill: colorLogo,
3662
- points: "72.18 37.79 72.52 37.56 70.19 33.97 70.2 33.97 74.24 36.45 74.7 36.16 72.06 32.07 71.72 32.3 74.07 35.92 74.06 35.92 70.01 33.42 69.54 33.71 72.18 37.79"
3663
- }), /*#__PURE__*/React__default.createElement("path", {
3664
- fill: colorLogo,
3665
- d: "M77.11,33.88l.47-.58A2.21,2.21,0,0,0,77,30a2.07,2.07,0,0,0-3.31.42l-.4.5ZM73.88,30.8l.22-.28c1-1.3,2.07-.62,2.67-.14,1,.75,1.23,1.71.56,2.56l-.27.36Z"
3666
- }), /*#__PURE__*/React__default.createElement("path", {
3667
- fill: colorLogo,
3668
- d: "M110.46,21h0l-2.33,6.65h4.71Zm-1.78-3.24h3.65l6.33,16.12h-3.58l-1.39-3.69h-6.53l-1.41,3.69H102.4Z"
3669
- }), /*#__PURE__*/React__default.createElement("path", {
3670
- fill: colorLogo,
3671
- d: "M123.57,24.66h1.07c1.59,0,3.42-.24,3.42-2.24s-1.81-2.11-3.42-2.11h-1.07Zm-3.23-6.89h3.49c3.46,0,7.6-.11,7.6,4.37a3.69,3.69,0,0,1-3.33,3.74v0c.88.07,1.39.95,1.71,1.67l2.59,6.31h-3.61l-1.93-5c-.47-1.2-.88-1.66-2.25-1.66h-1v6.7h-3.23Z"
3672
- }), /*#__PURE__*/React__default.createElement("polygon", {
3673
- fill: colorLogo,
3674
- points: "137.59 20.31 132.97 20.31 132.97 17.77 145.45 17.77 145.45 20.31 140.82 20.31 140.82 33.9 137.59 33.9 137.59 20.31"
3675
- }), /*#__PURE__*/React__default.createElement("path", {
3676
- fill: colorLogo,
3677
- d: "M156.16,20.73a8.35,8.35,0,0,0-3.28-.69,2.24,2.24,0,0,0-2.54,2.24c0,2.79,7.07,1.61,7.07,7,0,3.53-2.8,4.87-6,4.87a14.29,14.29,0,0,1-4.14-.62l.3-2.91a7.79,7.79,0,0,0,3.65,1c1.22,0,2.86-.62,2.86-2.08,0-3.07-7.06-1.8-7.06-7.13,0-3.61,2.79-4.92,5.63-4.92a12.25,12.25,0,0,1,3.86.57Z"
3678
- }), /*#__PURE__*/React__default.createElement("path", {
3679
- fill: colorLogo,
3680
- d: "M178,33.67a16.81,16.81,0,0,1-3.67.5c-5.22,0-8.85-2.61-8.85-8.06s3.37-8.61,8.85-8.61a10.39,10.39,0,0,1,3.64.67l-.23,2.72a6.65,6.65,0,0,0-3.48-.85c-3.33,0-5.41,2.54-5.41,5.84s2,5.75,5.48,5.75a9.05,9.05,0,0,0,3.53-.67Z"
3681
- }), /*#__PURE__*/React__default.createElement("path", {
3682
- fill: colorLogo,
3683
- d: "M187.42,31.63c3.3,0,4.53-2.93,4.53-5.84S190.63,20,187.42,20,182.9,23,182.9,25.79s1.22,5.84,4.52,5.84m0-14.13c5.06,0,7.9,3.42,7.9,8.29s-2.79,8.38-7.9,8.38-7.89-3.44-7.89-8.38,2.77-8.29,7.89-8.29"
3684
- }), /*#__PURE__*/React__default.createElement("path", {
3685
- fill: colorLogo,
3686
- d: "M197.47,17.77h3.23v9.31c0,2.75.88,4.55,3.35,4.55s3.35-1.8,3.35-4.55V17.77h3.23V28.08c0,4.31-2.45,6.09-6.58,6.09s-6.58-1.78-6.58-6.09Z"
3687
- }), /*#__PURE__*/React__default.createElement("polygon", {
3688
- fill: colorLogo,
3689
- points: "213.06 17.77 217.03 17.77 223.17 29.83 223.22 29.83 223.22 17.77 226.31 17.77 226.31 33.89 222.36 33.89 216.2 21.84 216.15 21.84 216.15 33.89 213.06 33.89 213.06 17.77"
3690
- }), /*#__PURE__*/React__default.createElement("path", {
3691
- fill: colorLogo,
3692
- d: "M240.93,33.67a16.81,16.81,0,0,1-3.67.5c-5.22,0-8.85-2.61-8.85-8.06s3.37-8.61,8.85-8.61a10.43,10.43,0,0,1,3.64.67l-.23,2.72a6.65,6.65,0,0,0-3.48-.85c-3.33,0-5.41,2.54-5.41,5.84s2,5.75,5.48,5.75a9.05,9.05,0,0,0,3.53-.67Z"
3693
- }), /*#__PURE__*/React__default.createElement("rect", {
3694
- fill: colorLogo,
3695
- x: "243.37",
3696
- y: "17.77",
3697
- width: "3.23",
3698
- height: "16.12"
3699
- }), /*#__PURE__*/React__default.createElement("polygon", {
3700
- fill: colorLogo,
3701
- points: "249.15 17.77 252.38 17.77 252.38 31.35 258.64 31.35 258.64 33.89 249.15 33.89 249.15 17.77"
3702
- }), /*#__PURE__*/React__default.createElement("polygon", {
3703
- fill: colorLogo,
3704
- points: "102.45 40.87 111.96 40.87 111.96 43.41 105.68 43.41 105.68 47.38 111.43 47.38 111.43 49.92 105.68 49.92 105.68 54.45 112.01 54.45 112.01 56.99 102.45 56.99 102.45 40.87"
3705
- }), /*#__PURE__*/React__default.createElement("polygon", {
3706
- fill: colorLogo,
3707
- points: "114.66 40.87 118.64 40.87 124.78 52.92 124.82 52.92 124.82 40.87 127.92 40.87 127.92 56.99 123.97 56.99 117.8 44.93 117.76 44.93 117.76 56.99 114.66 56.99 114.66 40.87"
3708
- }), /*#__PURE__*/React__default.createElement("path", {
3709
- fill: colorLogo,
3710
- d: "M143.51,44a10.56,10.56,0,0,0-4.17-.86A5.48,5.48,0,0,0,133.51,49c0,3.28,2,5.75,5.47,5.75a8.6,8.6,0,0,0,2.12-.23v-4.2h-3.42V47.75h6.51v8.68a20.3,20.3,0,0,1-5.21.83c-5.22,0-8.85-2.61-8.85-8.06s3.38-8.61,8.85-8.61a15.72,15.72,0,0,1,4.73.67Z"
3711
- }), /*#__PURE__*/React__default.createElement("polygon", {
3712
- fill: colorLogo,
3713
- points: "146.78 40.87 150.01 40.87 150.01 54.45 156.27 54.45 156.27 56.99 146.78 56.99 146.78 40.87"
3714
- }), /*#__PURE__*/React__default.createElement("path", {
3715
- fill: colorLogo,
3716
- d: "M165.76,44.1h0l-2.34,6.65h4.72ZM164,40.87h3.65L174,57h-3.58L169,53.29h-6.54l-1.4,3.7H157.7Z"
3717
- }), /*#__PURE__*/React__default.createElement("polygon", {
3718
- fill: colorLogo,
3719
- points: "175.53 40.87 179.5 40.87 185.65 52.92 185.69 52.92 185.69 40.87 188.79 40.87 188.79 56.99 184.84 56.99 178.67 44.93 178.62 44.93 178.62 56.99 175.53 56.99 175.53 40.87"
3720
- }), /*#__PURE__*/React__default.createElement("path", {
3721
- fill: colorLogo,
3722
- d: "M194.66,54.45h1.8a5.27,5.27,0,0,0,5.31-5.52,5.27,5.27,0,0,0-5.31-5.52h-1.8Zm-3.23-13.58h4.41c4.94,0,9.3,1.66,9.3,8.06S200.78,57,195.84,57h-4.41Z"
3723
- }), /*#__PURE__*/React__default.createElement("path", {
3724
- fill: colorLogo,
3725
- d: "M248,3.39h-.7l1.84,5.24-.13.46c-.2.67-.39,1.12-.94,1.12a1.29,1.29,0,0,1-.47-.08l-.06.55a3,3,0,0,0,.69.08c.72,0,1.08-.71,1.33-1.42l2.07-5.95h-.67L249.43,7.7h0ZM245.88,6c0,1-.31,2.16-1.53,2.16S242.81,6.92,242.81,6s.37-2.17,1.54-2.17S245.88,5,245.88,6m-3.71,2.59h.64V7.75h0a1.68,1.68,0,0,0,1.62.94c1.42,0,2.13-1.18,2.13-2.71s-.61-2.71-2.13-2.71a1.75,1.75,0,0,0-1.62,1h0V1h-.64Zm-3.46-5.18h-.64V4h0a1.7,1.7,0,0,0-1.61-.71c-1.53,0-2.14,1.13-2.14,2.71,0,1.15.53,2.59,2.19,2.59a1.6,1.6,0,0,0,1.57-1h0c0,1.46-.14,2.66-1.79,2.66a3.55,3.55,0,0,1-1.52-.36l-.05.64a5.45,5.45,0,0,0,1.56.27c1.78,0,2.43-1.18,2.43-2.62ZM235,6c0-1,.32-2.17,1.54-2.17s1.53.92,1.53,2.17c0,.94-.41,2-1.57,2S235,7,235,6m-6.17,2.59h.64V5.7c0-.86.37-1.89,1.54-1.89.88,0,1.23.63,1.23,1.61V8.57h.63V5.26c0-1.14-.48-2-1.76-2a1.64,1.64,0,0,0-1.68,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.71-7.42h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64ZM221.1,6c0-1,.31-2.17,1.53-2.17S224.17,5,224.17,6s-.4,2.16-1.54,2.16S221.1,7,221.1,6m3.7-5h-.63V4.26h0a1.76,1.76,0,0,0-1.62-1C221,3.27,220.4,4.4,220.4,6s.71,2.71,2.13,2.71a1.68,1.68,0,0,0,1.62-.94h0v.82h.63Zm-9.89,7.62h.64V5.7c0-.86.37-1.89,1.54-1.89.88,0,1.22.63,1.22,1.61V8.57H219V5.26c0-1.14-.48-2-1.76-2a1.64,1.64,0,0,0-1.68,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.72-5.18h-.64V6.25c0,.87-.36,1.89-1.53,1.89-.89,0-1.23-.63-1.23-1.6V3.39h-.64V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.67-1h0v.93h.62c0-.42,0-.83,0-1.22Zm-7.08,5.18h.64V3.93h1.17V3.39h-1.17V2.94c0-.62-.09-1.57.78-1.57a1.13,1.13,0,0,1,.51.12l0-.56a1.47,1.47,0,0,0-.6-.1c-1.33,0-1.37,1.09-1.37,2.18v.38h-1v.54h1Zm-3.5-5.1a3.91,3.91,0,0,0-1.25-.2A2.51,2.51,0,0,0,198.8,6a2.45,2.45,0,0,0,2.48,2.71,3.89,3.89,0,0,0,1.33-.18l-.06-.6a3.38,3.38,0,0,1-1.17.23A2,2,0,0,1,199.5,6a1.93,1.93,0,0,1,1.95-2.17,2.78,2.78,0,0,1,1.11.27Zm-5.2-2.32h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64Zm-2.35,0h.64V1h-.64ZM192.26,6c0,1-.31,2.16-1.53,2.16S189.19,6.92,189.19,6s.37-2.17,1.54-2.17S192.26,5,192.26,6m-3.71,2.59h.64V7.75h0a1.68,1.68,0,0,0,1.62.94C192.25,8.69,193,7.51,193,6s-.61-2.71-2.13-2.71a1.75,1.75,0,0,0-1.62,1h0V1h-.64Zm-1.68-5.18h-.64V6.25c0,.87-.36,1.89-1.53,1.89-.89,0-1.23-.63-1.23-1.6V3.39h-.64V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.67-1h0v.93h.62c0-.42,0-.83,0-1.22ZM180.69,6c0,1-.32,2.16-1.54,2.16S177.62,6.92,177.62,6s.39-2.17,1.53-2.17S180.69,5,180.69,6M177,10.7h.64v-3h0a1.6,1.6,0,0,0,1.61,1c1.43,0,2.13-1.18,2.13-2.71s-.6-2.71-2.13-2.71a1.78,1.78,0,0,0-1.65,1.06h0l0-.94H177Zm-3.46-7.31h-.64V4h0a1.72,1.72,0,0,0-1.62-.71c-1.52,0-2.13,1.13-2.13,2.71,0,1.15.53,2.59,2.18,2.59a1.62,1.62,0,0,0,1.58-1h0c0,1.46-.14,2.66-1.79,2.66a3.59,3.59,0,0,1-1.53-.36l0,.64a5.54,5.54,0,0,0,1.57.27c1.78,0,2.43-1.18,2.43-2.62ZM169.81,6c0-1,.31-2.17,1.53-2.17s1.54.92,1.54,2.17c0,.94-.42,2-1.58,2s-1.49-1-1.49-2m-6.17,2.59h.64V5.7c0-.86.36-1.89,1.53-1.89.89,0,1.23.63,1.23,1.61V8.57h.64V5.26c0-1.14-.49-2-1.77-2a1.62,1.62,0,0,0-1.67,1h0V3.39h-.62c0,.41,0,.82,0,1.22Zm-1.71-7.42h-.64V2h.64Zm-.64,7.42h.64V3.39h-.64Zm-4.53-.12a3.91,3.91,0,0,0,1.45.24c.78,0,1.81-.38,1.81-1.47,0-1.7-2.55-1.58-2.55-2.54,0-.66.45-.87,1.11-.87a2.87,2.87,0,0,1,1.15.25l.06-.56a4.08,4.08,0,0,0-1.28-.23c-.85,0-1.68.38-1.68,1.41,0,1.5,2.49,1.31,2.49,2.54,0,.59-.54.92-1.15.92a3.05,3.05,0,0,1-1.35-.32ZM155.5,3.39h-.64V6.25c0,.87-.37,1.89-1.54,1.89-.88,0-1.23-.63-1.23-1.6V3.39h-.63V6.7c0,1.14.48,2,1.76,2a1.65,1.65,0,0,0,1.68-1h0v.93h.62c0-.42,0-.83,0-1.22ZM144.23,6c0-1,.31-2.17,1.53-2.17S147.29,5,147.29,6s-.39,2.16-1.53,2.16S144.23,7,144.23,6m3.7-5h-.64V4.26h0a1.75,1.75,0,0,0-1.61-1c-1.53,0-2.13,1.13-2.13,2.71s.71,2.71,2.13,2.71a1.66,1.66,0,0,0,1.61-.94h0v.82h.64Zm-9.06,4.66a1.7,1.7,0,0,1,1.52-1.8c1,0,1.32.9,1.32,1.8ZM142,7.75a3.27,3.27,0,0,1-1.45.39,1.75,1.75,0,0,1-1.71-2h3.54V5.83c0-1.39-.6-2.56-2.06-2.56-1.31,0-2.18,1.12-2.18,2.71s.64,2.71,2.35,2.71A4.14,4.14,0,0,0,142,8.4Zm-4.71-4.36h-1.18V1.91l-.64.23V3.39h-1v.54h1V7c0,1,.05,1.73,1.18,1.73a2.32,2.32,0,0,0,.78-.14l0-.53a1.47,1.47,0,0,1-.59.12c-.51,0-.69-.39-.69-.85V3.93h1.18Zm-6,5.18h.64V6c0-.94.28-2.08,1.29-2.08a1.41,1.41,0,0,1,.47.07V3.33a2,2,0,0,0-.45-.06,1.52,1.52,0,0,0-1.33,1.11h0v-1h-.64a9.26,9.26,0,0,1,0,1.15ZM125.76,6c0-1.2.6-2.17,1.71-2.17s1.72,1,1.72,2.17-.6,2.16-1.72,2.16-1.71-1-1.71-2.16m-.7,0a2.43,2.43,0,1,0,4.83,0,2.43,2.43,0,1,0-4.83,0m-1.83,0c0,1-.32,2.16-1.54,2.16S120.16,6.92,120.16,6s.4-2.17,1.53-2.17S123.23,5,123.23,6m-3.71,4.72h.64v-3h0a1.61,1.61,0,0,0,1.62,1c1.42,0,2.13-1.18,2.13-2.71s-.61-2.71-2.13-2.71a1.79,1.79,0,0,0-1.66,1.06h0l0-.94h-.64ZM117.4,6c0,1-.32,2.16-1.54,2.16S114.33,6.92,114.33,6s.39-2.17,1.53-2.17S117.4,5,117.4,6m-3.71,4.72h.64v-3h0a1.6,1.6,0,0,0,1.61,1c1.43,0,2.14-1.18,2.14-2.71s-.61-2.71-2.14-2.71a1.79,1.79,0,0,0-1.65,1.06h0l0-.94h-.64ZM112,3.39h-.64V6.25c0,.87-.37,1.89-1.54,1.89-.88,0-1.23-.63-1.23-1.6V3.39H108V6.7c0,1.14.49,2,1.77,2a1.64,1.64,0,0,0,1.68-1h0v.93h.62c0-.42,0-.83,0-1.22Zm-9.4,5a3.92,3.92,0,0,0,1.61.31,2.08,2.08,0,0,0,2.32-2c0-2.07-3.25-2.09-3.25-3.51,0-.91.8-1.22,1.54-1.22a2.89,2.89,0,0,1,1.28.27l.12-.64a4.31,4.31,0,0,0-1.39-.23c-1.25,0-2.25.71-2.25,1.84,0,1.86,3.25,2,3.25,3.43a1.41,1.41,0,0,1-1.59,1.45,2.77,2.77,0,0,1-1.57-.42Z"
3726
- }), /*#__PURE__*/React__default.createElement("rect", {
3727
- fill: colorLogo,
3728
- x: "92.12",
3729
- width: "0.75",
3730
- height: "56.99"
3731
- }), /*#__PURE__*/React__default.createElement("path", {
3732
- fill: colorLogo,
3733
- d: "M2.46,50.42H4.22v5.07H7.29V57H2.46Z"
3734
- }), /*#__PURE__*/React__default.createElement("path", {
3735
- fill: colorLogo,
3736
- d: "M10.84,57.2a3.59,3.59,0,0,1-1.37-.26,3.27,3.27,0,0,1-1.82-1.83,4,4,0,0,1,0-2.79,3.5,3.5,0,0,1,.72-1.1,3.28,3.28,0,0,1,1.1-.72,3.59,3.59,0,0,1,1.37-.26,3.65,3.65,0,0,1,1.38.26,3.14,3.14,0,0,1,1.09.72,3.33,3.33,0,0,1,.72,1.1,4,4,0,0,1,0,2.79,3.3,3.3,0,0,1-1.81,1.83A3.65,3.65,0,0,1,10.84,57.2Zm0-1.65a1.67,1.67,0,0,0,.69-.14A1.65,1.65,0,0,0,12,55a1.68,1.68,0,0,0,.32-.59,2.35,2.35,0,0,0,.11-.71,2.41,2.41,0,0,0-.11-.72,1.64,1.64,0,0,0-.32-.58,1.54,1.54,0,0,0-.51-.4,1.77,1.77,0,0,0-1.38,0,1.54,1.54,0,0,0-.51.4,1.64,1.64,0,0,0-.32.58,2.41,2.41,0,0,0-.11.72,2.35,2.35,0,0,0,.11.71,1.68,1.68,0,0,0,.32.59,1.65,1.65,0,0,0,.51.39A1.67,1.67,0,0,0,10.84,55.55Z"
3737
- }), /*#__PURE__*/React__default.createElement("path", {
3738
- fill: colorLogo,
3739
- d: "M16.43,52h-2V50.42h5.83V52h-2V57H16.43Z"
3740
- }), /*#__PURE__*/React__default.createElement("path", {
3741
- fill: colorLogo,
3742
- d: "M22.49,52h-2V50.42h5.83V52h-2V57H22.49Z"
3743
- }), /*#__PURE__*/React__default.createElement("path", {
3744
- fill: colorLogo,
3745
- d: "M26.7,50.42h4.77v1.52h-3v1h2.47v1.43H28.46v1.13h3.22V57h-5Z"
3746
- }), /*#__PURE__*/React__default.createElement("path", {
3747
- fill: colorLogo,
3748
- d: "M32.4,50.42h2.74a3.24,3.24,0,0,1,1,.14,2.05,2.05,0,0,1,.74.41,2,2,0,0,1,.48.68,2.5,2.5,0,0,1,.16.94,2.19,2.19,0,0,1-.28,1.14,2.27,2.27,0,0,1-.77.77L37.86,57H36l-1.13-2.25h-.73V57H32.4Zm2.57,3a.75.75,0,0,0,.79-.79.8.8,0,0,0-.21-.59.77.77,0,0,0-.59-.22h-.84v1.6Z"
3749
- }), /*#__PURE__*/React__default.createElement("path", {
3750
- fill: colorLogo,
3751
- d: "M39.81,54.4l-2.35-4h2l1.29,2.36L42,50.42h2l-2.36,4V57H39.81Z"
3752
- }), /*#__PURE__*/React__default.createElement("path", {
3753
- fill: colorLogo,
3754
- d: "M45.71,50.42h4.62V52H47.47v1.28h2.21v1.45H47.47V57H45.71Z"
3755
- }), /*#__PURE__*/React__default.createElement("path", {
3756
- fill: colorLogo,
3757
- d: "M50.76,50.42h1.76V54.3a1.46,1.46,0,0,0,.25.89,1.17,1.17,0,0,0,1.67,0,1.48,1.48,0,0,0,.25-.89V50.42h1.78v4a3,3,0,0,1-.21,1.15,2.4,2.4,0,0,1-.59.86,2.66,2.66,0,0,1-.9.55,3.58,3.58,0,0,1-2.3,0,2.85,2.85,0,0,1-.91-.54,2.49,2.49,0,0,1-.59-.86,3,3,0,0,1-.21-1.16Z"
3758
- }), /*#__PURE__*/React__default.createElement("path", {
3759
- fill: colorLogo,
3760
- d: "M57.42,50.42H59l2.54,3.69V50.42h1.74V57h-1.5l-2.64-3.8V57H57.42Z"
3761
- }), /*#__PURE__*/React__default.createElement("path", {
3762
- fill: colorLogo,
3763
- d: "M64.28,50.42h2.54a4.85,4.85,0,0,1,1.41.2,3.06,3.06,0,0,1,1.13.6,2.67,2.67,0,0,1,.74,1.05,3.78,3.78,0,0,1,.27,1.49,3.56,3.56,0,0,1-.27,1.44,2.77,2.77,0,0,1-.75,1,3.18,3.18,0,0,1-1.13.62,5,5,0,0,1-1.41.2H64.28Zm2.47,5.07a1.67,1.67,0,0,0,1.81-1.76,2.27,2.27,0,0,0-.11-.72,1.59,1.59,0,0,0-.34-.56,1.29,1.29,0,0,0-.56-.36,2.13,2.13,0,0,0-.8-.13H66v3.53Z"
3764
- }), /*#__PURE__*/React__default.createElement("path", {
3765
- fill: colorLogo,
3766
- d: "M71.05,50.42h4.76v1.52h-3v1h2.47v1.43H72.8v1.13H76V57h-5Z"
3767
- }), /*#__PURE__*/React__default.createElement("path", {
3768
- fill: colorLogo,
3769
- d: "M76.75,50.42h2.54a4.85,4.85,0,0,1,1.41.2,3.15,3.15,0,0,1,1.13.6,2.89,2.89,0,0,1,.74,1.05,3.78,3.78,0,0,1,.27,1.49,3.56,3.56,0,0,1-.27,1.44,3,3,0,0,1-.75,1,3.18,3.18,0,0,1-1.13.62,5,5,0,0,1-1.41.2H76.75Zm2.47,5.07A1.66,1.66,0,0,0,81,53.73a2,2,0,0,0-.11-.72,1.44,1.44,0,0,0-.33-.56,1.36,1.36,0,0,0-.56-.36,2.13,2.13,0,0,0-.8-.13H78.5v3.53Z"
3770
- }), /*#__PURE__*/React__default.createElement("path", {
3771
- fill: colorBackground,
3772
- d: "M28.47,18.89a2.62,2.62,0,0,0-1.56.63c.16-1.82-.51-3.17-1.76-3.63a3.22,3.22,0,0,0-2.33.1l-1-2.44c.93-2.28,2.56-5.06,2.56-7.34,0-1.77-.89-3.07-2.6-3.07a4.45,4.45,0,0,0-3.05,1.95C17.53,2.45,16.28,1.2,14.94,1.2c-2.13,0-3,2.13-3,4a18.84,18.84,0,0,0,2,7.52,63.85,63.85,0,0,0-2.9,7.57,8.59,8.59,0,0,0-6.12-2.7,6.3,6.3,0,0,0-3.53,1A2.93,2.93,0,0,0,0,20.87a2.64,2.64,0,0,0,2.23,2.54C4.56,24,5.6,25.9,6.48,29.58c1.61,6.64,5.76,10.63,12.14,10.63A12.26,12.26,0,0,0,30.86,28a14.77,14.77,0,0,0-.26-2.64,10.78,10.78,0,0,0,.46-1.56c.57-2.85-.52-4.88-2.59-4.88"
3773
- }), /*#__PURE__*/React__default.createElement("path", {
3774
- fill: colorLogo,
3775
- d: "M24.62,17.33c1.08.5,1.17,2.76.08,5.45-.88,2.6-2.15,4.18-3.34,4.19-.93,0-1.71-.66-1.71-2.42,0-3.32,2.73-8.25,5-7.22"
3776
- }), /*#__PURE__*/React__default.createElement("path", {
3777
- fill: colorLogo,
3778
- d: "M13.43,5.15c0-1.09.47-2.39,1.51-2.39q1.08,0,2.64,3.42a27.54,27.54,0,0,0-2.75,4.52,17.18,17.18,0,0,1-1.4-5.55"
3779
- }), /*#__PURE__*/React__default.createElement("path", {
3780
- fill: colorLogo,
3781
- d: "M18.62,38.66c-5.45,0-9.18-3.79-10.63-9.44-1-3.89-2.23-6.49-5.4-7.32-.36-.1-1-.36-1-1S2.75,19.1,4.93,19.1a7.68,7.68,0,0,1,6.17,3.69l1.11-.41c.16-2.12,1.24-5,3.14-9.09,2.39-5.13,4.81-8.63,6.42-8.59a1.41,1.41,0,0,1,1.12,1.51c0,2.12-1.87,5.31-3.51,8.78-.17.35-.91,2-.91,2l1.07.46c.35-.59,1.08-2,1.18-2.24l.8,1.77a11.34,11.34,0,0,0-3.21,7.58c0,2,.88,3.2,2.17,3.61a2.91,2.91,0,0,0,3.22-1,2.57,2.57,0,0,0,2.65,2.32,3.35,3.35,0,0,0,3.06-2.21A11,11,0,0,1,18.62,38.66"
3782
- }), /*#__PURE__*/React__default.createElement("path", {
3783
- fill: colorLogo,
3784
- d: "M29.66,23.56c-.36,2.18-1.68,4.6-3.31,4.6s-1.47-2.06-1.11-3.3c.57-2.23,2.09-4.57,3.23-4.57s1.5,1.41,1.19,3.27"
3785
- }), /*#__PURE__*/React__default.createElement("path", {
3786
- fill: colorBackground,
3787
- d: "M24.15,34.49c-4.61,2.62-8.91.95-10.53-3.83L15,30c1.32,3.89,5.13,5,8.65,3.13Z"
3788
- }), /*#__PURE__*/React__default.createElement("path", {
3789
- fill: colorBackground,
3790
- d: "M22.9,24.5a1.21,1.21,0,1,1-1.21-1.21A1.21,1.21,0,0,1,22.9,24.5"
3791
- }), /*#__PURE__*/React__default.createElement("path", {
3792
- fill: colorBackground,
3793
- d: "M28,26a1.09,1.09,0,1,1-1.09-1.09A1.09,1.09,0,0,1,28,26"
3794
- }), /*#__PURE__*/React__default.createElement("path", {
3795
- fill: colorBackground,
3796
- d: "M25.9,6.58a1.15,1.15,0,0,1-.41-.08,1.23,1.23,0,0,1-.33-.23,1.12,1.12,0,0,1-.22-.33,1.07,1.07,0,0,1-.08-.41,1.06,1.06,0,0,1,.08-.4,1.33,1.33,0,0,1,.22-.34,1.46,1.46,0,0,1,.33-.22,1.16,1.16,0,0,1,.42-.08,1.06,1.06,0,0,1,.4.08,1.12,1.12,0,0,1,.33.22,1.11,1.11,0,0,1,.22.34,1.06,1.06,0,0,1,.08.4,1.07,1.07,0,0,1-.08.41,1,1,0,0,1-.22.33,1,1,0,0,1-.33.23A1.11,1.11,0,0,1,25.9,6.58Zm0-.2a.72.72,0,0,0,.33-.07.76.76,0,0,0,.26-.18.78.78,0,0,0,.17-.26,1,1,0,0,0,.06-.33.88.88,0,0,0-.06-.33.73.73,0,0,0-.17-.27.76.76,0,0,0-.26-.18.71.71,0,0,0-.32-.07.72.72,0,0,0-.33.07.68.68,0,0,0-.26.18.73.73,0,0,0-.17.27.88.88,0,0,0-.06.33,1,1,0,0,0,.06.33.78.78,0,0,0,.17.26.68.68,0,0,0,.26.18A.71.71,0,0,0,25.9,6.38ZM25.54,5H26a.47.47,0,0,1,.17,0,.41.41,0,0,1,.11.07.3.3,0,0,1,.07.1.52.52,0,0,1,0,.11.41.41,0,0,1-.05.19.31.31,0,0,1-.15.12l.25.44h-.22l-.24-.41h-.17v.41h-.2Zm.4.49a.17.17,0,0,0,.13,0,.17.17,0,0,0,.05-.12.13.13,0,0,0-.05-.11.2.2,0,0,0-.14,0h-.19v.32Z"
3797
- })))));
3536
+ }, imageSource ? /*#__PURE__*/React__default.createElement("img", {
3537
+ src: imageSource,
3538
+ alt: alt
3539
+ }) : children);
3798
3540
  };
3799
3541
 
3800
3542
  var _templateObject$j, _templateObject2$b;
@@ -4294,7 +4036,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
4294
4036
  };
4295
4037
 
4296
4038
  var _templateObject$p, _templateObject2$h;
4297
- 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) {
4039
+ 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) {
4298
4040
  var iconName = _ref.iconName;
4299
4041
  return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--harmonic-text-link-underline-offset)';
4300
4042
  }, function (_ref2) {
@@ -4303,23 +4045,23 @@ var TextLinkWrapper = /*#__PURE__*/styled.a(_templateObject$p || (_templateObjec
4303
4045
  }, devices.mobile);
4304
4046
  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"])));
4305
4047
 
4306
- var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
4048
+ var _excluded$b = ["children", "iconName", "iconDirection", "color"];
4307
4049
  var TextLink = function TextLink(_ref) {
4308
4050
  var children = _ref.children,
4309
4051
  iconName = _ref.iconName,
4310
4052
  iconDirection = _ref.iconDirection,
4311
- textColor = _ref.textColor,
4053
+ color = _ref.color,
4312
4054
  rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
4313
4055
  var truncatedString = children.substring(0, 30);
4314
4056
  return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
4315
- color: textColor,
4057
+ color: color,
4316
4058
  iconName: iconName
4317
4059
  }, rest), truncatedString, iconName ? (/*#__PURE__*/React__default.createElement(TextLinkIconWrapper, {
4318
4060
  "data-testid": "text-link-icon"
4319
4061
  }, /*#__PURE__*/React__default.createElement(Icon, {
4320
4062
  iconName: iconName,
4321
4063
  direction: iconDirection,
4322
- color: textColor
4064
+ color: color
4323
4065
  }))) : null);
4324
4066
  };
4325
4067
 
@@ -4565,21 +4307,18 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
4565
4307
  var Tickbox2 = /*#__PURE__*/forwardRef(Tickbox2Component);
4566
4308
 
4567
4309
  var _templateObject$s, _templateObject2$k, _templateObject3$b, _templateObject4$8, _templateObject5$5, _templateObject6$3, _templateObject7, _templateObject8;
4568
- 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) {
4310
+ var TimerWrapper = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-", ");\n"])), function (_ref) {
4569
4311
  var color = _ref.color;
4570
4312
  return color;
4571
- }, function (_ref2) {
4572
- var color = _ref2.color;
4573
- return color;
4574
4313
  });
4575
- 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) {
4576
- var color = _ref3.color;
4314
+ 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) {
4315
+ var color = _ref2.color;
4577
4316
  return color;
4578
4317
  }, devices.mobileAndTablet);
4579
4318
  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);
4580
- var ValuesWrapper = /*#__PURE__*/styled.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
4581
- var TimerLabel = /*#__PURE__*/styled.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
4582
- 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);
4319
+ 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);
4320
+ 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"])));
4321
+ 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);
4583
4322
  var TimerValueWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4584
4323
  var TimerValue = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
4585
4324
 
@@ -4612,17 +4351,9 @@ var Timer = function Timer(_ref) {
4612
4351
  }
4613
4352
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
4614
4353
  className: "harmonic-timer-value"
4615
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
4616
- hierarchy: "h3",
4617
- size: "medium"
4618
- }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
4354
+ }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
4619
4355
  className: "harmonic-timer-label"
4620
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4621
- size: "large"
4622
- }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
4623
- hierarchy: "h3",
4624
- size: "medium"
4625
- }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
4356
+ }, label)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
4626
4357
  };
4627
4358
  React__default.useEffect(function () {
4628
4359
  if (isEndDateReached) return undefined;
@@ -4662,8 +4393,8 @@ var Timer = function Timer(_ref) {
4662
4393
  color: color
4663
4394
  }, title && (/*#__PURE__*/React__default.createElement(TitleWrapper, {
4664
4395
  className: "harmonic-timer-title-wrapper"
4665
- }, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
4666
- size: "large"
4396
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
4397
+ level: 5
4667
4398
  }, title))), /*#__PURE__*/React__default.createElement(ValuesWrapper, {
4668
4399
  className: "harmonic-timer-values-wrapper"
4669
4400
  }, renderTimerValue(days, 'Days'), renderTimerValue(hours, 'Hrs'), renderTimerValue(minutes, 'Mins'), renderTimerValue(seconds, 'Secs', false)), bottomLine && /*#__PURE__*/React__default.createElement(Line, {
@@ -4674,16 +4405,16 @@ var Timer = function Timer(_ref) {
4674
4405
  };
4675
4406
 
4676
4407
  var _templateObject$t;
4677
- var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n p,\n li {\n display: inline-block;\n margin: 0;\n }\n\n li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n li:first-child:before {\n display: none;\n }\n"])));
4408
+ var TypeTagsContainer = /*#__PURE__*/styled.ul(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style-type: none;\n margin: 0;\n padding: 0;\n\n & li {\n display: inline-block;\n margin: 0;\n }\n\n & li:before {\n content: '\u2014';\n margin: 0 0.5em;\n }\n\n & li:first-child:before {\n display: none;\n }\n"])));
4678
4409
 
4679
4410
  var TypeTags = function TypeTags(_ref) {
4680
4411
  var list = _ref.list;
4681
4412
  return /*#__PURE__*/React__default.createElement(TypeTagsContainer, null, list.map(function (t) {
4682
- return /*#__PURE__*/React__default.createElement("li", {
4413
+ return /*#__PURE__*/React__default.createElement(Overline, {
4414
+ level: 1,
4415
+ tag: "li",
4683
4416
  key: t
4684
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
4685
- size: "large"
4686
- }, t));
4417
+ }, t);
4687
4418
  }));
4688
4419
  };
4689
4420
 
@@ -5093,82 +4824,8 @@ var _templateObject$w, _templateObject2$n;
5093
4824
  var MediaLinksWrapper = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: var(--footer-media-gap);\n"])));
5094
4825
  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"])));
5095
4826
 
5096
- // WARNING: Do not use this on server side rendering, it may throw an error.
5097
- var isIOS = function isIOS() {
5098
- try {
5099
- console.warn('Do not use this on server side rendering, it may throw an error.');
5100
- if (typeof navigator === undefined) return false;
5101
- return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
5102
- // iPad on iOS 13 detection
5103
- navigator.userAgent.includes('Mac') && 'ontouchend' in document;
5104
- } catch (e) {
5105
- console.warn('Error checking if device is iOS.', e);
5106
- return false;
5107
- }
5108
- };
5109
- // React hook version of isIOS (for server side rendering)
5110
- var useIOS = function useIOS() {
5111
- var _useState = useState(false),
5112
- IOS = _useState[0],
5113
- setIOS = _useState[1];
5114
- useEffect(function () {
5115
- if (typeof navigator === undefined) return;
5116
- setIOS(isIOS());
5117
- }, []);
5118
- return IOS;
5119
- };
5120
- // Checks device size based on window width
5121
- var isMobile = function isMobile() {
5122
- try {
5123
- console.warn('Do not use this on server side rendering, it may throw an error.');
5124
- if (typeof window === undefined) return false;
5125
- return window.innerWidth < breakpoints.sm;
5126
- } catch (e) {
5127
- console.warn('Error checking if device is mobile.', e);
5128
- return false;
5129
- }
5130
- };
5131
- // React hook version of isMobile (for server side rendering)
5132
- var useMobile = function useMobile() {
5133
- var _useState2 = useState(false),
5134
- mobile = _useState2[0],
5135
- setMobile = _useState2[1];
5136
- useEffect(function () {
5137
- if (typeof window === undefined) return;
5138
- setMobile(isMobile());
5139
- }, []);
5140
- return mobile;
5141
- };
5142
- var useViewport = function useViewport() {
5143
- var _useState3 = useState({
5144
- width: window.innerWidth,
5145
- isMobile: window.innerWidth < breakpoints.sm,
5146
- isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5147
- isDesktop: window.innerWidth >= breakpoints.md
5148
- }),
5149
- viewport = _useState3[0],
5150
- setViewport = _useState3[1];
5151
- useEffect(function () {
5152
- var handleResize = function handleResize() {
5153
- setViewport({
5154
- width: window.innerWidth,
5155
- isMobile: window.innerWidth < breakpoints.sm,
5156
- isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5157
- isDesktop: window.innerWidth >= breakpoints.md
5158
- });
5159
- };
5160
- window.addEventListener('resize', handleResize);
5161
- return function () {
5162
- return window.removeEventListener('resize', handleResize);
5163
- };
5164
- }, []);
5165
- return viewport;
5166
- };
5167
-
5168
4827
  var SocialLinks = function SocialLinks(_ref) {
5169
4828
  var items = _ref.items;
5170
- var _useViewport = useViewport(),
5171
- isMobile = _useViewport.isMobile;
5172
4829
  return /*#__PURE__*/React__default.createElement(MediaLinksWrapper, null, items.map(function (mediaLink, idx) {
5173
4830
  return /*#__PURE__*/React__default.createElement(MediaIconWrapper, {
5174
4831
  key: mediaLink.name + "-" + idx,
@@ -5177,8 +4834,7 @@ var SocialLinks = function SocialLinks(_ref) {
5177
4834
  "aria-label": mediaLink.name,
5178
4835
  rel: "noopener noreferrer" // Ensures security for external links
5179
4836
  ,
5180
- target: "_blank",
5181
- tabIndex: isMobile ? 1 : undefined
4837
+ target: "_blank"
5182
4838
  }, /*#__PURE__*/React__default.createElement(Icon, {
5183
4839
  iconName: mediaLink.name,
5184
4840
  color: "white",
@@ -5192,8 +4848,8 @@ var NavigationWrapper = /*#__PURE__*/styled.div(_templateObject$x || (_templateO
5192
4848
  var isMenuOpen = _ref.isMenuOpen;
5193
4849
  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 ";
5194
4850
  });
5195
- 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);
5196
- 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);
4851
+ 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);
4852
+ 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);
5197
4853
  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) {
5198
4854
  var visible = _ref2.visible;
5199
4855
  return visible ? 'visible' : 'hidden';
@@ -5219,13 +4875,13 @@ var MobileMenuContainer = /*#__PURE__*/styled(Grid)(_templateObject7$2 || (_temp
5219
4875
  var showSearch = _ref8.showSearch;
5220
4876
  return showSearch ? '110px' : '12px';
5221
4877
  });
5222
- 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);
5223
- 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);
5224
- 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);
5225
- 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);
5226
- 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);
4878
+ 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);
4879
+ 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);
4880
+ 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);
4881
+ 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);
4882
+ 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);
5227
4883
  var NavContainerGridItem = /*#__PURE__*/styled(GridItem)(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
5228
- 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);
4884
+ 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);
5229
4885
  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);
5230
4886
 
5231
4887
  var _templateObject$y;
@@ -5247,7 +4903,7 @@ var BasketContainer = /*#__PURE__*/styled.div(_templateObject$z || (_templateObj
5247
4903
  });
5248
4904
  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"])));
5249
4905
  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"])));
5250
- 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);
4906
+ var BasketInfo = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: max-content;\n }\n"])), devices.mobileAndTablet);
5251
4907
  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"])));
5252
4908
  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"])));
5253
4909
 
@@ -5792,13 +5448,85 @@ var InputContainer = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObj
5792
5448
  var TextLinkWrapper$1 = /*#__PURE__*/styled(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-red);\n"])));
5793
5449
  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"])));
5794
5450
 
5795
- var SearchBar = function SearchBar(_ref) {
5796
- var onClick = _ref.onClick,
5797
- onClose = _ref.onClose,
5798
- className = _ref.className;
5799
- var _useState = useState(false),
5800
- showSearchLink = _useState[0],
5801
- setShowSearchLink = _useState[1];
5451
+ // WARNING: Do not use this on server side rendering, it may throw an error.
5452
+ var isIOS = function isIOS() {
5453
+ try {
5454
+ console.warn('Do not use this on server side rendering, it may throw an error.');
5455
+ if (typeof navigator === undefined) return false;
5456
+ return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
5457
+ // iPad on iOS 13 detection
5458
+ navigator.userAgent.includes('Mac') && 'ontouchend' in document;
5459
+ } catch (e) {
5460
+ console.warn('Error checking if device is iOS.', e);
5461
+ return false;
5462
+ }
5463
+ };
5464
+ // React hook version of isIOS (for server side rendering)
5465
+ var useIOS = function useIOS() {
5466
+ var _useState = useState(false),
5467
+ IOS = _useState[0],
5468
+ setIOS = _useState[1];
5469
+ useEffect(function () {
5470
+ if (typeof navigator === undefined) return;
5471
+ setIOS(isIOS());
5472
+ }, []);
5473
+ return IOS;
5474
+ };
5475
+ // Checks device size based on window width
5476
+ var isMobile = function isMobile() {
5477
+ try {
5478
+ console.warn('Do not use this on server side rendering, it may throw an error.');
5479
+ if (typeof window === undefined) return false;
5480
+ return window.innerWidth < breakpoints.sm;
5481
+ } catch (e) {
5482
+ console.warn('Error checking if device is mobile.', e);
5483
+ return false;
5484
+ }
5485
+ };
5486
+ // React hook version of isMobile (for server side rendering)
5487
+ var useMobile = function useMobile() {
5488
+ var _useState2 = useState(false),
5489
+ mobile = _useState2[0],
5490
+ setMobile = _useState2[1];
5491
+ useEffect(function () {
5492
+ if (typeof window === undefined) return;
5493
+ setMobile(isMobile());
5494
+ }, []);
5495
+ return mobile;
5496
+ };
5497
+ var useViewport = function useViewport() {
5498
+ var _useState3 = useState({
5499
+ width: window.innerWidth,
5500
+ isMobile: window.innerWidth < breakpoints.sm,
5501
+ isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5502
+ isDesktop: window.innerWidth >= breakpoints.md
5503
+ }),
5504
+ viewport = _useState3[0],
5505
+ setViewport = _useState3[1];
5506
+ useEffect(function () {
5507
+ var handleResize = function handleResize() {
5508
+ setViewport({
5509
+ width: window.innerWidth,
5510
+ isMobile: window.innerWidth < breakpoints.sm,
5511
+ isTablet: window.innerWidth >= breakpoints.sm && window.innerWidth < breakpoints.md,
5512
+ isDesktop: window.innerWidth >= breakpoints.md
5513
+ });
5514
+ };
5515
+ window.addEventListener('resize', handleResize);
5516
+ return function () {
5517
+ return window.removeEventListener('resize', handleResize);
5518
+ };
5519
+ }, []);
5520
+ return viewport;
5521
+ };
5522
+
5523
+ var SearchBar = function SearchBar(_ref) {
5524
+ var onClick = _ref.onClick,
5525
+ onClose = _ref.onClose,
5526
+ className = _ref.className;
5527
+ var _useState = useState(false),
5528
+ showSearchLink = _useState[0],
5529
+ setShowSearchLink = _useState[1];
5802
5530
  var _useState2 = useState(''),
5803
5531
  searchValue = _useState2[0],
5804
5532
  setSearchValue = _useState2[1];
@@ -5899,8 +5627,7 @@ var Navigation = function Navigation(_ref) {
5899
5627
  menuData = _ref.menuData,
5900
5628
  onSearch = _ref.onSearch,
5901
5629
  onLink = _ref.onLink,
5902
- _ref$crest = _ref.crest,
5903
- crest = _ref$crest === void 0 ? true : _ref$crest,
5630
+ crest = _ref.crest,
5904
5631
  className = _ref.className;
5905
5632
  var _useState = useState(dataNavTop),
5906
5633
  navTopData = _useState[0],
@@ -6032,7 +5759,7 @@ var Navigation = function Navigation(_ref) {
6032
5759
  })))))));
6033
5760
  };
6034
5761
 
6035
- var _templateObject$D, _templateObject2$t, _templateObject3$i, _templateObject4$e, _templateObject5$b, _templateObject6$8, _templateObject7$4;
5762
+ var _templateObject$D, _templateObject2$t, _templateObject3$i, _templateObject4$e, _templateObject5$b, _templateObject6$8, _templateObject7$4, _templateObject8$3;
6036
5763
  var FooterSection = /*#__PURE__*/styled.footer(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 50px;\n\n @media ", " {\n padding: 40px 32px;\n }\n\n @media ", " {\n padding: 20px;\n }\n"])), devices.tablet, devices.mobile);
6037
5764
  var FooterContainer = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 40px;\n max-width: 1140px;\n margin: 0 auto;\n\n @media ", " {\n gap: 24px;\n }\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n"])), devices.tablet, devices.mobile);
6038
5765
  var PolicyLinksSection = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n order: 2;\n }\n"])), devices.tablet, devices.mobile);
@@ -6040,22 +5767,20 @@ var SocialAndNewsletterSection = /*#__PURE__*/styled.div(_templateObject4$e || (
6040
5767
  var SectionWrapper = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
6041
5768
  var LogoAndDescriptionSection = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: span 4;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n img {\n width: 120px;\n margin-bottom: 12px;\n }\n\n @media ", " {\n order: 3;\n gap: 24px;\n }\n"])), devices.mobile);
6042
5769
  var TextLinkWrapper$2 = /*#__PURE__*/styled(TextLink)(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: 6px;\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
5770
+ var SponsorWrapper = /*#__PURE__*/styled.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n height: auto;\n width: 100%;\n max-width: 100%;\n\n img {\n width: 100%;\n }\n\n @media ", " {\n max-width: 100%;\n }\n\n @media ", " {\n max-width: 50%;\n }\n"])), devices.tablet, devices.mobile);
6043
5771
 
6044
5772
  var _templateObject$E;
6045
5773
  var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled(TextLink)(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-sans);\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 0.4px;\n color: var(--color-base-white);\n border-bottom: unset;\n text-decoration: underline;\n text-underline-offset: 6px;\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
6046
5774
 
6047
5775
  var PolicyLinks = function PolicyLinks(_ref) {
6048
5776
  var items = _ref.items;
6049
- var _useViewport = useViewport(),
6050
- isMobile = _useViewport.isMobile;
6051
5777
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, items.map(function (link, idx) {
6052
5778
  return /*#__PURE__*/React__default.createElement(PolicyLinksTextLinkWrapper, {
6053
5779
  key: link.href + "-" + idx,
6054
5780
  target: link.href,
6055
5781
  href: link.href,
6056
5782
  "data-roh": link.dataRoh,
6057
- "aria-label": link.title,
6058
- tabIndex: isMobile ? 4 : undefined
5783
+ "aria-label": link.title
6059
5784
  }, link.title);
6060
5785
  }));
6061
5786
  };
@@ -6074,10 +5799,9 @@ var Footer = function Footer(_ref) {
6074
5799
  additionalInfo = data.additionalInfo;
6075
5800
  var _useViewport = useViewport(),
6076
5801
  isMobile = _useViewport.isMobile;
5802
+ var sponsorImageSource = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
6077
5803
  return /*#__PURE__*/React__default.createElement(FooterSection, {
6078
- className: className,
6079
- "aria-label": "Footer",
6080
- role: "contentinfo"
5804
+ className: className
6081
5805
  }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
6082
5806
  "data-testid": "policy-links"
6083
5807
  }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
@@ -6088,16 +5812,14 @@ var Footer = function Footer(_ref) {
6088
5812
  items: rawSocialMediaLinks
6089
5813
  }), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
6090
5814
  href: contact.href,
6091
- "aria-label": contact.title,
6092
- tabIndex: isMobile ? 2 : undefined
5815
+ "aria-label": contact.title
6093
5816
  }, contact.title)), /*#__PURE__*/React__default.createElement(SectionWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6094
5817
  size: "large",
6095
5818
  color: "white"
6096
5819
  }, newsletter.text), /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
6097
5820
  href: newsletter.link.href,
6098
5821
  "data-roh": newsletter.link.dataRoh,
6099
- "aria-label": newsletter.link.title,
6100
- tabIndex: isMobile ? 3 : undefined
5822
+ "aria-label": newsletter.link.title
6101
5823
  }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
6102
5824
  "data-testid": "arts-logo"
6103
5825
  }, /*#__PURE__*/React__default.createElement("a", Object.assign({
@@ -6106,7 +5828,9 @@ var Footer = function Footer(_ref) {
6106
5828
  rel: "noopener noreferrer"
6107
5829
  }, artsLogo, {
6108
5830
  "aria-label": "Sponsor Logo link"
6109
- }), /*#__PURE__*/React__default.createElement(SponsorLogo, null))), /*#__PURE__*/React__default.createElement("div", {
5831
+ }), /*#__PURE__*/React__default.createElement(SponsorWrapper, null, /*#__PURE__*/React__default.createElement(SponsorLogo, {
5832
+ imageSource: sponsorImageSource
5833
+ })))), /*#__PURE__*/React__default.createElement("div", {
6110
5834
  "data-testid": "additional-info"
6111
5835
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6112
5836
  size: isMobile ? 'medium' : 'small',
@@ -6358,7 +6082,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
6358
6082
  }))) : null)) : null))));
6359
6083
  };
6360
6084
 
6361
- var _templateObject$G, _templateObject2$v, _templateObject3$k, _templateObject4$g, _templateObject6$a, _templateObject7$5, _templateObject8$3, _templateObject9$2, _templateObject10$2;
6085
+ var _templateObject$G, _templateObject2$v, _templateObject3$k, _templateObject4$g, _templateObject6$a, _templateObject7$5, _templateObject8$4, _templateObject9$2, _templateObject10$2;
6362
6086
  var TitleCTAGridWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
6363
6087
  var sticky = _ref.sticky;
6364
6088
  return sticky ? 'sticky' : 'initial';
@@ -6371,7 +6095,7 @@ var TitleCTAGridItem = /*#__PURE__*/styled.div(_templateObject3$k || (_templateO
6371
6095
  var AnchorTitle = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n min-height: var(--button-height);\n\n h5 {\n padding: 0;\n margin: 0;\n }\n\n @media ", " {\n & {\n min-height: 50px;\n }\n }\n"])), devices.mobile);
6372
6096
  var ButtonsDesktopWrapper = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n\n @media ", " {\n display: none;\n }\n\n a {\n width: max-content;\n }\n"])), devices.mobile);
6373
6097
  var ButtonsMobileWrapper = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
6374
- var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
6098
+ var PrimaryButtonReverse = /*#__PURE__*/styled(PrimaryButton)(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
6375
6099
  var theme = _ref3.theme;
6376
6100
  return theme.colors.primaryButtonReverseBg;
6377
6101
  }, function (_ref4) {
@@ -6388,7 +6112,7 @@ var MessageWrapper = /*#__PURE__*/styled.div(_templateObject9$2 || (_templateObj
6388
6112
  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);
6389
6113
 
6390
6114
  var _excluded$f = ["text"],
6391
- _excluded2$1 = ["text"];
6115
+ _excluded2 = ["text"];
6392
6116
  var TitleWithCTA = function TitleWithCTA(_ref) {
6393
6117
  var title = _ref.title,
6394
6118
  links = _ref.links,
@@ -6400,7 +6124,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
6400
6124
  primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
6401
6125
  var _ref3 = (links == null ? void 0 : links[1]) || {},
6402
6126
  secondaryButtonText = _ref3.text,
6403
- secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
6127
+ secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
6404
6128
  return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
6405
6129
  sticky: sticky
6406
6130
  }, /*#__PURE__*/React__default.createElement(TitleCTAGrid, null, /*#__PURE__*/React__default.createElement(TitleCTAGridItem, {
@@ -7015,7 +6739,7 @@ var TextOnly = function TextOnly(_ref) {
7015
6739
  })));
7016
6740
  };
7017
6741
 
7018
- /* eslint-disable no-shadow */
6742
+ // eslint-disable-next-line no-shadow
7019
6743
  var CarouselType;
7020
6744
  (function (CarouselType) {
7021
6745
  CarouselType["Image"] = "image";
@@ -7031,7 +6755,33 @@ var ButtonType;
7031
6755
  ButtonType["Tertiary"] = "Tertiary";
7032
6756
  })(ButtonType || (ButtonType = {}));
7033
6757
 
7034
- var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$4;
6758
+ var IInformationCtaVariant;
6759
+ (function (IInformationCtaVariant) {
6760
+ IInformationCtaVariant["Primary"] = "Primary";
6761
+ IInformationCtaVariant["Secondary"] = "Secondary";
6762
+ IInformationCtaVariant["Tertiary"] = "Tertiary";
6763
+ IInformationCtaVariant["TextLink"] = "TextLink";
6764
+ })(IInformationCtaVariant || (IInformationCtaVariant = {}));
6765
+ var IInformationCtaTheme;
6766
+ (function (IInformationCtaTheme) {
6767
+ IInformationCtaTheme["Cinema"] = "Cinema";
6768
+ IInformationCtaTheme["Core"] = "Core";
6769
+ IInformationCtaTheme["Stream"] = "Stream";
6770
+ })(IInformationCtaTheme || (IInformationCtaTheme = {}));
6771
+ var IInformationTitleVariant;
6772
+ (function (IInformationTitleVariant) {
6773
+ IInformationTitleVariant["Header"] = "Header";
6774
+ IInformationTitleVariant["AltHeader"] = "AltHeader";
6775
+ })(IInformationTitleVariant || (IInformationTitleVariant = {}));
6776
+ var IInformationBackgroundColour;
6777
+ (function (IInformationBackgroundColour) {
6778
+ IInformationBackgroundColour["Cinema"] = "cinema";
6779
+ IInformationBackgroundColour["Core"] = "core";
6780
+ IInformationBackgroundColour["Stream"] = "stream";
6781
+ IInformationBackgroundColour["White"] = "white";
6782
+ })(IInformationBackgroundColour || (IInformationBackgroundColour = {}));
6783
+
6784
+ var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$h, _templateObject5$d, _templateObject6$b, _templateObject7$6, _templateObject8$5;
7035
6785
  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);
7036
6786
  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"])));
7037
6787
  var PromoLabel = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n padding: 6px 8px;\n width: fit-content;\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n right: 20px;\n top: 0;\n width: auto;\n margin: auto;\n font-family: var(--font-family-header);\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n font-size: var(--font-size-overline-2);\n line-height: 12px;\n text-align: center;\n letter-spacing: 1px;\n text-transform: uppercase;\n"])), function (_ref) {
@@ -7042,7 +6792,7 @@ var ButtonContainer = /*#__PURE__*/styled.div(_templateObject4$h || (_templateOb
7042
6792
  var TitleContainer$2 = /*#__PURE__*/styled.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-top: 0;\n margin-bottom: 0.5em;\n }\n"])));
7043
6793
  var OfferTextWrapper = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n & > * {\n margin-bottom: 0.5em;\n }\n margin-bottom: 1em;\n"])));
7044
6794
  var PriceRow = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n padding: 5px 0 8px 0;\n"])));
7045
- var LineThrough = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-dark-grey);\n"])));
6795
+ var LineThrough = /*#__PURE__*/styled.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--base-color-dark-grey);\n"])));
7046
6796
 
7047
6797
  // Set max. character length
7048
6798
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -7319,722 +7069,19 @@ var ModalWindow = function ModalWindow(_ref) {
7319
7069
  })), /*#__PURE__*/React__default.createElement(ContentWrapper, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
7320
7070
  };
7321
7071
 
7322
- var GRID_COLUMN_GAP = 'var(--grid-column-gap)';
7323
- var GRID_VALUES = {
7324
- desktop: {
7325
- gapsNumber: 13,
7326
- columnsNumber: 13,
7327
- gapsNumberOffset: 15,
7328
- columnsNumberOffset: 14,
7329
- largeCard: {
7330
- gapsPerSlide: 4,
7331
- columnsPerSlide: 5
7332
- },
7333
- smallCard: {
7334
- gapsPerSlide: 3,
7335
- columnsPerSlide: 4
7336
- }
7337
- },
7338
- mobile: {
7339
- columnsNumber: 12,
7340
- gapsNumber: 13,
7341
- columnsPerSlide: 10,
7342
- gapsPerSlide: 9
7343
- }
7344
- };
7345
- // Grid Calculations
7346
- var calculateGridColumnWidth = function calculateGridColumnWidth(gridGapsNumber, gridColumnsNumber) {
7347
- return "calc((100% - (" + gridGapsNumber + " * " + GRID_COLUMN_GAP + ")) / " + gridColumnsNumber + ")";
7348
- };
7349
- var calculateGapsSpaceInMainGrid = function calculateGapsSpaceInMainGrid(gapsNumber) {
7350
- return "calc(" + gapsNumber + " * " + GRID_COLUMN_GAP + ")";
7351
- };
7352
- var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
7353
- return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
7354
- };
7355
- // Slide styles
7356
- var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
7357
- var _GRID_VALUES$desktop = GRID_VALUES.desktop,
7358
- gapsNumber = _GRID_VALUES$desktop.gapsNumber,
7359
- columnsNumber = _GRID_VALUES$desktop.columnsNumber,
7360
- columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
7361
- gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
7362
- var _ref = type === CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
7363
- gapsPerSlide = _ref.gapsPerSlide,
7364
- columnsPerSlide = _ref.columnsPerSlide;
7365
- var columns = isActive ? columnsNumberOffset : columnsNumber;
7366
- var gaps = isActive ? gapsNumberOffset : gapsNumber;
7367
- var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
7368
- var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
7369
- return "\n width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n margin-right: " + GRID_COLUMN_GAP + ";\n ";
7370
- };
7371
- var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
7372
- var _GRID_VALUES$mobile = GRID_VALUES.mobile,
7373
- columnsNumber = _GRID_VALUES$mobile.columnsNumber,
7374
- gapsNumber = _GRID_VALUES$mobile.gapsNumber,
7375
- columnsPerSlide = _GRID_VALUES$mobile.columnsPerSlide,
7376
- gapsPerSlide = _GRID_VALUES$mobile.gapsPerSlide;
7377
- var gridColumnWidth = calculateGridColumnWidth(gapsNumber, columnsNumber);
7378
- return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
7379
- };
7380
- var getImageSlideStyles = function getImageSlideStyles(imageHeight) {
7381
- return "height: calc(" + imageHeight + "px + var(--carousel-image-caption-height) + 12px);";
7382
- };
7383
-
7384
- var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c, _templateObject7$7, _templateObject8$5;
7385
- var ImageCarouselWrapper = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n"])), function (_ref) {
7386
- var imagesHeightDesktop = _ref.imagesHeightDesktop;
7387
- 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 }";
7388
- }, devices.mobile, function (_ref2) {
7389
- var imagesHeightDevice = _ref2.imagesHeightDevice;
7390
- return "&&& {\n .swipe-slide > figure {\n " + getImageSlideStyles(imagesHeightDevice) + "\n }\n }";
7391
- });
7392
- 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) {
7393
- var type = _ref3.type,
7394
- isActive = _ref3.isActive;
7395
- return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n ";
7396
- }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
7397
- 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);
7398
- 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"])));
7399
- var TitleWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
7400
- var isDescriptionPresent = _ref4.isDescriptionPresent;
7401
- return isDescriptionPresent && 'margin: 20px 0';
7402
- });
7403
- 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);
7404
- var TitleGridItem = /*#__PURE__*/styled(GridItem)(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
7405
- 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) {
7406
- var active = _ref5.active;
7407
- return active ? 'grid-column: 1 / span 16' : '';
7408
- }, devices.tablet, devices.mobile);
7409
-
7410
- var _templateObject$O, _templateObject2$B;
7411
- var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
7412
- 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"])));
7413
- 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) {
7414
- var transitioning = _ref.transitioning;
7415
- return transitioning ? 'transform 0.3s ease' : 'none';
7416
- }, function (_ref2) {
7417
- var translateX = _ref2.translateX;
7418
- return translateX + "px";
7419
- }, SWIPE_SLIDE_CLASS_NAME);
7420
-
7421
- /**
7422
- * Generates a random string in the format XXX-XXX.
7423
- * Does not meet UUID standards.
7424
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
7425
- *
7426
- * @return {string} A random string in the format XXX-XXX.
7427
- */
7428
- var generateDomElementId = function generateDomElementId() {
7429
- var randomPart = Math.floor(100 + Math.random() * 900).toString();
7430
- var datePart = Date.now().toString().slice(-3);
7431
- return randomPart + "-" + datePart;
7432
- };
7433
-
7434
- var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
7435
- var widthSoFar = 0;
7436
- var visible = [];
7437
- for (var i = currentIndex; i < slidesLength; i++) {
7438
- var _slideWidths$i;
7439
- var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
7440
- if (widthSoFar + width > containerWidth) break;
7441
- visible.push(i);
7442
- widthSoFar += width;
7443
- }
7444
- return visible;
7445
- };
7446
- var getMovedSlides = function getMovedSlides(delta, slideWidths) {
7447
- var absDelta = Math.abs(delta);
7448
- var movedSlides = 0;
7449
- var accumulated = 0;
7450
- for (var i = 0; i < slideWidths.length; i++) {
7451
- accumulated += slideWidths[i];
7452
- // Allow partial slide (e.g. 50% of next slide) to count
7453
- var partialThreshold = slideWidths[i] * 0.5;
7454
- if (absDelta > accumulated - partialThreshold) {
7455
- movedSlides++;
7456
- } else {
7457
- break;
7458
- }
7459
- }
7460
- return movedSlides;
7461
- };
7462
-
7463
- var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
7464
- var MAX_CLONES_NUMBER = 6;
7465
- var CLICK_DRAG_THRESHOLD = 10;
7466
- var getClonesCount = function getClonesCount(infinite, childrenLength) {
7467
- if (!infinite) return 0;
7468
- if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
7469
- return childrenLength;
7470
- };
7471
- var getSlidedWidth = function getSlidedWidth(slide) {
7472
- if (!slide) return 0;
7473
- var style = window.getComputedStyle(slide);
7474
- var marginLeft = parseFloat(style.marginLeft) || 0;
7475
- var marginRight = parseFloat(style.marginRight) || 0;
7476
- return slide.getBoundingClientRect().width + marginLeft + marginRight;
7477
- };
7478
- var Swipe = /*#__PURE__*/forwardRef(function (_ref, ref) {
7479
- var children = _ref.children,
7480
- _ref$infinite = _ref.infinite,
7481
- infinite = _ref$infinite === void 0 ? false : _ref$infinite,
7482
- onIndexChange = _ref.onIndexChange,
7483
- _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
7484
- slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
7485
- onActiveChange = _ref.onActiveChange,
7486
- props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
7487
- var containerRef = useRef(null);
7488
- var childRefs = useRef([]);
7489
- var startX = useRef(0);
7490
- var currentTranslate = useRef(0);
7491
- var isDragging = useRef(false);
7492
- var isMouseDown = useRef(false);
7493
- var isActive = useRef(false);
7494
- var isClickPrevented = useRef(false);
7495
- var uniqueIdRef = useRef(generateDomElementId());
7496
- var _useState = useState(null),
7497
- dragTranslateX = _useState[0],
7498
- setDragTranslateX = _useState[1];
7499
- var _useState2 = useState(false),
7500
- transitioning = _useState2[0],
7501
- setTransitioning = _useState2[1];
7502
- var _useState3 = useState([]),
7503
- slideWidths = _useState3[0],
7504
- setSlideWidths = _useState3[1];
7505
- var _useState4 = useState(0),
7506
- containerWidth = _useState4[0],
7507
- setContainerWidth = _useState4[1];
7508
- var _useMemo = useMemo(function () {
7509
- var count = getClonesCount(infinite, children.length);
7510
- var leftClones = infinite ? children.slice(-count) : [];
7511
- var rightClones = infinite ? children.slice(0, count) : [];
7512
- var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
7513
- return {
7514
- slides: allSlides,
7515
- clonesCount: count
7516
- };
7517
- }, [children, infinite]),
7518
- slides = _useMemo.slides,
7519
- clonesCount = _useMemo.clonesCount;
7520
- var _useState5 = useState(infinite ? clonesCount : 0),
7521
- currentIndex = _useState5[0],
7522
- setCurrentIndex = _useState5[1];
7523
- useEffect(function () {
7524
- var handler = function handler(e) {
7525
- if (isClickPrevented.current) {
7526
- e.preventDefault();
7527
- e.stopPropagation();
7528
- }
7529
- };
7530
- var el = containerRef.current;
7531
- el == null || el.addEventListener('click', handler, true);
7532
- return function () {
7533
- return el == null ? void 0 : el.removeEventListener('click', handler, true);
7534
- };
7535
- }, []);
7536
- useEffect(function () {
7537
- if (!onIndexChange) return;
7538
- if (!infinite) {
7539
- onIndexChange(currentIndex);
7540
- } else {
7541
- var offset = currentIndex - clonesCount + children.length;
7542
- var realIndex = offset % children.length;
7543
- onIndexChange(realIndex);
7544
- }
7545
- }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7546
- var updateDimensions = useCallback(function () {
7547
- if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
7548
- if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
7549
- }, []);
7550
- useEffect(function () {
7551
- var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7552
- return function () {
7553
- return cancelAnimationFrame(animationFrameRequestId);
7554
- };
7555
- }, [children]);
7556
- useEffect(function () {
7557
- var observer = new ResizeObserver(updateDimensions);
7558
- if (containerRef.current) observer.observe(containerRef.current);
7559
- return function () {
7560
- return observer.disconnect();
7561
- };
7562
- }, [children]);
7563
- var setIsActive = function setIsActive() {
7564
- if (!isActive.current) {
7565
- isActive.current = true;
7566
- onActiveChange == null || onActiveChange(true);
7567
- }
7568
- };
7569
- var getTranslateX = function getTranslateX() {
7570
- var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7571
- return acc + width;
7572
- }, 0);
7573
- return offset + (slidesOffsetBefore || 0);
7574
- };
7575
- var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7576
- var delta = currentTranslate.current - getTranslateX();
7577
- var direction = delta > 0 ? -1 : 1;
7578
- var movedSlides = getMovedSlides(delta, slideWidths);
7579
- if (Math.abs(delta) > 20) {
7580
- movedSlides = Math.max(1, movedSlides);
7581
- var targetIndex = currentIndex + direction * movedSlides;
7582
- var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7583
- setTransitioning(true);
7584
- setCurrentIndex(finalIndex);
7585
- } else {
7586
- setTransitioning(true);
7587
- setCurrentIndex(function (prev) {
7588
- return prev;
7589
- });
7590
- }
7591
- setDragTranslateX(null);
7592
- };
7593
- var canMoveNext = function canMoveNext() {
7594
- var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
7595
- return acc + width;
7596
- }, 0);
7597
- return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
7598
- };
7599
- var handleTransitionEnd = function handleTransitionEnd() {
7600
- setTransitioning(false);
7601
- if (!infinite) return;
7602
- if (currentIndex >= children.length + clonesCount) {
7603
- setCurrentIndex(clonesCount);
7604
- } else if (currentIndex < clonesCount) {
7605
- setCurrentIndex(children.length + currentIndex);
7606
- }
7607
- };
7608
- var goToPrev = function goToPrev() {
7609
- if (transitioning) return;
7610
- setIsActive();
7611
- setTransitioning(true);
7612
- setCurrentIndex(function (prev) {
7613
- return infinite ? prev - 1 : Math.max(0, prev - 1);
7614
- });
7615
- };
7616
- var goToNext = function goToNext() {
7617
- if (transitioning || !canMoveNext()) return;
7618
- setIsActive();
7619
- setTransitioning(true);
7620
- setCurrentIndex(function (prev) {
7621
- return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7622
- });
7623
- };
7624
- useImperativeHandle(ref, function () {
7625
- return {
7626
- nextSlide: goToNext,
7627
- prevSlide: goToPrev
7628
- };
7629
- });
7630
- var handleTouchStart = function handleTouchStart(e) {
7631
- setIsActive();
7632
- startX.current = e.touches[0].clientX;
7633
- isDragging.current = true;
7634
- isClickPrevented.current = false;
7635
- setTransitioning(false);
7636
- };
7637
- var handleTouchMove = function handleTouchMove(e) {
7638
- if (!isDragging.current) return;
7639
- var deltaX = e.touches[0].clientX - startX.current;
7640
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7641
- isClickPrevented.current = true;
7642
- }
7643
- var visualOffset = getTranslateX() + deltaX;
7644
- currentTranslate.current = visualOffset;
7645
- setDragTranslateX(visualOffset);
7646
- };
7647
- var handleTouchEnd = function handleTouchEnd() {
7648
- isDragging.current = false;
7649
- navigateOnSwipeEnd();
7650
- };
7651
- var handleMouseMove = function handleMouseMove(e) {
7652
- if (!isDragging.current || !isMouseDown.current || transitioning) return;
7653
- var deltaX = e.clientX - startX.current;
7654
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7655
- isClickPrevented.current = true;
7656
- }
7657
- var visualOffset = getTranslateX() + deltaX;
7658
- currentTranslate.current = visualOffset;
7659
- setDragTranslateX(visualOffset);
7660
- };
7661
- var _handleMouseUp = function handleMouseUp() {
7662
- if (!isMouseDown.current) return;
7663
- isMouseDown.current = false;
7664
- isDragging.current = false;
7665
- if (isClickPrevented.current) {
7666
- navigateOnSwipeEnd();
7667
- } else {
7668
- setDragTranslateX(null);
7669
- }
7670
- window.removeEventListener('mousemove', handleMouseMove);
7671
- window.removeEventListener('mouseup', _handleMouseUp);
7672
- };
7673
- var handleMouseDown = function handleMouseDown(e) {
7674
- if (transitioning || e.button !== 0) return;
7675
- e.preventDefault();
7676
- setIsActive();
7677
- startX.current = e.clientX;
7678
- isDragging.current = true;
7679
- isMouseDown.current = true;
7680
- isClickPrevented.current = false;
7681
- setTransitioning(false);
7682
- window.addEventListener('mousemove', handleMouseMove);
7683
- window.addEventListener('mouseup', _handleMouseUp);
7684
- };
7685
- var onSlideFocus = function onSlideFocus(isVisible, index) {
7686
- if (!isVisible) {
7687
- setCurrentIndex(index);
7688
- }
7689
- };
7690
- var onClickCapture = function onClickCapture(e) {
7691
- if (isClickPrevented.current) {
7692
- e.preventDefault();
7693
- e.stopPropagation();
7694
- }
7695
- };
7696
- var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7697
- return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
7698
- ref: containerRef,
7699
- onTouchStart: handleTouchStart,
7700
- onTouchMove: handleTouchMove,
7701
- onTouchEnd: handleTouchEnd,
7702
- onMouseDown: handleMouseDown,
7703
- onDragStart: function onDragStart(e) {
7704
- return e.preventDefault();
7705
- },
7706
- className: "swipe"
7707
- }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
7708
- className: "swipe-track-wrapper",
7709
- translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
7710
- transitioning: transitioning && dragTranslateX === null,
7711
- onTransitionEnd: handleTransitionEnd
7712
- }, slides.map(function (child, index) {
7713
- var isVisible = visibleIndexes.includes(index);
7714
- return /*#__PURE__*/React__default.cloneElement(child, {
7715
- key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
7716
- ariaHidden: !isVisible,
7717
- className: SWIPE_SLIDE_CLASS_NAME,
7718
- ref: function ref(el) {
7719
- childRefs.current[index] = el;
7720
- },
7721
- onFocus: function onFocus() {
7722
- return onSlideFocus(isVisible, index);
7723
- },
7724
- onClick: onClickCapture,
7725
- onClickCapture: onClickCapture
7726
- });
7727
- })));
7728
- });
7729
- Swipe.displayName = 'Swipe';
7730
-
7731
- var SCREEN_WIDTH_PERCENTAGE = 0.05;
7732
- var GRID_OFFSET_MARGIN = {
7733
- mobile: 0,
7734
- tablet: 15,
7735
- desktop: 3
7736
- };
7737
- var Carousel = function Carousel(_ref) {
7738
- var children = _ref.children,
7739
- type = _ref.type,
7740
- title = _ref.title,
7741
- description = _ref.description,
7742
- className = _ref.className,
7743
- _ref$titleSemanticLev = _ref.titleSemanticLevel,
7744
- titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 3 : _ref$titleSemanticLev,
7745
- _ref$imagesHeightDevi = _ref.imagesHeightDevice,
7746
- imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
7747
- _ref$imagesHeightDesk = _ref.imagesHeightDesktop,
7748
- imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
7749
- _ref$infinite = _ref.infinite,
7750
- infinite = _ref$infinite === void 0 ? true : _ref$infinite,
7751
- _ref$useOffset = _ref.useOffset,
7752
- useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
7753
- var _useState = useState(false),
7754
- active = _useState[0],
7755
- setActive = _useState[1];
7756
- var _useState2 = useState(0),
7757
- slidesOffsetBefore = _useState2[0],
7758
- setSlidesOffsetBefore = _useState2[1];
7759
- var swipeRef = useRef(null);
7760
- useEffect(function () {
7761
- if (!useOffset || !active) return undefined;
7762
- var updateWindowDimensions = function updateWindowDimensions() {
7763
- if (window.matchMedia(devices.mobile).matches) {
7764
- setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
7765
- } else if (window.matchMedia(devices.tablet).matches) {
7766
- setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
7767
- } else {
7768
- setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
7769
- }
7770
- };
7771
- window.addEventListener('resize', updateWindowDimensions);
7772
- updateWindowDimensions();
7773
- return function () {
7774
- window.removeEventListener('resize', updateWindowDimensions);
7775
- };
7776
- }, [useOffset, active]);
7777
- var onNext = function onNext() {
7778
- var _swipeRef$current;
7779
- (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
7780
- };
7781
- var onPrev = function onPrev() {
7782
- var _swipeRef$current2;
7783
- (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
7784
- };
7785
- var onActiveChangeHandler = function onActiveChangeHandler(value) {
7786
- if (useOffset && !active) {
7787
- setActive(value);
7788
- }
7789
- };
7790
- var carouselTitleId = "carousel-title-" + title;
7791
- var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
7792
- return /*#__PURE__*/React__default.createElement(Wrapper, {
7793
- className: className,
7794
- type: type,
7795
- isActive: active,
7796
- imagesHeightDevice: imagesHeightDevice,
7797
- imagesHeightDesktop: imagesHeightDesktop,
7798
- role: "region",
7799
- "aria-labelledby": carouselTitleId
7800
- }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
7801
- columnStartDesktop: 3,
7802
- columnSpanDesktop: 10,
7803
- columnStartDevice: 2,
7804
- columnSpanDevice: 12
7805
- }, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
7806
- "data-testid": "carousel-title-wrapper"
7807
- }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
7808
- id: carouselTitleId,
7809
- isDescriptionPresent: !!description
7810
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7811
- size: "small",
7812
- serif: true,
7813
- hierarchy: "h" + titleSemanticLevel
7814
- }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7815
- size: "large"
7816
- }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
7817
- columnStartDesktop: 14,
7818
- columnSpanDesktop: 2,
7819
- columnStartDevice: 12,
7820
- columnSpanDevice: 2
7821
- }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
7822
- "data-testid": "carousel-buttons-wrapper"
7823
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7824
- onClickNext: onNext,
7825
- onClickPrev: onPrev,
7826
- availablePrev: true
7827
- })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
7828
- active: active,
7829
- columnStartDesktop: 3,
7830
- columnSpanDesktop: 14,
7831
- columnStartDevice: 2,
7832
- columnSpanDevice: 13
7833
- }, /*#__PURE__*/React__default.createElement(Swipe, {
7834
- onActiveChange: function onActiveChange(value) {
7835
- return onActiveChangeHandler(value);
7836
- },
7837
- "data-testid": "carousel-swipe",
7838
- ref: swipeRef,
7839
- infinite: infinite,
7840
- slidesOffsetBefore: slidesOffsetBefore,
7841
- role: "list",
7842
- "aria-roledescription": "carousel"
7843
- }, React__default.Children.toArray(children).map(function (child, index) {
7844
- return /*#__PURE__*/React__default.createElement("div", {
7845
- key: "carousel-slide-" + index,
7846
- "aria-roledescription": "slide"
7847
- }, child);
7848
- })))));
7849
- };
7850
-
7851
- 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;
7852
- 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);
7853
- 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);
7854
- var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7855
- 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);
7856
- 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);
7857
- 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"])));
7858
- 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);
7859
- 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);
7860
- 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);
7861
- 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);
7862
- 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);
7863
- var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
7864
- 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);
7865
- 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);
7866
- 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);
7867
- var InfoSubtitleWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n"])));
7868
- 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) {
7869
- var isCurrentSlide = _ref.isCurrentSlide;
7870
- return isCurrentSlide ? 'block' : 'none';
7871
- }, devices.mobile);
7872
-
7873
- var COLORS$3 = {
7874
- "default": 'var(--button-auxiliary-color)',
7875
- background: 'var(--button-auxiliary-bg-color)'
7876
- };
7877
- var getTextColor$3 = function getTextColor(_ref) {
7878
- var textColor = _ref.textColor;
7879
- return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
7880
- };
7881
- var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7882
- var backgroundColor = _ref2.backgroundColor;
7883
- return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
7884
- };
7885
-
7886
- var _templateObject$Q;
7887
- 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);
7888
-
7889
- var _excluded$i = ["children", "className"];
7890
- var AuxiliaryButton = function AuxiliaryButton(_ref) {
7891
- var children = _ref.children,
7892
- className = _ref.className,
7893
- props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
7894
- return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
7895
- iconClassName: "auxiliaryButtonIcon",
7896
- className: className
7897
- }), children);
7898
- };
7899
-
7900
- var _excluded$j = ["text"],
7901
- _excluded2$2 = ["text"];
7902
- var _buttonTypeToButton;
7903
- var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
7904
- var Buttons = function Buttons(_ref) {
7905
- var auxiliaryCTA = _ref.auxiliaryCTA,
7906
- links = _ref.links;
7907
- var firstButton = links == null ? void 0 : links[0];
7908
- var _ref2 = firstButton || {},
7909
- _ref2$text = _ref2.text,
7910
- firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7911
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
7912
- var secondButton = links == null ? void 0 : links[1];
7913
- var _ref3 = secondButton || {},
7914
- _ref3$text = _ref3.text,
7915
- secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7916
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
7917
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
7918
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : SecondaryButton;
7919
- 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, {
7920
- textColor: ThemeColor['base-white']
7921
- }), auxiliaryCTA.text))));
7922
- };
7923
-
7924
- var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
7925
- return htmlString.replace(/<[^>]*>/g, '');
7926
- };
7927
- var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
7928
- if (addDots === void 0) {
7929
- addDots = false;
7930
- }
7931
- var textContent = stripAllHtmlTags(htmlString);
7932
- if (textContent.length <= resultLength) {
7933
- return htmlString;
7934
- }
7935
- var accumulatedText = '';
7936
- var tagStack = [];
7937
- var charCount = 0;
7938
- var closeTags = function closeTags() {
7939
- while (tagStack.length > 0) {
7940
- accumulatedText += "</" + tagStack.pop() + ">";
7941
- }
7942
- };
7943
- for (var i = 0; i < htmlString.length; i++) {
7944
- var _char = htmlString[i];
7945
- if (_char === '<') {
7946
- accumulatedText += _char;
7947
- if (htmlString[i + 1] !== '/') {
7948
- var tagNameEnd = htmlString.indexOf('>', i);
7949
- var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
7950
- tagStack.push(tagName);
7951
- accumulatedText += tagName + ">";
7952
- i = tagNameEnd;
7953
- }
7954
- } else if (_char === '>') {
7955
- accumulatedText += _char;
7956
- } else if (charCount < resultLength) {
7957
- accumulatedText += _char;
7958
- charCount++;
7959
- }
7960
- if (charCount >= resultLength) {
7961
- if (addDots) {
7962
- accumulatedText += '...';
7963
- }
7964
- break;
7965
- }
7966
- }
7967
- closeTags();
7968
- return accumulatedText;
7969
- };
7970
- var truncate = function truncate(str, n) {
7971
- return str.length >= n ? str.substring(0, n) : str;
7972
- };
7973
- var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
7974
- if (addDots === void 0) {
7975
- addDots = false;
7976
- }
7977
- var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
7978
- return truncateHtmlString(nodeString, resultLength, addDots);
7979
- };
7980
-
7981
- var InfoSection = function InfoSection(_ref) {
7982
- var logo = _ref.logo,
7983
- slide = _ref.slide,
7984
- currentSlideIndex = _ref.currentSlideIndex;
7985
- var _useState = useState([]),
7986
- finishedTimers = _useState[0],
7987
- setFinishedTimers = _useState[1];
7988
- var infoText = slide.infoText,
7989
- infoTitle = slide.infoTitle,
7990
- infoTimeframe = slide.infoTimeframe,
7991
- infoSubtitle = slide.infoSubtitle,
7992
- timerParams = slide.timerParams,
7993
- additionalInfo = slide.additionalInfo;
7994
- var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
7995
- var handleEndDate = function handleEndDate() {
7996
- return setFinishedTimers([].concat(finishedTimers, [currentSlideIndex]));
7997
- };
7998
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
7999
- "data-testid": "highlight-carousel-timer-wrapper"
8000
- }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8001
- size: "large"
8002
- }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
8003
- color: Colors.White,
8004
- endDateHandler: handleEndDate,
8005
- endDate: timerParams.endDate,
8006
- title: timerParams.title
8007
- })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8008
- size: "large",
8009
- hierarchy: "h3"
8010
- }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8011
- size: "large"
8012
- }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8013
- size: "large"
8014
- }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8015
- size: "large"
8016
- }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
8017
- dangerouslySetInnerHTML: {
8018
- __html: description
8019
- }
8020
- })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8021
- size: "large"
8022
- }, additionalInfo)))));
8023
- };
8024
-
8025
- var _templateObject$R, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$e;
8026
- 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"])));
8027
- 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"])));
8028
- 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) {
7072
+ var _templateObject$N, _templateObject2$A, _templateObject3$o, _templateObject4$j, _templateObject5$e, _templateObject6$c;
7073
+ 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"])));
7074
+ 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"])));
7075
+ 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) {
8029
7076
  var isVisible = _ref.isVisible;
8030
7077
  return isVisible ? 'visible' : 'hidden';
8031
7078
  }, devices.mobile);
8032
- 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);
8033
- 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) {
7079
+ 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);
7080
+ 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) {
8034
7081
  var textHeight = _ref2.textHeight;
8035
7082
  return textHeight;
8036
7083
  }, devices.mobile);
8037
- var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
7084
+ var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media print {\n display: none;\n }\n"])));
8038
7085
 
8039
7086
  /* eslint-disable react/no-unstable-nested-components */
8040
7087
  var Accordion = function Accordion(_ref) {
@@ -8139,8 +7186,8 @@ var Accordion = function Accordion(_ref) {
8139
7186
  }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
8140
7187
  };
8141
7188
 
8142
- var _templateObject$S;
8143
- var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
7189
+ var _templateObject$O;
7190
+ var AccordionsContainer = /*#__PURE__*/styled.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
8144
7191
 
8145
7192
  var Accordions = function Accordions(_ref) {
8146
7193
  var _ref$items = _ref.items,
@@ -8161,18 +7208,18 @@ var Accordions = function Accordions(_ref) {
8161
7208
  }));
8162
7209
  };
8163
7210
 
8164
- var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
8165
- 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);
8166
- 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) {
7211
+ var _templateObject$P, _templateObject2$B, _templateObject3$p, _templateObject4$k, _templateObject5$f;
7212
+ 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);
7213
+ 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) {
8167
7214
  var isClickable = _ref.isClickable;
8168
7215
  return isClickable ? 'pointer' : 'default';
8169
7216
  }, function (_ref2) {
8170
7217
  var isClickable = _ref2.isClickable;
8171
7218
  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 ";
8172
7219
  });
8173
- 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"])));
8174
- var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
8175
- 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) {
7220
+ 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"])));
7221
+ var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
7222
+ 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) {
8176
7223
  var variant = _ref3.variant;
8177
7224
  return variant === BannerVariants['service-persistent'] ? '8px' : '0px';
8178
7225
  }, function (_ref4) {
@@ -8244,76 +7291,109 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
8244
7291
  }))))));
8245
7292
  };
8246
7293
 
8247
- 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;
7294
+ var COLORS$3 = {
7295
+ "default": 'var(--button-auxiliary-color)',
7296
+ background: 'var(--button-auxiliary-bg-color)'
7297
+ };
7298
+ var getTextColor$2 = function getTextColor(_ref) {
7299
+ var textColor = _ref.textColor;
7300
+ return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
7301
+ };
7302
+ var getBackgroundColor$2 = function getBackgroundColor(_ref2) {
7303
+ var backgroundColor = _ref2.backgroundColor;
7304
+ return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
7305
+ };
7306
+
7307
+ var _templateObject$Q;
7308
+ 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);
7309
+
7310
+ var _excluded$h = ["children", "className"];
7311
+ var AuxiliaryButton = function AuxiliaryButton(_ref) {
7312
+ var children = _ref.children,
7313
+ className = _ref.className,
7314
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
7315
+ return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
7316
+ iconClassName: "auxiliaryButtonIcon",
7317
+ className: className
7318
+ }), children);
7319
+ };
7320
+
7321
+ var _templateObject$R, _templateObject2$C, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$d, _templateObject7$7, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1;
8248
7322
  var LENGTH_LARGE_TEXT = 28;
8249
7323
  var LENGTH_SMALL_TEXT$1 = 19;
8250
7324
  var LENGTH_TEXT_TABLET = 10;
8251
- 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) {
7325
+ 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) {
8252
7326
  var isCardClickable = _ref.isCardClickable;
8253
7327
  return isCardClickable ? 'pointer' : 'default';
8254
7328
  }, function (_ref2) {
8255
7329
  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
8256
7330
  return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
8257
7331
  });
8258
- 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);
8259
- var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
8260
- 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) {
8261
- var fullWidth = _ref3.fullWidth;
8262
- return fullWidth ? '0' : '20px';
8263
- }, function (_ref4) {
7332
+ 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) {
7333
+ var lineColor = _ref3.lineColor,
7334
+ theme = _ref3.theme;
7335
+ if (lineColor === Colors.Cinema) return 'var(--base-color-white)';
7336
+ return lineColor ? "var(--base-color-" + lineColor + ")" : theme.colors.primary;
7337
+ }, zIndexes.contentOverlay);
7338
+ var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -10px;\n"])));
7339
+ 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) {
8264
7340
  var fullWidth = _ref4.fullWidth;
8265
7341
  return fullWidth ? '0' : '20px';
7342
+ }, function (_ref5) {
7343
+ var fullWidth = _ref5.fullWidth;
7344
+ return fullWidth ? '0' : '20px';
8266
7345
  });
8267
- 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);
8268
- 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);
8269
- var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8270
- var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
8271
- var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
8272
- 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) {
8273
- var isVisible = _ref5.isVisible;
7346
+ 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);
7347
+ 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);
7348
+ 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"])));
7349
+ var HighlightTextContainer = /*#__PURE__*/styled(TextContainer$2)(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-primary);\n margin-top: 4px;\n"])));
7350
+ 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"])));
7351
+ 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) {
7352
+ var isVisible = _ref6.isVisible;
8274
7353
  return isVisible ? "visible" : 'hidden';
8275
- }, devices.mobile, function (_ref6) {
8276
- var isGridCard = _ref6.isGridCard;
7354
+ }, devices.mobile, function (_ref7) {
7355
+ var isGridCard = _ref7.isGridCard;
8277
7356
  return isGridCard ? '20px' : '0';
8278
7357
  });
8279
- 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) {
8280
- var fullWidth = _ref7.fullWidth;
8281
- return fullWidth ? '0' : '20px';
8282
- }, function (_ref8) {
7358
+ 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) {
8283
7359
  var fullWidth = _ref8.fullWidth;
8284
7360
  return fullWidth ? '0' : '20px';
7361
+ }, function (_ref9) {
7362
+ var fullWidth = _ref9.fullWidth;
7363
+ return fullWidth ? '0' : '20px';
8285
7364
  });
8286
- 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) {
8287
- var bgColor = _ref9.bgColor;
8288
- return bgColor ? "var(--color-base-" + bgColor + ")" : 'var(--color-primary-background)';
7365
+ 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) {
7366
+ var bgColor = _ref10.bgColor,
7367
+ theme = _ref10.theme;
7368
+ return bgColor ? "var(--base-color-" + bgColor + ")" : theme.colors.primary;
8289
7369
  });
8290
- 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"])));
8291
- var getButtonsOpacity = function getButtonsOpacity(_ref10) {
8292
- var onlyShowButtonsOnHover = _ref10.onlyShowButtonsOnHover;
7370
+ 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"])));
7371
+ var getButtonsOpacity = function getButtonsOpacity(_ref11) {
7372
+ var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
8293
7373
  return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
8294
7374
  };
8295
- var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
8296
- var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
7375
+ var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
7376
+ var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
8297
7377
  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
8298
7378
  };
8299
- 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) {
8300
- var size = _ref12.size,
8301
- primaryButtonTextLength = _ref12.primaryButtonTextLength,
8302
- tertiaryButtonTextLength = _ref12.tertiaryButtonTextLength;
7379
+ 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) {
7380
+ var size = _ref13.size,
7381
+ primaryButtonTextLength = _ref13.primaryButtonTextLength,
7382
+ tertiaryButtonTextLength = _ref13.tertiaryButtonTextLength;
8303
7383
  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
8304
7384
  if (isLinksLayoutColumn) {
8305
7385
  return "\n flex-direction: column;\n ";
8306
7386
  }
8307
7387
  return '';
8308
- }, devices.mobile, getButtonsMinHeight, function (_ref13) {
8309
- var fullWidth = _ref13.fullWidth;
8310
- return fullWidth ? '0' : '20px';
8311
- }, function (_ref14) {
7388
+ }, devices.mobile, getButtonsMinHeight, function (_ref14) {
8312
7389
  var fullWidth = _ref14.fullWidth;
8313
7390
  return fullWidth ? '0' : '20px';
8314
- }, devices.tablet, getButtonsMinHeight, function (_ref15) {
8315
- var primaryButtonTextLength = _ref15.primaryButtonTextLength,
8316
- tertiaryButtonTextLength = _ref15.tertiaryButtonTextLength;
7391
+ }, function (_ref15) {
7392
+ var fullWidth = _ref15.fullWidth;
7393
+ return fullWidth ? '0' : '20px';
7394
+ }, devices.tablet, getButtonsMinHeight, function (_ref16) {
7395
+ var primaryButtonTextLength = _ref16.primaryButtonTextLength,
7396
+ tertiaryButtonTextLength = _ref16.tertiaryButtonTextLength;
8317
7397
  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
8318
7398
  if (isLinksLayoutColumnTablet) {
8319
7399
  return "\n flex-direction: column;\n ";
@@ -8321,12 +7401,69 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$2 || (_templa
8321
7401
  return '';
8322
7402
  });
8323
7403
 
8324
- var _excluded$k = ["text"],
8325
- _excluded2$3 = ["text"];
8326
- var _buttonTypeToButton$1;
7404
+ var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
7405
+ return htmlString.replace(/<[^>]*>/g, '');
7406
+ };
7407
+ var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
7408
+ if (addDots === void 0) {
7409
+ addDots = false;
7410
+ }
7411
+ var textContent = stripAllHtmlTags(htmlString);
7412
+ if (textContent.length <= resultLength) {
7413
+ return htmlString;
7414
+ }
7415
+ var accumulatedText = '';
7416
+ var tagStack = [];
7417
+ var charCount = 0;
7418
+ var closeTags = function closeTags() {
7419
+ while (tagStack.length > 0) {
7420
+ accumulatedText += "</" + tagStack.pop() + ">";
7421
+ }
7422
+ };
7423
+ for (var i = 0; i < htmlString.length; i++) {
7424
+ var _char = htmlString[i];
7425
+ if (_char === '<') {
7426
+ accumulatedText += _char;
7427
+ if (htmlString[i + 1] !== '/') {
7428
+ var tagNameEnd = htmlString.indexOf('>', i);
7429
+ var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
7430
+ tagStack.push(tagName);
7431
+ accumulatedText += tagName + ">";
7432
+ i = tagNameEnd;
7433
+ }
7434
+ } else if (_char === '>') {
7435
+ accumulatedText += _char;
7436
+ } else if (charCount < resultLength) {
7437
+ accumulatedText += _char;
7438
+ charCount++;
7439
+ }
7440
+ if (charCount >= resultLength) {
7441
+ if (addDots) {
7442
+ accumulatedText += '...';
7443
+ }
7444
+ break;
7445
+ }
7446
+ }
7447
+ closeTags();
7448
+ return accumulatedText;
7449
+ };
7450
+ var truncate = function truncate(str, n) {
7451
+ return str.length >= n ? str.substring(0, n) : str;
7452
+ };
7453
+ var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
7454
+ if (addDots === void 0) {
7455
+ addDots = false;
7456
+ }
7457
+ var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
7458
+ return truncateHtmlString(nodeString, resultLength, addDots);
7459
+ };
7460
+
7461
+ var _excluded$i = ["text"],
7462
+ _excluded2$1 = ["text"];
7463
+ var _buttonTypeToButton;
8327
7464
  var LENGTH_LARGE_TEXT$1 = 28;
8328
7465
  var LENGTH_SMALL_TEXT$2 = 19;
8329
- var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
7466
+ var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
8330
7467
  var Card = function Card(_ref) {
8331
7468
  var _labelParams$color;
8332
7469
  var _ref$progress = _ref.progress,
@@ -8364,20 +7501,18 @@ var Card = function Card(_ref) {
8364
7501
  var _useState = useState(false),
8365
7502
  hovered = _useState[0],
8366
7503
  setHovered = _useState[1];
8367
- var cardTitleId = "card-title-" + title;
8368
- var cardDescriptionId = "card-desc-" + title;
8369
7504
  var truncatedText = truncateHtmlString(text, 185, true);
8370
7505
  var firstButton = links == null ? void 0 : links[0];
8371
7506
  var _ref2 = firstButton || {},
8372
7507
  _ref2$text = _ref2.text,
8373
7508
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
8374
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7509
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
8375
7510
  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
8376
7511
  var secondButton = links == null ? void 0 : links[1];
8377
7512
  var _ref3 = secondButton || {},
8378
7513
  _ref3$text = _ref3.text,
8379
7514
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
8380
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
7515
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
8381
7516
  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
8382
7517
  var hoverHandler = function hoverHandler(value) {
8383
7518
  if (value) {
@@ -8389,8 +7524,8 @@ var Card = function Card(_ref) {
8389
7524
  }
8390
7525
  setHovered(value);
8391
7526
  };
8392
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
8393
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
7527
+ var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
7528
+ var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : TertiaryButton;
8394
7529
  return /*#__PURE__*/React__default.createElement(CardContainer, {
8395
7530
  onMouseOver: function onMouseOver() {
8396
7531
  return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -8400,26 +7535,21 @@ var Card = function Card(_ref) {
8400
7535
  },
8401
7536
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
8402
7537
  "data-testid": "cardcontainer",
8403
- isCardClickable: !!firstButton,
8404
- role: "region",
8405
- "aria-labelledby": cardTitleId,
8406
- "aria-describedby": cardDescriptionId
7538
+ isCardClickable: !!firstButton
8407
7539
  }, /*#__PURE__*/React__default.createElement("a", {
8408
7540
  href: firstButton == null ? void 0 : firstButton.href,
8409
7541
  target: firstButton == null ? void 0 : firstButton.target,
8410
7542
  className: "targetLink",
8411
7543
  style: {
8412
7544
  flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
8413
- },
8414
- "aria-label": "Navigate to " + title
7545
+ }
8415
7546
  }, /*#__PURE__*/React__default.createElement(LabelContainer, {
8416
7547
  isGridCard: isGridCard,
8417
7548
  isVisible: !!labelParams
8418
7549
  }, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
8419
7550
  bgColor: labelParams == null ? void 0 : labelParams.bgColor
8420
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8421
- size: "small",
8422
- color: "white"
7551
+ }, /*#__PURE__*/React__default.createElement(Overline, {
7552
+ level: 2
8423
7553
  }, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8424
7554
  iconName: labelParams.iconName,
8425
7555
  direction: labelParams.iconDirection,
@@ -8431,36 +7561,24 @@ var Card = function Card(_ref) {
8431
7561
  aspectRatio: AspectRatio['4:3']
8432
7562
  }, /*#__PURE__*/React__default.createElement("img", {
8433
7563
  src: image,
8434
- alt: imageAltText || title
7564
+ alt: imageAltText
8435
7565
  })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
8436
7566
  progress: progress,
8437
- height: 6
7567
+ height: 10
8438
7568
  }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
8439
7569
  fullWidth: fullWidth
8440
7570
  }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
8441
7571
  list: tags
8442
- }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
8443
- id: cardTitleId
8444
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8445
- hierarchy: "h3",
8446
- size: "small"
8447
- }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
8448
- id: cardTitleId
8449
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8450
- hierarchy: "h3",
8451
- size: "medium"
8452
- }, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8453
- size: "large"
8454
- }, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8455
- size: "large"
8456
- }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
8457
- id: cardDescriptionId,
7572
+ }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, null, /*#__PURE__*/React__default.createElement(Header, {
7573
+ level: size === 'small' ? 6 : 5
7574
+ }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, null, /*#__PURE__*/React__default.createElement(Header, {
7575
+ level: 6
7576
+ }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer$2, {
8458
7577
  dangerouslySetInnerHTML: {
8459
7578
  __html: truncatedText
8460
7579
  }
8461
- })), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8462
- size: "large",
8463
- color: "red"
7580
+ }), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7581
+ level: 1
8464
7582
  }, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
8465
7583
  fullWidth: fullWidth
8466
7584
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
@@ -8472,16 +7590,12 @@ var Card = function Card(_ref) {
8472
7590
  tertiaryButtonTextLength: secondButtonText.length,
8473
7591
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
8474
7592
  fullWidth: fullWidth
8475
- }, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
8476
- "aria-label": firstButtonText
8477
- }, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
8478
- "aria-label": secondButtonText
8479
- }, restSecondButton), tertiaryButtonTextTruncate)))));
7593
+ }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
8480
7594
  };
8481
7595
 
8482
- var _templateObject$V, _templateObject2$G;
8483
- 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);
8484
- var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
7596
+ var _templateObject$S, _templateObject2$D;
7597
+ 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);
7598
+ var GridItemContainer = /*#__PURE__*/styled(GridItem)(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 1 / span 14;\n }\n"])), devices.mobile);
8485
7599
 
8486
7600
  var Cards = function Cards(_ref) {
8487
7601
  var cards = _ref.cards,
@@ -8523,18 +7637,18 @@ var Cards = function Cards(_ref) {
8523
7637
  }));
8524
7638
  };
8525
7639
 
8526
- var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
8527
- 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);
8528
- 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) {
7640
+ var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
7641
+ 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);
7642
+ 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) {
8529
7643
  var hideBottomBorder = _ref.hideBottomBorder;
8530
7644
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8531
7645
  }, function (_ref2) {
8532
7646
  var hideTopBorder = _ref2.hideTopBorder;
8533
7647
  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8534
7648
  }, devices.mobileAndTablet);
8535
- var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8536
- 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);
8537
- 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);
7649
+ var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7650
+ 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);
7651
+ 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);
8538
7652
 
8539
7653
  var divideAddressString = function divideAddressString(address) {
8540
7654
  return address.split(',').map(function (chunk, i) {
@@ -8591,18 +7705,18 @@ var ContactCard = function ContactCard(_ref) {
8591
7705
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
8592
7706
  };
8593
7707
 
8594
- var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$g, _templateObject7$a;
8595
- var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8596
- 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) {
7708
+ var _templateObject$U, _templateObject2$F, _templateObject3$s, _templateObject4$n, _templateObject5$i, _templateObject6$e, _templateObject7$8;
7709
+ var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7710
+ 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) {
8597
7711
  return props.clickable ? 'pointer' : 'default';
8598
7712
  }, devices.mobile);
8599
- var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
8600
- 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) {
7713
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7714
+ 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) {
8601
7715
  return props.showImage ? 2 : '1 / span 4';
8602
7716
  }, devices.mobile);
8603
- 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);
8604
- var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
8605
- 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) {
7717
+ 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);
7718
+ var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
7719
+ 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) {
8606
7720
  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 ";
8607
7721
  });
8608
7722
 
@@ -8674,21 +7788,21 @@ var ContentSummary = function ContentSummary(_ref) {
8674
7788
  }), link.text))));
8675
7789
  };
8676
7790
 
8677
- var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$l;
8678
- 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) {
7791
+ var _templateObject$V, _templateObject2$G, _templateObject3$t, _templateObject4$o, _templateObject5$j;
7792
+ 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) {
8679
7793
  var imageToLeft = _ref.imageToLeft;
8680
7794
  return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
8681
7795
  }, devices.mobile);
8682
- 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) {
7796
+ 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) {
8683
7797
  var imageToLeft = _ref2.imageToLeft;
8684
7798
  return imageToLeft ? 'left' : 'right';
8685
7799
  }, devices.mobile);
8686
- 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) {
7800
+ 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) {
8687
7801
  var imageToLeft = _ref3.imageToLeft;
8688
7802
  return imageToLeft ? 'right' : 'left';
8689
7803
  }, devices.mobile);
8690
- 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"])));
8691
- 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"])));
7804
+ 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"])));
7805
+ 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"])));
8692
7806
 
8693
7807
  var Editorial = function Editorial(_ref) {
8694
7808
  var _ref$imagePosition = _ref.imagePosition,
@@ -8719,82 +7833,26 @@ var Editorial = function Editorial(_ref) {
8719
7833
  })))));
8720
7834
  };
8721
7835
 
8722
- var InformationCtaVariants = {
8723
- Primary: 'Primary',
8724
- Secondary: 'Secondary',
8725
- Tertiary: 'Tertiary',
8726
- TextLink: 'TextLink'
8727
- };
8728
-
8729
- var COLORS$4 = {
8730
- "default": 'var(--information-panel-button-color)',
8731
- background: 'var(--information-panel-button-bg-color)',
8732
- hover: 'var(--information-panel-button-hover-color)',
8733
- pressed: 'var(--information-panel-button-pressed-color)'
8734
- };
8735
- var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
8736
- if (theme === ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
8737
- return 'var(--color-primary-black)';
7836
+ var _templateObject$W, _templateObject2$H, _templateObject3$u, _templateObject4$p, _templateObject5$k;
7837
+ 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"])));
7838
+ var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7839
+ var InfoCTAWrapper = /*#__PURE__*/styled('div')(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 32px 0;\n\n ", "}\n"])), function (props) {
7840
+ if (!props.infoThemed) {
7841
+ return '';
8738
7842
  }
8739
- if (variant === InformationCtaVariants.Primary) {
8740
- return COLORS$4["default"];
7843
+ if (props.variant === IInformationCtaVariant.Primary || props.variant === IInformationCtaVariant.Secondary) {
7844
+ return "a {\n color: var(--base-color-black);\n background: var(--base-color-white);\n border-color: var(--base-color-transparent);\n }";
8741
7845
  }
8742
- return colorValue;
8743
- };
8744
- var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
8745
- return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
8746
- };
8747
- var getBorderColor$1 = function getBorderColor(variant, colorValue) {
8748
- return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
8749
- };
8750
-
8751
- var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
8752
- 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);
8753
- var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
8754
- 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) {
8755
- var variant = _ref.variant,
8756
- theme = _ref.theme;
8757
- return getTextColor$4(variant, theme, COLORS$4.background);
8758
- }, function (_ref2) {
8759
- var variant = _ref2.variant;
8760
- return getBackgroundColor$2(variant, COLORS$4.background);
8761
- }, function (_ref3) {
8762
- var variant = _ref3.variant;
8763
- return getBorderColor$1(variant, COLORS$4.background);
8764
- }, function (_ref4) {
8765
- var variant = _ref4.variant,
8766
- theme = _ref4.theme;
8767
- return getTextColor$4(variant, theme, COLORS$4.background);
8768
- }, function (_ref5) {
8769
- var variant = _ref5.variant,
8770
- theme = _ref5.theme;
8771
- return getTextColor$4(variant, theme, COLORS$4.hover);
8772
- }, function (_ref6) {
8773
- var variant = _ref6.variant;
8774
- return getBackgroundColor$2(variant, COLORS$4.hover);
8775
- }, function (_ref7) {
8776
- var variant = _ref7.variant;
8777
- return getBorderColor$1(variant, COLORS$4.hover);
8778
- }, function (_ref8) {
8779
- var variant = _ref8.variant,
8780
- theme = _ref8.theme;
8781
- return getTextColor$4(variant, theme, COLORS$4.hover);
8782
- }, function (_ref9) {
8783
- var variant = _ref9.variant,
8784
- theme = _ref9.theme;
8785
- return getTextColor$4(variant, theme, COLORS$4.pressed);
8786
- }, function (_ref10) {
8787
- var variant = _ref10.variant;
8788
- return getBackgroundColor$2(variant, COLORS$4.pressed);
8789
- }, function (_ref11) {
8790
- var variant = _ref11.variant;
8791
- return getBorderColor$1(variant, COLORS$4.pressed);
8792
- }, function (_ref12) {
8793
- var variant = _ref12.variant,
8794
- theme = _ref12.theme;
8795
- return getTextColor$4(variant, theme, COLORS$4.pressed);
7846
+ 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 ";
7847
+ });
7848
+ var InfoWrapper = /*#__PURE__*/styled(Grid)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 60px 0;\n color: ", ";\n background: ", "\n }};\n"])), function (props) {
7849
+ return props.background !== IInformationBackgroundColour.White ? 'var(--base-color-white)' : 'var(--base-color-black)';
7850
+ }, function (props) {
7851
+ return "var(--base-color-" + props.background + ")";
7852
+ });
7853
+ var InfoBodyWrapper = /*#__PURE__*/styled('div')(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n text-decoration: underline;\n color: ", ";\n }\n"])), function (props) {
7854
+ return props.background === IInformationBackgroundColour.White ? 'var(--base-color-black)' : 'var(--base-color-white)';
8796
7855
  });
8797
- 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);
8798
7856
 
8799
7857
  // Helper function for rendering buttons based on the variant
8800
7858
  var renderButton = function renderButton(_ref) {
@@ -8805,7 +7863,7 @@ var renderButton = function renderButton(_ref) {
8805
7863
  iconDirection = _ref.iconDirection,
8806
7864
  target = _ref.target;
8807
7865
  switch (variant) {
8808
- case InformationCtaVariants.Secondary:
7866
+ case IInformationCtaVariant.Secondary:
8809
7867
  return /*#__PURE__*/React__default.createElement(SecondaryButton, {
8810
7868
  href: link,
8811
7869
  iconName: iconName,
@@ -8813,13 +7871,13 @@ var renderButton = function renderButton(_ref) {
8813
7871
  target: target,
8814
7872
  "aria-label": text
8815
7873
  }, text);
8816
- case InformationCtaVariants.Tertiary:
7874
+ case IInformationCtaVariant.Tertiary:
8817
7875
  return /*#__PURE__*/React__default.createElement(TertiaryButton, {
8818
7876
  href: link,
8819
7877
  target: target,
8820
7878
  "aria-label": text
8821
7879
  }, text);
8822
- case InformationCtaVariants.TextLink:
7880
+ case IInformationCtaVariant.TextLink:
8823
7881
  return /*#__PURE__*/React__default.createElement(TextLink, {
8824
7882
  href: link,
8825
7883
  iconName: iconName,
@@ -8839,17 +7897,17 @@ var renderButton = function renderButton(_ref) {
8839
7897
  };
8840
7898
  var InfoCta = function InfoCta(_ref2) {
8841
7899
  var _ref2$variant = _ref2.variant,
8842
- variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
7900
+ variant = _ref2$variant === void 0 ? IInformationCtaVariant.Primary : _ref2$variant,
8843
7901
  link = _ref2.link,
8844
7902
  text = _ref2.text,
8845
7903
  iconName = _ref2.iconName,
8846
7904
  iconDirection = _ref2.iconDirection,
7905
+ infoThemed = _ref2.infoThemed,
8847
7906
  _ref2$target = _ref2.target,
8848
- target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
8849
- theme = _ref2.theme;
7907
+ target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
8850
7908
  return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
8851
7909
  variant: variant,
8852
- theme: theme
7910
+ infoThemed: infoThemed
8853
7911
  }, renderButton({
8854
7912
  variant: variant,
8855
7913
  link: link,
@@ -8865,28 +7923,40 @@ var smallColumnSpan = 4;
8865
7923
  var largeColumnSpan = 9;
8866
7924
  var mediumWordBreakpoint = 8;
8867
7925
  var longWordBreakpoint = 13;
8868
- var getColumnSpan = function getColumnSpan(longestWordLength) {
7926
+ var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
7927
+ if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
8869
7928
  if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
8870
7929
  if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
8871
7930
  return defaultColumnSpan;
8872
7931
  };
7932
+ var renderTitle = function renderTitle(props) {
7933
+ var headerLevel = props.variant === IInformationTitleVariant.Header && props.textSize < 4 ? 4 : props.textSize;
7934
+ return props.variant === IInformationTitleVariant.Header ? (/*#__PURE__*/React__default.createElement(Header, {
7935
+ level: headerLevel
7936
+ }, props.text)) : (/*#__PURE__*/React__default.createElement(AltHeader, {
7937
+ level: headerLevel
7938
+ }, props.text));
7939
+ };
8873
7940
  var Information = function Information(_ref) {
8874
7941
  var body = _ref.body,
8875
7942
  title = _ref.title,
7943
+ background = _ref.background,
8876
7944
  cta = _ref.cta,
8877
- className = _ref.className,
8878
- theme = _ref.theme;
7945
+ className = _ref.className;
8879
7946
  var safeTitle = title || {
8880
7947
  text: '',
8881
- textSize: 'medium'
7948
+ variant: IInformationTitleVariant.Header,
7949
+ textSize: 5
8882
7950
  }; // Provide a fallback
8883
7951
  var titleWords = safeTitle.text.split(' ');
8884
7952
  var titleWordLengths = titleWords.map(function (word) {
8885
7953
  return word.length;
8886
7954
  });
8887
7955
  var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
8888
- var titleColumnSpan = getColumnSpan(maxTitleWordLength);
8889
- return /*#__PURE__*/React__default.createElement(InfoWrapper$1, {
7956
+ var titleColumnSpan = getColumnSpan(safeTitle.variant, safeTitle.textSize, maxTitleWordLength);
7957
+ var bgColour = background != null ? background : IInformationBackgroundColour.White;
7958
+ return /*#__PURE__*/React__default.createElement(InfoWrapper, {
7959
+ background: bgColour,
8890
7960
  "data-testid": "infoWrapper",
8891
7961
  className: className
8892
7962
  }, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -8894,53 +7964,50 @@ var Information = function Information(_ref) {
8894
7964
  columnStartDevice: 2,
8895
7965
  columnSpanDesktop: titleColumnSpan,
8896
7966
  columnSpanDevice: 12
8897
- }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8898
- hierarchy: "h2",
8899
- size: safeTitle.textSize,
8900
- color: "inherit"
8901
- }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
7967
+ }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(safeTitle))), /*#__PURE__*/React__default.createElement(GridItem, {
8902
7968
  columnStartDesktop: titleColumnSpan + 2,
8903
7969
  columnStartDevice: 2,
8904
7970
  columnSpanDesktop: 14 - titleColumnSpan,
8905
7971
  columnSpanDevice: 12
8906
- }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
7972
+ }, /*#__PURE__*/React__default.createElement(InfoContent, null, /*#__PURE__*/React__default.createElement(InfoBodyWrapper, {
7973
+ background: bgColour,
8907
7974
  dangerouslySetInnerHTML: {
8908
7975
  __html: body
8909
7976
  }
8910
7977
  }), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
8911
7978
  link: cta.link,
8912
7979
  variant: cta.variant,
7980
+ infoThemed: bgColour !== IInformationBackgroundColour.White,
8913
7981
  text: cta.text,
8914
7982
  iconName: cta.iconName,
8915
7983
  iconDirection: cta.iconDirection,
8916
- target: cta.target,
8917
- theme: theme
7984
+ target: cta.target
8918
7985
  })))));
8919
7986
  };
8920
7987
 
8921
- var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
8922
- 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) {
7988
+ var _templateObject$X, _templateObject2$I, _templateObject3$v, _templateObject4$q, _templateObject5$l, _templateObject6$f, _templateObject7$9, _templateObject8$7;
7989
+ 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) {
8923
7990
  var theme = _ref.theme;
8924
7991
  return theme.colors.primary;
8925
7992
  }, function (_ref2) {
8926
7993
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
8927
7994
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
8928
7995
  }, devices.mobile);
8929
- 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);
8930
- 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) {
7996
+ 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);
7997
+ 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) {
8931
7998
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
8932
7999
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
8933
8000
  }, devices.mobile);
8934
- 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) {
8001
+ 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) {
8935
8002
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
8936
8003
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
8937
8004
  }, devices.mobile);
8938
- 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"])));
8939
- 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);
8940
- 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);
8941
- 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"])));
8005
+ 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"])));
8006
+ 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);
8007
+ 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);
8008
+ var PageHeadingText = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__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"])));
8942
8009
 
8943
- var _excluded$l = ["text"];
8010
+ var _excluded$j = ["text"];
8944
8011
  var PageHeading = function PageHeading(_ref) {
8945
8012
  var title = _ref.title,
8946
8013
  text = _ref.text,
@@ -8956,14 +8023,14 @@ var PageHeading = function PageHeading(_ref) {
8956
8023
  titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
8957
8024
  var _ref2 = link || {},
8958
8025
  linkText = _ref2.text,
8959
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8026
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
8960
8027
  var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
8961
8028
  var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
8962
8029
  var isTitleUnAvailable = !title;
8963
8030
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
8964
8031
  "data-testid": "page-heading-wrapper",
8965
8032
  isPageHeadingWithoutTitle: isTitleUnAvailable
8966
- }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$2, {
8033
+ }, /*#__PURE__*/React__default.createElement(PageHeadingGrid, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
8967
8034
  "data-testid": "page-heading-title",
8968
8035
  isPageHeadingWithoutTitle: isTitleUnAvailable
8969
8036
  }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -8984,13 +8051,13 @@ var PageHeading = function PageHeading(_ref) {
8984
8051
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
8985
8052
  };
8986
8053
 
8987
- var _excluded$m = ["link"];
8054
+ var _excluded$k = ["link"];
8988
8055
  var PageHeadingCore = function PageHeadingCore(_ref) {
8989
8056
  var link = _ref.link,
8990
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
8057
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
8991
8058
  var coreLink = link && _extends({}, link, {
8992
- color: ThemeColor['base-white'],
8993
- bgColor: ThemeColor['base-black']
8059
+ color: Colors.White,
8060
+ bgColor: Colors.Black
8994
8061
  });
8995
8062
  return /*#__PURE__*/React__default.createElement(Theme, {
8996
8063
  theme: ThemeType.Core
@@ -8999,13 +8066,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
8999
8066
  })));
9000
8067
  };
9001
8068
 
9002
- var _excluded$n = ["link"];
8069
+ var _excluded$l = ["link"];
9003
8070
  var PageHeadingCinema = function PageHeadingCinema(_ref) {
9004
8071
  var link = _ref.link,
9005
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
8072
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
9006
8073
  var cinemaLink = link && _extends({}, link, {
9007
- color: ThemeColor['base-black'],
9008
- bgColor: ThemeColor['base-white']
8074
+ color: Colors.Black,
8075
+ bgColor: Colors.White
9009
8076
  });
9010
8077
  return /*#__PURE__*/React__default.createElement(Theme, {
9011
8078
  theme: ThemeType.Cinema
@@ -9016,17 +8083,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
9016
8083
  })));
9017
8084
  };
9018
8085
 
9019
- var _templateObject$$, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
9020
- 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);
9021
- 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);
9022
- 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);
9023
- 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);
9024
- var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9025
- 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);
9026
- 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);
9027
- 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);
8086
+ var _templateObject$Y, _templateObject2$J, _templateObject3$w, _templateObject4$r, _templateObject5$m, _templateObject6$g, _templateObject7$a, _templateObject8$8;
8087
+ 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);
8088
+ 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);
8089
+ 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);
8090
+ var SponsorWrapper$1 = /*#__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);
8091
+ var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
8092
+ 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);
8093
+ 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);
8094
+ var ScrollDownWrapper = /*#__PURE__*/styled.div(_templateObject8$8 || (_templateObject8$8 = /*#__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);
9028
8095
 
9029
- var _excluded$o = ["text"];
8096
+ var _excluded$m = ["text"];
9030
8097
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
9031
8098
  var children = _ref.children,
9032
8099
  text = _ref.text,
@@ -9044,12 +8111,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
9044
8111
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
9045
8112
  var _ref2 = link || {},
9046
8113
  linkText = _ref2.text,
9047
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
8114
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9048
8115
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
9049
8116
  bgUrlDesktop: bgUrlDesktop,
9050
8117
  bgUrlDevice: bgUrlDevice,
9051
8118
  "data-testid": "impact-wrapper"
9052
- }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8119
+ }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9053
8120
  "data-testid": "impact-sponsor"
9054
8121
  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
9055
8122
  "data-testid": "impact-custom-sponsor"
@@ -9089,21 +8156,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
9089
8156
  }, "Scroll Down"))) : null);
9090
8157
  };
9091
8158
 
9092
- var _templateObject$10, _templateObject2$N, _templateObject3$z, _templateObject4$u, _templateObject5$o;
9093
- 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) {
8159
+ var _templateObject$Z, _templateObject2$K, _templateObject3$x, _templateObject4$s, _templateObject5$n;
8160
+ 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) {
9094
8161
  var color = _ref.color;
9095
8162
  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 ";
9096
8163
  }, devices.mobileAndTablet);
9097
- 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) {
8164
+ 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) {
9098
8165
  var hasImage = _ref2.hasImage;
9099
8166
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
9100
8167
  }, devices.mobileAndTablet, function (_ref3) {
9101
8168
  var hasImage = _ref3.hasImage;
9102
8169
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
9103
8170
  });
9104
- 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);
9105
- 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);
9106
- 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);
8171
+ 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);
8172
+ 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);
8173
+ 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);
9107
8174
 
9108
8175
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
9109
8176
  var _image$src, _image$alt;
@@ -9117,7 +8184,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9117
8184
  "data-testid": "wrapper"
9118
8185
  }, /*#__PURE__*/React__default.createElement(LeftPanel, {
9119
8186
  hasImage: hasImage
9120
- }, /*#__PURE__*/React__default.createElement(InfoWrapper$2, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
8187
+ }, /*#__PURE__*/React__default.createElement(InfoWrapper$1, null, info), scrollTo && (/*#__PURE__*/React__default.createElement(ScrollDownWrapper$1, {
9121
8188
  "data-testid": "scroll-link"
9122
8189
  }, /*#__PURE__*/React__default.createElement(TabLink, {
9123
8190
  iconName: "Arrow",
@@ -9133,16 +8200,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9133
8200
  })))));
9134
8201
  };
9135
8202
 
9136
- var _templateObject$11;
9137
- 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"])));
8203
+ var _templateObject$_;
8204
+ var StreamWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
9138
8205
 
9139
- var _excluded$p = ["link"];
8206
+ var _excluded$n = ["link"];
9140
8207
  var PageHeadingStream = function PageHeadingStream(_ref) {
9141
8208
  var link = _ref.link,
9142
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
8209
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
9143
8210
  var streamLink = link && _extends({}, link, {
9144
- color: ThemeColor['base-black'],
9145
- bgColor: ThemeColor['base-white']
8211
+ color: Colors.Black,
8212
+ bgColor: Colors.White
9146
8213
  });
9147
8214
  return /*#__PURE__*/React__default.createElement(Theme, {
9148
8215
  theme: ThemeType.Stream
@@ -9153,199 +8220,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
9153
8220
  }))));
9154
8221
  };
9155
8222
 
9156
- var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
9157
- var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9158
- 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"])));
9159
- 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);
9160
- 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);
9161
- 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) {
9162
- var theme = _ref.theme;
9163
- return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
9164
- }, function (_ref2) {
9165
- var showBlock = _ref2.showBlock;
9166
- return showBlock ? 'block' : 'none';
9167
- }, devices.mobile);
9168
- 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);
9169
- 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) {
9170
- var isBadgePresent = _ref3.isBadgePresent;
9171
- return isBadgePresent ? '1' : '4';
9172
- });
9173
- 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) {
9174
- var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
9175
- return isAdditionalButtonPresent ? '20px' : '0';
9176
- });
9177
- 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);
9178
- 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) {
9179
- var theme = _ref5.theme;
9180
- return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
9181
- }, devices.mobile, function (_ref6) {
9182
- var isButtonPresent = _ref6.isButtonPresent;
9183
- return isButtonPresent ? '20px' : '0';
9184
- });
9185
- 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);
9186
-
9187
- var PageHeadingPromoBadge;
9188
- (function (PageHeadingPromoBadge) {
9189
- PageHeadingPromoBadge["Stream"] = "Stream";
9190
- PageHeadingPromoBadge["Cinema"] = "Cinema";
9191
- })(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
9192
-
9193
- var Badge = function Badge(_ref) {
9194
- var isMobile = _ref.isMobile,
9195
- theme = _ref.theme,
9196
- badge = _ref.badge;
9197
- if (!badge) return null;
9198
- var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
9199
- var alignment = isMobile ? 'center' : 'left';
9200
- return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
9201
- "data-testid": "promo-heading-badge"
9202
- }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
9203
- fillColor: color,
9204
- align: alignment
9205
- })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
9206
- fillColor: color,
9207
- align: alignment
9208
- })));
9209
- };
9210
-
9211
- var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
9212
- var link = _ref.link,
9213
- theme = _ref.theme;
9214
- var text = link.text;
9215
- if (theme === ThemeType.Cinema) {
9216
- return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9217
- textColor: ThemeColor['base-white'],
9218
- backgroundColor: ThemeColor['base-black'],
9219
- hoveredColor: ThemeColor['rbo-black-hovered'],
9220
- pressedColor: ThemeColor['rbo-black-pressed']
9221
- }), text);
9222
- }
9223
- return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9224
- textColor: ThemeColor['base-black'],
9225
- backgroundColor: ThemeColor['base-white'],
9226
- hoveredColor: ThemeColor['white-hovered'],
9227
- pressedColor: ThemeColor['white-pressed']
9228
- }), text);
9229
- };
9230
- var Button$1 = function Button(_ref2) {
9231
- var link = _ref2.link,
9232
- theme = _ref2.theme,
9233
- isMobile = _ref2.isMobile;
9234
- var text = link.text;
9235
- if (isMobile) {
9236
- return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
9237
- theme: theme,
9238
- link: link
9239
- });
9240
- }
9241
- var buttonColor = theme === ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
9242
- if (link.isTextLink) {
9243
- return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
9244
- color: buttonColor,
9245
- iconName: undefined
9246
- }), text);
9247
- }
9248
- return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
9249
- textColor: buttonColor,
9250
- borderColor: buttonColor,
9251
- hoveredColor: buttonColor,
9252
- pressedColor: buttonColor
9253
- }), text);
9254
- };
9255
-
9256
- var Image = function Image(_ref) {
9257
- var desktop = _ref.desktop,
9258
- mobile = _ref.mobile,
9259
- alt = _ref.alt;
9260
- var isMobile = useMobile();
9261
- return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
9262
- aspectRatio: isMobile ? AspectRatio['75:32'] : AspectRatio['90:17']
9263
- }, /*#__PURE__*/React__default.createElement("picture", {
9264
- "data-testid": "promo-heading-picture"
9265
- }, /*#__PURE__*/React__default.createElement("source", {
9266
- srcSet: mobile,
9267
- media: "(max-width: 768px)"
9268
- }), /*#__PURE__*/React__default.createElement("source", {
9269
- srcSet: desktop,
9270
- media: "(min-width: 769px)"
9271
- }), /*#__PURE__*/React__default.createElement("img", {
9272
- src: desktop,
9273
- alt: alt,
9274
- "data-testid": "promo-heading-image"
9275
- })));
9276
- };
9277
-
9278
- var TITLE_MAX_LENGTH = 40;
9279
- var PageHeadingPromo = function PageHeadingPromo(_ref) {
9280
- var _ref$sponsor = _ref.sponsor,
9281
- sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
9282
- className = _ref.className,
9283
- theme = _ref.theme,
9284
- badge = _ref.badge,
9285
- mainLink = _ref.mainLink,
9286
- title = _ref.title,
9287
- titleSemanticLevel = _ref.titleSemanticLevel,
9288
- additionalLink = _ref.additionalLink,
9289
- image = _ref.image;
9290
- var isMobile = useMobile();
9291
- var showImageButton = !title && !badge && !additionalLink && !isMobile;
9292
- var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
9293
- var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
9294
- return /*#__PURE__*/React__default.createElement(Wrapper$5, {
9295
- className: className
9296
- }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9297
- "data-testid": "promo-heading-sponsor"
9298
- }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
9299
- mobile: image.mobile,
9300
- desktop: image.desktop,
9301
- alt: image.alt
9302
- }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
9303
- "data-testid": "promo-heading-image-button"
9304
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
9305
- textColor: ThemeColor['base-black'],
9306
- backgroundColor: ThemeColor['base-white'],
9307
- hoveredColor: ThemeColor['white-hovered'],
9308
- pressedColor: ThemeColor['white-pressed']
9309
- }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
9310
- theme: theme,
9311
- showBlock: showContentBlock
9312
- }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
9313
- columnStartDesktop: 2,
9314
- columnSpanDesktop: 14,
9315
- columnStartDevice: 2,
9316
- columnSpanDevice: 12
9317
- }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
9318
- theme: theme
9319
- }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9320
- isBadgePresent: !!badge
9321
- }, /*#__PURE__*/React__default.createElement(Badge, {
9322
- theme: theme,
9323
- badge: badge,
9324
- isMobile: isMobile
9325
- }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
9326
- theme: theme,
9327
- link: additionalLink
9328
- }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9329
- theme: theme,
9330
- isButtonPresent: !!mainLink || !!additionalLink
9331
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9332
- hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
9333
- size: "large"
9334
- }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
9335
- isAdditionalButtonPresent: !!additionalLink && !badge
9336
- }, /*#__PURE__*/React__default.createElement(Button$1, {
9337
- theme: theme,
9338
- link: mainLink,
9339
- isMobile: isMobile
9340
- }))))))));
9341
- };
9342
-
9343
- var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;
9344
- 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);
9345
- 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"])));
9346
- var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9347
- 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);
9348
- 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) {
8223
+ var _templateObject$$, _templateObject2$L, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$b, _templateObject8$9, _templateObject9$4, _templateObject10$4;
8224
+ 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);
8225
+ 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"])));
8226
+ var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8227
+ 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);
8228
+ 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) {
9349
8229
  var invert = _ref.invert,
9350
8230
  theme = _ref.theme;
9351
8231
  return invert ? theme.colors.white : theme.colors.primary;
@@ -9361,10 +8241,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (
9361
8241
  var theme = _ref4.theme;
9362
8242
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
9363
8243
  }, devices.tablet, devices.mobile);
9364
- 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);
9365
- 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);
9366
- 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);
9367
- 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) {
8244
+ 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);
8245
+ var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__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);
8246
+ 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);
8247
+ 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) {
9368
8248
  var invert = _ref5.invert,
9369
8249
  theme = _ref5.theme;
9370
8250
  return invert ? theme.colors.primary : theme.colors.white;
@@ -9416,7 +8296,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
9416
8296
  // eslint-disable-next-line react-hooks/rules-of-hooks
9417
8297
  var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
9418
8298
  var target = sameSiteUrl ? '_self' : '_blank';
9419
- var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
8299
+ var color = invert ? Colors.Black : Colors.White;
9420
8300
  switch (brandingStyle) {
9421
8301
  case 'BlockText':
9422
8302
  return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
@@ -9453,7 +8333,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
9453
8333
  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
9454
8334
  };
9455
8335
 
9456
- var _excluded$q = ["text"];
8336
+ var _excluded$o = ["text"];
9457
8337
  var useResponsiveVideo = function useResponsiveVideo(video, poster) {
9458
8338
  var mobileVideo = video.mobile || video.desktop;
9459
8339
  var desktopVideo = video.desktop || video.mobile;
@@ -9560,7 +8440,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9560
8440
  semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
9561
8441
  var _ref5 = link || {},
9562
8442
  linkText = _ref5.text,
9563
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$q);
8443
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
9564
8444
  var titleSize = title && title.length > 20 ? 4 : 3;
9565
8445
  var video = {
9566
8446
  elementId: 'compact-header-video',
@@ -9572,7 +8452,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9572
8452
  mobile: bgUrlDevice,
9573
8453
  alt: bgImageAltText
9574
8454
  };
9575
- return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8455
+ return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9576
8456
  "data-testid": "compact-sponsor"
9577
8457
  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
9578
8458
  "data-testid": "compact-custom-sponsor"
@@ -9598,15 +8478,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9598
8478
  }), linkText))))));
9599
8479
  };
9600
8480
 
9601
- var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
9602
- var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9603
- 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"])));
8481
+ var _templateObject$10, _templateObject2$M, _templateObject3$z, _templateObject4$t;
8482
+ var MorePages = /*#__PURE__*/styled.span(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
8483
+ 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"])));
9604
8484
  // PageNumber extends bodyText but uses subtitle-1 font size
9605
- 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) {
8485
+ 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) {
9606
8486
  var active = _ref.active;
9607
8487
  return active === 'true' && " \n color: var(--base-color-core);\n ";
9608
8488
  });
9609
- 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"])));
8489
+ 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"])));
9610
8490
 
9611
8491
  var reducePages = function reducePages(pages, currentPage) {
9612
8492
  // If there are less than 6 pages, return all pages
@@ -9672,14 +8552,14 @@ var Pagination = function Pagination(_ref) {
9672
8552
  })))));
9673
8553
  };
9674
8554
 
9675
- var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9676
- 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);
9677
- 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"])));
9678
- 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"])));
9679
- 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"])));
9680
- var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9681
- 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"])));
9682
- var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
8555
+ var _templateObject$11, _templateObject2$N, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$c;
8556
+ 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);
8557
+ 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"])));
8558
+ 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"])));
8559
+ 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"])));
8560
+ var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
8561
+ 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"])));
8562
+ var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-dark-grey);\n"])));
9683
8563
 
9684
8564
  var Person = function Person(_ref) {
9685
8565
  var person = _ref.person,
@@ -9736,14 +8616,14 @@ var PeopleListing = function PeopleListing(_ref) {
9736
8616
  }));
9737
8617
  };
9738
8618
 
9739
- var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y;
9740
- var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9741
- 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) {
8619
+ var _templateObject$12, _templateObject2$O, _templateObject3$B, _templateObject4$v;
8620
+ var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8621
+ 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) {
9742
8622
  var columnCount = _ref.columnCount;
9743
8623
  return "repeat(" + columnCount + ", 1fr)";
9744
8624
  }, devices.mobile, devices.tablet);
9745
- 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"])));
9746
- 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"])));
8625
+ 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"])));
8626
+ 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"])));
9747
8627
 
9748
8628
  // Get the total character length of a property in an array of objects
9749
8629
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -9752,6 +8632,7 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
9752
8632
  }, 0);
9753
8633
  };
9754
8634
 
8635
+ /*eslint-disable*/
9755
8636
  var DEFAULT_COLUMN_COUNT = 4;
9756
8637
  var DEFAULT_LARGE_COLUMN_SPAN = 2;
9757
8638
  var DEFAULT_CHARACTER_THRESHOLD = 180;
@@ -9803,8 +8684,8 @@ var CreditListing = function CreditListing(_ref) {
9803
8684
  var span = namesLength > characterThreshold ? largeColumnSpan : 1;
9804
8685
  var unboundedEnd = nextColumnStart + span;
9805
8686
  var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
9806
- var end = start + span;
9807
- nextColumnStart = end % columnCount || columnCount;
8687
+ var columnEnd = start + span;
8688
+ nextColumnStart = columnEnd % columnCount || columnCount;
9808
8689
  return {
9809
8690
  columnStart: start,
9810
8691
  columnSpan: span
@@ -9861,14 +8742,14 @@ var CreditListing = function CreditListing(_ref) {
9861
8742
  }, creditEntries);
9862
8743
  };
9863
8744
 
9864
- 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;
8745
+ var _templateObject$13, _templateObject2$P, _templateObject3$C, _templateObject4$w, _templateObject5$q, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
9865
8746
  var LENGTH_TEXT = 28;
9866
8747
  var LENGTH_TEXT_TABLET$1 = 12;
9867
8748
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
9868
8749
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
9869
8750
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
9870
8751
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
9871
- 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) {
8752
+ 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) {
9872
8753
  var imageToLeft = _ref.imageToLeft;
9873
8754
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
9874
8755
  }, devices.tablet, function (_ref2) {
@@ -9878,9 +8759,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templa
9878
8759
  var asCard = _ref3.asCard;
9879
8760
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
9880
8761
  });
9881
- 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"])));
9882
- 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"])));
9883
- 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) {
8762
+ 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"])));
8763
+ 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"])));
8764
+ 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) {
9884
8765
  var hasTextLinks = _ref4.hasTextLinks;
9885
8766
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
9886
8767
  }, function (_ref5) {
@@ -9904,22 +8785,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$z || (_templat
9904
8785
  }
9905
8786
  return '';
9906
8787
  });
9907
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
8788
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n"])), function (_ref7) {
9908
8789
  var marginBottom = _ref7.marginBottom;
9909
8790
  return marginBottom + "px";
9910
8791
  });
9911
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
9912
- 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"])));
9913
- 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"])));
9914
- 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);
9915
- 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);
9916
- 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);
9917
- 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);
9918
- var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9919
- var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9920
- var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9921
- 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);
9922
- 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) {
8792
+ var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
8793
+ 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"])));
8794
+ var TextLinkWrapper$3 = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8795
+ 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);
8796
+ 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);
8797
+ 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);
8798
+ 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);
8799
+ var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$2 || (_templateObject13$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8800
+ var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8801
+ var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$1 || (_templateObject15$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
8802
+ 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);
8803
+ 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) {
9923
8804
  var imageToLeft = _ref8.imageToLeft;
9924
8805
  return imageToLeft ? 'left' : 'right';
9925
8806
  }, devices.mobile);
@@ -9934,16 +8815,16 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject18 || (
9934
8815
  return asCard && asCardOverrides;
9935
8816
  });
9936
8817
  var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
9937
- var TimerWrapper$2 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
8818
+ var TimerWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
9938
8819
  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);
9939
8820
 
9940
- var _excluded$r = ["text"],
9941
- _excluded2$4 = ["text"],
8821
+ var _excluded$p = ["text"],
8822
+ _excluded2$2 = ["text"],
9942
8823
  _excluded3 = ["text"];
9943
- var _buttonTypeToButton$2;
8824
+ var _buttonTypeToButton$1;
9944
8825
  var LENGTH_TEXT$1 = 28;
9945
8826
  var LENGTH_TEXT_PARAGRAPH = 130;
9946
- var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
8827
+ var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
9947
8828
  var PromoWithTags = function PromoWithTags(_ref) {
9948
8829
  var _ref$imagePosition = _ref.imagePosition,
9949
8830
  imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
@@ -10000,17 +8881,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
10000
8881
  var _ref2 = firstButton || {},
10001
8882
  _ref2$text = _ref2.text,
10002
8883
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
10003
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
8884
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
10004
8885
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
10005
8886
  var secondButton = links == null ? void 0 : links[1];
10006
8887
  var _ref3 = secondButton || {},
10007
8888
  _ref3$text = _ref3.text,
10008
8889
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
10009
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
8890
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
10010
8891
  var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
10011
8892
  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
10012
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
10013
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$2[secondButton.buttonType] : TertiaryButton;
8893
+ var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
8894
+ var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton$1[secondButton.buttonType] : TertiaryButton;
10014
8895
  var textLinkItems = textLinks ? textLinks.map(function (link, index) {
10015
8896
  var _link$text = link.text,
10016
8897
  textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -10028,7 +8909,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10028
8909
  level: 5
10029
8910
  }, timerParams.endDateText));
10030
8911
  }
10031
- return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
8912
+ return /*#__PURE__*/React__default.createElement(TimerWrapper$1, {
10032
8913
  "data-testid": "promo-with-tags-timer-wrapper"
10033
8914
  }, /*#__PURE__*/React__default.createElement(Timer, {
10034
8915
  endDateHandler: function endDateHandler() {
@@ -10113,28 +8994,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
10113
8994
  }))));
10114
8995
  };
10115
8996
 
10116
- var _templateObject$18, _templateObject2$U, _templateObject3$G, _templateObject4$A, _templateObject5$t, _templateObject6$n, _templateObject7$h;
8997
+ var _templateObject$14, _templateObject2$Q, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$k, _templateObject7$e;
10117
8998
  var LENGTH_TEXT$2 = 28;
10118
8999
  var LENGTH_TEXT_TABLET$2 = 10;
10119
- 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) {
9000
+ 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) {
10120
9001
  var imageToLeft = _ref.imageToLeft;
10121
9002
  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'";
10122
9003
  }, devices.tablet, function (_ref2) {
10123
9004
  var imageToLeft = _ref2.imageToLeft;
10124
9005
  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'";
10125
9006
  }, devices.mobile);
10126
- 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) {
9007
+ 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) {
10127
9008
  var imageToLeft = _ref3.imageToLeft;
10128
9009
  return imageToLeft ? 'left' : 'right';
10129
9010
  }, devices.mobile);
10130
- 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) {
9011
+ 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) {
10131
9012
  var imageToLeft = _ref4.imageToLeft;
10132
9013
  return imageToLeft ? 'right' : 'left';
10133
9014
  }, devices.mobile);
10134
- 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);
10135
- 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"])));
10136
- 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"])));
10137
- 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) {
9015
+ 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);
9016
+ var PromoWithTitleSubtitle = /*#__PURE__*/styled.span(_templateObject5$r || (_templateObject5$r = /*#__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"])));
9017
+ var PromoWithTitleText = /*#__PURE__*/styled.div(_templateObject6$k || (_templateObject6$k = /*#__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"])));
9018
+ 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) {
10138
9019
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10139
9020
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
10140
9021
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -10156,8 +9037,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$h || (_templat
10156
9037
  return '';
10157
9038
  });
10158
9039
 
10159
- var _templateObject$19;
10160
- 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) {
9040
+ var _templateObject$15;
9041
+ 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) {
10161
9042
  var _ref$aspectRatio = _ref.aspectRatio,
10162
9043
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
10163
9044
  return aspectRatio;
@@ -10188,6 +9069,19 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
10188
9069
  return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
10189
9070
  };
10190
9071
 
9072
+ /**
9073
+ * Generates a random string in the format XXX-XXX.
9074
+ * Does not meet UUID standards.
9075
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
9076
+ *
9077
+ * @return {string} A random string in the format XXX-XXX.
9078
+ */
9079
+ var generateDomElementId = function generateDomElementId() {
9080
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
9081
+ var datePart = Date.now().toString().slice(-3);
9082
+ return randomPart + "-" + datePart;
9083
+ };
9084
+
10191
9085
  var VideoWithControls$1 = function VideoWithControls(_ref) {
10192
9086
  var video = _ref.video,
10193
9087
  settings = _ref.settings;
@@ -10269,8 +9163,8 @@ var PromoChild = function PromoChild(_ref) {
10269
9163
  }));
10270
9164
  };
10271
9165
 
10272
- var _excluded$s = ["text"],
10273
- _excluded2$5 = ["text"];
9166
+ var _excluded$q = ["text"],
9167
+ _excluded2$3 = ["text"];
10274
9168
  var LENGTH_TEXT$3 = 28;
10275
9169
  var PromoWithTitle = function PromoWithTitle(_ref) {
10276
9170
  var _ref$imagePosition = _ref.imagePosition,
@@ -10295,13 +9189,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10295
9189
  var _ref2 = primaryButton || {},
10296
9190
  _ref2$text = _ref2.text,
10297
9191
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
10298
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
9192
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
10299
9193
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
10300
9194
  var tertiaryButton = links == null ? void 0 : links[1];
10301
9195
  var _ref3 = tertiaryButton || {},
10302
9196
  _ref3$text = _ref3.text,
10303
9197
  tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
10304
- restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
9198
+ restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
10305
9199
  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
10306
9200
  var defaultVideoSettings = {
10307
9201
  muted: true,
@@ -10338,8 +9232,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10338
9232
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10339
9233
  };
10340
9234
 
10341
- var _templateObject$1a;
10342
- var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9235
+ var _templateObject$16;
9236
+ var RadioGroupContainer = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
10343
9237
 
10344
9238
  /**
10345
9239
  * DEPRECATED. Use RadioGroup2 instead
@@ -10394,9 +9288,9 @@ var RadioGroup = function RadioGroup(_ref) {
10394
9288
  })));
10395
9289
  };
10396
9290
 
10397
- var _templateObject$1b, _templateObject2$V, _templateObject3$H;
10398
- var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10399
- 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) {
9291
+ var _templateObject$17, _templateObject2$R, _templateObject3$E;
9292
+ var Container$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9293
+ 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) {
10400
9294
  var horizontalMode = _ref.horizontalMode;
10401
9295
  if (horizontalMode) return 'row';
10402
9296
  return 'column';
@@ -10404,7 +9298,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObjec
10404
9298
  var gap = _ref2.gap;
10405
9299
  return gap + "px";
10406
9300
  });
10407
- var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9301
+ var ErrorLabel$4 = /*#__PURE__*/styled.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
10408
9302
  var darkMode = _ref3.darkMode;
10409
9303
  if (darkMode) return 'var(--base-color-white)';
10410
9304
  return 'var(--base-color-errorstate)';
@@ -10481,10 +9375,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
10481
9375
  }, error))));
10482
9376
  };
10483
9377
 
10484
- var _templateObject$1c, _templateObject2$W, _templateObject3$I;
10485
- 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);
10486
- 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"])));
10487
- 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);
9378
+ var _templateObject$18, _templateObject2$S, _templateObject3$F;
9379
+ 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);
9380
+ 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"])));
9381
+ 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);
10488
9382
 
10489
9383
  /* eslint-disable react/no-danger */
10490
9384
  var StatusBanner = function StatusBanner(_ref) {
@@ -10540,8 +9434,8 @@ var StatusBanner = function StatusBanner(_ref) {
10540
9434
  return null;
10541
9435
  };
10542
9436
 
10543
- var _templateObject$1d;
10544
- 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);
9437
+ var _templateObject$19;
9438
+ 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);
10545
9439
 
10546
9440
  var SectionTitle = function SectionTitle(_ref) {
10547
9441
  var title = _ref.title,
@@ -10569,8 +9463,8 @@ var SectionTitle = function SectionTitle(_ref) {
10569
9463
  }, description)))));
10570
9464
  };
10571
9465
 
10572
- var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$5;
10573
- 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) {
9466
+ var _templateObject$1a, _templateObject2$T, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject10$6, _templateObject11$3;
9467
+ 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) {
10574
9468
  var theme = _ref.theme;
10575
9469
  return "3px solid " + theme.colors.lapisLazuli;
10576
9470
  }, function (_ref2) {
@@ -10580,12 +9474,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /
10580
9474
  var theme = _ref3.theme;
10581
9475
  return theme.colors.lightgrey;
10582
9476
  });
10583
- var borderStyles = /*#__PURE__*/css(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9477
+ var borderStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
10584
9478
  var theme = _ref4.theme;
10585
9479
  return theme.colors.darkgrey;
10586
9480
  });
10587
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10588
- var listItemStyles = /*#__PURE__*/css(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9481
+ var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9482
+ var listItemStyles = /*#__PURE__*/css(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
10589
9483
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10590
9484
  var theme = _ref5.theme;
10591
9485
  return {
@@ -10593,11 +9487,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10593
9487
  color: theme.colors.black,
10594
9488
  title: 'Select Arrow'
10595
9489
  };
10596
- })(_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"])));
10597
- 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);
10598
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10599
- var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10600
- var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9490
+ })(_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"])));
9491
+ 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);
9492
+ var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9493
+ var Options = /*#__PURE__*/styled.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9494
+ var Option = /*#__PURE__*/styled.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10601
9495
  var theme = _ref6.theme,
10602
9496
  hover = _ref6.hover;
10603
9497
  var _theme$colors = theme.colors,
@@ -10607,9 +9501,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 =
10607
9501
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
10608
9502
  });
10609
9503
  var selectStyles = function selectStyles(width, height) {
10610
- 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);
9504
+ 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);
10611
9505
  };
10612
- 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) {
9506
+ 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) {
10613
9507
  var width = _ref7.width,
10614
9508
  height = _ref7.height;
10615
9509
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -10903,7 +9797,7 @@ function Select(_ref3) {
10903
9797
  }
10904
9798
  setSelectedValue(options[0]);
10905
9799
  }, [options, resetWhenOptionsUpdate]);
10906
- return /*#__PURE__*/React__default.createElement(Wrapper$6, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
9800
+ return /*#__PURE__*/React__default.createElement(Wrapper$5, null, label !== '' && (/*#__PURE__*/React__default.createElement(BodyText, {
10907
9801
  level: 1,
10908
9802
  tag: "p",
10909
9803
  "data-testid": "select-label"
@@ -10950,9 +9844,9 @@ function Select(_ref3) {
10950
9844
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
10951
9845
  }
10952
9846
 
10953
- var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$C;
10954
- var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10955
- 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) {
9847
+ var _templateObject$1b, _templateObject2$U, _templateObject3$H, _templateObject4$z;
9848
+ var Container$4 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9849
+ 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) {
10956
9850
  var width = _ref.width;
10957
9851
  if (!width) return 'none';
10958
9852
  return width + "px";
@@ -10969,18 +9863,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateOb
10969
9863
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
10970
9864
  return "0 0 0 3px var(--base-color-lapislazuli)";
10971
9865
  });
10972
- var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9866
+ var TextLabel$4 = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
10973
9867
  var darkMode = _ref5.darkMode;
10974
9868
  if (darkMode) return "var(--base-color-white)";
10975
9869
  return "var(--base-color-black)";
10976
9870
  });
10977
- var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9871
+ var ErrorLabel$5 = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
10978
9872
  var darkMode = _ref6.darkMode;
10979
9873
  if (darkMode) return "var(--base-color-white)";
10980
9874
  return "var(--base-color-errorstate)";
10981
9875
  });
10982
9876
 
10983
- var _excluded$t = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9877
+ var _excluded$r = ["label", "error", "width", "darkMode", "isSearchable", "components"];
10984
9878
  var DropdownIndicator = function DropdownIndicator(props) {
10985
9879
  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
10986
9880
  iconName: "DropdownArrow"
@@ -11031,7 +9925,7 @@ var SelectComponent = function SelectComponent(_ref2) {
11031
9925
  _ref2$isSearchable = _ref2.isSearchable,
11032
9926
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
11033
9927
  components = _ref2.components,
11034
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
9928
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
11035
9929
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
11036
9930
  label: label,
11037
9931
  error: error,
@@ -11049,7 +9943,7 @@ var SelectComponent = function SelectComponent(_ref2) {
11049
9943
  })));
11050
9944
  };
11051
9945
 
11052
- var _excluded$u = ["label", "error", "width", "darkMode", "components"];
9946
+ var _excluded$s = ["label", "error", "width", "darkMode", "components"];
11053
9947
  /**
11054
9948
  * The Select2Async component is similar to Select 2, but uses react-select async
11055
9949
  * component for select instead of regular react-select component. This can be used
@@ -11071,7 +9965,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
11071
9965
  _ref$darkMode = _ref.darkMode,
11072
9966
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
11073
9967
  components = _ref.components,
11074
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
9968
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
11075
9969
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
11076
9970
  label: label,
11077
9971
  error: error,
@@ -11088,8 +9982,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
11088
9982
  })));
11089
9983
  };
11090
9984
 
11091
- var _templateObject$1g, _templateObject2$Z;
11092
- 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) {
9985
+ var _templateObject$1c, _templateObject2$V;
9986
+ 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) {
11093
9987
  var _ref$aspectRatio = _ref.aspectRatio,
11094
9988
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
11095
9989
  return aspectRatio;
@@ -11099,7 +9993,7 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObjec
11099
9993
  height = _ref2.height;
11100
9994
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
11101
9995
  });
11102
- 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"])));
9996
+ 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"])));
11103
9997
 
11104
9998
  var ImageWithCaption = function ImageWithCaption(_ref) {
11105
9999
  var caption = _ref.caption,
@@ -11120,7 +10014,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11120
10014
  return window.removeEventListener('resize', setWrapperHeight);
11121
10015
  };
11122
10016
  }, []);
11123
- return /*#__PURE__*/React__default.createElement(Wrapper$7, {
10017
+ return /*#__PURE__*/React__default.createElement(Wrapper$6, {
11124
10018
  aspectRatio: aspectRatio,
11125
10019
  ref: wrapperRef,
11126
10020
  height: height
@@ -11133,13 +10027,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11133
10027
  })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
11134
10028
  };
11135
10029
 
11136
- var _templateObject$1h, _templateObject2$_, _templateObject3$L;
11137
- var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
11138
- var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
10030
+ var _templateObject$1d, _templateObject2$W, _templateObject3$I;
10031
+ var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
10032
+ var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
11139
10033
  var displayAttribution = _ref.displayAttribution;
11140
10034
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
11141
10035
  });
11142
- 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);
10036
+ 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);
11143
10037
 
11144
10038
  /* eslint-disable react/no-danger */
11145
10039
  var Quote = function Quote(_ref) {
@@ -11164,13 +10058,13 @@ var Quote = function Quote(_ref) {
11164
10058
  }, attribution))));
11165
10059
  };
11166
10060
 
11167
- var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$p;
11168
- 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"])));
11169
- 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"])));
11170
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11171
- var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11172
- 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);
11173
- 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);
10061
+ var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$A, _templateObject5$t, _templateObject6$m;
10062
+ 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"])));
10063
+ 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"])));
10064
+ var StyledImage = /*#__PURE__*/styled.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10065
+ var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10066
+ 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);
10067
+ 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);
11174
10068
 
11175
10069
  var MiniCard = function MiniCard(_ref) {
11176
10070
  var _ref$title = _ref.title,
@@ -11188,7 +10082,7 @@ var MiniCard = function MiniCard(_ref) {
11188
10082
  columnSpanDevice: 3,
11189
10083
  columnStartDesktop: 1,
11190
10084
  columnSpanDesktop: 3
11191
- }, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
10085
+ }, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
11192
10086
  aspectRatio: AspectRatio['4:3']
11193
10087
  }, /*#__PURE__*/React__default.createElement(StyledImage, {
11194
10088
  src: image,
@@ -11203,23 +10097,23 @@ var MiniCard = function MiniCard(_ref) {
11203
10097
  columnSpanDesktop: 4
11204
10098
  }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
11205
10099
  level: 4
11206
- }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$4, null, /*#__PURE__*/React__default.createElement(Overline, {
10100
+ }, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
11207
10101
  level: 2
11208
10102
  }, title)))));
11209
10103
  };
11210
10104
 
11211
- var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w;
11212
- 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"])));
11213
- 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"])));
11214
- var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10105
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$B, _templateObject5$u;
10106
+ 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"])));
10107
+ 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"])));
10108
+ var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
11215
10109
  var isVisible = _ref.isVisible;
11216
10110
  return isVisible ? 'visible' : 'hidden';
11217
10111
  });
11218
- var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10112
+ var IntroTextContainer = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
11219
10113
  var isVisible = _ref2.isVisible;
11220
10114
  return isVisible ? 'visible' : 'hidden';
11221
10115
  });
11222
- 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"])));
10116
+ 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"])));
11223
10117
 
11224
10118
  var keyDown = function keyDown(e, toggleFunction) {
11225
10119
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -11300,15 +10194,15 @@ var ReadMore = function ReadMore(_ref) {
11300
10194
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11301
10195
  };
11302
10196
 
11303
- var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x;
11304
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11305
- 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);
11306
- 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);
11307
- 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) {
10197
+ var _templateObject$1g, _templateObject2$Z, _templateObject3$L, _templateObject4$C, _templateObject5$v;
10198
+ var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10199
+ 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);
10200
+ 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);
10201
+ 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) {
11308
10202
  var isActive = _ref.isActive;
11309
10203
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
11310
10204
  }, Colors.MidGrey);
11311
- 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) {
10205
+ 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) {
11312
10206
  var isOpen = _ref2.isOpen;
11313
10207
  return isOpen ? 'block' : 'none';
11314
10208
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -11464,19 +10358,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11464
10358
  });
11465
10359
  };
11466
10360
 
11467
- var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q;
11468
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11469
- var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11470
- var Section = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10361
+ var _templateObject$1h, _templateObject2$_, _templateObject3$M, _templateObject4$D, _templateObject5$w, _templateObject6$n;
10362
+ var Container$5 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10363
+ var Sections = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10364
+ var Section = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
11471
10365
  var color = _ref.color;
11472
10366
  return "var(--base-color-" + color + ")";
11473
10367
  });
11474
- 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"])));
11475
- var Text = /*#__PURE__*/styled.div(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10368
+ 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"])));
10369
+ var Text = /*#__PURE__*/styled.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
11476
10370
  var color = _ref2.color;
11477
10371
  return "var(--base-color-" + color + ")";
11478
10372
  });
11479
- var LabelText = /*#__PURE__*/styled.div(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10373
+ var LabelText = /*#__PURE__*/styled.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
11480
10374
  var color = _ref3.color;
11481
10375
  return "var(--base-color-" + color + ")";
11482
10376
  });
@@ -11558,28 +10452,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
11558
10452
  }, strengthLabel))));
11559
10453
  };
11560
10454
 
11561
- var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$H, _templateObject5$z, _templateObject6$r, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject10$9;
11562
- var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11563
- var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11564
- var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11565
- 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) {
10455
+ var _templateObject$1i, _templateObject2$$, _templateObject3$N, _templateObject4$E, _templateObject5$x, _templateObject6$o, _templateObject7$g, _templateObject8$c, _templateObject9$7, _templateObject10$7;
10456
+ var TableContainer = /*#__PURE__*/styled.table(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10457
+ var Container$6 = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10458
+ var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10459
+ 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) {
11566
10460
  return "var(--base-color-" + props.lineColor + ")";
11567
10461
  }, function (props) {
11568
10462
  return "calc(100% / " + (props.columns - 1) + ")";
11569
10463
  }, devices.tablet, devices.mobile);
11570
- 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) {
10464
+ 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) {
11571
10465
  return "var(--base-color-" + props.lineColor + ")";
11572
10466
  }, function (props) {
11573
10467
  return "calc(100% / " + (props.columns - 1) + ")";
11574
10468
  }, devices.mobile);
11575
- 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"])));
11576
- 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) {
10469
+ 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"])));
10470
+ 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) {
11577
10471
  var active = _ref.active;
11578
10472
  return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11579
10473
  });
11580
- 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"])));
11581
- 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"])));
11582
- 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"])));
10474
+ var Next = /*#__PURE__*/styled.span(_templateObject8$c || (_templateObject8$c = /*#__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"])));
10475
+ 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"])));
10476
+ 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"])));
11583
10477
 
11584
10478
  /* eslint-disable react/no-danger */
11585
10479
  var Content = function Content(_ref) {
@@ -11687,7 +10581,7 @@ var Table = function Table(_ref) {
11687
10581
  } else {
11688
10582
  visibleRows = totalRows;
11689
10583
  }
11690
- return /*#__PURE__*/React__default.createElement(Wrapper$8, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
10584
+ return /*#__PURE__*/React__default.createElement(Wrapper$7, null, showScrollButtons && (/*#__PURE__*/React__default.createElement(ScrollButtons, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
11691
10585
  onClickPrev: function onClickPrev() {
11692
10586
  return scrollTable(tableRef, 'left');
11693
10587
  },
@@ -11762,32 +10656,32 @@ var Table = function Table(_ref) {
11762
10656
  }))))))))));
11763
10657
  };
11764
10658
 
11765
- 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;
11766
- 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) {
10659
+ var _templateObject$1j, _templateObject2$10, _templateObject3$O, _templateObject4$F, _templateObject5$y, _templateObject6$p, _templateObject7$h, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$4, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
10660
+ 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) {
11767
10661
  var theme = _ref.theme;
11768
10662
  return "var(--base-color-" + theme + ")";
11769
10663
  }, function (_ref2) {
11770
10664
  var theme = _ref2.theme;
11771
10665
  return "var(--base-color-" + theme + ")";
11772
10666
  });
11773
- 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);
11774
- 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);
11775
- 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"])));
11776
- 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);
11777
- 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);
11778
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11779
- 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"])));
11780
- 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);
11781
- 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);
11782
- var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11783
- 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"])));
11784
- 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) {
10667
+ 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);
10668
+ 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);
10669
+ 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"])));
10670
+ 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);
10671
+ 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);
10672
+ var ServerError = /*#__PURE__*/styled.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
10673
+ var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
10674
+ 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);
10675
+ 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);
10676
+ var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10677
+ 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"])));
10678
+ 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) {
11785
10679
  var _ref3$isOpen = _ref3.isOpen,
11786
10680
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11787
10681
  return isOpen ? '180deg' : '0deg';
11788
10682
  });
11789
- 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"])));
11790
- var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
10683
+ 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"])));
10684
+ var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11791
10685
 
11792
10686
  var regex = {
11793
10687
  signInEmail:
@@ -12085,7 +10979,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12085
10979
  });
12086
10980
  }
12087
10981
  }, [isSuccess]);
12088
- return /*#__PURE__*/React__default.createElement(Wrapper$9, {
10982
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
12089
10983
  theme: themeToColor(theme)
12090
10984
  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
12091
10985
  id: signUpInstructionsId,
@@ -12149,347 +11043,8 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12149
11043
  }))))));
12150
11044
  };
12151
11045
 
12152
- var _BUTTONS_STYLE_VALUES;
12153
- // Text color, Background color, Border color, Hovered color
12154
- 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);
12155
- var getLinkStyle = function getLinkStyle(link, defaultTextColor, defaultBackgroundColor, defaultBorderColor, defaultHoveredColor, defaultPressedColor) {
12156
- var _link$textColor, _link$backgroundColor, _link$borderColor, _link$hoveredColor, _link$pressedColor;
12157
- return {
12158
- textColor: (_link$textColor = link.textColor) != null ? _link$textColor : defaultTextColor,
12159
- backgroundColor: (_link$backgroundColor = link.backgroundColor) != null ? _link$backgroundColor : defaultBackgroundColor,
12160
- borderColor: (_link$borderColor = link.borderColor) != null ? _link$borderColor : defaultBorderColor,
12161
- hoveredColor: (_link$hoveredColor = link.hoveredColor) != null ? _link$hoveredColor : defaultHoveredColor,
12162
- pressedColor: (_link$pressedColor = link.pressedColor) != null ? _link$pressedColor : defaultPressedColor
12163
- };
12164
- };
12165
- var processSlideLinks = function processSlideLinks(links) {
12166
- return links.flatMap(function (link) {
12167
- if (!link) return [];
12168
- var linkStyle = link.buttonType ? getLinkStyle.apply(void 0, [link].concat(BUTTONS_STYLE_VALUES[link.buttonType])) : {};
12169
- return _extends({}, link, linkStyle);
12170
- });
12171
- };
12172
- var isVideoSlide = function isVideoSlide(slideMedia) {
12173
- return slideMedia.video !== undefined;
12174
- };
12175
-
12176
- var VideoSlide = function VideoSlide(_ref) {
12177
- var index = _ref.index,
12178
- settings = _ref.settings,
12179
- isCurrentSlide = _ref.isCurrentSlide;
12180
- var viewport = useViewport();
12181
- var videoComponentId = settings.key + "-video-" + index;
12182
- var videoUrl = viewport.isMobile ? settings.video.mobile : settings.video.desktop;
12183
- var posterUrl = viewport.isMobile ? settings.poster.mobile : settings.poster.desktop;
12184
- // eslint-disable-next-line jsx-a11y/media-has-caption
12185
- var video = /*#__PURE__*/React__default.createElement("video", {
12186
- id: videoComponentId,
12187
- src: videoUrl,
12188
- poster: posterUrl
12189
- });
12190
- return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
12191
- isCurrentSlide: isCurrentSlide
12192
- }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
12193
- video: video,
12194
- settings: settings
12195
- }));
12196
- };
12197
- var SwipeCarousel = function SwipeCarousel(_ref2) {
12198
- var slidesMedia = _ref2.slidesMedia,
12199
- currentSlide = _ref2.currentSlide,
12200
- carouselRef = _ref2.carouselRef,
12201
- hasMultipleSlides = _ref2.hasMultipleSlides,
12202
- setCurrentSlide = _ref2.setCurrentSlide;
12203
- var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12204
- return !isVideoSlide(slide);
12205
- });
12206
- return /*#__PURE__*/React__default.createElement(Swipe, {
12207
- ref: carouselRef,
12208
- infinite: hasMultipleSlides && hasOnlyImageSlides,
12209
- onIndexChange: setCurrentSlide,
12210
- "aria-roledescription": "carousel"
12211
- }, slidesMedia.map(function (mediaContent, index) {
12212
- return /*#__PURE__*/React__default.createElement("div", {
12213
- className: "swiper-slide",
12214
- key: mediaContent.key,
12215
- "aria-hidden": index !== currentSlide,
12216
- "aria-roledescription": "slide"
12217
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
12218
- aspectRatio: AspectRatio['4:3']
12219
- }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
12220
- settings: mediaContent,
12221
- index: index,
12222
- isCurrentSlide: index === currentSlide
12223
- })) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
12224
- alt: mediaContent.alt
12225
- }, mediaContent)))));
12226
- }));
12227
- };
12228
-
12229
- var HighlightsCarousel = function HighlightsCarousel(_ref) {
12230
- var logo = _ref.logo,
12231
- carouselTitle = _ref.carouselTitle,
12232
- slides = _ref.slides,
12233
- titleSemanticLevel = _ref.titleSemanticLevel,
12234
- className = _ref.className;
12235
- var slidesMedia = useMemo(function () {
12236
- return slides.map(function (_ref2) {
12237
- var mediaContent = _ref2.mediaContent;
12238
- return mediaContent;
12239
- });
12240
- }, []);
12241
- var _useState = useState(0),
12242
- currentSlide = _useState[0],
12243
- setCurrentSlide = _useState[1];
12244
- var currentSlideData = slides[currentSlide];
12245
- var links = currentSlideData.links,
12246
- auxiliaryCTA = currentSlideData.auxiliaryCTA;
12247
- var hasMultipleSlides = slidesMedia.length > 1;
12248
- var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12249
- return !isVideoSlide(slide);
12250
- });
12251
- var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
12252
- var carouselRef = useRef(null);
12253
- var onNext = function onNext() {
12254
- var _carouselRef$current;
12255
- return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12256
- };
12257
- var onPrev = function onPrev() {
12258
- var _carouselRef$current2;
12259
- return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12260
- };
12261
- var handleClickInside = function handleClickInside(e) {
12262
- e.stopPropagation();
12263
- };
12264
- return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
12265
- role: "region",
12266
- "aria-labelledby": carouselTitleId,
12267
- onClick: handleClickInside,
12268
- className: className
12269
- }, /*#__PURE__*/React__default.createElement(CarouselTitleWrapper, {
12270
- "data-testid": "carousel-title"
12271
- }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12272
- id: carouselTitleId
12273
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12274
- size: "small",
12275
- serif: true,
12276
- hierarchy: "h" + titleSemanticLevel
12277
- }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12278
- onClickNext: onNext,
12279
- onClickPrev: onPrev
12280
- }))), /*#__PURE__*/React__default.createElement(InfoWrapper, {
12281
- "data-testid": "info-wrapper"
12282
- }, /*#__PURE__*/React__default.createElement(InfoSection, {
12283
- logo: logo,
12284
- slide: currentSlideData,
12285
- currentSlideIndex: currentSlide
12286
- }), /*#__PURE__*/React__default.createElement(Buttons, {
12287
- links: links,
12288
- auxiliaryCTA: auxiliaryCTA
12289
- })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12290
- "data-testid": "carousel-wrapper"
12291
- }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
12292
- "data-testid": "rotator-buttons"
12293
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12294
- onClickNext: onNext,
12295
- onClickPrev: onPrev,
12296
- availablePrev: hasOnlyImageSlides || currentSlide !== 0,
12297
- availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
12298
- }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
12299
- slidesMedia: slidesMedia,
12300
- hasMultipleSlides: hasMultipleSlides,
12301
- carouselRef: carouselRef,
12302
- currentSlide: currentSlide,
12303
- setCurrentSlide: setCurrentSlide
12304
- })));
12305
- };
12306
-
12307
- function styleInject(css, ref) {
12308
- if ( ref === void 0 ) ref = {};
12309
- var insertAt = ref.insertAt;
12310
-
12311
- if (!css || typeof document === 'undefined') { return; }
12312
-
12313
- var head = document.head || document.getElementsByTagName('head')[0];
12314
- var style = document.createElement('style');
12315
- style.type = 'text/css';
12316
-
12317
- if (insertAt === 'top') {
12318
- if (head.firstChild) {
12319
- head.insertBefore(style, head.firstChild);
12320
- } else {
12321
- head.appendChild(style);
12322
- }
12323
- } else {
12324
- head.appendChild(style);
12325
- }
12326
-
12327
- if (style.styleSheet) {
12328
- style.styleSheet.cssText = css;
12329
- } else {
12330
- style.appendChild(document.createTextNode(css));
12331
- }
12332
- }
12333
-
12334
- var css_248z = "@font-face {\n font-family: 'GreyLLTT';\n src: url('https://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://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://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://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://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";
12335
- styleInject(css_248z);
12336
-
12337
- var css_248z$1 = "/* ~~~~~ General Styling Classes ~~~~~ */\n.typography_color-primary__LOfDi {\n color: var(--color-primary);\n}\n\n.typography_color-black__6MHRL {\n color: var(--color-base-black);\n}\n\n.typography_color-white__PfW5s {\n color: var(--color-base-white);\n}\n\n.typography_color-red__iPlbG {\n color: var(--color-primary-red);\n}\n\n.typography_color-grey__GA1c2 {\n color: var(--color-base-dark-grey);\n}\n\n.typography_color-inherit__RDd0Y {\n color: inherit;\n}\n\n.typography_em__E6tX- {\n font-style: italic;\n}\n/* ~~~ */\n\n/* Display Headers */\n.typography_display__-F3p4 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n\n &.typography_large__uq0zC {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n font-weight: 500;\n }\n\n /* Serif and Italic adjustments */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -3px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Headers */\n.typography_header__BexiD {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n }\n\n /* Serif and Italic styles */\n &.typography_serif__VSO38,\n &.typography_em__E6tX- {\n font-family: var(--font-family-serif);\n }\n\n /* Serif and Italic letter-spacing overrides */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n /* Mobile overrides for serif/italic letter-spacing */\n &.typography_large__uq0zC.typography_serif__VSO38,\n &.typography_large__uq0zC.typography_em__E6tX-,\n &.typography_medium__K0uZD.typography_serif__VSO38,\n &.typography_medium__K0uZD.typography_em__E6tX-,\n &.typography_small__wfQ0K.typography_serif__VSO38,\n &.typography_small__wfQ0K.typography_em__E6tX- {\n letter-spacing: -0.5px;\n }\n }\n}\n\n/* Subtitle */\n.typography_subtitle__aoFTV {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Body Copy */\n.typography_bodycopy__vYtQ8 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n\n &.typography_large__uq0zC {\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.5px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n }\n\n &.typography_medium__K0uZD {\n font-size: 14px;\n line-height: 20px;\n letter-spacing: -0.2px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 11px;\n line-height: 16px;\n letter-spacing: -0.2px;\n }\n }\n}\n\n/* Overline */\n.typography_overline__EnUK3 {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n\n &.typography_large__uq0zC {\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0.3px;\n }\n\n &.typography_small__wfQ0K {\n font-size: 12px;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @media (max-width: 699px) {\n &.typography_large__uq0zC {\n line-height: 17px;\n letter-spacing: 0.3px; /* Added to ensure it stays */\n }\n\n &.typography_small__wfQ0K {\n line-height: 14px;\n letter-spacing: 0.3px;\n }\n }\n}\n\n/* Button Text */\n.typography_buttontext__vcxNi {\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.typography_captiontext__91UFb {\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.typography_navigationtext__YfGf7 {\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";
12338
- styleInject(css_248z$1);
12339
-
12340
- 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";
12341
- var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
12342
- styleInject(css_248z$2);
12343
-
12344
- 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";
12345
- var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
12346
- styleInject(css_248z$3);
12347
-
12348
- 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";
12349
- var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
12350
- styleInject(css_248z$4);
12351
-
12352
- 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";
12353
- var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
12354
- styleInject(css_248z$5);
12355
-
12356
- /* eslint-disable react/jsx-no-useless-fragment */
12357
- var getThemeClass = function getThemeClass(theme) {
12358
- // Always include the base (core) theme class
12359
- var baseThemeClass = coreThemeStyles.coreTheme;
12360
- var overrideClass = '';
12361
- switch (theme) {
12362
- case ThemeType.Core:
12363
- overrideClass = '';
12364
- break;
12365
- case ThemeType.Stream:
12366
- overrideClass = streamThemeStyles.streamTheme;
12367
- break;
12368
- case ThemeType.Cinema:
12369
- overrideClass = cinemaThemeStyles.cinemaTheme;
12370
- break;
12371
- case ThemeType.Schools:
12372
- overrideClass = schoolsThemeStyles.schoolsTheme;
12373
- break;
12374
- default:
12375
- overrideClass = '';
12376
- }
12377
- // Return the combined classes
12378
- return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
12379
- };
12380
- var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
12381
- var theme = _ref.theme,
12382
- children = _ref.children;
12383
- var themeClass = getThemeClass(theme);
12384
- // Convert children to an array (assuming they accept a className prop)
12385
- var childrenArray = React__default.Children.toArray(children);
12386
- var themedChildren = childrenArray.map(function (child) {
12387
- return /*#__PURE__*/React__default.cloneElement(child, {
12388
- className: ((child.props.className || '') + " " + themeClass).trim(),
12389
- theme: theme
12390
- });
12391
- });
12392
- return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
12393
- };
12394
-
12395
- var _excluded$v = ["logo", "slides"];
12396
- var HighlightsCinema = function HighlightsCinema(_ref) {
12397
- var logo = _ref.logo,
12398
- slides = _ref.slides,
12399
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12400
- var slidesWithLinks = slides.map(function (slide) {
12401
- var links = processSlideLinks(slide.links);
12402
- return _extends({}, slide, {
12403
- links: links
12404
- });
12405
- });
12406
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12407
- theme: ThemeType.Cinema
12408
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12409
- slides: slidesWithLinks,
12410
- logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, {
12411
- align: "left"
12412
- }) : null
12413
- })));
12414
- };
12415
-
12416
- var _excluded$w = ["slides"];
12417
- var HighlightsCore = function HighlightsCore(_ref) {
12418
- var slides = _ref.slides,
12419
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12420
- var slidesWithLinks = slides.map(function (slide) {
12421
- var links = processSlideLinks(slide.links);
12422
- return _extends({}, slide, {
12423
- links: links
12424
- });
12425
- });
12426
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12427
- theme: ThemeType.Core
12428
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12429
- slides: slidesWithLinks
12430
- })));
12431
- };
12432
-
12433
- var _excluded$x = ["logo", "slides"];
12434
- var HighlightsStream = function HighlightsStream(_ref) {
12435
- var logo = _ref.logo,
12436
- slides = _ref.slides,
12437
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12438
- var slidesWithLinks = slides.map(function (slide) {
12439
- var links = processSlideLinks(slide.links);
12440
- return _extends({}, slide, {
12441
- links: links
12442
- });
12443
- });
12444
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12445
- theme: ThemeType.Stream
12446
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12447
- slides: slidesWithLinks,
12448
- logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
12449
- align: "left"
12450
- }) : null
12451
- })));
12452
- };
12453
-
12454
- var _templateObject$1o, _templateObject3$S;
12455
- 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"])));
12456
- 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"])));
12457
-
12458
- var MinimalCarousel = function MinimalCarousel(_ref) {
12459
- var children = _ref.children;
12460
- var carouselRef = useRef(null);
12461
- var hasMultipleChildren = React__default.Children.count(children) > 1;
12462
- var onNext = function onNext() {
12463
- var _carouselRef$current;
12464
- return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12465
- };
12466
- var onPrev = function onPrev() {
12467
- var _carouselRef$current2;
12468
- return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12469
- };
12470
- return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
12471
- columnStartDesktop: 1,
12472
- columnSpanDesktop: 16,
12473
- columnStartDevice: 1,
12474
- columnSpanDevice: 14
12475
- }, /*#__PURE__*/React__default.createElement(Swipe, {
12476
- ref: carouselRef,
12477
- infinite: hasMultipleChildren,
12478
- "data-testid": "carousel-swipe"
12479
- }, React__default.Children.toArray(children).map(function (child, index) {
12480
- return /*#__PURE__*/React__default.createElement("div", {
12481
- key: "swipe-minimal-carousel-slide-" + index
12482
- }, child);
12483
- })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
12484
- "data-testid": "carousel-buttons-wrapper"
12485
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12486
- onClickNext: onNext,
12487
- onClickPrev: onPrev
12488
- }))));
12489
- };
12490
-
12491
- var _templateObject$1p;
12492
- 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) {
11046
+ var _templateObject$1k;
11047
+ 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) {
12493
11048
  var theme = _ref.theme;
12494
11049
  return theme.colors.primary;
12495
11050
  }, function (_ref2) {
@@ -13436,12 +11991,62 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templa
13436
11991
  return theme.footer.tablet.paddingBottom;
13437
11992
  }, devices.desktop, devices.largeDesktop);
13438
11993
 
13439
- /* ~~~~~~~ new harmonic types ~~~~~~~ */
13440
- var HarmonicSizes = {
13441
- Small: 'small',
13442
- Medium: 'medium',
13443
- Large: 'large'
11994
+ 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";
11995
+ styleInject(css_248z$1);
11996
+
11997
+ 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: 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 --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";
11998
+ var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
11999
+ styleInject(css_248z$2);
12000
+
12001
+ 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";
12002
+ var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
12003
+ styleInject(css_248z$3);
12004
+
12005
+ 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";
12006
+ var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
12007
+ styleInject(css_248z$4);
12008
+
12009
+ 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";
12010
+ var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
12011
+ styleInject(css_248z$5);
12012
+
12013
+ /* eslint-disable react/jsx-no-useless-fragment */
12014
+ var getThemeClass = function getThemeClass(theme) {
12015
+ // Always include the base (core) theme class
12016
+ var baseThemeClass = coreThemeStyles.coreTheme;
12017
+ var overrideClass = '';
12018
+ switch (theme) {
12019
+ case ThemeType.Core:
12020
+ overrideClass = '';
12021
+ break;
12022
+ case ThemeType.Stream:
12023
+ overrideClass = streamThemeStyles.streamTheme;
12024
+ break;
12025
+ case ThemeType.Cinema:
12026
+ overrideClass = cinemaThemeStyles.cinemaTheme;
12027
+ break;
12028
+ case ThemeType.Schools:
12029
+ overrideClass = schoolsThemeStyles.schoolsTheme;
12030
+ break;
12031
+ default:
12032
+ overrideClass = '';
12033
+ }
12034
+ // Return the combined classes
12035
+ return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
12036
+ };
12037
+ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
12038
+ var theme = _ref.theme,
12039
+ children = _ref.children;
12040
+ var themeClass = getThemeClass(theme);
12041
+ // Convert children to an array (assuming they accept a className prop)
12042
+ var childrenArray = React__default.Children.toArray(children);
12043
+ var themedChildren = childrenArray.map(function (child) {
12044
+ return /*#__PURE__*/React__default.cloneElement(child, {
12045
+ className: ((child.props.className || '') + " " + themeClass).trim()
12046
+ });
12047
+ });
12048
+ return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
13444
12049
  };
13445
12050
 
13446
- 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 };
12051
+ 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 };
13447
12052
  //# sourceMappingURL=harmonic.esm.js.map