@royaloperahouse/harmonic 0.1.8-p → 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 -2149
  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 -2171
  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,705 +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
- if (!onIndexChange) return;
7525
- if (!infinite) {
7526
- onIndexChange(currentIndex);
7527
- } else {
7528
- var offset = currentIndex - clonesCount + children.length;
7529
- var realIndex = offset % children.length;
7530
- onIndexChange(realIndex);
7531
- }
7532
- }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7533
- var updateDimensions = useCallback(function () {
7534
- if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
7535
- if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
7536
- }, []);
7537
- useEffect(function () {
7538
- var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7539
- return function () {
7540
- return cancelAnimationFrame(animationFrameRequestId);
7541
- };
7542
- }, [children]);
7543
- useEffect(function () {
7544
- var observer = new ResizeObserver(updateDimensions);
7545
- if (containerRef.current) observer.observe(containerRef.current);
7546
- return function () {
7547
- return observer.disconnect();
7548
- };
7549
- }, [children]);
7550
- var setIsActive = function setIsActive() {
7551
- if (!isActive.current) {
7552
- isActive.current = true;
7553
- onActiveChange == null || onActiveChange(true);
7554
- }
7555
- };
7556
- var getTranslateX = function getTranslateX() {
7557
- var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7558
- return acc + width;
7559
- }, 0);
7560
- return offset + (slidesOffsetBefore || 0);
7561
- };
7562
- var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7563
- var delta = currentTranslate.current - getTranslateX();
7564
- var direction = delta > 0 ? -1 : 1;
7565
- var movedSlides = getMovedSlides(delta, slideWidths);
7566
- if (Math.abs(delta) > 20) {
7567
- movedSlides = Math.max(1, movedSlides);
7568
- var targetIndex = currentIndex + direction * movedSlides;
7569
- var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7570
- setTransitioning(true);
7571
- setCurrentIndex(finalIndex);
7572
- } else {
7573
- setTransitioning(true);
7574
- setCurrentIndex(function (prev) {
7575
- return prev;
7576
- });
7577
- }
7578
- setDragTranslateX(null);
7579
- };
7580
- var canMoveNext = function canMoveNext() {
7581
- var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
7582
- return acc + width;
7583
- }, 0);
7584
- return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
7585
- };
7586
- var handleTransitionEnd = function handleTransitionEnd() {
7587
- setTransitioning(false);
7588
- if (!infinite) return;
7589
- if (currentIndex >= children.length + clonesCount) {
7590
- setCurrentIndex(clonesCount);
7591
- } else if (currentIndex < clonesCount) {
7592
- setCurrentIndex(children.length + currentIndex);
7593
- }
7594
- };
7595
- var goToPrev = function goToPrev() {
7596
- if (transitioning) return;
7597
- setIsActive();
7598
- setTransitioning(true);
7599
- setCurrentIndex(function (prev) {
7600
- return infinite ? prev - 1 : Math.max(0, prev - 1);
7601
- });
7602
- };
7603
- var goToNext = function goToNext() {
7604
- if (transitioning || !canMoveNext()) return;
7605
- setIsActive();
7606
- setTransitioning(true);
7607
- setCurrentIndex(function (prev) {
7608
- return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7609
- });
7610
- };
7611
- useImperativeHandle(ref, function () {
7612
- return {
7613
- nextSlide: goToNext,
7614
- prevSlide: goToPrev
7615
- };
7616
- });
7617
- var handleTouchStart = function handleTouchStart(e) {
7618
- setIsActive();
7619
- startX.current = e.touches[0].clientX;
7620
- isDragging.current = true;
7621
- isClickPrevented.current = false;
7622
- setTransitioning(false);
7623
- };
7624
- var handleTouchMove = function handleTouchMove(e) {
7625
- if (!isDragging.current) return;
7626
- var deltaX = e.touches[0].clientX - startX.current;
7627
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7628
- isClickPrevented.current = true;
7629
- }
7630
- var visualOffset = getTranslateX() + deltaX;
7631
- currentTranslate.current = visualOffset;
7632
- setDragTranslateX(visualOffset);
7633
- };
7634
- var handleTouchEnd = function handleTouchEnd() {
7635
- isDragging.current = false;
7636
- navigateOnSwipeEnd();
7637
- };
7638
- var handleMouseMove = function handleMouseMove(e) {
7639
- if (!isDragging.current || !isMouseDown.current || transitioning) return;
7640
- var deltaX = e.clientX - startX.current;
7641
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7642
- isClickPrevented.current = true;
7643
- }
7644
- var visualOffset = getTranslateX() + deltaX;
7645
- currentTranslate.current = visualOffset;
7646
- setDragTranslateX(visualOffset);
7647
- };
7648
- var _handleMouseUp = function handleMouseUp() {
7649
- if (!isMouseDown.current) return;
7650
- isMouseDown.current = false;
7651
- isDragging.current = false;
7652
- if (isClickPrevented.current) {
7653
- navigateOnSwipeEnd();
7654
- } else {
7655
- setDragTranslateX(null);
7656
- }
7657
- window.removeEventListener('mousemove', handleMouseMove);
7658
- window.removeEventListener('mouseup', _handleMouseUp);
7659
- };
7660
- var handleMouseDown = function handleMouseDown(e) {
7661
- if (transitioning || e.button !== 0) return;
7662
- e.preventDefault();
7663
- setIsActive();
7664
- startX.current = e.clientX;
7665
- isDragging.current = true;
7666
- isMouseDown.current = true;
7667
- isClickPrevented.current = false;
7668
- setTransitioning(false);
7669
- window.addEventListener('mousemove', handleMouseMove);
7670
- window.addEventListener('mouseup', _handleMouseUp);
7671
- };
7672
- var onSlideFocus = function onSlideFocus(isVisible, index) {
7673
- if (!isVisible) {
7674
- setCurrentIndex(index);
7675
- }
7676
- };
7677
- var onClickCapture = function onClickCapture(e) {
7678
- if (isClickPrevented.current) {
7679
- e.preventDefault();
7680
- e.stopPropagation();
7681
- }
7682
- };
7683
- var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7684
- return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
7685
- ref: containerRef,
7686
- onTouchStart: handleTouchStart,
7687
- onTouchMove: handleTouchMove,
7688
- onTouchEnd: handleTouchEnd,
7689
- onMouseDown: handleMouseDown,
7690
- onDragStart: function onDragStart(e) {
7691
- return e.preventDefault();
7692
- },
7693
- key: "swipe-container-" + uniqueIdRef.current,
7694
- className: "swipe"
7695
- }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
7696
- className: "swipe-track-wrapper",
7697
- translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
7698
- transitioning: transitioning && dragTranslateX === null,
7699
- onTransitionEnd: handleTransitionEnd
7700
- }, slides.map(function (child, index) {
7701
- var isVisible = visibleIndexes.includes(index);
7702
- return /*#__PURE__*/React__default.createElement("div", {
7703
- key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
7704
- "aria-hidden": !isVisible,
7705
- className: SWIPE_SLIDE_CLASS_NAME,
7706
- ref: function ref(el) {
7707
- childRefs.current[index] = el;
7708
- },
7709
- onFocus: function onFocus() {
7710
- return onSlideFocus(isVisible, index);
7711
- },
7712
- onClickCapture: onClickCapture,
7713
- onClick: onClickCapture
7714
- }, child);
7715
- })));
7716
- });
7717
- Swipe.displayName = 'Swipe';
7718
-
7719
- var SCREEN_WIDTH_PERCENTAGE = 0.05;
7720
- var GRID_OFFSET_MARGIN = {
7721
- mobile: 0,
7722
- tablet: 15,
7723
- desktop: 3
7724
- };
7725
- var Carousel = function Carousel(_ref) {
7726
- var children = _ref.children,
7727
- type = _ref.type,
7728
- title = _ref.title,
7729
- description = _ref.description,
7730
- className = _ref.className,
7731
- _ref$titleSemanticLev = _ref.titleSemanticLevel,
7732
- titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 3 : _ref$titleSemanticLev,
7733
- _ref$imagesHeightDevi = _ref.imagesHeightDevice,
7734
- imagesHeightDevice = _ref$imagesHeightDevi === void 0 ? 300 : _ref$imagesHeightDevi,
7735
- _ref$imagesHeightDesk = _ref.imagesHeightDesktop,
7736
- imagesHeightDesktop = _ref$imagesHeightDesk === void 0 ? 500 : _ref$imagesHeightDesk,
7737
- _ref$infinite = _ref.infinite,
7738
- infinite = _ref$infinite === void 0 ? true : _ref$infinite,
7739
- _ref$useOffset = _ref.useOffset,
7740
- useOffset = _ref$useOffset === void 0 ? true : _ref$useOffset;
7741
- var _useState = useState(false),
7742
- active = _useState[0],
7743
- setActive = _useState[1];
7744
- var _useState2 = useState(0),
7745
- slidesOffsetBefore = _useState2[0],
7746
- setSlidesOffsetBefore = _useState2[1];
7747
- var swipeRef = useRef(null);
7748
- useEffect(function () {
7749
- if (!useOffset || !active) return undefined;
7750
- var updateWindowDimensions = function updateWindowDimensions() {
7751
- if (window.matchMedia(devices.mobile).matches) {
7752
- setSlidesOffsetBefore(GRID_OFFSET_MARGIN.mobile);
7753
- } else if (window.matchMedia(devices.tablet).matches) {
7754
- setSlidesOffsetBefore(GRID_OFFSET_MARGIN.tablet);
7755
- } else {
7756
- setSlidesOffsetBefore(Math.floor(window.innerWidth * SCREEN_WIDTH_PERCENTAGE) - GRID_OFFSET_MARGIN.desktop);
7757
- }
7758
- };
7759
- window.addEventListener('resize', updateWindowDimensions);
7760
- updateWindowDimensions();
7761
- return function () {
7762
- window.removeEventListener('resize', updateWindowDimensions);
7763
- };
7764
- }, [useOffset, active]);
7765
- var onNext = function onNext() {
7766
- var _swipeRef$current;
7767
- (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
7768
- };
7769
- var onPrev = function onPrev() {
7770
- var _swipeRef$current2;
7771
- (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
7772
- };
7773
- var onActiveChangeHandler = function onActiveChangeHandler(value) {
7774
- if (useOffset && !active) {
7775
- setActive(value);
7776
- }
7777
- };
7778
- var carouselTitleId = "carousel-title-" + title;
7779
- var Wrapper = type === CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
7780
- return /*#__PURE__*/React__default.createElement(Wrapper, {
7781
- className: className,
7782
- type: type,
7783
- isActive: active,
7784
- imagesHeightDevice: imagesHeightDevice,
7785
- imagesHeightDesktop: imagesHeightDesktop,
7786
- role: "region",
7787
- "aria-labelledby": carouselTitleId
7788
- }, /*#__PURE__*/React__default.createElement(TitleButtonsGrid, null, /*#__PURE__*/React__default.createElement(TitleGridItem, {
7789
- columnStartDesktop: 3,
7790
- columnSpanDesktop: 10,
7791
- columnStartDevice: 2,
7792
- columnSpanDevice: 12
7793
- }, title && (/*#__PURE__*/React__default.createElement(CarouselInfoWrapper, {
7794
- "data-testid": "carousel-title-wrapper"
7795
- }, /*#__PURE__*/React__default.createElement(TitleWrapper$1, {
7796
- id: carouselTitleId,
7797
- isDescriptionPresent: !!description
7798
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7799
- size: "small",
7800
- serif: true,
7801
- hierarchy: "h" + titleSemanticLevel
7802
- }, title)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7803
- size: "large"
7804
- }, description)))), /*#__PURE__*/React__default.createElement(GridItem, {
7805
- columnStartDesktop: 14,
7806
- columnSpanDesktop: 2,
7807
- columnStartDevice: 12,
7808
- columnSpanDevice: 2
7809
- }, /*#__PURE__*/React__default.createElement(ButtonsWrapper, {
7810
- "data-testid": "carousel-buttons-wrapper"
7811
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7812
- onClickNext: onNext,
7813
- onClickPrev: onPrev,
7814
- availablePrev: true
7815
- })))), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(SwipeGridWrapper, {
7816
- active: active,
7817
- columnStartDesktop: 3,
7818
- columnSpanDesktop: 14,
7819
- columnStartDevice: 2,
7820
- columnSpanDevice: 13
7821
- }, /*#__PURE__*/React__default.createElement(Swipe, {
7822
- onActiveChange: function onActiveChange(value) {
7823
- return onActiveChangeHandler(value);
7824
- },
7825
- "data-testid": "carousel-swipe",
7826
- ref: swipeRef,
7827
- infinite: infinite,
7828
- slidesOffsetBefore: slidesOffsetBefore,
7829
- role: "list",
7830
- "aria-roledescription": "carousel"
7831
- }, React__default.Children.toArray(children)))));
7832
- };
7833
-
7834
- 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;
7835
- 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);
7836
- 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);
7837
- var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7838
- 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);
7839
- 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);
7840
- 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"])));
7841
- 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);
7842
- 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);
7843
- 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);
7844
- 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);
7845
- 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);
7846
- var HtmlBodyText = /*#__PURE__*/styled.p(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
7847
- 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);
7848
- 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);
7849
- 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);
7850
- var InfoSubtitleWrapper = /*#__PURE__*/styled.div(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n"])));
7851
- 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) {
7852
- var isCurrentSlide = _ref.isCurrentSlide;
7853
- return isCurrentSlide ? 'block' : 'none';
7854
- }, devices.mobile);
7855
-
7856
- var COLORS$3 = {
7857
- "default": 'var(--button-auxiliary-color)',
7858
- background: 'var(--button-auxiliary-bg-color)'
7859
- };
7860
- var getTextColor$3 = function getTextColor(_ref) {
7861
- var textColor = _ref.textColor;
7862
- return textColor ? "var(--color-" + textColor + ")" : COLORS$3["default"];
7863
- };
7864
- var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7865
- var backgroundColor = _ref2.backgroundColor;
7866
- return backgroundColor ? "var(--color-" + backgroundColor + ")" : COLORS$3.background;
7867
- };
7868
-
7869
- var _templateObject$Q;
7870
- 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);
7871
-
7872
- var _excluded$i = ["children", "className"];
7873
- var AuxiliaryButton = function AuxiliaryButton(_ref) {
7874
- var children = _ref.children,
7875
- className = _ref.className,
7876
- props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
7877
- return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
7878
- iconClassName: "auxiliaryButtonIcon",
7879
- className: className
7880
- }), children);
7881
- };
7882
-
7883
- var _excluded$j = ["text"],
7884
- _excluded2$2 = ["text"];
7885
- var _buttonTypeToButton;
7886
- var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
7887
- var Buttons = function Buttons(_ref) {
7888
- var auxiliaryCTA = _ref.auxiliaryCTA,
7889
- links = _ref.links;
7890
- var firstButton = links == null ? void 0 : links[0];
7891
- var _ref2 = firstButton || {},
7892
- _ref2$text = _ref2.text,
7893
- firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
7894
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
7895
- var secondButton = links == null ? void 0 : links[1];
7896
- var _ref3 = secondButton || {},
7897
- _ref3$text = _ref3.text,
7898
- secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
7899
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
7900
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton[firstButton.buttonType] : PrimaryButton;
7901
- var SecondButtonComponent = secondButton != null && secondButton.buttonType ? buttonTypeToButton[secondButton.buttonType] : SecondaryButton;
7902
- 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, {
7903
- textColor: ThemeColor['base-white']
7904
- }), auxiliaryCTA.text))));
7905
- };
7906
-
7907
- var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
7908
- return htmlString.replace(/<[^>]*>/g, '');
7909
- };
7910
- var truncateHtmlString = function truncateHtmlString(htmlString, resultLength, addDots) {
7911
- if (addDots === void 0) {
7912
- addDots = false;
7913
- }
7914
- var textContent = stripAllHtmlTags(htmlString);
7915
- if (textContent.length <= resultLength) {
7916
- return htmlString;
7917
- }
7918
- var accumulatedText = '';
7919
- var tagStack = [];
7920
- var charCount = 0;
7921
- var closeTags = function closeTags() {
7922
- while (tagStack.length > 0) {
7923
- accumulatedText += "</" + tagStack.pop() + ">";
7924
- }
7925
- };
7926
- for (var i = 0; i < htmlString.length; i++) {
7927
- var _char = htmlString[i];
7928
- if (_char === '<') {
7929
- accumulatedText += _char;
7930
- if (htmlString[i + 1] !== '/') {
7931
- var tagNameEnd = htmlString.indexOf('>', i);
7932
- var tagName = htmlString.slice(i + 1, tagNameEnd).split(' ')[0];
7933
- tagStack.push(tagName);
7934
- accumulatedText += tagName + ">";
7935
- i = tagNameEnd;
7936
- }
7937
- } else if (_char === '>') {
7938
- accumulatedText += _char;
7939
- } else if (charCount < resultLength) {
7940
- accumulatedText += _char;
7941
- charCount++;
7942
- }
7943
- if (charCount >= resultLength) {
7944
- if (addDots) {
7945
- accumulatedText += '...';
7946
- }
7947
- break;
7948
- }
7949
- }
7950
- closeTags();
7951
- return accumulatedText;
7952
- };
7953
- var truncate = function truncate(str, n) {
7954
- return str.length >= n ? str.substring(0, n) : str;
7955
- };
7956
- var truncateReactNodeString = function truncateReactNodeString(node, resultLength, addDots) {
7957
- if (addDots === void 0) {
7958
- addDots = false;
7959
- }
7960
- var nodeString = renderToString(/*#__PURE__*/React__default.createElement(React__default.Fragment, null, node));
7961
- return truncateHtmlString(nodeString, resultLength, addDots);
7962
- };
7963
-
7964
- var InfoSection = function InfoSection(_ref) {
7965
- var logo = _ref.logo,
7966
- slide = _ref.slide,
7967
- currentSlideIndex = _ref.currentSlideIndex;
7968
- var _useState = useState([]),
7969
- finishedTimers = _useState[0],
7970
- setFinishedTimers = _useState[1];
7971
- var infoText = slide.infoText,
7972
- infoTitle = slide.infoTitle,
7973
- infoTimeframe = slide.infoTimeframe,
7974
- infoSubtitle = slide.infoSubtitle,
7975
- timerParams = slide.timerParams,
7976
- additionalInfo = slide.additionalInfo;
7977
- var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
7978
- var handleEndDate = function handleEndDate() {
7979
- return setFinishedTimers([].concat(finishedTimers, [currentSlideIndex]));
7980
- };
7981
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
7982
- "data-testid": "highlight-carousel-timer-wrapper"
7983
- }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7984
- size: "large"
7985
- }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
7986
- color: Colors.White,
7987
- endDateHandler: handleEndDate,
7988
- endDate: timerParams.endDate,
7989
- title: timerParams.title
7990
- })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7991
- size: "large",
7992
- hierarchy: "h3"
7993
- }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
7994
- size: "large"
7995
- }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
7996
- size: "large"
7997
- }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7998
- size: "large"
7999
- }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
8000
- dangerouslySetInnerHTML: {
8001
- __html: description
8002
- }
8003
- })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8004
- size: "large"
8005
- }, additionalInfo)))));
8006
- };
8007
-
8008
- var _templateObject$R, _templateObject2$D, _templateObject3$q, _templateObject4$l, _templateObject5$g, _templateObject6$e;
8009
- 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"])));
8010
- 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"])));
8011
- 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) {
8012
7076
  var isVisible = _ref.isVisible;
8013
7077
  return isVisible ? 'visible' : 'hidden';
8014
7078
  }, devices.mobile);
8015
- 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);
8016
- 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) {
8017
7081
  var textHeight = _ref2.textHeight;
8018
7082
  return textHeight;
8019
7083
  }, devices.mobile);
8020
- 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"])));
8021
7085
 
8022
7086
  /* eslint-disable react/no-unstable-nested-components */
8023
7087
  var Accordion = function Accordion(_ref) {
@@ -8122,8 +7186,8 @@ var Accordion = function Accordion(_ref) {
8122
7186
  }, children)), showLine && /*#__PURE__*/React__default.createElement(LineContainer, null));
8123
7187
  };
8124
7188
 
8125
- var _templateObject$S;
8126
- 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"])));
8127
7191
 
8128
7192
  var Accordions = function Accordions(_ref) {
8129
7193
  var _ref$items = _ref.items,
@@ -8144,18 +7208,18 @@ var Accordions = function Accordions(_ref) {
8144
7208
  }));
8145
7209
  };
8146
7210
 
8147
- var _templateObject$T, _templateObject2$E, _templateObject3$r, _templateObject4$m, _templateObject5$h;
8148
- 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);
8149
- 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) {
8150
7214
  var isClickable = _ref.isClickable;
8151
7215
  return isClickable ? 'pointer' : 'default';
8152
7216
  }, function (_ref2) {
8153
7217
  var isClickable = _ref2.isClickable;
8154
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 ";
8155
7219
  });
8156
- 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"])));
8157
- var OverlineWrapper = /*#__PURE__*/styled(HarmonicOverline)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 4px;\n && {\n color: var(--announcement-banner-color);\n }\n"])));
8158
- 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) {
8159
7223
  var variant = _ref3.variant;
8160
7224
  return variant === BannerVariants['service-persistent'] ? '8px' : '0px';
8161
7225
  }, function (_ref4) {
@@ -8227,76 +7291,109 @@ var AnnouncementBanner = function AnnouncementBanner(_ref) {
8227
7291
  }))))));
8228
7292
  };
8229
7293
 
8230
- 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;
8231
7322
  var LENGTH_LARGE_TEXT = 28;
8232
7323
  var LENGTH_SMALL_TEXT$1 = 19;
8233
7324
  var LENGTH_TEXT_TABLET = 10;
8234
- 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) {
8235
7326
  var isCardClickable = _ref.isCardClickable;
8236
7327
  return isCardClickable ? 'pointer' : 'default';
8237
7328
  }, function (_ref2) {
8238
7329
  var onlyShowButtonsOnHover = _ref2.onlyShowButtonsOnHover;
8239
7330
  return !onlyShowButtonsOnHover ? "height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between; \n " : '';
8240
7331
  });
8241
- 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);
8242
- var ProgressContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: -6px;\n"])));
8243
- 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) {
8244
- var fullWidth = _ref3.fullWidth;
8245
- return fullWidth ? '0' : '20px';
8246
- }, 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) {
8247
7340
  var fullWidth = _ref4.fullWidth;
8248
7341
  return fullWidth ? '0' : '20px';
7342
+ }, function (_ref5) {
7343
+ var fullWidth = _ref5.fullWidth;
7344
+ return fullWidth ? '0' : '20px';
8249
7345
  });
8250
- 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);
8251
- 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);
8252
- var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow-wrap: break-word;\n"])));
8253
- var HighlightTextContainer = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n"])));
8254
- var SubtitleContainer = /*#__PURE__*/styled.span(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 4px;\n overflow-wrap: break-word;\n"])));
8255
- 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) {
8256
- 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;
8257
7353
  return isVisible ? "visible" : 'hidden';
8258
- }, devices.mobile, function (_ref6) {
8259
- var isGridCard = _ref6.isGridCard;
7354
+ }, devices.mobile, function (_ref7) {
7355
+ var isGridCard = _ref7.isGridCard;
8260
7356
  return isGridCard ? '20px' : '0';
8261
7357
  });
8262
- 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) {
8263
- var fullWidth = _ref7.fullWidth;
8264
- return fullWidth ? '0' : '20px';
8265
- }, 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) {
8266
7359
  var fullWidth = _ref8.fullWidth;
8267
7360
  return fullWidth ? '0' : '20px';
7361
+ }, function (_ref9) {
7362
+ var fullWidth = _ref9.fullWidth;
7363
+ return fullWidth ? '0' : '20px';
8268
7364
  });
8269
- 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) {
8270
- var bgColor = _ref9.bgColor;
8271
- 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;
8272
7369
  });
8273
- 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"])));
8274
- var getButtonsOpacity = function getButtonsOpacity(_ref10) {
8275
- 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;
8276
7373
  return onlyShowButtonsOnHover ? 'opacity: 0;' : 'opacity: 1;';
8277
7374
  };
8278
- var getButtonsMinHeight = function getButtonsMinHeight(_ref11) {
8279
- var onlyShowButtonsOnHover = _ref11.onlyShowButtonsOnHover;
7375
+ var getButtonsMinHeight = function getButtonsMinHeight(_ref12) {
7376
+ var onlyShowButtonsOnHover = _ref12.onlyShowButtonsOnHover;
8280
7377
  return onlyShowButtonsOnHover ? 'min-height: unset;' : 'min-height: 120px;';
8281
7378
  };
8282
- 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) {
8283
- var size = _ref12.size,
8284
- primaryButtonTextLength = _ref12.primaryButtonTextLength,
8285
- 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;
8286
7383
  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT$1 || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT$1 : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
8287
7384
  if (isLinksLayoutColumn) {
8288
7385
  return "\n flex-direction: column;\n ";
8289
7386
  }
8290
7387
  return '';
8291
- }, devices.mobile, getButtonsMinHeight, function (_ref13) {
8292
- var fullWidth = _ref13.fullWidth;
8293
- return fullWidth ? '0' : '20px';
8294
- }, function (_ref14) {
7388
+ }, devices.mobile, getButtonsMinHeight, function (_ref14) {
8295
7389
  var fullWidth = _ref14.fullWidth;
8296
7390
  return fullWidth ? '0' : '20px';
8297
- }, devices.tablet, getButtonsMinHeight, function (_ref15) {
8298
- var primaryButtonTextLength = _ref15.primaryButtonTextLength,
8299
- 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;
8300
7397
  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
8301
7398
  if (isLinksLayoutColumnTablet) {
8302
7399
  return "\n flex-direction: column;\n ";
@@ -8304,12 +7401,69 @@ var ButtonsContainer$1 = /*#__PURE__*/styled.div(_templateObject14$2 || (_templa
8304
7401
  return '';
8305
7402
  });
8306
7403
 
8307
- var _excluded$k = ["text"],
8308
- _excluded2$3 = ["text"];
8309
- 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;
8310
7464
  var LENGTH_LARGE_TEXT$1 = 28;
8311
7465
  var LENGTH_SMALL_TEXT$2 = 19;
8312
- 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);
8313
7467
  var Card = function Card(_ref) {
8314
7468
  var _labelParams$color;
8315
7469
  var _ref$progress = _ref.progress,
@@ -8347,20 +7501,18 @@ var Card = function Card(_ref) {
8347
7501
  var _useState = useState(false),
8348
7502
  hovered = _useState[0],
8349
7503
  setHovered = _useState[1];
8350
- var cardTitleId = "card-title-" + title;
8351
- var cardDescriptionId = "card-desc-" + title;
8352
7504
  var truncatedText = truncateHtmlString(text, 185, true);
8353
7505
  var firstButton = links == null ? void 0 : links[0];
8354
7506
  var _ref2 = firstButton || {},
8355
7507
  _ref2$text = _ref2.text,
8356
7508
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
8357
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7509
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
8358
7510
  var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
8359
7511
  var secondButton = links == null ? void 0 : links[1];
8360
7512
  var _ref3 = secondButton || {},
8361
7513
  _ref3$text = _ref3.text,
8362
7514
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
8363
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
7515
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
8364
7516
  var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
8365
7517
  var hoverHandler = function hoverHandler(value) {
8366
7518
  if (value) {
@@ -8372,8 +7524,8 @@ var Card = function Card(_ref) {
8372
7524
  }
8373
7525
  setHovered(value);
8374
7526
  };
8375
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$1[firstButton.buttonType] : PrimaryButton;
8376
- 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;
8377
7529
  return /*#__PURE__*/React__default.createElement(CardContainer, {
8378
7530
  onMouseOver: function onMouseOver() {
8379
7531
  return onlyShowButtonsOnHover ? hoverHandler(true) : undefined;
@@ -8383,26 +7535,21 @@ var Card = function Card(_ref) {
8383
7535
  },
8384
7536
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
8385
7537
  "data-testid": "cardcontainer",
8386
- isCardClickable: !!firstButton,
8387
- role: "region",
8388
- "aria-labelledby": cardTitleId,
8389
- "aria-describedby": cardDescriptionId
7538
+ isCardClickable: !!firstButton
8390
7539
  }, /*#__PURE__*/React__default.createElement("a", {
8391
7540
  href: firstButton == null ? void 0 : firstButton.href,
8392
7541
  target: firstButton == null ? void 0 : firstButton.target,
8393
7542
  className: "targetLink",
8394
7543
  style: {
8395
7544
  flexGrow: onlyShowButtonsOnHover ? 'unset' : 1
8396
- },
8397
- "aria-label": "Navigate to " + title
7545
+ }
8398
7546
  }, /*#__PURE__*/React__default.createElement(LabelContainer, {
8399
7547
  isGridCard: isGridCard,
8400
7548
  isVisible: !!labelParams
8401
7549
  }, labelParams && (/*#__PURE__*/React__default.createElement(LabelElements, {
8402
7550
  bgColor: labelParams == null ? void 0 : labelParams.bgColor
8403
- }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8404
- size: "small",
8405
- color: "white"
7551
+ }, /*#__PURE__*/React__default.createElement(Overline, {
7552
+ level: 2
8406
7553
  }, labelParams.text.substring(0, 25)), labelParams.iconName && (/*#__PURE__*/React__default.createElement(LabelIconWrapper, null, /*#__PURE__*/React__default.createElement(Icon, {
8407
7554
  iconName: labelParams.iconName,
8408
7555
  direction: labelParams.iconDirection,
@@ -8414,36 +7561,24 @@ var Card = function Card(_ref) {
8414
7561
  aspectRatio: AspectRatio['4:3']
8415
7562
  }, /*#__PURE__*/React__default.createElement("img", {
8416
7563
  src: image,
8417
- alt: imageAltText || title
7564
+ alt: imageAltText
8418
7565
  })), withContinueWatching && (/*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
8419
7566
  progress: progress,
8420
- height: 6
7567
+ height: 10
8421
7568
  }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
8422
7569
  fullWidth: fullWidth
8423
7570
  }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
8424
7571
  list: tags
8425
- }) : null, /*#__PURE__*/React__default.createElement(TitleContainer$4, {
8426
- id: cardTitleId
8427
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8428
- hierarchy: "h3",
8429
- size: "small"
8430
- }, title)), /*#__PURE__*/React__default.createElement(TitleContainerMobile, {
8431
- id: cardTitleId
8432
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8433
- hierarchy: "h3",
8434
- size: "medium"
8435
- }, title)), subtitle ? (/*#__PURE__*/React__default.createElement(SubtitleContainer, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8436
- size: "large"
8437
- }, subtitle))) : null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8438
- size: "large"
8439
- }, /*#__PURE__*/React__default.createElement(TextContainer$2, {
8440
- 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, {
8441
7577
  dangerouslySetInnerHTML: {
8442
7578
  __html: truncatedText
8443
7579
  }
8444
- })), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8445
- size: "large",
8446
- color: "red"
7580
+ }), highlightText && (/*#__PURE__*/React__default.createElement(HighlightTextContainer, null, /*#__PURE__*/React__default.createElement(BodyText, {
7581
+ level: 1
8447
7582
  }, highlightText))))), auxiliaryCTA && (/*#__PURE__*/React__default.createElement(ExtraActionsContainer, {
8448
7583
  fullWidth: fullWidth
8449
7584
  }, /*#__PURE__*/React__default.createElement(AuxiliaryButton, Object.assign({}, auxiliaryCTA), auxiliaryCTA.text))), links && (/*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
@@ -8455,16 +7590,12 @@ var Card = function Card(_ref) {
8455
7590
  tertiaryButtonTextLength: secondButtonText.length,
8456
7591
  onlyShowButtonsOnHover: onlyShowButtonsOnHover,
8457
7592
  fullWidth: fullWidth
8458
- }, firstButton && (/*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({
8459
- "aria-label": firstButtonText
8460
- }, restFirstButton), primaryButtonTextTruncate)), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({
8461
- "aria-label": secondButtonText
8462
- }, restSecondButton), tertiaryButtonTextTruncate)))));
7593
+ }, firstButton && /*#__PURE__*/React__default.createElement(FirstButtonComponent, Object.assign({}, restFirstButton), primaryButtonTextTruncate), secondButton && (/*#__PURE__*/React__default.createElement(SecondButtonComponent, Object.assign({}, restSecondButton), tertiaryButtonTextTruncate)))));
8463
7594
  };
8464
7595
 
8465
- var _templateObject$V, _templateObject2$G;
8466
- 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);
8467
- 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);
8468
7599
 
8469
7600
  var Cards = function Cards(_ref) {
8470
7601
  var cards = _ref.cards,
@@ -8506,18 +7637,18 @@ var Cards = function Cards(_ref) {
8506
7637
  }));
8507
7638
  };
8508
7639
 
8509
- var _templateObject$W, _templateObject2$H, _templateObject3$t, _templateObject4$o, _templateObject5$j;
8510
- 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);
8511
- 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) {
8512
7643
  var hideBottomBorder = _ref.hideBottomBorder;
8513
7644
  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8514
7645
  }, function (_ref2) {
8515
7646
  var hideTopBorder = _ref2.hideTopBorder;
8516
7647
  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-mid-grey)') + ";";
8517
7648
  }, devices.mobileAndTablet);
8518
- var AddressWrapperDesktop = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
8519
- 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);
8520
- 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);
8521
7652
 
8522
7653
  var divideAddressString = function divideAddressString(address) {
8523
7654
  return address.split(',').map(function (chunk, i) {
@@ -8574,18 +7705,18 @@ var ContactCard = function ContactCard(_ref) {
8574
7705
  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString))))))));
8575
7706
  };
8576
7707
 
8577
- var _templateObject$X, _templateObject2$I, _templateObject3$u, _templateObject4$p, _templateObject5$k, _templateObject6$g, _templateObject7$a;
8578
- var BodyTextRelative = /*#__PURE__*/styled(BodyText)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
8579
- 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) {
8580
7711
  return props.clickable ? 'pointer' : 'default';
8581
7712
  }, devices.mobile);
8582
- var ContentSummaryImageWrapper = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
8583
- 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) {
8584
7715
  return props.showImage ? 2 : '1 / span 4';
8585
7716
  }, devices.mobile);
8586
- 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);
8587
- var BodyTextLimit = /*#__PURE__*/styled.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
8588
- 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) {
8589
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 ";
8590
7721
  });
8591
7722
 
@@ -8657,21 +7788,21 @@ var ContentSummary = function ContentSummary(_ref) {
8657
7788
  }), link.text))));
8658
7789
  };
8659
7790
 
8660
- var _templateObject$Y, _templateObject2$J, _templateObject3$v, _templateObject4$q, _templateObject5$l;
8661
- 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) {
8662
7793
  var imageToLeft = _ref.imageToLeft;
8663
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'";
8664
7795
  }, devices.mobile);
8665
- 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) {
8666
7797
  var imageToLeft = _ref2.imageToLeft;
8667
7798
  return imageToLeft ? 'left' : 'right';
8668
7799
  }, devices.mobile);
8669
- 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) {
8670
7801
  var imageToLeft = _ref3.imageToLeft;
8671
7802
  return imageToLeft ? 'right' : 'left';
8672
7803
  }, devices.mobile);
8673
- 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"])));
8674
- 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"])));
8675
7806
 
8676
7807
  var Editorial = function Editorial(_ref) {
8677
7808
  var _ref$imagePosition = _ref.imagePosition,
@@ -8702,82 +7833,26 @@ var Editorial = function Editorial(_ref) {
8702
7833
  })))));
8703
7834
  };
8704
7835
 
8705
- var InformationCtaVariants = {
8706
- Primary: 'Primary',
8707
- Secondary: 'Secondary',
8708
- Tertiary: 'Tertiary',
8709
- TextLink: 'TextLink'
8710
- };
8711
-
8712
- var COLORS$4 = {
8713
- "default": 'var(--information-panel-button-color)',
8714
- background: 'var(--information-panel-button-bg-color)',
8715
- hover: 'var(--information-panel-button-hover-color)',
8716
- pressed: 'var(--information-panel-button-pressed-color)'
8717
- };
8718
- var getTextColor$4 = function getTextColor(variant, theme, colorValue) {
8719
- if (theme === ThemeType.Cinema && (variant === InformationCtaVariants.Tertiary || variant === InformationCtaVariants.TextLink)) {
8720
- 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 '';
8721
7842
  }
8722
- if (variant === InformationCtaVariants.Primary) {
8723
- 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 }";
8724
7845
  }
8725
- return colorValue;
8726
- };
8727
- var getBackgroundColor$2 = function getBackgroundColor(variant, colorValue) {
8728
- return variant === InformationCtaVariants.Primary || variant === undefined ? "background-color: " + colorValue + ";" : '';
8729
- };
8730
- var getBorderColor$1 = function getBorderColor(variant, colorValue) {
8731
- return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
8732
- };
8733
-
8734
- var _templateObject$Z, _templateObject2$K, _templateObject3$w, _templateObject4$r;
8735
- 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);
8736
- var InfoTitle = /*#__PURE__*/styled('div')(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
8737
- 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) {
8738
- var variant = _ref.variant,
8739
- theme = _ref.theme;
8740
- return getTextColor$4(variant, theme, COLORS$4.background);
8741
- }, function (_ref2) {
8742
- var variant = _ref2.variant;
8743
- return getBackgroundColor$2(variant, COLORS$4.background);
8744
- }, function (_ref3) {
8745
- var variant = _ref3.variant;
8746
- return getBorderColor$1(variant, COLORS$4.background);
8747
- }, function (_ref4) {
8748
- var variant = _ref4.variant,
8749
- theme = _ref4.theme;
8750
- return getTextColor$4(variant, theme, COLORS$4.background);
8751
- }, function (_ref5) {
8752
- var variant = _ref5.variant,
8753
- theme = _ref5.theme;
8754
- return getTextColor$4(variant, theme, COLORS$4.hover);
8755
- }, function (_ref6) {
8756
- var variant = _ref6.variant;
8757
- return getBackgroundColor$2(variant, COLORS$4.hover);
8758
- }, function (_ref7) {
8759
- var variant = _ref7.variant;
8760
- return getBorderColor$1(variant, COLORS$4.hover);
8761
- }, function (_ref8) {
8762
- var variant = _ref8.variant,
8763
- theme = _ref8.theme;
8764
- return getTextColor$4(variant, theme, COLORS$4.hover);
8765
- }, function (_ref9) {
8766
- var variant = _ref9.variant,
8767
- theme = _ref9.theme;
8768
- return getTextColor$4(variant, theme, COLORS$4.pressed);
8769
- }, function (_ref10) {
8770
- var variant = _ref10.variant;
8771
- return getBackgroundColor$2(variant, COLORS$4.pressed);
8772
- }, function (_ref11) {
8773
- var variant = _ref11.variant;
8774
- return getBorderColor$1(variant, COLORS$4.pressed);
8775
- }, function (_ref12) {
8776
- var variant = _ref12.variant,
8777
- theme = _ref12.theme;
8778
- 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)';
8779
7855
  });
8780
- 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);
8781
7856
 
8782
7857
  // Helper function for rendering buttons based on the variant
8783
7858
  var renderButton = function renderButton(_ref) {
@@ -8788,7 +7863,7 @@ var renderButton = function renderButton(_ref) {
8788
7863
  iconDirection = _ref.iconDirection,
8789
7864
  target = _ref.target;
8790
7865
  switch (variant) {
8791
- case InformationCtaVariants.Secondary:
7866
+ case IInformationCtaVariant.Secondary:
8792
7867
  return /*#__PURE__*/React__default.createElement(SecondaryButton, {
8793
7868
  href: link,
8794
7869
  iconName: iconName,
@@ -8796,13 +7871,13 @@ var renderButton = function renderButton(_ref) {
8796
7871
  target: target,
8797
7872
  "aria-label": text
8798
7873
  }, text);
8799
- case InformationCtaVariants.Tertiary:
7874
+ case IInformationCtaVariant.Tertiary:
8800
7875
  return /*#__PURE__*/React__default.createElement(TertiaryButton, {
8801
7876
  href: link,
8802
7877
  target: target,
8803
7878
  "aria-label": text
8804
7879
  }, text);
8805
- case InformationCtaVariants.TextLink:
7880
+ case IInformationCtaVariant.TextLink:
8806
7881
  return /*#__PURE__*/React__default.createElement(TextLink, {
8807
7882
  href: link,
8808
7883
  iconName: iconName,
@@ -8822,17 +7897,17 @@ var renderButton = function renderButton(_ref) {
8822
7897
  };
8823
7898
  var InfoCta = function InfoCta(_ref2) {
8824
7899
  var _ref2$variant = _ref2.variant,
8825
- variant = _ref2$variant === void 0 ? InformationCtaVariants.Primary : _ref2$variant,
7900
+ variant = _ref2$variant === void 0 ? IInformationCtaVariant.Primary : _ref2$variant,
8826
7901
  link = _ref2.link,
8827
7902
  text = _ref2.text,
8828
7903
  iconName = _ref2.iconName,
8829
7904
  iconDirection = _ref2.iconDirection,
7905
+ infoThemed = _ref2.infoThemed,
8830
7906
  _ref2$target = _ref2.target,
8831
- target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target,
8832
- theme = _ref2.theme;
7907
+ target = _ref2$target === void 0 ? LinkTarget.Self : _ref2$target;
8833
7908
  return /*#__PURE__*/React__default.createElement(InfoCTAWrapper, {
8834
7909
  variant: variant,
8835
- theme: theme
7910
+ infoThemed: infoThemed
8836
7911
  }, renderButton({
8837
7912
  variant: variant,
8838
7913
  link: link,
@@ -8848,28 +7923,40 @@ var smallColumnSpan = 4;
8848
7923
  var largeColumnSpan = 9;
8849
7924
  var mediumWordBreakpoint = 8;
8850
7925
  var longWordBreakpoint = 13;
8851
- var getColumnSpan = function getColumnSpan(longestWordLength) {
7926
+ var getColumnSpan = function getColumnSpan(variant, textSize, longestWordLength) {
7927
+ if (variant !== IInformationTitleVariant.Header || textSize !== 4) return defaultColumnSpan;
8852
7928
  if (longestWordLength > longWordBreakpoint) return largeColumnSpan;
8853
7929
  if (longestWordLength < mediumWordBreakpoint) return smallColumnSpan;
8854
7930
  return defaultColumnSpan;
8855
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
+ };
8856
7940
  var Information = function Information(_ref) {
8857
7941
  var body = _ref.body,
8858
7942
  title = _ref.title,
7943
+ background = _ref.background,
8859
7944
  cta = _ref.cta,
8860
- className = _ref.className,
8861
- theme = _ref.theme;
7945
+ className = _ref.className;
8862
7946
  var safeTitle = title || {
8863
7947
  text: '',
8864
- textSize: 'medium'
7948
+ variant: IInformationTitleVariant.Header,
7949
+ textSize: 5
8865
7950
  }; // Provide a fallback
8866
7951
  var titleWords = safeTitle.text.split(' ');
8867
7952
  var titleWordLengths = titleWords.map(function (word) {
8868
7953
  return word.length;
8869
7954
  });
8870
7955
  var maxTitleWordLength = Math.max.apply(Math, titleWordLengths);
8871
- var titleColumnSpan = getColumnSpan(maxTitleWordLength);
8872
- 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,
8873
7960
  "data-testid": "infoWrapper",
8874
7961
  className: className
8875
7962
  }, /*#__PURE__*/React__default.createElement(GridItem, {
@@ -8877,53 +7964,50 @@ var Information = function Information(_ref) {
8877
7964
  columnStartDevice: 2,
8878
7965
  columnSpanDesktop: titleColumnSpan,
8879
7966
  columnSpanDevice: 12
8880
- }, /*#__PURE__*/React__default.createElement(InfoTitle, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8881
- hierarchy: "h2",
8882
- size: safeTitle.textSize,
8883
- color: "inherit"
8884
- }, safeTitle.text))), /*#__PURE__*/React__default.createElement(GridItem, {
7967
+ }, /*#__PURE__*/React__default.createElement(InfoTitle, null, renderTitle(safeTitle))), /*#__PURE__*/React__default.createElement(GridItem, {
8885
7968
  columnStartDesktop: titleColumnSpan + 2,
8886
7969
  columnStartDevice: 2,
8887
7970
  columnSpanDesktop: 14 - titleColumnSpan,
8888
7971
  columnSpanDevice: 12
8889
- }, /*#__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,
8890
7974
  dangerouslySetInnerHTML: {
8891
7975
  __html: body
8892
7976
  }
8893
7977
  }), cta && (/*#__PURE__*/React__default.createElement(InfoCta, {
8894
7978
  link: cta.link,
8895
7979
  variant: cta.variant,
7980
+ infoThemed: bgColour !== IInformationBackgroundColour.White,
8896
7981
  text: cta.text,
8897
7982
  iconName: cta.iconName,
8898
7983
  iconDirection: cta.iconDirection,
8899
- target: cta.target,
8900
- theme: theme
7984
+ target: cta.target
8901
7985
  })))));
8902
7986
  };
8903
7987
 
8904
- var _templateObject$_, _templateObject2$L, _templateObject3$x, _templateObject4$s, _templateObject5$m, _templateObject6$h, _templateObject7$b, _templateObject8$8;
8905
- 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) {
8906
7990
  var theme = _ref.theme;
8907
7991
  return theme.colors.primary;
8908
7992
  }, function (_ref2) {
8909
7993
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
8910
7994
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
8911
7995
  }, devices.mobile);
8912
- 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);
8913
- 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) {
8914
7998
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
8915
7999
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
8916
8000
  }, devices.mobile);
8917
- 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) {
8918
8002
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
8919
8003
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
8920
8004
  }, devices.mobile);
8921
- 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"])));
8922
- 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);
8923
- 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);
8924
- 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"])));
8925
8009
 
8926
- var _excluded$l = ["text"];
8010
+ var _excluded$j = ["text"];
8927
8011
  var PageHeading = function PageHeading(_ref) {
8928
8012
  var title = _ref.title,
8929
8013
  text = _ref.text,
@@ -8939,14 +8023,14 @@ var PageHeading = function PageHeading(_ref) {
8939
8023
  titleCharLimit = _ref$titleCharLimit === void 0 ? 40 : _ref$titleCharLimit;
8940
8024
  var _ref2 = link || {},
8941
8025
  linkText = _ref2.text,
8942
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8026
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
8943
8027
  var truncatedText = text == null ? void 0 : text.substring(0, copyCharLimit);
8944
8028
  var truncatedTitle = title == null ? void 0 : title.substring(0, titleCharLimit);
8945
8029
  var isTitleUnAvailable = !title;
8946
8030
  return /*#__PURE__*/React__default.createElement(PageHeadingWrapper, {
8947
8031
  "data-testid": "page-heading-wrapper",
8948
8032
  isPageHeadingWithoutTitle: isTitleUnAvailable
8949
- }, /*#__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, {
8950
8034
  "data-testid": "page-heading-title",
8951
8035
  isPageHeadingWithoutTitle: isTitleUnAvailable
8952
8036
  }, children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
@@ -8967,13 +8051,13 @@ var PageHeading = function PageHeading(_ref) {
8967
8051
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText))) : null));
8968
8052
  };
8969
8053
 
8970
- var _excluded$m = ["link"];
8054
+ var _excluded$k = ["link"];
8971
8055
  var PageHeadingCore = function PageHeadingCore(_ref) {
8972
8056
  var link = _ref.link,
8973
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
8057
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
8974
8058
  var coreLink = link && _extends({}, link, {
8975
- color: ThemeColor['base-white'],
8976
- bgColor: ThemeColor['base-black']
8059
+ color: Colors.White,
8060
+ bgColor: Colors.Black
8977
8061
  });
8978
8062
  return /*#__PURE__*/React__default.createElement(Theme, {
8979
8063
  theme: ThemeType.Core
@@ -8982,13 +8066,13 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
8982
8066
  })));
8983
8067
  };
8984
8068
 
8985
- var _excluded$n = ["link"];
8069
+ var _excluded$l = ["link"];
8986
8070
  var PageHeadingCinema = function PageHeadingCinema(_ref) {
8987
8071
  var link = _ref.link,
8988
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
8072
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
8989
8073
  var cinemaLink = link && _extends({}, link, {
8990
- color: ThemeColor['base-black'],
8991
- bgColor: ThemeColor['base-white']
8074
+ color: Colors.Black,
8075
+ bgColor: Colors.White
8992
8076
  });
8993
8077
  return /*#__PURE__*/React__default.createElement(Theme, {
8994
8078
  theme: ThemeType.Cinema
@@ -8999,17 +8083,17 @@ var PageHeadingCinema = function PageHeadingCinema(_ref) {
8999
8083
  })));
9000
8084
  };
9001
8085
 
9002
- var _templateObject$$, _templateObject2$M, _templateObject3$y, _templateObject4$t, _templateObject5$n, _templateObject6$i, _templateObject7$c, _templateObject8$9;
9003
- 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);
9004
- 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);
9005
- 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);
9006
- 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);
9007
- var LogoWrapper$1 = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
9008
- 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);
9009
- 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);
9010
- 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);
9011
8095
 
9012
- var _excluded$o = ["text"];
8096
+ var _excluded$m = ["text"];
9013
8097
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
9014
8098
  var children = _ref.children,
9015
8099
  text = _ref.text,
@@ -9027,12 +8111,12 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
9027
8111
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
9028
8112
  var _ref2 = link || {},
9029
8113
  linkText = _ref2.text,
9030
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
8114
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9031
8115
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
9032
8116
  bgUrlDesktop: bgUrlDesktop,
9033
8117
  bgUrlDevice: bgUrlDevice,
9034
8118
  "data-testid": "impact-wrapper"
9035
- }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8119
+ }, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9036
8120
  "data-testid": "impact-sponsor"
9037
8121
  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
9038
8122
  "data-testid": "impact-custom-sponsor"
@@ -9072,21 +8156,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
9072
8156
  }, "Scroll Down"))) : null);
9073
8157
  };
9074
8158
 
9075
- var _templateObject$10, _templateObject2$N, _templateObject3$z, _templateObject4$u, _templateObject5$o;
9076
- 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) {
9077
8161
  var color = _ref.color;
9078
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 ";
9079
8163
  }, devices.mobileAndTablet);
9080
- 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) {
9081
8165
  var hasImage = _ref2.hasImage;
9082
8166
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
9083
8167
  }, devices.mobileAndTablet, function (_ref3) {
9084
8168
  var hasImage = _ref3.hasImage;
9085
8169
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
9086
8170
  });
9087
- 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);
9088
- 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);
9089
- 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);
9090
8174
 
9091
8175
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
9092
8176
  var _image$src, _image$alt;
@@ -9100,7 +8184,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9100
8184
  "data-testid": "wrapper"
9101
8185
  }, /*#__PURE__*/React__default.createElement(LeftPanel, {
9102
8186
  hasImage: hasImage
9103
- }, /*#__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, {
9104
8188
  "data-testid": "scroll-link"
9105
8189
  }, /*#__PURE__*/React__default.createElement(TabLink, {
9106
8190
  iconName: "Arrow",
@@ -9116,16 +8200,16 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9116
8200
  })))));
9117
8201
  };
9118
8202
 
9119
- var _templateObject$11;
9120
- 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"])));
9121
8205
 
9122
- var _excluded$p = ["link"];
8206
+ var _excluded$n = ["link"];
9123
8207
  var PageHeadingStream = function PageHeadingStream(_ref) {
9124
8208
  var link = _ref.link,
9125
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
8209
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
9126
8210
  var streamLink = link && _extends({}, link, {
9127
- color: ThemeColor['base-black'],
9128
- bgColor: ThemeColor['base-white']
8211
+ color: Colors.Black,
8212
+ bgColor: Colors.White
9129
8213
  });
9130
8214
  return /*#__PURE__*/React__default.createElement(Theme, {
9131
8215
  theme: ThemeType.Stream
@@ -9136,199 +8220,12 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
9136
8220
  }))));
9137
8221
  };
9138
8222
 
9139
- var _templateObject$12, _templateObject2$O, _templateObject3$A, _templateObject4$v, _templateObject5$p, _templateObject6$j, _templateObject7$d, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
9140
- var Wrapper$5 = /*#__PURE__*/styled.section(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9141
- 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"])));
9142
- 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);
9143
- 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);
9144
- 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) {
9145
- var theme = _ref.theme;
9146
- return theme == ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
9147
- }, function (_ref2) {
9148
- var showBlock = _ref2.showBlock;
9149
- return showBlock ? 'block' : 'none';
9150
- }, devices.mobile);
9151
- 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);
9152
- 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) {
9153
- var isBadgePresent = _ref3.isBadgePresent;
9154
- return isBadgePresent ? '1' : '4';
9155
- });
9156
- 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) {
9157
- var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
9158
- return isAdditionalButtonPresent ? '20px' : '0';
9159
- });
9160
- 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);
9161
- 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) {
9162
- var theme = _ref5.theme;
9163
- return theme == ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
9164
- }, devices.mobile, function (_ref6) {
9165
- var isButtonPresent = _ref6.isButtonPresent;
9166
- return isButtonPresent ? '20px' : '0';
9167
- });
9168
- 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);
9169
-
9170
- var PageHeadingPromoBadge;
9171
- (function (PageHeadingPromoBadge) {
9172
- PageHeadingPromoBadge["Stream"] = "Stream";
9173
- PageHeadingPromoBadge["Cinema"] = "Cinema";
9174
- })(PageHeadingPromoBadge || (PageHeadingPromoBadge = {}));
9175
-
9176
- var Badge = function Badge(_ref) {
9177
- var isMobile = _ref.isMobile,
9178
- theme = _ref.theme,
9179
- badge = _ref.badge;
9180
- if (!badge) return null;
9181
- var color = theme === ThemeType.Cinema ? Colors.Black : Colors.White;
9182
- var alignment = isMobile ? 'center' : 'left';
9183
- return /*#__PURE__*/React__default.createElement(BadgeWrapper$1, {
9184
- "data-testid": "promo-heading-badge"
9185
- }, badge === PageHeadingPromoBadge.Cinema ? (/*#__PURE__*/React__default.createElement(CinemaBadge, {
9186
- fillColor: color,
9187
- align: alignment
9188
- })) : (/*#__PURE__*/React__default.createElement(StreamBadge, {
9189
- fillColor: color,
9190
- align: alignment
9191
- })));
9192
- };
9193
-
9194
- var StyledPrimaryButton = function StyledPrimaryButton(_ref) {
9195
- var link = _ref.link,
9196
- theme = _ref.theme;
9197
- var text = link.text;
9198
- if (theme === ThemeType.Cinema) {
9199
- return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9200
- textColor: ThemeColor['base-white'],
9201
- backgroundColor: ThemeColor['base-black'],
9202
- hoveredColor: ThemeColor['rbo-black-hovered'],
9203
- pressedColor: ThemeColor['rbo-black-pressed']
9204
- }), text);
9205
- }
9206
- return /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, link, {
9207
- textColor: ThemeColor['base-black'],
9208
- backgroundColor: ThemeColor['base-white'],
9209
- hoveredColor: ThemeColor['white-hovered'],
9210
- pressedColor: ThemeColor['white-pressed']
9211
- }), text);
9212
- };
9213
- var Button$1 = function Button(_ref2) {
9214
- var link = _ref2.link,
9215
- theme = _ref2.theme,
9216
- isMobile = _ref2.isMobile;
9217
- var text = link.text;
9218
- if (isMobile) {
9219
- return /*#__PURE__*/React__default.createElement(StyledPrimaryButton, {
9220
- theme: theme,
9221
- link: link
9222
- });
9223
- }
9224
- var buttonColor = theme === ThemeType.Cinema ? ThemeColor['base-black'] : ThemeColor['base-white'];
9225
- if (link.isTextLink) {
9226
- return /*#__PURE__*/React__default.createElement(TextLink, Object.assign({}, link, {
9227
- color: buttonColor,
9228
- iconName: undefined
9229
- }), text);
9230
- }
9231
- return /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, link, {
9232
- textColor: buttonColor,
9233
- borderColor: buttonColor,
9234
- hoveredColor: buttonColor,
9235
- pressedColor: buttonColor
9236
- }), text);
9237
- };
9238
-
9239
- var Image = function Image(_ref) {
9240
- var desktop = _ref.desktop,
9241
- mobile = _ref.mobile,
9242
- alt = _ref.alt;
9243
- var isMobile = useMobile();
9244
- return /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
9245
- aspectRatio: isMobile ? AspectRatio['75:32'] : AspectRatio['90:17']
9246
- }, /*#__PURE__*/React__default.createElement("picture", {
9247
- "data-testid": "promo-heading-picture"
9248
- }, /*#__PURE__*/React__default.createElement("source", {
9249
- srcSet: mobile,
9250
- media: "(max-width: 768px)"
9251
- }), /*#__PURE__*/React__default.createElement("source", {
9252
- srcSet: desktop,
9253
- media: "(min-width: 769px)"
9254
- }), /*#__PURE__*/React__default.createElement("img", {
9255
- src: desktop,
9256
- alt: alt,
9257
- "data-testid": "promo-heading-image"
9258
- })));
9259
- };
9260
-
9261
- var TITLE_MAX_LENGTH = 40;
9262
- var PageHeadingPromo = function PageHeadingPromo(_ref) {
9263
- var _ref$sponsor = _ref.sponsor,
9264
- sponsor = _ref$sponsor === void 0 ? true : _ref$sponsor,
9265
- className = _ref.className,
9266
- theme = _ref.theme,
9267
- badge = _ref.badge,
9268
- mainLink = _ref.mainLink,
9269
- title = _ref.title,
9270
- titleSemanticLevel = _ref.titleSemanticLevel,
9271
- additionalLink = _ref.additionalLink,
9272
- image = _ref.image;
9273
- var isMobile = useMobile();
9274
- var showImageButton = !title && !badge && !additionalLink && !isMobile;
9275
- var showContentBlock = !!title || !!additionalLink || !!mainLink && isMobile;
9276
- var truncatedTitle = title ? truncate(title, TITLE_MAX_LENGTH) : null;
9277
- return /*#__PURE__*/React__default.createElement(Wrapper$5, {
9278
- className: className
9279
- }, sponsor && (/*#__PURE__*/React__default.createElement(SponsorWrapper$1, {
9280
- "data-testid": "promo-heading-sponsor"
9281
- }, /*#__PURE__*/React__default.createElement(Sponsorship, null))), /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(Image, {
9282
- mobile: image.mobile,
9283
- desktop: image.desktop,
9284
- alt: image.alt
9285
- }), showImageButton && mainLink && (/*#__PURE__*/React__default.createElement(ImageButtonWrapper, {
9286
- "data-testid": "promo-heading-image-button"
9287
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, mainLink, {
9288
- textColor: ThemeColor['base-black'],
9289
- backgroundColor: ThemeColor['base-white'],
9290
- hoveredColor: ThemeColor['white-hovered'],
9291
- pressedColor: ThemeColor['white-pressed']
9292
- }), mainLink.text)))), /*#__PURE__*/React__default.createElement(ContentSection, {
9293
- theme: theme,
9294
- showBlock: showContentBlock
9295
- }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
9296
- columnStartDesktop: 2,
9297
- columnSpanDesktop: 14,
9298
- columnStartDevice: 2,
9299
- columnSpanDevice: 12
9300
- }, /*#__PURE__*/React__default.createElement(ContentWrapper$2, {
9301
- theme: theme
9302
- }, (badge || additionalLink) && (/*#__PURE__*/React__default.createElement(AdditionalContentWrapper, {
9303
- isBadgePresent: !!badge
9304
- }, /*#__PURE__*/React__default.createElement(Badge, {
9305
- theme: theme,
9306
- badge: badge,
9307
- isMobile: isMobile
9308
- }), !badge && (/*#__PURE__*/React__default.createElement(AdditionalButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button$1, {
9309
- theme: theme,
9310
- link: additionalLink
9311
- }))))), title && (/*#__PURE__*/React__default.createElement(TitleWrapper$3, {
9312
- theme: theme,
9313
- isButtonPresent: !!mainLink || !!additionalLink
9314
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
9315
- hierarchy: titleSemanticLevel != null ? titleSemanticLevel : 'h1',
9316
- size: "large"
9317
- }, truncatedTitle))), mainLink && !showImageButton && (/*#__PURE__*/React__default.createElement(MainButtonWrapper, {
9318
- isAdditionalButtonPresent: !!additionalLink && !badge
9319
- }, /*#__PURE__*/React__default.createElement(Button$1, {
9320
- theme: theme,
9321
- link: mainLink,
9322
- isMobile: isMobile
9323
- }))))))));
9324
- };
9325
-
9326
- var _templateObject$13, _templateObject2$P, _templateObject3$B, _templateObject5$q, _templateObject6$k, _templateObject7$e, _templateObject8$b, _templateObject9$6, _templateObject10$6;
9327
- 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);
9328
- 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"])));
9329
- var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
9330
- 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);
9331
- 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) {
9332
8229
  var invert = _ref.invert,
9333
8230
  theme = _ref.theme;
9334
8231
  return invert ? theme.colors.white : theme.colors.primary;
@@ -9344,10 +8241,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$k || (
9344
8241
  var theme = _ref4.theme;
9345
8242
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
9346
8243
  }, devices.tablet, devices.mobile);
9347
- 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);
9348
- 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);
9349
- 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);
9350
- 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) {
9351
8248
  var invert = _ref5.invert,
9352
8249
  theme = _ref5.theme;
9353
8250
  return invert ? theme.colors.primary : theme.colors.white;
@@ -9399,7 +8296,7 @@ var renderBranding = function renderBranding(brandingStyle, invert, brandingText
9399
8296
  // eslint-disable-next-line react-hooks/rules-of-hooks
9400
8297
  var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
9401
8298
  var target = sameSiteUrl ? '_self' : '_blank';
9402
- var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
8299
+ var color = invert ? Colors.Black : Colors.White;
9403
8300
  switch (brandingStyle) {
9404
8301
  case 'BlockText':
9405
8302
  return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
@@ -9436,7 +8333,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
9436
8333
  return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
9437
8334
  };
9438
8335
 
9439
- var _excluded$q = ["text"];
8336
+ var _excluded$o = ["text"];
9440
8337
  var useResponsiveVideo = function useResponsiveVideo(video, poster) {
9441
8338
  var mobileVideo = video.mobile || video.desktop;
9442
8339
  var desktopVideo = video.desktop || video.mobile;
@@ -9543,7 +8440,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9543
8440
  semanticLevel = _ref4$semanticLevel === void 0 ? 1 : _ref4$semanticLevel;
9544
8441
  var _ref5 = link || {},
9545
8442
  linkText = _ref5.text,
9546
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$q);
8443
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$o);
9547
8444
  var titleSize = title && title.length > 20 ? 4 : 3;
9548
8445
  var video = {
9549
8446
  elementId: 'compact-header-video',
@@ -9555,7 +8452,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9555
8452
  mobile: bgUrlDevice,
9556
8453
  alt: bgImageAltText
9557
8454
  };
9558
- 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, {
9559
8456
  "data-testid": "compact-sponsor"
9560
8457
  }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
9561
8458
  "data-testid": "compact-custom-sponsor"
@@ -9581,15 +8478,15 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
9581
8478
  }), linkText))))));
9582
8479
  };
9583
8480
 
9584
- var _templateObject$14, _templateObject2$Q, _templateObject3$C, _templateObject4$w;
9585
- var MorePages = /*#__PURE__*/styled.span(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: not-allowed;\n pointer-events: none;\n"])));
9586
- 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"])));
9587
8484
  // PageNumber extends bodyText but uses subtitle-1 font size
9588
- 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) {
9589
8486
  var active = _ref.active;
9590
8487
  return active === 'true' && " \n color: var(--base-color-core);\n ";
9591
8488
  });
9592
- 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"])));
9593
8490
 
9594
8491
  var reducePages = function reducePages(pages, currentPage) {
9595
8492
  // If there are less than 6 pages, return all pages
@@ -9655,14 +8552,14 @@ var Pagination = function Pagination(_ref) {
9655
8552
  })))));
9656
8553
  };
9657
8554
 
9658
- var _templateObject$15, _templateObject2$R, _templateObject3$D, _templateObject4$x, _templateObject5$r, _templateObject6$l, _templateObject7$f;
9659
- 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);
9660
- 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"])));
9661
- 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"])));
9662
- 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"])));
9663
- var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: role-person;\n break-inside: avoid;\n"])));
9664
- 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"])));
9665
- 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"])));
9666
8563
 
9667
8564
  var Person = function Person(_ref) {
9668
8565
  var person = _ref.person,
@@ -9719,14 +8616,14 @@ var PeopleListing = function PeopleListing(_ref) {
9719
8616
  }));
9720
8617
  };
9721
8618
 
9722
- var _templateObject$16, _templateObject2$S, _templateObject3$E, _templateObject4$y;
9723
- var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
9724
- 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) {
9725
8622
  var columnCount = _ref.columnCount;
9726
8623
  return "repeat(" + columnCount + ", 1fr)";
9727
8624
  }, devices.mobile, devices.tablet);
9728
- 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"])));
9729
- 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"])));
9730
8627
 
9731
8628
  // Get the total character length of a property in an array of objects
9732
8629
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -9735,6 +8632,7 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
9735
8632
  }, 0);
9736
8633
  };
9737
8634
 
8635
+ /*eslint-disable*/
9738
8636
  var DEFAULT_COLUMN_COUNT = 4;
9739
8637
  var DEFAULT_LARGE_COLUMN_SPAN = 2;
9740
8638
  var DEFAULT_CHARACTER_THRESHOLD = 180;
@@ -9786,8 +8684,8 @@ var CreditListing = function CreditListing(_ref) {
9786
8684
  var span = namesLength > characterThreshold ? largeColumnSpan : 1;
9787
8685
  var unboundedEnd = nextColumnStart + span;
9788
8686
  var start = unboundedEnd > columnCount + 1 ? 1 : nextColumnStart;
9789
- var end = start + span;
9790
- nextColumnStart = end % columnCount || columnCount;
8687
+ var columnEnd = start + span;
8688
+ nextColumnStart = columnEnd % columnCount || columnCount;
9791
8689
  return {
9792
8690
  columnStart: start,
9793
8691
  columnSpan: span
@@ -9844,14 +8742,14 @@ var CreditListing = function CreditListing(_ref) {
9844
8742
  }, creditEntries);
9845
8743
  };
9846
8744
 
9847
- 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;
9848
8746
  var LENGTH_TEXT = 28;
9849
8747
  var LENGTH_TEXT_TABLET$1 = 12;
9850
8748
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
9851
8749
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
9852
8750
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
9853
8751
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
9854
- 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) {
9855
8753
  var imageToLeft = _ref.imageToLeft;
9856
8754
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
9857
8755
  }, devices.tablet, function (_ref2) {
@@ -9861,9 +8759,9 @@ var PromoWithTagsGrid = /*#__PURE__*/styled(Grid)(_templateObject$17 || (_templa
9861
8759
  var asCard = _ref3.asCard;
9862
8760
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
9863
8761
  });
9864
- 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"])));
9865
- 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"])));
9866
- 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) {
9867
8765
  var hasTextLinks = _ref4.hasTextLinks;
9868
8766
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
9869
8767
  }, function (_ref5) {
@@ -9887,22 +8785,22 @@ var ButtonsContainer$2 = /*#__PURE__*/styled.div(_templateObject4$z || (_templat
9887
8785
  }
9888
8786
  return '';
9889
8787
  });
9890
- 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) {
9891
8789
  var marginBottom = _ref7.marginBottom;
9892
8790
  return marginBottom + "px";
9893
8791
  });
9894
- var PromoWithTagsAdditionalText = /*#__PURE__*/styled(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
9895
- 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"])));
9896
- 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"])));
9897
- 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);
9898
- 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);
9899
- 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);
9900
- 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);
9901
- var PromoWithTagsTypeTags = /*#__PURE__*/styled(TypeTags)(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9902
- var PromoWithTagsHeader = /*#__PURE__*/styled(Header)(_templateObject14$3 || (_templateObject14$3 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9903
- var PromoWithTagsTextLink = /*#__PURE__*/styled(TextLink)(_templateObject15$2 || (_templateObject15$2 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9904
- 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);
9905
- 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) {
9906
8804
  var imageToLeft = _ref8.imageToLeft;
9907
8805
  return imageToLeft ? 'left' : 'right';
9908
8806
  }, devices.mobile);
@@ -9917,16 +8815,16 @@ var PromoWithTagsContentWrapper = /*#__PURE__*/styled.div(_templateObject18 || (
9917
8815
  return asCard && asCardOverrides;
9918
8816
  });
9919
8817
  var PromoWithTagsContainer = /*#__PURE__*/styled.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2,\n h3 {\n margin: 0 0 16px;\n }\n"])));
9920
- 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"])));
9921
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);
9922
8820
 
9923
- var _excluded$r = ["text"],
9924
- _excluded2$4 = ["text"],
8821
+ var _excluded$p = ["text"],
8822
+ _excluded2$2 = ["text"],
9925
8823
  _excluded3 = ["text"];
9926
- var _buttonTypeToButton$2;
8824
+ var _buttonTypeToButton$1;
9927
8825
  var LENGTH_TEXT$1 = 28;
9928
8826
  var LENGTH_TEXT_PARAGRAPH = 130;
9929
- 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);
9930
8828
  var PromoWithTags = function PromoWithTags(_ref) {
9931
8829
  var _ref$imagePosition = _ref.imagePosition,
9932
8830
  imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
@@ -9983,17 +8881,17 @@ var PromoWithTags = function PromoWithTags(_ref) {
9983
8881
  var _ref2 = firstButton || {},
9984
8882
  _ref2$text = _ref2.text,
9985
8883
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9986
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
8884
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
9987
8885
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
9988
8886
  var secondButton = links == null ? void 0 : links[1];
9989
8887
  var _ref3 = secondButton || {},
9990
8888
  _ref3$text = _ref3.text,
9991
8889
  secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
9992
- restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
8890
+ restSecondButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
9993
8891
  var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
9994
8892
  var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
9995
- var FirstButtonComponent = firstButton != null && firstButton.buttonType ? buttonTypeToButton$2[firstButton.buttonType] : PrimaryButton;
9996
- 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;
9997
8895
  var textLinkItems = textLinks ? textLinks.map(function (link, index) {
9998
8896
  var _link$text = link.text,
9999
8897
  textLinkText = _link$text === void 0 ? '' : _link$text,
@@ -10011,7 +8909,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
10011
8909
  level: 5
10012
8910
  }, timerParams.endDateText));
10013
8911
  }
10014
- return /*#__PURE__*/React__default.createElement(TimerWrapper$2, {
8912
+ return /*#__PURE__*/React__default.createElement(TimerWrapper$1, {
10015
8913
  "data-testid": "promo-with-tags-timer-wrapper"
10016
8914
  }, /*#__PURE__*/React__default.createElement(Timer, {
10017
8915
  endDateHandler: function endDateHandler() {
@@ -10096,28 +8994,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
10096
8994
  }))));
10097
8995
  };
10098
8996
 
10099
- 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;
10100
8998
  var LENGTH_TEXT$2 = 28;
10101
8999
  var LENGTH_TEXT_TABLET$2 = 10;
10102
- 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) {
10103
9001
  var imageToLeft = _ref.imageToLeft;
10104
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'";
10105
9003
  }, devices.tablet, function (_ref2) {
10106
9004
  var imageToLeft = _ref2.imageToLeft;
10107
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'";
10108
9006
  }, devices.mobile);
10109
- 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) {
10110
9008
  var imageToLeft = _ref3.imageToLeft;
10111
9009
  return imageToLeft ? 'left' : 'right';
10112
9010
  }, devices.mobile);
10113
- 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) {
10114
9012
  var imageToLeft = _ref4.imageToLeft;
10115
9013
  return imageToLeft ? 'right' : 'left';
10116
9014
  }, devices.mobile);
10117
- 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);
10118
- 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"])));
10119
- 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"])));
10120
- 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) {
10121
9019
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
10122
9020
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
10123
9021
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -10139,8 +9037,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled.div(_templateObject7$h || (_templat
10139
9037
  return '';
10140
9038
  });
10141
9039
 
10142
- var _templateObject$19;
10143
- 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) {
10144
9042
  var _ref$aspectRatio = _ref.aspectRatio,
10145
9043
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
10146
9044
  return aspectRatio;
@@ -10171,6 +9069,19 @@ var getAspectRatioFromVideo = function getAspectRatioFromVideo(video) {
10171
9069
  return AspectRatio[aspectRatioKey] || AspectRatio['16:9'];
10172
9070
  };
10173
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
+
10174
9085
  var VideoWithControls$1 = function VideoWithControls(_ref) {
10175
9086
  var video = _ref.video,
10176
9087
  settings = _ref.settings;
@@ -10252,8 +9163,8 @@ var PromoChild = function PromoChild(_ref) {
10252
9163
  }));
10253
9164
  };
10254
9165
 
10255
- var _excluded$s = ["text"],
10256
- _excluded2$5 = ["text"];
9166
+ var _excluded$q = ["text"],
9167
+ _excluded2$3 = ["text"];
10257
9168
  var LENGTH_TEXT$3 = 28;
10258
9169
  var PromoWithTitle = function PromoWithTitle(_ref) {
10259
9170
  var _ref$imagePosition = _ref.imagePosition,
@@ -10278,13 +9189,13 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10278
9189
  var _ref2 = primaryButton || {},
10279
9190
  _ref2$text = _ref2.text,
10280
9191
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
10281
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
9192
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
10282
9193
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
10283
9194
  var tertiaryButton = links == null ? void 0 : links[1];
10284
9195
  var _ref3 = tertiaryButton || {},
10285
9196
  _ref3$text = _ref3.text,
10286
9197
  tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
10287
- restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$5);
9198
+ restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
10288
9199
  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
10289
9200
  var defaultVideoSettings = {
10290
9201
  muted: true,
@@ -10321,8 +9232,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10321
9232
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
10322
9233
  };
10323
9234
 
10324
- var _templateObject$1a;
10325
- 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"])));
10326
9237
 
10327
9238
  /**
10328
9239
  * DEPRECATED. Use RadioGroup2 instead
@@ -10377,9 +9288,9 @@ var RadioGroup = function RadioGroup(_ref) {
10377
9288
  })));
10378
9289
  };
10379
9290
 
10380
- var _templateObject$1b, _templateObject2$V, _templateObject3$H;
10381
- var Container$3 = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
10382
- 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) {
10383
9294
  var horizontalMode = _ref.horizontalMode;
10384
9295
  if (horizontalMode) return 'row';
10385
9296
  return 'column';
@@ -10387,7 +9298,7 @@ var RadioGroup$1 = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObjec
10387
9298
  var gap = _ref2.gap;
10388
9299
  return gap + "px";
10389
9300
  });
10390
- 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) {
10391
9302
  var darkMode = _ref3.darkMode;
10392
9303
  if (darkMode) return 'var(--base-color-white)';
10393
9304
  return 'var(--base-color-errorstate)';
@@ -10464,10 +9375,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
10464
9375
  }, error))));
10465
9376
  };
10466
9377
 
10467
- var _templateObject$1c, _templateObject2$W, _templateObject3$I;
10468
- 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);
10469
- 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"])));
10470
- 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);
10471
9382
 
10472
9383
  /* eslint-disable react/no-danger */
10473
9384
  var StatusBanner = function StatusBanner(_ref) {
@@ -10523,8 +9434,8 @@ var StatusBanner = function StatusBanner(_ref) {
10523
9434
  return null;
10524
9435
  };
10525
9436
 
10526
- var _templateObject$1d;
10527
- 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);
10528
9439
 
10529
9440
  var SectionTitle = function SectionTitle(_ref) {
10530
9441
  var title = _ref.title,
@@ -10552,8 +9463,8 @@ var SectionTitle = function SectionTitle(_ref) {
10552
9463
  }, description)))));
10553
9464
  };
10554
9465
 
10555
- var _templateObject$1e, _templateObject2$X, _templateObject3$J, _templateObject4$B, _templateObject5$u, _templateObject6$o, _templateObject7$i, _templateObject8$d, _templateObject9$8, _templateObject10$8, _templateObject11$5;
10556
- 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) {
10557
9468
  var theme = _ref.theme;
10558
9469
  return "3px solid " + theme.colors.lapisLazuli;
10559
9470
  }, function (_ref2) {
@@ -10563,12 +9474,12 @@ var stateStyles = /*#__PURE__*/css(_templateObject$1e || (_templateObject$1e = /
10563
9474
  var theme = _ref3.theme;
10564
9475
  return theme.colors.lightgrey;
10565
9476
  });
10566
- 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) {
10567
9478
  var theme = _ref4.theme;
10568
9479
  return theme.colors.darkgrey;
10569
9480
  });
10570
- var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
10571
- 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"])));
10572
9483
  var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10573
9484
  var theme = _ref5.theme;
10574
9485
  return {
@@ -10576,11 +9487,11 @@ var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
10576
9487
  color: theme.colors.black,
10577
9488
  title: 'Select Arrow'
10578
9489
  };
10579
- })(_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"])));
10580
- 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);
10581
- var SelectWrapper = /*#__PURE__*/styled.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10582
- var Options = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10583
- 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) {
10584
9495
  var theme = _ref6.theme,
10585
9496
  hover = _ref6.hover;
10586
9497
  var _theme$colors = theme.colors,
@@ -10590,9 +9501,9 @@ var Option = /*#__PURE__*/styled.li(_templateObject9$8 || (_templateObject9$8 =
10590
9501
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
10591
9502
  });
10592
9503
  var selectStyles = function selectStyles(width, height) {
10593
- 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);
10594
9505
  };
10595
- 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) {
10596
9507
  var width = _ref7.width,
10597
9508
  height = _ref7.height;
10598
9509
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -10886,7 +9797,7 @@ function Select(_ref3) {
10886
9797
  }
10887
9798
  setSelectedValue(options[0]);
10888
9799
  }, [options, resetWhenOptionsUpdate]);
10889
- 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, {
10890
9801
  level: 1,
10891
9802
  tag: "p",
10892
9803
  "data-testid": "select-label"
@@ -10933,9 +9844,9 @@ function Select(_ref3) {
10933
9844
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
10934
9845
  }
10935
9846
 
10936
- var _templateObject$1f, _templateObject2$Y, _templateObject3$K, _templateObject4$C;
10937
- var Container$4 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10938
- 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) {
10939
9850
  var width = _ref.width;
10940
9851
  if (!width) return 'none';
10941
9852
  return width + "px";
@@ -10952,18 +9863,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateOb
10952
9863
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
10953
9864
  return "0 0 0 3px var(--base-color-lapislazuli)";
10954
9865
  });
10955
- 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) {
10956
9867
  var darkMode = _ref5.darkMode;
10957
9868
  if (darkMode) return "var(--base-color-white)";
10958
9869
  return "var(--base-color-black)";
10959
9870
  });
10960
- 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) {
10961
9872
  var darkMode = _ref6.darkMode;
10962
9873
  if (darkMode) return "var(--base-color-white)";
10963
9874
  return "var(--base-color-errorstate)";
10964
9875
  });
10965
9876
 
10966
- var _excluded$t = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9877
+ var _excluded$r = ["label", "error", "width", "darkMode", "isSearchable", "components"];
10967
9878
  var DropdownIndicator = function DropdownIndicator(props) {
10968
9879
  return /*#__PURE__*/React__default.createElement(components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
10969
9880
  iconName: "DropdownArrow"
@@ -11014,7 +9925,7 @@ var SelectComponent = function SelectComponent(_ref2) {
11014
9925
  _ref2$isSearchable = _ref2.isSearchable,
11015
9926
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
11016
9927
  components = _ref2.components,
11017
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
9928
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
11018
9929
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
11019
9930
  label: label,
11020
9931
  error: error,
@@ -11032,7 +9943,7 @@ var SelectComponent = function SelectComponent(_ref2) {
11032
9943
  })));
11033
9944
  };
11034
9945
 
11035
- var _excluded$u = ["label", "error", "width", "darkMode", "components"];
9946
+ var _excluded$s = ["label", "error", "width", "darkMode", "components"];
11036
9947
  /**
11037
9948
  * The Select2Async component is similar to Select 2, but uses react-select async
11038
9949
  * component for select instead of regular react-select component. This can be used
@@ -11054,7 +9965,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
11054
9965
  _ref$darkMode = _ref.darkMode,
11055
9966
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
11056
9967
  components = _ref.components,
11057
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$u);
9968
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
11058
9969
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
11059
9970
  label: label,
11060
9971
  error: error,
@@ -11071,8 +9982,8 @@ var SelectComponent$1 = function SelectComponent(_ref) {
11071
9982
  })));
11072
9983
  };
11073
9984
 
11074
- var _templateObject$1g, _templateObject2$Z;
11075
- 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) {
11076
9987
  var _ref$aspectRatio = _ref.aspectRatio,
11077
9988
  aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
11078
9989
  return aspectRatio;
@@ -11082,7 +9993,7 @@ var Wrapper$7 = /*#__PURE__*/styled.figure(_templateObject$1g || (_templateObjec
11082
9993
  height = _ref2.height;
11083
9994
  return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
11084
9995
  });
11085
- 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"])));
11086
9997
 
11087
9998
  var ImageWithCaption = function ImageWithCaption(_ref) {
11088
9999
  var caption = _ref.caption,
@@ -11103,7 +10014,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11103
10014
  return window.removeEventListener('resize', setWrapperHeight);
11104
10015
  };
11105
10016
  }, []);
11106
- return /*#__PURE__*/React__default.createElement(Wrapper$7, {
10017
+ return /*#__PURE__*/React__default.createElement(Wrapper$6, {
11107
10018
  aspectRatio: aspectRatio,
11108
10019
  ref: wrapperRef,
11109
10020
  height: height
@@ -11116,13 +10027,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
11116
10027
  })), caption && /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
11117
10028
  };
11118
10029
 
11119
- var _templateObject$1h, _templateObject2$_, _templateObject3$L;
11120
- var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
11121
- 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) {
11122
10033
  var displayAttribution = _ref.displayAttribution;
11123
10034
  return "display: " + (displayAttribution ? 'block' : 'none') + ";";
11124
10035
  });
11125
- 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);
11126
10037
 
11127
10038
  /* eslint-disable react/no-danger */
11128
10039
  var Quote = function Quote(_ref) {
@@ -11147,13 +10058,13 @@ var Quote = function Quote(_ref) {
11147
10058
  }, attribution))));
11148
10059
  };
11149
10060
 
11150
- var _templateObject$1i, _templateObject2$$, _templateObject3$M, _templateObject4$D, _templateObject5$v, _templateObject6$p;
11151
- 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"])));
11152
- 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"])));
11153
- var StyledImage = /*#__PURE__*/styled.img(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
11154
- var ImageWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
11155
- 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);
11156
- 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);
11157
10068
 
11158
10069
  var MiniCard = function MiniCard(_ref) {
11159
10070
  var _ref$title = _ref.title,
@@ -11171,7 +10082,7 @@ var MiniCard = function MiniCard(_ref) {
11171
10082
  columnSpanDevice: 3,
11172
10083
  columnStartDesktop: 1,
11173
10084
  columnSpanDesktop: 3
11174
- }, /*#__PURE__*/React__default.createElement(ImageWrapper$1, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
10085
+ }, /*#__PURE__*/React__default.createElement(ImageWrapper, null, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
11175
10086
  aspectRatio: AspectRatio['4:3']
11176
10087
  }, /*#__PURE__*/React__default.createElement(StyledImage, {
11177
10088
  src: image,
@@ -11186,23 +10097,23 @@ var MiniCard = function MiniCard(_ref) {
11186
10097
  columnSpanDesktop: 4
11187
10098
  }, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
11188
10099
  level: 4
11189
- }, 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, {
11190
10101
  level: 2
11191
10102
  }, title)))));
11192
10103
  };
11193
10104
 
11194
- var _templateObject$1j, _templateObject2$10, _templateObject3$N, _templateObject4$E, _templateObject5$w;
11195
- 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"])));
11196
- 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"])));
11197
- 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) {
11198
10109
  var isVisible = _ref.isVisible;
11199
10110
  return isVisible ? 'visible' : 'hidden';
11200
10111
  });
11201
- 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) {
11202
10113
  var isVisible = _ref2.isVisible;
11203
10114
  return isVisible ? 'visible' : 'hidden';
11204
10115
  });
11205
- 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"])));
11206
10117
 
11207
10118
  var keyDown = function keyDown(e, toggleFunction) {
11208
10119
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -11283,15 +10194,15 @@ var ReadMore = function ReadMore(_ref) {
11283
10194
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
11284
10195
  };
11285
10196
 
11286
- var _templateObject$1k, _templateObject2$11, _templateObject3$O, _templateObject4$F, _templateObject5$x;
11287
- var MenuContainer$2 = /*#__PURE__*/styled.nav(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
11288
- 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);
11289
- 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);
11290
- 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) {
11291
10202
  var isActive = _ref.isActive;
11292
10203
  return isActive ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
11293
10204
  }, Colors.MidGrey);
11294
- 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) {
11295
10206
  var isOpen = _ref2.isOpen;
11296
10207
  return isOpen ? 'block' : 'none';
11297
10208
  }, Colors.White, Colors.DarkGrey, MenuItem$1);
@@ -11447,19 +10358,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
11447
10358
  });
11448
10359
  };
11449
10360
 
11450
- var _templateObject$1l, _templateObject2$12, _templateObject3$P, _templateObject4$G, _templateObject5$y, _templateObject6$q;
11451
- var Container$5 = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
11452
- var Sections = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
11453
- 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) {
11454
10365
  var color = _ref.color;
11455
10366
  return "var(--base-color-" + color + ")";
11456
10367
  });
11457
- 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"])));
11458
- 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) {
11459
10370
  var color = _ref2.color;
11460
10371
  return "var(--base-color-" + color + ")";
11461
10372
  });
11462
- 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) {
11463
10374
  var color = _ref3.color;
11464
10375
  return "var(--base-color-" + color + ")";
11465
10376
  });
@@ -11541,28 +10452,28 @@ var PasswordStrength = function PasswordStrength(_ref) {
11541
10452
  }, strengthLabel))));
11542
10453
  };
11543
10454
 
11544
- var _templateObject$1m, _templateObject2$13, _templateObject3$Q, _templateObject4$H, _templateObject5$z, _templateObject6$r, _templateObject7$j, _templateObject8$e, _templateObject9$9, _templateObject10$9;
11545
- var TableContainer = /*#__PURE__*/styled.table(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11546
- var Container$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11547
- var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
11548
- 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) {
11549
10460
  return "var(--base-color-" + props.lineColor + ")";
11550
10461
  }, function (props) {
11551
10462
  return "calc(100% / " + (props.columns - 1) + ")";
11552
10463
  }, devices.tablet, devices.mobile);
11553
- 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) {
11554
10465
  return "var(--base-color-" + props.lineColor + ")";
11555
10466
  }, function (props) {
11556
10467
  return "calc(100% / " + (props.columns - 1) + ")";
11557
10468
  }, devices.mobile);
11558
- 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"])));
11559
- 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) {
11560
10471
  var active = _ref.active;
11561
10472
  return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11562
10473
  });
11563
- 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"])));
11564
- 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"])));
11565
- 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"])));
11566
10477
 
11567
10478
  /* eslint-disable react/no-danger */
11568
10479
  var Content = function Content(_ref) {
@@ -11670,7 +10581,7 @@ var Table = function Table(_ref) {
11670
10581
  } else {
11671
10582
  visibleRows = totalRows;
11672
10583
  }
11673
- 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, {
11674
10585
  onClickPrev: function onClickPrev() {
11675
10586
  return scrollTable(tableRef, 'left');
11676
10587
  },
@@ -11745,32 +10656,32 @@ var Table = function Table(_ref) {
11745
10656
  }))))))))));
11746
10657
  };
11747
10658
 
11748
- 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;
11749
- 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) {
11750
10661
  var theme = _ref.theme;
11751
10662
  return "var(--base-color-" + theme + ")";
11752
10663
  }, function (_ref2) {
11753
10664
  var theme = _ref2.theme;
11754
10665
  return "var(--base-color-" + theme + ")";
11755
10666
  });
11756
- 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);
11757
- 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);
11758
- 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"])));
11759
- 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);
11760
- 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);
11761
- var ServerError = /*#__PURE__*/styled.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11762
- 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"])));
11763
- 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);
11764
- 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);
11765
- var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11766
- 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"])));
11767
- 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) {
11768
10679
  var _ref3$isOpen = _ref3.isOpen,
11769
10680
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11770
10681
  return isOpen ? '180deg' : '0deg';
11771
10682
  });
11772
- 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"])));
11773
- 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"])));
11774
10685
 
11775
10686
  var regex = {
11776
10687
  signInEmail:
@@ -12068,7 +10979,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12068
10979
  });
12069
10980
  }
12070
10981
  }, [isSuccess]);
12071
- return /*#__PURE__*/React__default.createElement(Wrapper$9, {
10982
+ return /*#__PURE__*/React__default.createElement(Wrapper$8, {
12072
10983
  theme: themeToColor(theme)
12073
10984
  }, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
12074
10985
  id: signUpInstructionsId,
@@ -12132,347 +11043,8 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12132
11043
  }))))));
12133
11044
  };
12134
11045
 
12135
- var _BUTTONS_STYLE_VALUES;
12136
- // Text color, Background color, Border color, Hovered color
12137
- 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);
12138
- var getLinkStyle = function getLinkStyle(link, defaultTextColor, defaultBackgroundColor, defaultBorderColor, defaultHoveredColor, defaultPressedColor) {
12139
- var _link$textColor, _link$backgroundColor, _link$borderColor, _link$hoveredColor, _link$pressedColor;
12140
- return {
12141
- textColor: (_link$textColor = link.textColor) != null ? _link$textColor : defaultTextColor,
12142
- backgroundColor: (_link$backgroundColor = link.backgroundColor) != null ? _link$backgroundColor : defaultBackgroundColor,
12143
- borderColor: (_link$borderColor = link.borderColor) != null ? _link$borderColor : defaultBorderColor,
12144
- hoveredColor: (_link$hoveredColor = link.hoveredColor) != null ? _link$hoveredColor : defaultHoveredColor,
12145
- pressedColor: (_link$pressedColor = link.pressedColor) != null ? _link$pressedColor : defaultPressedColor
12146
- };
12147
- };
12148
- var processSlideLinks = function processSlideLinks(links) {
12149
- return links.flatMap(function (link) {
12150
- if (!link) return [];
12151
- var linkStyle = link.buttonType ? getLinkStyle.apply(void 0, [link].concat(BUTTONS_STYLE_VALUES[link.buttonType])) : {};
12152
- return _extends({}, link, linkStyle);
12153
- });
12154
- };
12155
- var isVideoSlide = function isVideoSlide(slideMedia) {
12156
- return slideMedia.video !== undefined;
12157
- };
12158
-
12159
- var VideoSlide = function VideoSlide(_ref) {
12160
- var index = _ref.index,
12161
- settings = _ref.settings,
12162
- isCurrentSlide = _ref.isCurrentSlide;
12163
- var viewport = useViewport();
12164
- var videoComponentId = settings.key + "-video-" + index;
12165
- var videoUrl = viewport.isMobile ? settings.video.mobile : settings.video.desktop;
12166
- var posterUrl = viewport.isMobile ? settings.poster.mobile : settings.poster.desktop;
12167
- // eslint-disable-next-line jsx-a11y/media-has-caption
12168
- var video = /*#__PURE__*/React__default.createElement("video", {
12169
- id: videoComponentId,
12170
- src: videoUrl,
12171
- poster: posterUrl
12172
- });
12173
- return /*#__PURE__*/React__default.createElement(VideoWithControlsWrapper, {
12174
- isCurrentSlide: isCurrentSlide
12175
- }, /*#__PURE__*/React__default.createElement(VideoWithControls$1, {
12176
- video: video,
12177
- settings: settings
12178
- }));
12179
- };
12180
- var SwipeCarousel = function SwipeCarousel(_ref2) {
12181
- var slidesMedia = _ref2.slidesMedia,
12182
- currentSlide = _ref2.currentSlide,
12183
- carouselRef = _ref2.carouselRef,
12184
- hasMultipleSlides = _ref2.hasMultipleSlides,
12185
- setCurrentSlide = _ref2.setCurrentSlide;
12186
- var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12187
- return !isVideoSlide(slide);
12188
- });
12189
- return /*#__PURE__*/React__default.createElement(Swipe, {
12190
- ref: carouselRef,
12191
- infinite: hasMultipleSlides && hasOnlyImageSlides,
12192
- onIndexChange: setCurrentSlide,
12193
- "aria-roledescription": "carousel"
12194
- }, slidesMedia.map(function (mediaContent, index) {
12195
- return /*#__PURE__*/React__default.createElement("div", {
12196
- className: "swiper-slide",
12197
- key: mediaContent.key,
12198
- "aria-hidden": index !== currentSlide,
12199
- "aria-roledescription": "slide"
12200
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
12201
- aspectRatio: AspectRatio['4:3']
12202
- }, isVideoSlide(mediaContent) ? (/*#__PURE__*/React__default.createElement(VideoSlide, {
12203
- settings: mediaContent,
12204
- index: index,
12205
- isCurrentSlide: index === currentSlide
12206
- })) : (/*#__PURE__*/React__default.createElement("img", Object.assign({
12207
- alt: mediaContent.alt
12208
- }, mediaContent)))));
12209
- }));
12210
- };
12211
-
12212
- var HighlightsCarousel = function HighlightsCarousel(_ref) {
12213
- var logo = _ref.logo,
12214
- carouselTitle = _ref.carouselTitle,
12215
- slides = _ref.slides,
12216
- titleSemanticLevel = _ref.titleSemanticLevel,
12217
- className = _ref.className;
12218
- var slidesMedia = useMemo(function () {
12219
- return slides.map(function (_ref2) {
12220
- var mediaContent = _ref2.mediaContent;
12221
- return mediaContent;
12222
- });
12223
- }, []);
12224
- var _useState = useState(0),
12225
- currentSlide = _useState[0],
12226
- setCurrentSlide = _useState[1];
12227
- var currentSlideData = slides[currentSlide];
12228
- var links = currentSlideData.links,
12229
- auxiliaryCTA = currentSlideData.auxiliaryCTA;
12230
- var hasMultipleSlides = slidesMedia.length > 1;
12231
- var hasOnlyImageSlides = slidesMedia.every(function (slide) {
12232
- return !isVideoSlide(slide);
12233
- });
12234
- var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
12235
- var carouselRef = useRef(null);
12236
- var onNext = function onNext() {
12237
- var _carouselRef$current;
12238
- return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12239
- };
12240
- var onPrev = function onPrev() {
12241
- var _carouselRef$current2;
12242
- return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12243
- };
12244
- var handleClickInside = function handleClickInside(e) {
12245
- e.stopPropagation();
12246
- };
12247
- return /*#__PURE__*/React__default.createElement(HighlightsGrid, {
12248
- role: "region",
12249
- "aria-labelledby": carouselTitleId,
12250
- onClick: handleClickInside,
12251
- className: className
12252
- }, /*#__PURE__*/React__default.createElement(CarouselTitleWrapper, {
12253
- "data-testid": "carousel-title"
12254
- }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12255
- id: carouselTitleId
12256
- }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12257
- size: "small",
12258
- serif: true,
12259
- hierarchy: "h" + titleSemanticLevel
12260
- }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12261
- onClickNext: onNext,
12262
- onClickPrev: onPrev
12263
- }))), /*#__PURE__*/React__default.createElement(InfoWrapper, {
12264
- "data-testid": "info-wrapper"
12265
- }, /*#__PURE__*/React__default.createElement(InfoSection, {
12266
- logo: logo,
12267
- slide: currentSlideData,
12268
- currentSlideIndex: currentSlide
12269
- }), /*#__PURE__*/React__default.createElement(Buttons, {
12270
- links: links,
12271
- auxiliaryCTA: auxiliaryCTA
12272
- })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12273
- "data-testid": "carousel-wrapper"
12274
- }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
12275
- "data-testid": "rotator-buttons"
12276
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12277
- onClickNext: onNext,
12278
- onClickPrev: onPrev,
12279
- availablePrev: hasOnlyImageSlides || currentSlide !== 0,
12280
- availableNext: hasOnlyImageSlides || currentSlide !== slidesMedia.length - 1
12281
- }))), /*#__PURE__*/React__default.createElement(SwipeCarousel, {
12282
- slidesMedia: slidesMedia,
12283
- hasMultipleSlides: hasMultipleSlides,
12284
- carouselRef: carouselRef,
12285
- currentSlide: currentSlide,
12286
- setCurrentSlide: setCurrentSlide
12287
- })));
12288
- };
12289
-
12290
- function styleInject(css, ref) {
12291
- if ( ref === void 0 ) ref = {};
12292
- var insertAt = ref.insertAt;
12293
-
12294
- if (!css || typeof document === 'undefined') { return; }
12295
-
12296
- var head = document.head || document.getElementsByTagName('head')[0];
12297
- var style = document.createElement('style');
12298
- style.type = 'text/css';
12299
-
12300
- if (insertAt === 'top') {
12301
- if (head.firstChild) {
12302
- head.insertBefore(style, head.firstChild);
12303
- } else {
12304
- head.appendChild(style);
12305
- }
12306
- } else {
12307
- head.appendChild(style);
12308
- }
12309
-
12310
- if (style.styleSheet) {
12311
- style.styleSheet.cssText = css;
12312
- } else {
12313
- style.appendChild(document.createTextNode(css));
12314
- }
12315
- }
12316
-
12317
- 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";
12318
- styleInject(css_248z);
12319
-
12320
- 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";
12321
- styleInject(css_248z$1);
12322
-
12323
- 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";
12324
- var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
12325
- styleInject(css_248z$2);
12326
-
12327
- 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";
12328
- var streamThemeStyles = {"streamTheme":"stream-theme-module_streamTheme__lTfqQ"};
12329
- styleInject(css_248z$3);
12330
-
12331
- 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";
12332
- var cinemaThemeStyles = {"cinemaTheme":"cinema-theme-module_cinemaTheme__f5QFs"};
12333
- styleInject(css_248z$4);
12334
-
12335
- 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";
12336
- var schoolsThemeStyles = {"schoolsTheme":"schools-theme-module_schoolsTheme__CWHba"};
12337
- styleInject(css_248z$5);
12338
-
12339
- /* eslint-disable react/jsx-no-useless-fragment */
12340
- var getThemeClass = function getThemeClass(theme) {
12341
- // Always include the base (core) theme class
12342
- var baseThemeClass = coreThemeStyles.coreTheme;
12343
- var overrideClass = '';
12344
- switch (theme) {
12345
- case ThemeType.Core:
12346
- overrideClass = '';
12347
- break;
12348
- case ThemeType.Stream:
12349
- overrideClass = streamThemeStyles.streamTheme;
12350
- break;
12351
- case ThemeType.Cinema:
12352
- overrideClass = cinemaThemeStyles.cinemaTheme;
12353
- break;
12354
- case ThemeType.Schools:
12355
- overrideClass = schoolsThemeStyles.schoolsTheme;
12356
- break;
12357
- default:
12358
- overrideClass = '';
12359
- }
12360
- // Return the combined classes
12361
- return [baseThemeClass, overrideClass].filter(Boolean).join(' ');
12362
- };
12363
- var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
12364
- var theme = _ref.theme,
12365
- children = _ref.children;
12366
- var themeClass = getThemeClass(theme);
12367
- // Convert children to an array (assuming they accept a className prop)
12368
- var childrenArray = React__default.Children.toArray(children);
12369
- var themedChildren = childrenArray.map(function (child) {
12370
- return /*#__PURE__*/React__default.cloneElement(child, {
12371
- className: ((child.props.className || '') + " " + themeClass).trim(),
12372
- theme: theme
12373
- });
12374
- });
12375
- return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
12376
- };
12377
-
12378
- var _excluded$v = ["logo", "slides"];
12379
- var HighlightsCinema = function HighlightsCinema(_ref) {
12380
- var logo = _ref.logo,
12381
- slides = _ref.slides,
12382
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12383
- var slidesWithLinks = slides.map(function (slide) {
12384
- var links = processSlideLinks(slide.links);
12385
- return _extends({}, slide, {
12386
- links: links
12387
- });
12388
- });
12389
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12390
- theme: ThemeType.Cinema
12391
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12392
- slides: slidesWithLinks,
12393
- logo: logo ? /*#__PURE__*/React__default.createElement(CinemaBadge, {
12394
- align: "left"
12395
- }) : null
12396
- })));
12397
- };
12398
-
12399
- var _excluded$w = ["slides"];
12400
- var HighlightsCore = function HighlightsCore(_ref) {
12401
- var slides = _ref.slides,
12402
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12403
- var slidesWithLinks = slides.map(function (slide) {
12404
- var links = processSlideLinks(slide.links);
12405
- return _extends({}, slide, {
12406
- links: links
12407
- });
12408
- });
12409
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12410
- theme: ThemeType.Core
12411
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12412
- slides: slidesWithLinks
12413
- })));
12414
- };
12415
-
12416
- var _excluded$x = ["logo", "slides"];
12417
- var HighlightsStream = function HighlightsStream(_ref) {
12418
- var logo = _ref.logo,
12419
- slides = _ref.slides,
12420
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12421
- var slidesWithLinks = slides.map(function (slide) {
12422
- var links = processSlideLinks(slide.links);
12423
- return _extends({}, slide, {
12424
- links: links
12425
- });
12426
- });
12427
- return /*#__PURE__*/React__default.createElement(HarmonicThemeProvider, {
12428
- theme: ThemeType.Stream
12429
- }, /*#__PURE__*/React__default.createElement(HighlightsCarousel, Object.assign({}, rest, {
12430
- slides: slidesWithLinks,
12431
- logo: logo ? /*#__PURE__*/React__default.createElement(StreamBadge, {
12432
- align: "left"
12433
- }) : null
12434
- })));
12435
- };
12436
-
12437
- var _templateObject$1o, _templateObject3$S;
12438
- 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"])));
12439
- 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"])));
12440
-
12441
- var MinimalCarousel = function MinimalCarousel(_ref) {
12442
- var children = _ref.children;
12443
- var carouselRef = useRef(null);
12444
- var hasMultipleChildren = React__default.Children.count(children) > 1;
12445
- var onNext = function onNext() {
12446
- var _carouselRef$current;
12447
- return (_carouselRef$current = carouselRef.current) == null ? void 0 : _carouselRef$current.nextSlide();
12448
- };
12449
- var onPrev = function onPrev() {
12450
- var _carouselRef$current2;
12451
- return (_carouselRef$current2 = carouselRef.current) == null ? void 0 : _carouselRef$current2.prevSlide();
12452
- };
12453
- return /*#__PURE__*/React__default.createElement(CarouselWrapper$1, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
12454
- columnStartDesktop: 1,
12455
- columnSpanDesktop: 16,
12456
- columnStartDevice: 1,
12457
- columnSpanDevice: 14
12458
- }, /*#__PURE__*/React__default.createElement(Swipe, {
12459
- ref: carouselRef,
12460
- infinite: hasMultipleChildren,
12461
- "data-testid": "carousel-swipe"
12462
- }, React__default.Children.toArray(children).map(function (child, index) {
12463
- return /*#__PURE__*/React__default.createElement("div", {
12464
- key: "swipe-minimal-carousel-slide-" + index
12465
- }, child);
12466
- })))), hasMultipleChildren && (/*#__PURE__*/React__default.createElement(ButtonsWrapper$1, {
12467
- "data-testid": "carousel-buttons-wrapper"
12468
- }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12469
- onClickNext: onNext,
12470
- onClickPrev: onPrev
12471
- }))));
12472
- };
12473
-
12474
- var _templateObject$1p;
12475
- 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) {
12476
11048
  var theme = _ref.theme;
12477
11049
  return theme.colors.primary;
12478
11050
  }, function (_ref2) {
@@ -13419,12 +11991,62 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1p || (_templa
13419
11991
  return theme.footer.tablet.paddingBottom;
13420
11992
  }, devices.desktop, devices.largeDesktop);
13421
11993
 
13422
- /* ~~~~~~~ new harmonic types ~~~~~~~ */
13423
- var HarmonicSizes = {
13424
- Small: 'small',
13425
- Medium: 'medium',
13426
- 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);
13427
12049
  };
13428
12050
 
13429
- 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 };
13430
12052
  //# sourceMappingURL=harmonic.esm.js.map