@royaloperahouse/harmonic 0.18.2 → 0.18.3

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.
@@ -6460,242 +6460,871 @@ var Cards = function Cards(_ref) {
6460
6460
  }));
6461
6461
  };
6462
6462
 
6463
- var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7;
6464
- var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
6465
- var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])), devices.mobileAndTablet);
6466
- var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
6467
- var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
6468
- var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
6469
- var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6470
- var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
6463
+ var _templateObject$J, _templateObject2$x, _templateObject3$m, _templateObject4$j, _templateObject5$f, _templateObject6$a, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject0$3, _templateObject1$2, _templateObject10$2;
6464
+ var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n flex-direction: column-reverse;\n gap: 15px;\n }\n"])), devices.mobile);
6465
+ var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 32px;\n\n @media ", " {\n gap: 15px;\n }\n"])), devices.mobile);
6466
+ var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 44px;\n display: flex;\n align-items: center;\n"])));
6467
+ var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
6468
+ var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 20px;\n overflow-x: scroll;\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n\n @media ", " {\n flex-direction: column;\n gap: 10px;\n }\n"])), devices.mobile);
6469
+ var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: baseline;\n gap: 32px;\n\n .mobile-only {\n visibility: hidden;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n }\n\n @media ", " {\n .mobile-only {\n visibility: visible;\n padding-block: 24px;\n font-size: 17px;\n line-height: 24px;\n }\n\n flex-direction: row-reverse;\n gap: unset;\n justify-content: space-between;\n border-block-end: 2px solid var(--base-color-light-grey);\n\n :has(.mobile-only) {\n justify-content: left;\n }\n\n :not(:has(.mobile-only)) {\n padding-block: 12px;\n }\n\n a {\n width: fit-content;\n }\n }\n"])), devices.mobile);
6470
+ var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n margin-block-start: 2px;\n margin-inline: 2px;\n\n p {\n font-size: 14px;\n line-height: 17px;\n }\n\n :focus-visible {\n outline: none;\n\n & > div:first-child {\n outline: 2px solid var(--color-base-black);\n }\n }\n\n @media ", " {\n flex-direction: row;\n gap: 20px;\n margin-block-end: 2px;\n margin-inline-end: unset;\n\n p {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
6471
+ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n width: 86px;\n height: 86px;\n min-width: 86px;\n border: 4px solid;\n border-color: ", ";\n border-radius: 50%;\n background: var(--color-base-white);\n position: relative;\n box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
6472
+ var isSelected = _ref.isSelected;
6473
+ return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
6474
+ });
6475
+ var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n margin: 4px;\n object-fit: cover;\n border-radius: 50%;\n\n // This is really specific to the SVG that we have been provided\n // as a fallback person image. I don't think there's a simpler and\n // more general way to handle this, so if we're given a new placeholder\n // image later, we may have to change the scale here\n ", "\n"])), function (_ref2) {
6476
+ var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
6477
+ return isDefaultPlaceholder && "\n transform: scale(1.24);\n ";
6478
+ });
6479
+ var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 86px;\n display: flex;\n flex-wrap: wrap;\n text-align: center;\n\n @media ", " {\n max-width: unset;\n text-align: left;\n font-size: 17px;\n line-height: 24px;\n }\n"])), devices.mobile);
6480
+ var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--color-primary-red);\n display: ", ";\n position: absolute;\n top: 6px;\n right: -6px;\n align-items: center;\n justify-content: center;\n\n span {\n display: ", ";\n width: 65%;\n height: 65%;\n }\n"])), function (_ref3) {
6481
+ var isSelected = _ref3.isSelected;
6482
+ return isSelected ? 'flex' : 'none';
6483
+ }, function (_ref4) {
6484
+ var isSelected = _ref4.isSelected;
6485
+ return isSelected ? 'flex' : 'none';
6486
+ });
6487
+ var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: hidden;\n\n @media ", " {\n visibility: visible;\n min-height: var(--button-height);\n }\n"])), devices.mobile);
6471
6488
 
6472
- var ContactCard = function ContactCard(_ref) {
6473
- var title = _ref.title,
6474
- titleSuffix = _ref.titleSuffix,
6475
- description = _ref.description,
6476
- email = _ref.email,
6477
- phone = _ref.phone,
6478
- website = _ref.website,
6479
- address = _ref.address,
6480
- className = _ref.className;
6481
- var hasDetails = email || phone || website;
6482
- var addressString = address == null ? void 0 : address.substring(0, 110);
6483
- var descriptionText = description == null ? void 0 : description.substring(0, 110);
6484
- return /*#__PURE__*/React__default.createElement("div", {
6485
- className: className
6486
- }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
6487
- columnStartDesktop: 3,
6488
- columnSpanDesktop: 12,
6489
- columnStartDevice: 1,
6490
- columnSpanDevice: 14
6491
- }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
6492
- "data-testid": "contact-card-wrapper"
6493
- }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6494
- size: "large"
6495
- }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6496
- size: "small"
6497
- }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
6498
- size: "small"
6499
- }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6500
- size: "large"
6501
- }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
6502
- "data-testid": "contact-card-details-block"
6503
- }, email && (/*#__PURE__*/React__default.createElement("a", {
6504
- tabIndex: 0,
6505
- href: "mailto:" + email
6506
- }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
6507
- tabIndex: 0,
6508
- href: "tel:" + phone
6509
- }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
6510
- tabIndex: 0,
6511
- href: website,
6512
- target: "_blank",
6513
- rel: "noreferrer"
6514
- }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
6515
- "data-testid": "contact-card-address-block"
6516
- }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
6517
- size: "large"
6518
- }, addressString)))))))));
6519
- };
6489
+ var defaultPlaceholderImage = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23c9c9c9%3Bstroke%3A%23c9c9c9%3B%7D.cls-1%2C.cls-2%2C.cls-3%7Bstroke-miterlimit%3A10%3B%7D.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-2%2C.cls-3%7Bfill%3A%2372767c%3Bstroke%3A%2372767c%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M50.42%2C89.58c21.86%2C0%2C39.58-17.72%2C39.58-39.58S72.28%2C10.42%2C50.42%2C10.42%2C10.83%2C28.14%2C10.83%2C50s17.72%2C39.58%2C39.58%2C39.58Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M50.4%2C89.58c10.88%2C0%2C20.75-4.42%2C27.92-11.54-4.96-10.46-15.58-17.71-27.92-17.71s-22.96%2C7.25-27.92%2C17.71c7.17%2C7.12%2C17%2C11.54%2C27.92%2C11.54Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.4%2C55.67c8.05%2C0%2C14.58-6.53%2C14.58-14.58s-6.53-14.58-14.58-14.58-14.58%2C6.53-14.58%2C14.58%2C6.53%2C14.58%2C14.58%2C14.58Z%22%2F%3E%3C%2Fsvg%3E";
6520
6490
 
6521
- var _templateObject$K, _templateObject2$y, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b;
6522
- var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
6523
- var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
6524
- return props.clickable ? 'pointer' : 'default';
6525
- }, devices.mobile);
6526
- var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
6527
- var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
6528
- return props.showImage ? 2 : '1 / span 4';
6529
- }, devices.mobile);
6530
- var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
6531
- var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__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) {
6532
- 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 ";
6533
- });
6491
+ var _templateObject$K, _templateObject2$y;
6492
+ var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
6493
+ var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
6494
+ var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
6495
+ var transitioning = _ref.transitioning;
6496
+ return transitioning ? 'transform 0.3s ease' : 'none';
6497
+ }, function (_ref2) {
6498
+ var translateX = _ref2.translateX;
6499
+ return translateX + "px";
6500
+ }, SWIPE_SLIDE_CLASS_NAME);
6534
6501
 
6535
- /* eslint-disable no-shadow */
6536
- (function (CarouselType) {
6537
- CarouselType["Image"] = "image";
6538
- CarouselType["SmallCard"] = "SmallCard";
6539
- CarouselType["LargeCard"] = "LargeCard";
6540
- CarouselType["PersonCard"] = "PersonCard";
6541
- })(exports.CarouselType || (exports.CarouselType = {}));
6502
+ /**
6503
+ * Generates a random string in the format XXX-XXX.
6504
+ * Does not meet UUID standards.
6505
+ * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
6506
+ *
6507
+ * @return {string} A random string in the format XXX-XXX.
6508
+ */
6509
+ var generateDomElementId = function generateDomElementId() {
6510
+ var randomPart = Math.floor(100 + Math.random() * 900).toString();
6511
+ var datePart = Date.now().toString().slice(-3);
6512
+ return randomPart + "-" + datePart;
6513
+ };
6542
6514
 
6543
- var clickHandler = function clickHandler(link) {
6544
- if (link != null && link.href && document) {
6545
- document.location.href = link.href;
6546
- }
6515
+ var DISABLED_TABBING_TAGS = 'a, button';
6516
+ var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
6517
+ if (!element) return;
6518
+ var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
6519
+ focusables.forEach(function (el) {
6520
+ if (shouldDisable) el.setAttribute('tabindex', '-1');
6521
+ });
6547
6522
  };
6548
- var ContentSummary = function ContentSummary(_ref) {
6549
- var title = _ref.title,
6550
- subtitle = _ref.subtitle,
6551
- bodyText = _ref.bodyText,
6552
- link = _ref.link,
6553
- image = _ref.image,
6554
- _ref$largeTitle = _ref.largeTitle,
6555
- largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
6556
- _ref$showImage = _ref.showImage,
6557
- showImage = _ref$showImage === void 0 ? false : _ref$showImage,
6558
- _ref$truncate = _ref.truncate,
6559
- truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
6560
- _ref$fullyClickable = _ref.fullyClickable,
6561
- fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
6562
- _ref$headerSemanticLe = _ref.headerSemanticLevel,
6563
- headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
6564
- className = _ref.className;
6565
- return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
6566
- className: className,
6567
- onClick: function onClick() {
6568
- if (fullyClickable) {
6569
- clickHandler(link);
6570
- }
6571
- },
6572
- clickable: fullyClickable,
6573
- "data-roh": "content-summary-item"
6574
- }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
6575
- "data-testid": "image-wrapper"
6576
- }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
6577
- href: link.href
6578
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6579
- aspectRatio: exports.AspectRatio['4:3']
6580
- }, /*#__PURE__*/React__default.createElement("img", {
6581
- src: image.src,
6582
- alt: image.alt
6583
- })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6584
- aspectRatio: exports.AspectRatio['4:3']
6585
- }, /*#__PURE__*/React__default.createElement("img", {
6586
- src: image.src,
6587
- alt: image.alt
6588
- }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
6589
- showImage: showImage
6590
- }, title && (/*#__PURE__*/React__default.createElement("div", {
6591
- "data-testid": largeTitle ? 'large-title' : 'default-title'
6592
- }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6593
- size: "large",
6594
- hierarchy: headerSemanticLevel
6595
- }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
6596
- size: "medium",
6597
- hierarchy: headerSemanticLevel
6598
- }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
6599
- size: "large"
6600
- }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
6601
- size: "large"
6602
- }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
6603
- truncate: truncate,
6604
- dangerouslySetInnerHTML: {
6605
- __html: bodyText
6606
- },
6607
- "data-testid": "body-text"
6608
- })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
6609
- className: "content-summary-text-link"
6610
- }), link.text))));
6523
+ var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
6524
+ return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
6611
6525
  };
6612
-
6613
- var _templateObject$L, _templateObject2$z, _templateObject3$o, _templateObject4$l, _templateObject5$h;
6614
- var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__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) {
6615
- var imageToLeft = _ref.imageToLeft;
6616
- return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
6617
- }, devices.mobile);
6618
- var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
6619
- var imageToLeft = _ref2.imageToLeft;
6620
- return imageToLeft ? 'left' : 'right';
6621
- }, devices.mobile);
6622
- var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
6623
- var imageToLeft = _ref3.imageToLeft;
6624
- return imageToLeft ? 'right' : 'left';
6625
- }, devices.mobile);
6626
- var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
6627
- var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\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"])));
6628
-
6629
- var Editorial = function Editorial(_ref) {
6630
- var _ref$imagePosition = _ref.imagePosition,
6631
- imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
6632
- subtitle = _ref.subtitle,
6633
- text = _ref.text,
6634
- children = _ref.children,
6635
- className = _ref.className;
6636
- var imageToLeft = imagePosition === 'left';
6637
- return /*#__PURE__*/React__default.createElement(Grid, {
6638
- className: className,
6639
- "data-testid": "editorial-component"
6640
- }, /*#__PURE__*/React__default.createElement(GridItem, {
6641
- columnStartDesktop: 3,
6642
- columnSpanDesktop: 12,
6643
- columnStartDevice: 2,
6644
- columnSpanDevice: 12
6645
- }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
6646
- imageToLeft: imageToLeft
6647
- }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
6648
- "data-testid": "image-wrapper",
6649
- imageToLeft: imageToLeft
6650
- }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
6651
- aspectRatio: exports.AspectRatio['1:1']
6652
- }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
6653
- "data-testid": "text-wrapper",
6654
- imageToLeft: imageToLeft
6655
- }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
6656
- tag: "span"
6657
- }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
6658
- tag: "div",
6659
- size: "large",
6660
- dangerouslySetInnerHTML: {
6661
- __html: text
6526
+ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
6527
+ var widthSoFar = 0;
6528
+ var visible = [];
6529
+ for (var i = currentIndex; i < slidesLength; i++) {
6530
+ var _slideWidths$i;
6531
+ var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
6532
+ if (widthSoFar + width > containerWidth) break;
6533
+ visible.push(i);
6534
+ widthSoFar += width;
6535
+ }
6536
+ return visible;
6537
+ };
6538
+ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
6539
+ var absDelta = Math.abs(delta);
6540
+ var movedSlides = 0;
6541
+ var accumulated = 0;
6542
+ for (var i = 0; i < slideWidths.length; i++) {
6543
+ accumulated += slideWidths[i];
6544
+ // Allow partial slide (e.g. 50% of next slide) to count
6545
+ var partialThreshold = slideWidths[i] * 0.5;
6546
+ if (absDelta > accumulated - partialThreshold) {
6547
+ movedSlides++;
6548
+ } else {
6549
+ break;
6662
6550
  }
6663
- })))));
6551
+ }
6552
+ return movedSlides;
6664
6553
  };
6665
6554
 
6666
- var _templateObject$M, _templateObject2$A, _templateObject3$p;
6667
- var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
6668
- var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
6669
- var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
6670
-
6671
- var _excluded$h = ["text", "onClick"];
6672
- var HotFilters = function HotFilters(_ref) {
6673
- var items = _ref.items,
6674
- className = _ref.className,
6675
- _ref$selectedIndex = _ref.selectedIndex,
6676
- selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
6677
- onSelect = _ref.onSelect;
6678
- var handleClick = React__default.useCallback(function (index, onClick) {
6679
- if (onSelect) onSelect(index);
6680
- if (onClick) onClick();
6681
- }, [onSelect]);
6682
- return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
6683
- className: className
6684
- }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
6685
- var text = item.text,
6686
- _onClick = item.onClick,
6687
- rest = _objectWithoutPropertiesLoose(item, _excluded$h);
6688
- var isSelected = index === selectedIndex;
6689
- return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
6690
- key: index,
6691
- onClick: function onClick() {
6692
- return handleClick(index, _onClick);
6693
- },
6694
- iconName: isSelected ? 'Confirm' : undefined,
6695
- backgroundColor: isSelected ? 'base-black' : 'base-white',
6696
- textColor: isSelected ? 'base-white' : 'base-black',
6697
- hoveredColor: "base-black",
6698
- pressedColor: "black-pressed",
6555
+ var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
6556
+ var MAX_CLONES_NUMBER = 6;
6557
+ var CLICK_DRAG_THRESHOLD = 10;
6558
+ var getClonesCount = function getClonesCount(infinite, childrenLength) {
6559
+ if (!infinite) return 0;
6560
+ return Math.min(childrenLength, MAX_CLONES_NUMBER);
6561
+ };
6562
+ var getSlidedWidth = function getSlidedWidth(slide) {
6563
+ if (!slide) return 0;
6564
+ var style = window.getComputedStyle(slide);
6565
+ var marginLeft = parseFloat(style.marginLeft) || 0;
6566
+ var marginRight = parseFloat(style.marginRight) || 0;
6567
+ return slide.getBoundingClientRect().width + marginLeft + marginRight;
6568
+ };
6569
+ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
6570
+ var children = _ref.children,
6571
+ _ref$infinite = _ref.infinite,
6572
+ infinite = _ref$infinite === void 0 ? false : _ref$infinite,
6573
+ onIndexChange = _ref.onIndexChange,
6574
+ _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
6575
+ slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
6576
+ _ref$slidesAriaHidden = _ref.slidesAriaHidden,
6577
+ slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
6578
+ onActiveChange = _ref.onActiveChange,
6579
+ onOverflowChange = _ref.onOverflowChange,
6580
+ props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
6581
+ var containerRef = React.useRef(null);
6582
+ var childRefs = React.useRef([]);
6583
+ var startX = React.useRef(0);
6584
+ var currentTranslate = React.useRef(0);
6585
+ var isDragging = React.useRef(false);
6586
+ var isMouseDown = React.useRef(false);
6587
+ var isActive = React.useRef(false);
6588
+ var isClickPrevented = React.useRef(false);
6589
+ var uniqueIdRef = React.useRef(generateDomElementId());
6590
+ var _useState = React.useState(null),
6591
+ dragTranslateX = _useState[0],
6592
+ setDragTranslateX = _useState[1];
6593
+ var _useState2 = React.useState(false),
6594
+ transitioning = _useState2[0],
6595
+ setTransitioning = _useState2[1];
6596
+ var _useState3 = React.useState([]),
6597
+ slideWidths = _useState3[0],
6598
+ setSlideWidths = _useState3[1];
6599
+ var _useState4 = React.useState(0),
6600
+ containerWidth = _useState4[0],
6601
+ setContainerWidth = _useState4[1];
6602
+ var _useMemo = React.useMemo(function () {
6603
+ var count = getClonesCount(infinite, children.length);
6604
+ var leftClones = infinite ? children.slice(-count) : [];
6605
+ var rightClones = infinite ? children.slice(0, count) : [];
6606
+ var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
6607
+ return {
6608
+ slides: allSlides,
6609
+ clonesCount: count
6610
+ };
6611
+ }, [children, infinite]),
6612
+ slides = _useMemo.slides,
6613
+ clonesCount = _useMemo.clonesCount;
6614
+ var _useState5 = React.useState(infinite ? clonesCount : 0),
6615
+ currentIndex = _useState5[0],
6616
+ setCurrentIndex = _useState5[1];
6617
+ React.useEffect(function () {
6618
+ var handler = function handler(e) {
6619
+ if (isClickPrevented.current) {
6620
+ e.preventDefault();
6621
+ e.stopPropagation();
6622
+ }
6623
+ };
6624
+ var containerElement = containerRef.current;
6625
+ containerElement == null || containerElement.addEventListener('click', handler, true);
6626
+ return function () {
6627
+ return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
6628
+ };
6629
+ }, []);
6630
+ React.useEffect(function () {
6631
+ if (!onIndexChange) return;
6632
+ if (!infinite) {
6633
+ onIndexChange(currentIndex);
6634
+ } else {
6635
+ var offset = currentIndex - clonesCount + children.length;
6636
+ var realIndex = offset % children.length;
6637
+ onIndexChange(realIndex);
6638
+ }
6639
+ }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
6640
+ var updateDimensions = React.useCallback(function () {
6641
+ var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
6642
+ var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
6643
+ setContainerWidth(cw);
6644
+ setSlideWidths(widths);
6645
+ if (!infinite) {
6646
+ var totalWidth = widths.reduce(function (acc, w) {
6647
+ return acc + w;
6648
+ }, 0);
6649
+ var visibleSpace = cw - (slidesOffsetBefore || 0);
6650
+ var overflow = totalWidth > Math.max(0, visibleSpace);
6651
+ onOverflowChange == null || onOverflowChange(overflow);
6652
+ }
6653
+ }, []);
6654
+ React.useEffect(function () {
6655
+ var animationFrameRequestId = requestAnimationFrame(updateDimensions);
6656
+ return function () {
6657
+ return cancelAnimationFrame(animationFrameRequestId);
6658
+ };
6659
+ }, [children]);
6660
+ React.useEffect(function () {
6661
+ var observer = new ResizeObserver(updateDimensions);
6662
+ if (containerRef.current) observer.observe(containerRef.current);
6663
+ return function () {
6664
+ return observer.disconnect();
6665
+ };
6666
+ }, [children]);
6667
+ var setIsActive = function setIsActive() {
6668
+ if (!isActive.current) {
6669
+ isActive.current = true;
6670
+ onActiveChange == null || onActiveChange(true);
6671
+ }
6672
+ };
6673
+ var getTranslateX = function getTranslateX() {
6674
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
6675
+ return acc + width;
6676
+ }, 0);
6677
+ return (slidesOffsetBefore || 0) - widthsBefore;
6678
+ };
6679
+ var getTranslateForIndex = function getTranslateForIndex(index) {
6680
+ var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
6681
+ return acc + width;
6682
+ }, 0);
6683
+ return (slidesOffsetBefore || 0) - widthsBefore;
6684
+ };
6685
+ var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
6686
+ var delta = currentTranslate.current - getTranslateX();
6687
+ var direction = delta > 0 ? -1 : 1;
6688
+ var movedSlides = getMovedSlides(delta, slideWidths);
6689
+ if (Math.abs(delta) > 20) {
6690
+ movedSlides = Math.max(1, movedSlides);
6691
+ var targetIndex = currentIndex + direction * movedSlides;
6692
+ var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
6693
+ if (!infinite) {
6694
+ currentTranslate.current = getTranslateForIndex(finalIndex);
6695
+ setDragTranslateX(null);
6696
+ }
6697
+ setTransitioning(true);
6698
+ setCurrentIndex(finalIndex);
6699
+ } else {
6700
+ setTransitioning(true);
6701
+ setCurrentIndex(function (prev) {
6702
+ return prev;
6703
+ });
6704
+ }
6705
+ setDragTranslateX(null);
6706
+ };
6707
+ var canMoveNext = function canMoveNext() {
6708
+ if (infinite) return true;
6709
+ if (slideWidths.length === 0 || containerWidth === 0) return false;
6710
+ var totalWidth = slideWidths.reduce(function (acc, w) {
6711
+ return acc + w;
6712
+ }, 0);
6713
+ var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
6714
+ return acc + w;
6715
+ }, 0);
6716
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6717
+ var remainingToRight = totalWidth - widthsBefore - visibleSpace;
6718
+ var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6719
+ var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
6720
+ var nextIndex = lastVisibleIndex + 1;
6721
+ if (nextIndex >= slideWidths.length) return false;
6722
+ var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
6723
+ if (nextSlideWidth === 0) return false;
6724
+ var EPS = 1; // pixel tolerance
6725
+ // full next slide fits
6726
+ if (remainingToRight + EPS >= nextSlideWidth) return true;
6727
+ return remainingToRight > 0;
6728
+ };
6729
+ var handleTransitionEnd = function handleTransitionEnd() {
6730
+ setTransitioning(false);
6731
+ if (!infinite) return;
6732
+ if (currentIndex >= children.length + clonesCount) {
6733
+ setCurrentIndex(clonesCount);
6734
+ } else if (currentIndex < clonesCount) {
6735
+ setCurrentIndex(children.length + currentIndex);
6736
+ }
6737
+ };
6738
+ var goToPrev = function goToPrev() {
6739
+ if (transitioning) return;
6740
+ setIsActive();
6741
+ setTransitioning(true);
6742
+ setCurrentIndex(function (prev) {
6743
+ var target = infinite ? prev - 1 : Math.max(0, prev - 1);
6744
+ if (!infinite) {
6745
+ currentTranslate.current = getTranslateForIndex(target);
6746
+ setDragTranslateX(null);
6747
+ }
6748
+ return target;
6749
+ });
6750
+ };
6751
+ var goToNext = function goToNext() {
6752
+ if (transitioning || !canMoveNext()) return;
6753
+ setIsActive();
6754
+ setTransitioning(true);
6755
+ setCurrentIndex(function (prev) {
6756
+ var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
6757
+ if (!infinite) {
6758
+ currentTranslate.current = getTranslateForIndex(target);
6759
+ setDragTranslateX(null);
6760
+ }
6761
+ return target;
6762
+ });
6763
+ };
6764
+ React.useImperativeHandle(ref, function () {
6765
+ return {
6766
+ nextSlide: goToNext,
6767
+ prevSlide: goToPrev,
6768
+ hasOverflow: function hasOverflow() {
6769
+ var totalWidth = slideWidths.reduce(function (acc, w) {
6770
+ return acc + w;
6771
+ }, 0);
6772
+ var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
6773
+ return totalWidth > Math.max(0, visibleSpace);
6774
+ },
6775
+ hasNext: function hasNext() {
6776
+ return canMoveNext();
6777
+ }
6778
+ };
6779
+ });
6780
+ var handleTouchStart = function handleTouchStart(e) {
6781
+ setIsActive();
6782
+ startX.current = e.touches[0].clientX;
6783
+ isDragging.current = true;
6784
+ isClickPrevented.current = false;
6785
+ setTransitioning(false);
6786
+ };
6787
+ var handleTouchMove = function handleTouchMove(e) {
6788
+ if (!isDragging.current) return;
6789
+ var deltaX = e.touches[0].clientX - startX.current;
6790
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6791
+ isClickPrevented.current = true;
6792
+ }
6793
+ var visualOffset = getTranslateX() + deltaX;
6794
+ currentTranslate.current = visualOffset;
6795
+ setDragTranslateX(visualOffset);
6796
+ };
6797
+ var handleTouchEnd = function handleTouchEnd() {
6798
+ isDragging.current = false;
6799
+ if (isClickPrevented.current) {
6800
+ navigateOnSwipeEnd();
6801
+ } else {
6802
+ setDragTranslateX(null);
6803
+ }
6804
+ };
6805
+ var handleMouseMove = function handleMouseMove(e) {
6806
+ if (!isDragging.current || !isMouseDown.current || transitioning) return;
6807
+ var deltaX = e.clientX - startX.current;
6808
+ if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
6809
+ isClickPrevented.current = true;
6810
+ }
6811
+ var visualOffset = getTranslateX() + deltaX;
6812
+ currentTranslate.current = visualOffset;
6813
+ setDragTranslateX(visualOffset);
6814
+ };
6815
+ var _handleMouseUp = function handleMouseUp() {
6816
+ if (!isMouseDown.current) return;
6817
+ isMouseDown.current = false;
6818
+ isDragging.current = false;
6819
+ if (isClickPrevented.current) {
6820
+ navigateOnSwipeEnd();
6821
+ } else {
6822
+ setDragTranslateX(null);
6823
+ }
6824
+ window.removeEventListener('mousemove', handleMouseMove);
6825
+ window.removeEventListener('mouseup', _handleMouseUp);
6826
+ };
6827
+ var handleMouseDown = function handleMouseDown(e) {
6828
+ if (transitioning || e.button !== 0) return;
6829
+ e.preventDefault();
6830
+ setIsActive();
6831
+ startX.current = e.clientX;
6832
+ isDragging.current = true;
6833
+ isMouseDown.current = true;
6834
+ isClickPrevented.current = false;
6835
+ setTransitioning(false);
6836
+ window.addEventListener('mousemove', handleMouseMove);
6837
+ window.addEventListener('mouseup', _handleMouseUp);
6838
+ };
6839
+ var onSlideFocus = function onSlideFocus(isVisible, index) {
6840
+ if (!isVisible) {
6841
+ setCurrentIndex(index);
6842
+ }
6843
+ };
6844
+ var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
6845
+ return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
6846
+ ref: containerRef,
6847
+ className: "swipe",
6848
+ onTouchStart: handleTouchStart,
6849
+ onTouchMove: handleTouchMove,
6850
+ onTouchEnd: handleTouchEnd,
6851
+ onMouseDown: handleMouseDown,
6852
+ "aria-roledescription": "carousel",
6853
+ role: "list"
6854
+ }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
6855
+ className: "swipe-track-wrapper",
6856
+ translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
6857
+ transitioning: transitioning && dragTranslateX === null,
6858
+ onTransitionEnd: handleTransitionEnd
6859
+ }, slides.map(function (child, index) {
6860
+ var isVisible = visibleIndexes.includes(index);
6861
+ var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
6862
+ return /*#__PURE__*/React__default.createElement("div", {
6863
+ key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
6864
+ className: SWIPE_SLIDE_CLASS_NAME,
6865
+ "aria-hidden": slidesAriaHidden || isClone,
6866
+ "aria-roledescription": "slide",
6867
+ role: "listitem",
6868
+ ref: function ref(el) {
6869
+ childRefs.current[index] = el;
6870
+ disableTabbingInside(el, isClone);
6871
+ },
6872
+ onFocus: function onFocus() {
6873
+ return onSlideFocus(isVisible, index);
6874
+ }
6875
+ }, child);
6876
+ })));
6877
+ });
6878
+ Swipe.displayName = 'Swipe';
6879
+
6880
+ var _excluded$i = ["name", "image", "onClick"];
6881
+ var CastFilters = function CastFilters(_ref) {
6882
+ var cast = _ref.cast,
6883
+ headingText = _ref.headingText,
6884
+ ctaText = _ref.ctaText,
6885
+ textLinkText = _ref.textLinkText,
6886
+ emptySelectionText = _ref.emptySelectionText,
6887
+ placeholderImage = _ref.placeholderImage,
6888
+ listRoleDescription = _ref.listRoleDescription,
6889
+ className = _ref.className,
6890
+ onSelect = _ref.onSelect,
6891
+ onApply = _ref.onApply,
6892
+ onClear = _ref.onClear,
6893
+ _ref$selectedIndices = _ref.selectedIndices,
6894
+ selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
6895
+ var _useViewport = useViewport(),
6896
+ isMobile = _useViewport.isMobile;
6897
+ var castWrapperRef = React.useRef(null);
6898
+ var isDraggingRef = React.useRef(false);
6899
+ var startXRef = React.useRef(0);
6900
+ var scrollStartRef = React.useRef(0);
6901
+ var hasDraggedRef = React.useRef(false);
6902
+ var swipeRef = React.useRef(null);
6903
+ var _useState = React.useState(false),
6904
+ availablePrev = _useState[0],
6905
+ setAvailablePrev = _useState[1];
6906
+ var _useState2 = React.useState(cast.length > 1),
6907
+ availableNext = _useState2[0],
6908
+ setAvailableNext = _useState2[1];
6909
+ var _useState3 = React.useState(true),
6910
+ showRotatorButtons = _useState3[0],
6911
+ setShowRotatorButtons = _useState3[1];
6912
+ var onIndexChangeHandler = function onIndexChangeHandler(index) {
6913
+ setAvailablePrev(index > 0);
6914
+ setAvailableNext(function () {
6915
+ var _swipeRef$current$has, _swipeRef$current;
6916
+ return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : index < Math.max(0, cast.length - 1);
6917
+ });
6918
+ };
6919
+ React.useEffect(function () {
6920
+ setAvailablePrev(false);
6921
+ setAvailableNext(function () {
6922
+ var _swipeRef$current$has2, _swipeRef$current2;
6923
+ return (_swipeRef$current$has2 = (_swipeRef$current2 = swipeRef.current) == null ? void 0 : _swipeRef$current2.hasNext()) != null ? _swipeRef$current$has2 : cast.length > 1;
6924
+ });
6925
+ }, [cast.length]);
6926
+ var handleOverflowChange = function handleOverflowChange(overflow) {
6927
+ var _swipeRef$current3;
6928
+ setShowRotatorButtons(overflow);
6929
+ var hasNext = (_swipeRef$current3 = swipeRef.current) == null ? void 0 : _swipeRef$current3.hasNext();
6930
+ if (typeof hasNext === 'boolean') {
6931
+ setAvailableNext(hasNext);
6932
+ } else {
6933
+ setAvailableNext(overflow);
6934
+ }
6935
+ };
6936
+ var onNext = function onNext() {
6937
+ var _swipeRef$current4;
6938
+ return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
6939
+ };
6940
+ var onPrev = function onPrev() {
6941
+ var _swipeRef$current5;
6942
+ return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
6943
+ };
6944
+ React.useEffect(function () {
6945
+ var el = castWrapperRef.current;
6946
+ if (!el) return undefined;
6947
+ var handleKeydown = function handleKeydown(e) {
6948
+ if (!el.contains(document.activeElement)) return;
6949
+ if (e.key === 'ArrowRight') {
6950
+ var _swipeRef$current6;
6951
+ e.preventDefault();
6952
+ (_swipeRef$current6 = swipeRef.current) == null || _swipeRef$current6.nextSlide();
6953
+ } else if (e.key === 'ArrowLeft') {
6954
+ var _swipeRef$current7;
6955
+ e.preventDefault();
6956
+ (_swipeRef$current7 = swipeRef.current) == null || _swipeRef$current7.prevSlide();
6957
+ }
6958
+ };
6959
+ el.addEventListener('keydown', handleKeydown);
6960
+ return function () {
6961
+ return el.removeEventListener('keydown', handleKeydown);
6962
+ };
6963
+ }, []);
6964
+ var handleMouseDown = React.useCallback(function (e) {
6965
+ if (!castWrapperRef.current) return;
6966
+ isDraggingRef.current = true;
6967
+ hasDraggedRef.current = false;
6968
+ startXRef.current = e.clientX;
6969
+ scrollStartRef.current = castWrapperRef.current.scrollLeft;
6970
+ if (e.target === castWrapperRef.current) e.preventDefault();
6971
+ }, []);
6972
+ var handleMouseMove = React.useCallback(function (e) {
6973
+ if (!isDraggingRef.current || !castWrapperRef.current) return;
6974
+ var deltaX = e.clientX - startXRef.current;
6975
+ var threshold = 5;
6976
+ if (Math.abs(deltaX) > threshold) {
6977
+ hasDraggedRef.current = true;
6978
+ e.preventDefault();
6979
+ castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
6980
+ }
6981
+ }, []);
6982
+ var handleMouseUp = React.useCallback(function () {
6983
+ isDraggingRef.current = false;
6984
+ setTimeout(function () {
6985
+ hasDraggedRef.current = false;
6986
+ }, 0);
6987
+ }, []);
6988
+ var handleMouseLeave = React.useCallback(function () {
6989
+ isDraggingRef.current = false;
6990
+ hasDraggedRef.current = false;
6991
+ }, []);
6992
+ var handleClick = React__default.useCallback(function (index, onClick) {
6993
+ if (hasDraggedRef.current) return;
6994
+ if (onSelect) onSelect(index);
6995
+ if (onClick) onClick();
6996
+ }, [onSelect]);
6997
+ var handlePersonKeydown = React__default.useCallback(function (e, index, onClick) {
6998
+ if (e.key === 'Enter') {
6999
+ handleClick(index, onClick);
7000
+ }
7001
+ }, [handleClick]);
7002
+ var handleClearKeydown = React__default.useCallback(function (e) {
7003
+ if (e.key === 'Enter' && onClear) {
7004
+ onClear();
7005
+ }
7006
+ }, [onClear]);
7007
+ var showActionButtonsSection = onApply || onClear || emptySelectionText;
7008
+ var getPersonCards = function getPersonCards() {
7009
+ return cast.map(function (person, index) {
7010
+ var name = person.name,
7011
+ image = person.image,
7012
+ _onClick = person.onClick,
7013
+ rest = _objectWithoutPropertiesLoose(person, _excluded$i);
7014
+ var isSelected = selectedIndices.includes(index);
7015
+ var personImage = image || placeholderImage || defaultPlaceholderImage;
7016
+ return /*#__PURE__*/React__default.createElement(PersonWrapper, {
7017
+ key: index,
7018
+ "aria-selected": isSelected,
7019
+ role: "option",
7020
+ tabIndex: 0,
7021
+ onKeyDown: function onKeyDown(e) {
7022
+ return handlePersonKeydown(e, index, _onClick);
7023
+ }
7024
+ }, /*#__PURE__*/React__default.createElement(PersonToggle, Object.assign({
7025
+ isSelected: isSelected,
7026
+ onClick: function onClick() {
7027
+ return handleClick(index, _onClick);
7028
+ }
7029
+ }, rest), /*#__PURE__*/React__default.createElement(PersonImage, {
7030
+ src: personImage,
7031
+ alt: image ? name : "Placeholder image for " + name,
7032
+ draggable: false,
7033
+ isDefaultPlaceholder: !(!!image || !!placeholderImage)
7034
+ }), /*#__PURE__*/React__default.createElement(Decal, {
7035
+ isSelected: isSelected
7036
+ }, /*#__PURE__*/React__default.createElement(Icon, {
7037
+ iconName: "Confirm",
7038
+ color: "white"
7039
+ }))), /*#__PURE__*/React__default.createElement(PersonName, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7040
+ size: "medium"
7041
+ }, name)));
7042
+ });
7043
+ };
7044
+ return /*#__PURE__*/React__default.createElement(CastFiltersComponentWrapper, {
7045
+ className: className
7046
+ }, /*#__PURE__*/React__default.createElement(CastFiltersWrapper, null, /*#__PURE__*/React__default.createElement(Grid, null, headingText && (/*#__PURE__*/React__default.createElement(GridItem, {
7047
+ columnStartDesktop: 1,
7048
+ columnSpanDesktop: 10,
7049
+ columnStartDevice: 1,
7050
+ columnSpanDevice: 9
7051
+ }, /*#__PURE__*/React__default.createElement(HeadingTextWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7052
+ size: "large"
7053
+ }, headingText)))), showRotatorButtons && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
7054
+ columnStartDesktop: 16,
7055
+ columnSpanDesktop: 2
7056
+ }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
7057
+ size: "small",
7058
+ onClickNext: onNext,
7059
+ onClickPrev: onPrev,
7060
+ availablePrev: availablePrev,
7061
+ availableNext: availableNext
7062
+ })))), /*#__PURE__*/React__default.createElement(CastWrapper, {
7063
+ ref: castWrapperRef,
7064
+ role: "listbox",
7065
+ "aria-roledescription": listRoleDescription != null ? listRoleDescription : 'filter list',
7066
+ "aria-label": "filter list",
7067
+ "aria-multiselectable": true,
7068
+ onMouseDown: handleMouseDown,
7069
+ onMouseMove: handleMouseMove,
7070
+ onMouseUp: handleMouseUp,
7071
+ onMouseLeave: handleMouseLeave
7072
+ }, isMobile ? getPersonCards() : (/*#__PURE__*/React__default.createElement(Swipe, {
7073
+ onIndexChange: onIndexChangeHandler,
7074
+ "data-testid": "cast-filter-swipe",
7075
+ ref: swipeRef,
7076
+ onOverflowChange: handleOverflowChange
7077
+ }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7078
+ size: "medium",
7079
+ className: "mobile-only"
7080
+ }, emptySelectionText)), selectedIndices.length === 0 && !emptySelectionText && /*#__PURE__*/React__default.createElement(EmptySelectionTextSpacer, null), selectedIndices.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, onApply && /*#__PURE__*/React__default.createElement(PrimaryButton, {
7081
+ onClick: function onClick() {
7082
+ return onApply(selectedIndices);
7083
+ }
7084
+ }, ctaText != null ? ctaText : 'Apply'), onClear && (/*#__PURE__*/React__default.createElement(TextLink, {
7085
+ tabIndex: 0,
7086
+ role: "button",
7087
+ onClick: onClear,
7088
+ onKeyDown: handleClearKeydown
7089
+ }, textLinkText != null ? textLinkText : 'Clear')))))));
7090
+ };
7091
+
7092
+ var _templateObject$L, _templateObject2$z, _templateObject3$n, _templateObject4$k, _templateObject5$g, _templateObject6$b, _templateObject7$8;
7093
+ var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 12;\n }\n"])), devices.mobileAndTablet);
7094
+ var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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"])), devices.mobileAndTablet);
7095
+ var AddressWrapper = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 4px;\n"])));
7096
+ var TitleWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: baseline;\n gap: 3px;\n"])));
7097
+ var MobileSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
7098
+ var DesktopSuffixWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n @media ", " {\n display: none;\n }\n"])), devices.mobile);
7099
+ var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n a {\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n margin-right: 13px;\n display: inline-block;\n\n &:last-child {\n margin-right: 0;\n }\n\n @media ", " {\n font-size: 17px;\n line-height: 24px;\n }\n }\n"])), devices.mobile);
7100
+
7101
+ var ContactCard = function ContactCard(_ref) {
7102
+ var title = _ref.title,
7103
+ titleSuffix = _ref.titleSuffix,
7104
+ description = _ref.description,
7105
+ email = _ref.email,
7106
+ phone = _ref.phone,
7107
+ website = _ref.website,
7108
+ address = _ref.address,
7109
+ className = _ref.className;
7110
+ var hasDetails = email || phone || website;
7111
+ var addressString = address == null ? void 0 : address.substring(0, 110);
7112
+ var descriptionText = description == null ? void 0 : description.substring(0, 110);
7113
+ return /*#__PURE__*/React__default.createElement("div", {
7114
+ className: className
7115
+ }, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
7116
+ columnStartDesktop: 3,
7117
+ columnSpanDesktop: 12,
7118
+ columnStartDevice: 1,
7119
+ columnSpanDevice: 14
7120
+ }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
7121
+ "data-testid": "contact-card-wrapper"
7122
+ }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(TitleWrapper$1, null, /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7123
+ size: "large"
7124
+ }, title), /*#__PURE__*/React__default.createElement(MobileSuffixWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7125
+ size: "small"
7126
+ }, titleSuffix)), /*#__PURE__*/React__default.createElement(DesktopSuffixWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
7127
+ size: "small"
7128
+ }, titleSuffix))), descriptionText && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7129
+ size: "large"
7130
+ }, descriptionText), hasDetails && (/*#__PURE__*/React__default.createElement(DetailsWrapper, {
7131
+ "data-testid": "contact-card-details-block"
7132
+ }, email && (/*#__PURE__*/React__default.createElement("a", {
7133
+ tabIndex: 0,
7134
+ href: "mailto:" + email
7135
+ }, email)), phone && (/*#__PURE__*/React__default.createElement("a", {
7136
+ tabIndex: 0,
7137
+ href: "tel:" + phone
7138
+ }, phone)), website && (/*#__PURE__*/React__default.createElement("a", {
7139
+ tabIndex: 0,
7140
+ href: website,
7141
+ target: "_blank",
7142
+ rel: "noreferrer"
7143
+ }, website)))), addressString && (/*#__PURE__*/React__default.createElement("div", {
7144
+ "data-testid": "contact-card-address-block"
7145
+ }, /*#__PURE__*/React__default.createElement(AddressWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
7146
+ size: "large"
7147
+ }, addressString)))))))));
7148
+ };
7149
+
7150
+ var _templateObject$M, _templateObject2$A, _templateObject3$o, _templateObject4$l, _templateObject5$h, _templateObject6$c;
7151
+ var BodyTextRelative = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
7152
+ var ContentSummaryWrapper = /*#__PURE__*/styled__default.article(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n justify-items: start;\n align-items: center;\n margin: 20px 0;\n gap: 36px;\n cursor: ", ";\n\n @media ", " {\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n"])), function (props) {
7153
+ return props.clickable ? 'pointer' : 'default';
7154
+ }, devices.mobile);
7155
+ var ContentSummaryImageWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 0 0 33.3%;\n"])));
7156
+ var ContentSummaryTextWrapper = /*#__PURE__*/styled__default.div(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n gap: 20px;\n\n & * {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n @media ", " {\n margin: 0 20px;\n }\n\n & .content-summary-text-link {\n height: unset;\n }\n"])), function (props) {
7157
+ return props.showImage ? 2 : '1 / span 4';
7158
+ }, devices.mobile);
7159
+ var BodyTextLimit = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n"])));
7160
+ var ContentSummaryBodyTextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__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) {
7161
+ 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 ";
7162
+ });
7163
+
7164
+ /* eslint-disable no-shadow */
7165
+ (function (CarouselType) {
7166
+ CarouselType["Image"] = "image";
7167
+ CarouselType["SmallCard"] = "SmallCard";
7168
+ CarouselType["LargeCard"] = "LargeCard";
7169
+ CarouselType["PersonCard"] = "PersonCard";
7170
+ })(exports.CarouselType || (exports.CarouselType = {}));
7171
+
7172
+ var clickHandler = function clickHandler(link) {
7173
+ if (link != null && link.href && document) {
7174
+ document.location.href = link.href;
7175
+ }
7176
+ };
7177
+ var ContentSummary = function ContentSummary(_ref) {
7178
+ var title = _ref.title,
7179
+ subtitle = _ref.subtitle,
7180
+ bodyText = _ref.bodyText,
7181
+ link = _ref.link,
7182
+ image = _ref.image,
7183
+ _ref$largeTitle = _ref.largeTitle,
7184
+ largeTitle = _ref$largeTitle === void 0 ? false : _ref$largeTitle,
7185
+ _ref$showImage = _ref.showImage,
7186
+ showImage = _ref$showImage === void 0 ? false : _ref$showImage,
7187
+ _ref$truncate = _ref.truncate,
7188
+ truncate = _ref$truncate === void 0 ? 0 : _ref$truncate,
7189
+ _ref$fullyClickable = _ref.fullyClickable,
7190
+ fullyClickable = _ref$fullyClickable === void 0 ? true : _ref$fullyClickable,
7191
+ _ref$headerSemanticLe = _ref.headerSemanticLevel,
7192
+ headerSemanticLevel = _ref$headerSemanticLe === void 0 ? 'h3' : _ref$headerSemanticLe,
7193
+ className = _ref.className;
7194
+ return /*#__PURE__*/React__default.createElement(ContentSummaryWrapper, {
7195
+ className: className,
7196
+ onClick: function onClick() {
7197
+ if (fullyClickable) {
7198
+ clickHandler(link);
7199
+ }
7200
+ },
7201
+ clickable: fullyClickable,
7202
+ "data-roh": "content-summary-item"
7203
+ }, showImage && image && (/*#__PURE__*/React__default.createElement(ContentSummaryImageWrapper, {
7204
+ "data-testid": "image-wrapper"
7205
+ }, link != null && link.href ? (/*#__PURE__*/React__default.createElement("a", {
7206
+ href: link.href
7207
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7208
+ aspectRatio: exports.AspectRatio['4:3']
7209
+ }, /*#__PURE__*/React__default.createElement("img", {
7210
+ src: image.src,
7211
+ alt: image.alt
7212
+ })))) : (/*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7213
+ aspectRatio: exports.AspectRatio['4:3']
7214
+ }, /*#__PURE__*/React__default.createElement("img", {
7215
+ src: image.src,
7216
+ alt: image.alt
7217
+ }))))), /*#__PURE__*/React__default.createElement(ContentSummaryTextWrapper, {
7218
+ showImage: showImage
7219
+ }, title && (/*#__PURE__*/React__default.createElement("div", {
7220
+ "data-testid": largeTitle ? 'large-title' : 'default-title'
7221
+ }, largeTitle ? (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7222
+ size: "large",
7223
+ hierarchy: headerSemanticLevel
7224
+ }, title)) : (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
7225
+ size: "medium",
7226
+ hierarchy: headerSemanticLevel
7227
+ }, title)))), subtitle && /*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
7228
+ size: "large"
7229
+ }, subtitle), bodyText && (/*#__PURE__*/React__default.createElement(BodyTextRelative, {
7230
+ size: "large"
7231
+ }, /*#__PURE__*/React__default.createElement(BodyTextLimit, null, /*#__PURE__*/React__default.createElement(ContentSummaryBodyTextWrapper, {
7232
+ truncate: truncate,
7233
+ dangerouslySetInnerHTML: {
7234
+ __html: bodyText
7235
+ },
7236
+ "data-testid": "body-text"
7237
+ })))), (link == null ? void 0 : link.href) && link.text && (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, link, {
7238
+ className: "content-summary-text-link"
7239
+ }), link.text))));
7240
+ };
7241
+
7242
+ var _templateObject$N, _templateObject2$B, _templateObject3$p, _templateObject4$m, _templateObject5$i;
7243
+ var EditorialGrid = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__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) {
7244
+ var imageToLeft = _ref.imageToLeft;
7245
+ return imageToLeft ? "'left left left left left . right right right right right right'" : "'left left left left left left . right right right right right'";
7246
+ }, devices.mobile);
7247
+ var EditorialImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n align-self: center;\n grid-area: ", ";\n @media ", " {\n & {\n grid-area: row1;\n }\n"])), function (_ref2) {
7248
+ var imageToLeft = _ref2.imageToLeft;
7249
+ return imageToLeft ? 'left' : 'right';
7250
+ }, devices.mobile);
7251
+ var EditorialTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n"])), function (_ref3) {
7252
+ var imageToLeft = _ref3.imageToLeft;
7253
+ return imageToLeft ? 'right' : 'left';
7254
+ }, devices.mobile);
7255
+ var EditorialSubtitle = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-subtitle);\n text-transform: var(--text-transform-subtitle);\n margin-bottom: var(--editorial-subtitle-margin-bottom);\n display: block;\n overflow-wrap: break-word;\n"])));
7256
+ var EditorialText = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-feature-settings: var(--font-feature-settings-body);\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"])));
7257
+
7258
+ var Editorial = function Editorial(_ref) {
7259
+ var _ref$imagePosition = _ref.imagePosition,
7260
+ imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
7261
+ subtitle = _ref.subtitle,
7262
+ text = _ref.text,
7263
+ children = _ref.children,
7264
+ className = _ref.className;
7265
+ var imageToLeft = imagePosition === 'left';
7266
+ return /*#__PURE__*/React__default.createElement(Grid, {
7267
+ className: className,
7268
+ "data-testid": "editorial-component"
7269
+ }, /*#__PURE__*/React__default.createElement(GridItem, {
7270
+ columnStartDesktop: 3,
7271
+ columnSpanDesktop: 12,
7272
+ columnStartDevice: 2,
7273
+ columnSpanDevice: 12
7274
+ }, /*#__PURE__*/React__default.createElement(EditorialGrid, {
7275
+ imageToLeft: imageToLeft
7276
+ }, /*#__PURE__*/React__default.createElement(EditorialImageWrapper, {
7277
+ "data-testid": "image-wrapper",
7278
+ imageToLeft: imageToLeft
7279
+ }, /*#__PURE__*/React__default.createElement(ImageAspectRatioWrapper, {
7280
+ aspectRatio: exports.AspectRatio['1:1']
7281
+ }, children)), /*#__PURE__*/React__default.createElement(EditorialTextWrapper, {
7282
+ "data-testid": "text-wrapper",
7283
+ imageToLeft: imageToLeft
7284
+ }, subtitle ? /*#__PURE__*/React__default.createElement(EditorialSubtitle, {
7285
+ tag: "span"
7286
+ }, subtitle) : null, /*#__PURE__*/React__default.createElement(EditorialText, {
7287
+ tag: "div",
7288
+ size: "large",
7289
+ dangerouslySetInnerHTML: {
7290
+ __html: text
7291
+ }
7292
+ })))));
7293
+ };
7294
+
7295
+ var _templateObject$O, _templateObject2$C, _templateObject3$q;
7296
+ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: scroll;\n\n scrollbar-width: none;\n -ms-overflow-style: none;\n\n ::-webkit-scrollbar {\n display: none;\n }\n"])));
7297
+ var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n min-width: 400px;\n justify-content: space-between;\n gap: 16px;\n font-family: var(--font-family-sans);\n\n @media ", " {\n gap: 10px;\n }\n"])), devices.mobile);
7298
+ var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-base-black);\n min-width: fit-content;\n\n :hover {\n color: var(--color-base-white);\n }\n"])));
7299
+
7300
+ var _excluded$j = ["text", "onClick"];
7301
+ var HotFilters = function HotFilters(_ref) {
7302
+ var items = _ref.items,
7303
+ className = _ref.className,
7304
+ _ref$selectedIndex = _ref.selectedIndex,
7305
+ selectedIndex = _ref$selectedIndex === void 0 ? 0 : _ref$selectedIndex,
7306
+ onSelect = _ref.onSelect;
7307
+ var handleClick = React__default.useCallback(function (index, onClick) {
7308
+ if (onSelect) onSelect(index);
7309
+ if (onClick) onClick();
7310
+ }, [onSelect]);
7311
+ return /*#__PURE__*/React__default.createElement(HotFiltersWrapper, {
7312
+ className: className
7313
+ }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
7314
+ var text = item.text,
7315
+ _onClick = item.onClick,
7316
+ rest = _objectWithoutPropertiesLoose(item, _excluded$j);
7317
+ var isSelected = index === selectedIndex;
7318
+ return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
7319
+ key: index,
7320
+ onClick: function onClick() {
7321
+ return handleClick(index, _onClick);
7322
+ },
7323
+ iconName: isSelected ? 'Confirm' : undefined,
7324
+ backgroundColor: isSelected ? 'base-black' : 'base-white',
7325
+ textColor: isSelected ? 'base-white' : 'base-black',
7326
+ hoveredColor: "base-black",
7327
+ pressedColor: "black-pressed",
6699
7328
  "aria-pressed": isSelected
6700
7329
  }, rest), text);
6701
7330
  })));
@@ -6730,10 +7359,10 @@ var getBorderColor$1 = function getBorderColor(variant, colorValue) {
6730
7359
  return variant === InformationCtaVariants.Primary || variant === InformationCtaVariants.Secondary || variant === undefined ? "border-color: " + colorValue + ";" : '';
6731
7360
  };
6732
7361
 
6733
- var _templateObject$N, _templateObject2$B, _templateObject3$q, _templateObject4$m;
6734
- var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$N || (_templateObject$N = /*#__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);
6735
- var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
6736
- var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (_templateObject3$q = /*#__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) {
7362
+ var _templateObject$P, _templateObject2$D, _templateObject3$r, _templateObject4$n;
7363
+ var InfoWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__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);
7364
+ var InfoTitle = /*#__PURE__*/styled__default('div')(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n * {\n margin-block: 0;\n }\n"])));
7365
+ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$r || (_templateObject3$r = /*#__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) {
6737
7366
  var variant = _ref.variant,
6738
7367
  theme = _ref.theme;
6739
7368
  return getTextColor$4(variant, theme, COLORS$4.background);
@@ -6776,7 +7405,7 @@ var InfoCTAWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$q || (
6776
7405
  theme = _ref10.theme;
6777
7406
  return getTextColor$4(variant, theme, COLORS$4.pressed);
6778
7407
  });
6779
- var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
7408
+ var InfoBodyWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--information-panel-color);\n\n a {\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n color: var(--information-panel-color);\n }\n\n @media ", " {\n padding-top: 4px;\n }\n"])), devices.mobile);
6780
7409
 
6781
7410
  var coreThemeStyles = {"coreTheme":"core-theme-module_coreTheme__pWxYB"};
6782
7411
 
@@ -6956,33 +7585,33 @@ var Information = function Information(_ref) {
6956
7585
  })))));
6957
7586
  };
6958
7587
 
6959
- var _templateObject$O, _templateObject2$C, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$c, _templateObject7$8, _templateObject8$4;
6960
- var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
7588
+ var _templateObject$Q, _templateObject2$E, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7589
+ var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
6961
7590
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
6962
7591
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
6963
7592
  }, devices.mobile);
6964
- var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$C || (_templateObject2$C = /*#__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);
6965
- var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
7593
+ var PageHeadingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$E || (_templateObject2$E = /*#__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);
7594
+ var BadgeWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 35px;\n padding-bottom: 20px;\n\n ", ";\n"])), function (_ref2) {
6966
7595
  var isPageHeadingWithoutTitle = _ref2.isPageHeadingWithoutTitle;
6967
7596
  return isPageHeadingWithoutTitle && "\n height: 50px;\n padding-bottom: 0;\n margin: 10px 0;\n ";
6968
7597
  });
6969
- var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__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) {
7598
+ var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__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) {
6970
7599
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
6971
7600
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
6972
7601
  }, devices.mobile);
6973
- var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__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) {
7602
+ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__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) {
6974
7603
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
6975
7604
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
6976
7605
  }, devices.mobile);
6977
- var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
6978
- var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__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 ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
7606
+ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
7607
+ var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__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 ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
6979
7608
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
6980
7609
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
6981
7610
  }, devices.mobile, function (_ref6) {
6982
7611
  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
6983
7612
  return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
6984
7613
  });
6985
- var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__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);
7614
+ var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__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);
6986
7615
 
6987
7616
  var PageHeading = function PageHeading(_ref) {
6988
7617
  var title = _ref.title,
@@ -7052,17 +7681,17 @@ var PageHeading = function PageHeading(_ref) {
7052
7681
  }, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, themedLink), linkText))) : null));
7053
7682
  };
7054
7683
 
7055
- var _templateObject$P, _templateObject2$D, _templateObject3$s, _templateObject4$o, _templateObject5$j, _templateObject6$d, _templateObject7$9, _templateObject8$5;
7056
- var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__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);
7057
- var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__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);
7058
- var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$s || (_templateObject3$s = /*#__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);
7059
- var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$o || (_templateObject4$o = /*#__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);
7060
- var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7061
- var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__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);
7062
- var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__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);
7063
- var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__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);
7684
+ var _templateObject$R, _templateObject2$F, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$e, _templateObject7$a, _templateObject8$6;
7685
+ var ImpactWrapper = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__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);
7686
+ var ImpactHeaderImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__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);
7687
+ var ImpactGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$t || (_templateObject3$t = /*#__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);
7688
+ var SponsorWrapper = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__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);
7689
+ var LogoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n align-self: end;\n"])));
7690
+ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__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);
7691
+ var ButtonWrapper$2 = /*#__PURE__*/styled__default.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);
7692
+ var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__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);
7064
7693
 
7065
- var _excluded$i = ["text"];
7694
+ var _excluded$k = ["text"];
7066
7695
  var PageHeadingImpact = function PageHeadingImpact(_ref) {
7067
7696
  var children = _ref.children,
7068
7697
  text = _ref.text,
@@ -7080,7 +7709,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7080
7709
  var truncatedText = text == null ? void 0 : text.substring(0, 75);
7081
7710
  var _ref2 = link || {},
7082
7711
  linkText = _ref2.text,
7083
- restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
7712
+ restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
7084
7713
  return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
7085
7714
  bgUrlDesktop: bgUrlDesktop,
7086
7715
  bgUrlDevice: bgUrlDevice,
@@ -7123,21 +7752,21 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
7123
7752
  }, "Scroll Down"))) : null);
7124
7753
  };
7125
7754
 
7126
- var _templateObject$Q, _templateObject2$E, _templateObject3$t, _templateObject4$p, _templateObject5$k;
7127
- var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Q || (_templateObject$Q = /*#__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) {
7755
+ var _templateObject$S, _templateObject2$G, _templateObject3$u, _templateObject4$q, _templateObject5$l;
7756
+ var PanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__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) {
7128
7757
  var color = _ref.color;
7129
7758
  return "\n background-color: " + (color ? "var(--base-color-" + color + ")" : 'var(--base-color-core)') + ";\n color: " + (color === exports.Colors.White ? 'var(--base-color-black)' : 'var(--base-color-white)') + ";\n ";
7130
7759
  }, devices.mobileAndTablet);
7131
- var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__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) {
7760
+ var LeftPanel = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__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) {
7132
7761
  var hasImage = _ref2.hasImage;
7133
7762
  return hasImage ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
7134
7763
  }, devices.mobileAndTablet, function (_ref3) {
7135
7764
  var hasImage = _ref3.hasImage;
7136
7765
  return hasImage ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
7137
7766
  });
7138
- var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$t || (_templateObject3$t = /*#__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);
7139
- var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__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);
7140
- var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__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);
7767
+ var RightPanel = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__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);
7768
+ var InfoWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__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);
7769
+ var ScrollDownWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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);
7141
7770
 
7142
7771
  var PageHeadingPanel = function PageHeadingPanel(_ref) {
7143
7772
  var _image$src, _image$alt;
@@ -7167,36 +7796,36 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
7167
7796
  })))));
7168
7797
  };
7169
7798
 
7170
- var _templateObject$R, _templateObject2$F, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$e, _templateObject7$a, _templateObject8$6, _templateObject9$3, _templateObject0$3, _templateObject1$2;
7171
- var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7172
- var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7173
- var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__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);
7174
- var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$q || (_templateObject4$q = /*#__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);
7175
- var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$l || (_templateObject5$l = /*#__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) {
7799
+ var _templateObject$T, _templateObject2$H, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4, _templateObject1$3;
7800
+ var Wrapper$3 = /*#__PURE__*/styled__default.section(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
7801
+ var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
7802
+ var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__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);
7803
+ var ImageButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__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);
7804
+ var ContentSection = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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) {
7176
7805
  var theme = _ref.theme;
7177
7806
  return theme == exports.ThemeType.Cinema ? '2px solid var(--color-base-light-grey)' : 'none';
7178
7807
  }, function (_ref2) {
7179
7808
  var showBlock = _ref2.showBlock;
7180
7809
  return showBlock ? 'block' : 'none';
7181
7810
  }, devices.mobile);
7182
- var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7183
- var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__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) {
7811
+ var BadgeWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n svg {\n height: 32px;\n }\n\n @media ", " {\n margin-bottom: 12px;\n }\n"])), devices.mobile);
7812
+ var AdditionalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__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) {
7184
7813
  var isBadgePresent = _ref3.isBadgePresent;
7185
7814
  return isBadgePresent ? '1' : '4';
7186
7815
  });
7187
- var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__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) {
7816
+ var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__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) {
7188
7817
  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
7189
7818
  return isAdditionalButtonPresent ? '20px' : '0';
7190
7819
  });
7191
- var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7192
- var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__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) {
7820
+ var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
7821
+ var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$4 || (_templateObject0$4 = /*#__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) {
7193
7822
  var theme = _ref5.theme;
7194
7823
  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
7195
7824
  }, devices.mobile, function (_ref6) {
7196
7825
  var isButtonPresent = _ref6.isButtonPresent;
7197
7826
  return isButtonPresent ? '20px' : '0';
7198
7827
  });
7199
- var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
7828
+ var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n min-height: 70px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n @media ", " {\n min-height: auto;\n flex-direction: column;\n justify-content: start;\n }\n"])), devices.mobile);
7200
7829
 
7201
7830
  var PageHeadingPromoBadge;
7202
7831
  (function (PageHeadingPromoBadge) {
@@ -7381,7 +8010,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
7381
8010
  })))))))))));
7382
8011
  };
7383
8012
 
7384
- var _templateObject$S, _templateObject2$G, _templateObject3$v, _templateObject4$r;
8013
+ var _templateObject$U, _templateObject2$I, _templateObject3$w, _templateObject4$s;
7385
8014
  var GRID = {
7386
8015
  desktop: {
7387
8016
  leftWithImage: '1 / 1 / 3 / 7',
@@ -7394,19 +8023,19 @@ var GRID = {
7394
8023
  right: '2 / 1 / 3 / 15'
7395
8024
  }
7396
8025
  };
7397
- var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
8026
+ var HighlightPanelGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n background-color: ", ";\n color: var(--color-base-white);\n"])), function (_ref) {
7398
8027
  var $background = _ref.$background;
7399
8028
  return "var(--color-" + $background + ")";
7400
8029
  });
7401
- var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
8030
+ var LeftPanel$1 = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n\n box-sizing: border-box;\n height: 100%;\n display: grid;\n grid-auto-rows: 90% 1fr;\n gap: 0 36px;\n align-items: center;\n\n @media ", " {\n grid-area: ", ";\n }\n"])), function (_ref2) {
7402
8031
  var hasImage = _ref2.hasImage;
7403
8032
  return hasImage ? GRID.desktop.leftWithImage : GRID.desktop.leftNoImage;
7404
8033
  }, devices.mobileAndTablet, function (_ref3) {
7405
8034
  var hasImage = _ref3.hasImage;
7406
8035
  return hasImage ? GRID.mobile.leftWithImage : GRID.mobile.leftNoImage;
7407
8036
  });
7408
- var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
7409
- var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
8037
+ var RightPanel$1 = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n @media ", " {\n grid-area: ", ";\n }\n"])), GRID.desktop.right, devices.mobileAndTablet, GRID.mobile.right);
8038
+ var Wrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 36px 36px 36px 50px;\n overflow: hidden;\n\n :first-child * {\n margin-block-start: 0;\n }\n\n @media ", " {\n margin: 36px 20px 5px 20px;\n max-height: unset;\n }\n"])), devices.mobileAndTablet);
7410
8039
 
7411
8040
  var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
7412
8041
  var _image$src, _image$alt;
@@ -7429,12 +8058,12 @@ var PageHeadingHighlight = function PageHeadingHighlight(_ref) {
7429
8058
  })))));
7430
8059
  };
7431
8060
 
7432
- var _templateObject$T, _templateObject2$H, _templateObject3$w, _templateObject5$m, _templateObject6$f, _templateObject7$b, _templateObject8$7, _templateObject9$4, _templateObject0$4;
7433
- var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__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);
7434
- var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__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"])));
7435
- var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
7436
- var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__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);
7437
- var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$f || (_templateObject6$f = /*#__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) {
8061
+ var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject5$n, _templateObject6$g, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject0$5;
8062
+ var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__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);
8063
+ var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__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"])));
8064
+ var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
8065
+ var CompactHeaderAssetWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__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);
8066
+ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject6$g || (_templateObject6$g = /*#__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) {
7438
8067
  var invert = _ref.invert,
7439
8068
  theme = _ref.theme;
7440
8069
  return invert ? theme.colors.white : theme.colors.primary;
@@ -7450,10 +8079,10 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
7450
8079
  var theme = _ref4.theme;
7451
8080
  return theme.colors.primary === theme.colors.stream && "\n color: " + theme.colors.stream + ";\n background-color: " + theme.colors.white + ";\n ";
7452
8081
  }, devices.tablet, devices.mobile);
7453
- var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.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);
7454
- var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__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);
7455
- var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.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);
7456
- var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$4 || (_templateObject0$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) {
8082
+ var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__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);
8083
+ var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: title;\n align-items: center;\n justify-content: center;\n font-family: var(--font-family-header);\n text-transform: uppercase;\n text-align: center;\n padding: 0 2em;\n @media ", " {\n justify-content: center;\n }\n"])), devices.mobile);
8084
+ var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__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);
8085
+ var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
7457
8086
  var invert = _ref5.invert,
7458
8087
  theme = _ref5.theme;
7459
8088
  return invert ? theme.colors.primary : theme.colors.white;
@@ -7494,601 +8123,212 @@ var isSameSiteUrl = function isSameSiteUrl(url) {
7494
8123
  var useSameSiteUrl = function useSameSiteUrl(url) {
7495
8124
  var _useState = React.useState(false),
7496
8125
  hasSameSiteUrl = _useState[0],
7497
- setSameSiteUrl = _useState[1];
7498
- React.useEffect(function () {
7499
- setSameSiteUrl(isSameSiteUrl(url));
7500
- }, [url]);
7501
- return hasSameSiteUrl;
7502
- };
7503
-
7504
- var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
7505
- // eslint-disable-next-line react-hooks/rules-of-hooks
7506
- var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
7507
- var target = sameSiteUrl ? '_self' : '_blank';
7508
- var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
7509
- switch (brandingStyle) {
7510
- case 'BlockText':
7511
- return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
7512
- case 'BodyText':
7513
- return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
7514
- dangerouslySetInnerHTML: {
7515
- __html: truncateHtmlString(brandingText, 65)
7516
- }
7517
- }));
7518
- case 'TextLink':
7519
- return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
7520
- target: target,
7521
- href: brandingLink,
7522
- color: color
7523
- }, truncate(stripAllHtmlTags(brandingText), 25)));
7524
- case 'StreamLogo':
7525
- return /*#__PURE__*/React__default.createElement(StreamBadge, {
7526
- invert: invert
7527
- });
7528
- case 'CinemaLogo':
7529
- return /*#__PURE__*/React__default.createElement(CinemaBadge, {
7530
- invert: invert
7531
- });
7532
- default:
7533
- return null;
7534
- }
7535
- };
7536
- var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
7537
- var brandingStyle = _ref.brandingStyle,
7538
- _ref$invert = _ref.invert,
7539
- invert = _ref$invert === void 0 ? false : _ref$invert,
7540
- brandingText = _ref.brandingText,
7541
- brandingLink = _ref.brandingLink;
7542
- return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7543
- };
7544
-
7545
- var _excluded$j = ["text"];
7546
- var useResponsiveVideo = function useResponsiveVideo(video, poster) {
7547
- var mobileVideo = video.mobile || video.desktop;
7548
- var desktopVideo = video.desktop || video.mobile;
7549
- var mobilePoster = poster.mobile || poster.desktop;
7550
- var desktopPoster = poster.desktop || poster.mobile;
7551
- var _useState = React.useState(desktopPoster),
7552
- posterUrl = _useState[0],
7553
- setPoster = _useState[1];
7554
- var _useState2 = React.useState(desktopVideo),
7555
- videoUrl = _useState2[0],
7556
- setVideoUrl = _useState2[1];
7557
- var isMobile = useMobile();
7558
- React.useEffect(function () {
7559
- setPoster(isMobile ? mobilePoster : desktopPoster);
7560
- setVideoUrl(isMobile ? mobileVideo : desktopVideo);
7561
- }, [isMobile]);
7562
- return {
7563
- posterUrl: posterUrl,
7564
- videoUrl: videoUrl
7565
- };
7566
- };
7567
- var VideoWithControls = function VideoWithControls(_ref) {
7568
- var video = _ref.video,
7569
- poster = _ref.poster;
7570
- var _useResponsiveVideo = useResponsiveVideo(video, poster),
7571
- posterUrl = _useResponsiveVideo.posterUrl,
7572
- videoUrl = _useResponsiveVideo.videoUrl;
7573
- var isIOS = useIOS();
7574
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
7575
- id: video.elementId,
7576
- width: "100%",
7577
- height: "100%",
7578
- muted: true,
7579
- poster: posterUrl,
7580
- src: videoUrl,
7581
- "data-testid": "compact-video",
7582
- playsInline: true
7583
- }, /*#__PURE__*/React__default.createElement("source", {
7584
- src: videoUrl
7585
- }), /*#__PURE__*/React__default.createElement("img", {
7586
- src: posterUrl,
7587
- alt: poster.alt,
7588
- "data-testid": "compact-image"
7589
- })), /*#__PURE__*/React__default.createElement(VideoControls, {
7590
- loop: true,
7591
- videoElementId: video.elementId,
7592
- muted: true,
7593
- autoPlay: false,
7594
- soundControl: !isIOS
7595
- }));
7596
- };
7597
- var CompactHeaderImage = function CompactHeaderImage(_ref2) {
7598
- var mobile = _ref2.mobile,
7599
- desktop = _ref2.desktop,
7600
- alt = _ref2.alt;
7601
- return /*#__PURE__*/React__default.createElement("picture", {
7602
- "data-testid": "compact-picture"
7603
- }, mobile && /*#__PURE__*/React__default.createElement("source", {
7604
- srcSet: mobile,
7605
- media: "" + devices.mobile,
7606
- "data-testid": "compact-mobile-image-source"
7607
- }), /*#__PURE__*/React__default.createElement("source", {
7608
- srcSet: desktop,
7609
- media: "" + devices.desktop,
7610
- "data-testid": "compact-desktop-image-source"
7611
- }), /*#__PURE__*/React__default.createElement("img", {
7612
- src: desktop,
7613
- alt: alt,
7614
- "data-testid": "compact-image"
7615
- }));
7616
- };
7617
- var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
7618
- var video = _ref3.video,
7619
- poster = _ref3.poster;
7620
- if (!video.desktop && !video.mobile) {
7621
- return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
7622
- }
7623
- return /*#__PURE__*/React__default.createElement(VideoWithControls, {
7624
- video: video,
7625
- poster: poster
7626
- });
7627
- };
7628
- var PageHeadingCompact = function PageHeadingCompact(_ref4) {
7629
- var title = _ref4.title,
7630
- link = _ref4.link,
7631
- _ref4$sponsor = _ref4.sponsor,
7632
- sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
7633
- customSponsorImage = _ref4.customSponsorImage,
7634
- bgUrlDesktop = _ref4.bgUrlDesktop,
7635
- bgUrlDevice = _ref4.bgUrlDevice,
7636
- videoUrlDesktop = _ref4.videoUrlDesktop,
7637
- videoUrlMobile = _ref4.videoUrlMobile,
7638
- _ref4$bgImageAltText = _ref4.bgImageAltText,
7639
- bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
7640
- _ref4$invert = _ref4.invert,
7641
- invert = _ref4$invert === void 0 ? false : _ref4$invert,
7642
- _ref4$brandingStyle = _ref4.brandingStyle,
7643
- brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
7644
- brandingText = _ref4.brandingText,
7645
- brandingLink = _ref4.brandingLink,
7646
- _ref4$showCopy = _ref4.showCopy,
7647
- showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
7648
- var _ref5 = link || {},
7649
- linkText = _ref5.text,
7650
- restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$j);
7651
- // const titleSize = title && title.length > 20 ? 4 : 3;
7652
- var video = {
7653
- elementId: 'compact-header-video',
7654
- desktop: videoUrlDesktop,
7655
- mobile: videoUrlMobile
7656
- };
7657
- var poster = {
7658
- desktop: bgUrlDesktop,
7659
- mobile: bgUrlDevice,
7660
- alt: bgImageAltText
7661
- };
7662
- return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
7663
- "data-testid": "compact-sponsor"
7664
- }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
7665
- "data-testid": "compact-custom-sponsor"
7666
- }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
7667
- video: video,
7668
- poster: poster
7669
- })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
7670
- className: "page-heading-compact__background",
7671
- invert: invert
7672
- }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
7673
- brandingStyle: brandingStyle,
7674
- brandingText: brandingText,
7675
- brandingLink: brandingLink,
7676
- invert: invert
7677
- }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
7678
- size: "large",
7679
- hierarchy: "h1"
7680
- }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
7681
- invert: invert,
7682
- className: "page-heading-compact__button"
7683
- }), linkText))))));
7684
- };
7685
-
7686
- var _templateObject$U, _templateObject2$I;
7687
- var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
7688
- var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n width: 100%;\n touch-action: pan-y;\n"])));
7689
- var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n transition: ", ";\n transform: translateX(", ");\n\n .", " {\n flex-shrink: 0;\n }\n"])), function (_ref) {
7690
- var transitioning = _ref.transitioning;
7691
- return transitioning ? 'transform 0.3s ease' : 'none';
7692
- }, function (_ref2) {
7693
- var translateX = _ref2.translateX;
7694
- return translateX + "px";
7695
- }, SWIPE_SLIDE_CLASS_NAME);
7696
-
7697
- /**
7698
- * Generates a random string in the format XXX-XXX.
7699
- * Does not meet UUID standards.
7700
- * To be used where only a small number of unique IDs are required, e.g. DOM element IDs.
7701
- *
7702
- * @return {string} A random string in the format XXX-XXX.
7703
- */
7704
- var generateDomElementId = function generateDomElementId() {
7705
- var randomPart = Math.floor(100 + Math.random() * 900).toString();
7706
- var datePart = Date.now().toString().slice(-3);
7707
- return randomPart + "-" + datePart;
7708
- };
7709
-
7710
- var DISABLED_TABBING_TAGS = 'a, button';
7711
- var disableTabbingInside = function disableTabbingInside(element, shouldDisable) {
7712
- if (!element) return;
7713
- var focusables = element.querySelectorAll(DISABLED_TABBING_TAGS);
7714
- focusables.forEach(function (el) {
7715
- if (shouldDisable) el.setAttribute('tabindex', '-1');
7716
- });
7717
- };
7718
- var isCloneSlide = function isCloneSlide(index, clonesCount, childrenLength, infinite) {
7719
- return infinite && (index < clonesCount || index >= childrenLength + clonesCount);
7720
- };
7721
- var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, containerWidth, slidesLength) {
7722
- var widthSoFar = 0;
7723
- var visible = [];
7724
- for (var i = currentIndex; i < slidesLength; i++) {
7725
- var _slideWidths$i;
7726
- var width = (_slideWidths$i = slideWidths[i]) != null ? _slideWidths$i : 0;
7727
- if (widthSoFar + width > containerWidth) break;
7728
- visible.push(i);
7729
- widthSoFar += width;
7730
- }
7731
- return visible;
7732
- };
7733
- var getMovedSlides = function getMovedSlides(delta, slideWidths) {
7734
- var absDelta = Math.abs(delta);
7735
- var movedSlides = 0;
7736
- var accumulated = 0;
7737
- for (var i = 0; i < slideWidths.length; i++) {
7738
- accumulated += slideWidths[i];
7739
- // Allow partial slide (e.g. 50% of next slide) to count
7740
- var partialThreshold = slideWidths[i] * 0.5;
7741
- if (absDelta > accumulated - partialThreshold) {
7742
- movedSlides++;
7743
- } else {
7744
- break;
7745
- }
7746
- }
7747
- return movedSlides;
8126
+ setSameSiteUrl = _useState[1];
8127
+ React.useEffect(function () {
8128
+ setSameSiteUrl(isSameSiteUrl(url));
8129
+ }, [url]);
8130
+ return hasSameSiteUrl;
7748
8131
  };
7749
8132
 
7750
- var _excluded$k = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
7751
- var MAX_CLONES_NUMBER = 6;
7752
- var CLICK_DRAG_THRESHOLD = 10;
7753
- var getClonesCount = function getClonesCount(infinite, childrenLength) {
7754
- if (!infinite) return 0;
7755
- return Math.min(childrenLength, MAX_CLONES_NUMBER);
8133
+ var renderBranding = function renderBranding(brandingStyle, invert, brandingText, brandingLink) {
8134
+ // eslint-disable-next-line react-hooks/rules-of-hooks
8135
+ var sameSiteUrl = brandingLink && useSameSiteUrl(brandingLink);
8136
+ var target = sameSiteUrl ? '_self' : '_blank';
8137
+ var color = invert ? ThemeColor['base-black'] : ThemeColor['base-white'];
8138
+ switch (brandingStyle) {
8139
+ case 'BlockText':
8140
+ return (brandingText == null ? void 0 : brandingText.trim()) && /*#__PURE__*/React__default.createElement(BrandingTextBlock, null, truncate(stripAllHtmlTags(brandingText), 25));
8141
+ case 'BodyText':
8142
+ return (brandingText == null ? void 0 : brandingText.trim()) && (/*#__PURE__*/React__default.createElement(BrandingTextBody, {
8143
+ dangerouslySetInnerHTML: {
8144
+ __html: truncateHtmlString(brandingText, 65)
8145
+ }
8146
+ }));
8147
+ case 'TextLink':
8148
+ return (brandingText == null ? void 0 : brandingText.trim()) && brandingLink && (/*#__PURE__*/React__default.createElement(TextLink, {
8149
+ target: target,
8150
+ href: brandingLink,
8151
+ color: color
8152
+ }, truncate(stripAllHtmlTags(brandingText), 25)));
8153
+ case 'StreamLogo':
8154
+ return /*#__PURE__*/React__default.createElement(StreamBadge, {
8155
+ invert: invert
8156
+ });
8157
+ case 'CinemaLogo':
8158
+ return /*#__PURE__*/React__default.createElement(CinemaBadge, {
8159
+ invert: invert
8160
+ });
8161
+ default:
8162
+ return null;
8163
+ }
7756
8164
  };
7757
- var getSlidedWidth = function getSlidedWidth(slide) {
7758
- if (!slide) return 0;
7759
- var style = window.getComputedStyle(slide);
7760
- var marginLeft = parseFloat(style.marginLeft) || 0;
7761
- var marginRight = parseFloat(style.marginRight) || 0;
7762
- return slide.getBoundingClientRect().width + marginLeft + marginRight;
8165
+ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
8166
+ var brandingStyle = _ref.brandingStyle,
8167
+ _ref$invert = _ref.invert,
8168
+ invert = _ref$invert === void 0 ? false : _ref$invert,
8169
+ brandingText = _ref.brandingText,
8170
+ brandingLink = _ref.brandingLink;
8171
+ return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
7763
8172
  };
7764
- var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
7765
- var children = _ref.children,
7766
- _ref$infinite = _ref.infinite,
7767
- infinite = _ref$infinite === void 0 ? false : _ref$infinite,
7768
- onIndexChange = _ref.onIndexChange,
7769
- _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
7770
- slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
7771
- _ref$slidesAriaHidden = _ref.slidesAriaHidden,
7772
- slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
7773
- onActiveChange = _ref.onActiveChange,
7774
- onOverflowChange = _ref.onOverflowChange,
7775
- props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
7776
- var containerRef = React.useRef(null);
7777
- var childRefs = React.useRef([]);
7778
- var startX = React.useRef(0);
7779
- var currentTranslate = React.useRef(0);
7780
- var isDragging = React.useRef(false);
7781
- var isMouseDown = React.useRef(false);
7782
- var isActive = React.useRef(false);
7783
- var isClickPrevented = React.useRef(false);
7784
- var uniqueIdRef = React.useRef(generateDomElementId());
7785
- var _useState = React.useState(null),
7786
- dragTranslateX = _useState[0],
7787
- setDragTranslateX = _useState[1];
7788
- var _useState2 = React.useState(false),
7789
- transitioning = _useState2[0],
7790
- setTransitioning = _useState2[1];
7791
- var _useState3 = React.useState([]),
7792
- slideWidths = _useState3[0],
7793
- setSlideWidths = _useState3[1];
7794
- var _useState4 = React.useState(0),
7795
- containerWidth = _useState4[0],
7796
- setContainerWidth = _useState4[1];
7797
- var _useMemo = React.useMemo(function () {
7798
- var count = getClonesCount(infinite, children.length);
7799
- var leftClones = infinite ? children.slice(-count) : [];
7800
- var rightClones = infinite ? children.slice(0, count) : [];
7801
- var allSlides = infinite ? [].concat(leftClones, children, rightClones) : children;
7802
- return {
7803
- slides: allSlides,
7804
- clonesCount: count
7805
- };
7806
- }, [children, infinite]),
7807
- slides = _useMemo.slides,
7808
- clonesCount = _useMemo.clonesCount;
7809
- var _useState5 = React.useState(infinite ? clonesCount : 0),
7810
- currentIndex = _useState5[0],
7811
- setCurrentIndex = _useState5[1];
7812
- React.useEffect(function () {
7813
- var handler = function handler(e) {
7814
- if (isClickPrevented.current) {
7815
- e.preventDefault();
7816
- e.stopPropagation();
7817
- }
7818
- };
7819
- var containerElement = containerRef.current;
7820
- containerElement == null || containerElement.addEventListener('click', handler, true);
7821
- return function () {
7822
- return containerElement == null ? void 0 : containerElement.removeEventListener('click', handler, true);
7823
- };
7824
- }, []);
7825
- React.useEffect(function () {
7826
- if (!onIndexChange) return;
7827
- if (!infinite) {
7828
- onIndexChange(currentIndex);
7829
- } else {
7830
- var offset = currentIndex - clonesCount + children.length;
7831
- var realIndex = offset % children.length;
7832
- onIndexChange(realIndex);
7833
- }
7834
- }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
7835
- var updateDimensions = React.useCallback(function () {
7836
- var cw = containerRef.current ? containerRef.current.offsetWidth : 0;
7837
- var widths = childRefs.current.length ? childRefs.current.map(getSlidedWidth) : [];
7838
- setContainerWidth(cw);
7839
- setSlideWidths(widths);
7840
- if (!infinite) {
7841
- var totalWidth = widths.reduce(function (acc, w) {
7842
- return acc + w;
7843
- }, 0);
7844
- var visibleSpace = cw - (slidesOffsetBefore || 0);
7845
- var overflow = totalWidth > Math.max(0, visibleSpace);
7846
- onOverflowChange == null || onOverflowChange(overflow);
7847
- }
7848
- }, []);
7849
- React.useEffect(function () {
7850
- var animationFrameRequestId = requestAnimationFrame(updateDimensions);
7851
- return function () {
7852
- return cancelAnimationFrame(animationFrameRequestId);
7853
- };
7854
- }, [children]);
7855
- React.useEffect(function () {
7856
- var observer = new ResizeObserver(updateDimensions);
7857
- if (containerRef.current) observer.observe(containerRef.current);
7858
- return function () {
7859
- return observer.disconnect();
7860
- };
7861
- }, [children]);
7862
- var setIsActive = function setIsActive() {
7863
- if (!isActive.current) {
7864
- isActive.current = true;
7865
- onActiveChange == null || onActiveChange(true);
7866
- }
7867
- };
7868
- var getTranslateX = function getTranslateX() {
7869
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
7870
- return acc + width;
7871
- }, 0);
7872
- return (slidesOffsetBefore || 0) - widthsBefore;
7873
- };
7874
- var getTranslateForIndex = function getTranslateForIndex(index) {
7875
- var widthsBefore = slideWidths.slice(0, index).reduce(function (acc, width) {
7876
- return acc + width;
7877
- }, 0);
7878
- return (slidesOffsetBefore || 0) - widthsBefore;
7879
- };
7880
- var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
7881
- var delta = currentTranslate.current - getTranslateX();
7882
- var direction = delta > 0 ? -1 : 1;
7883
- var movedSlides = getMovedSlides(delta, slideWidths);
7884
- if (Math.abs(delta) > 20) {
7885
- movedSlides = Math.max(1, movedSlides);
7886
- var targetIndex = currentIndex + direction * movedSlides;
7887
- var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
7888
- if (!infinite) {
7889
- currentTranslate.current = getTranslateForIndex(finalIndex);
7890
- setDragTranslateX(null);
7891
- }
7892
- setTransitioning(true);
7893
- setCurrentIndex(finalIndex);
7894
- } else {
7895
- setTransitioning(true);
7896
- setCurrentIndex(function (prev) {
7897
- return prev;
7898
- });
7899
- }
7900
- setDragTranslateX(null);
7901
- };
7902
- var canMoveNext = function canMoveNext() {
7903
- if (infinite) return true;
7904
- if (slideWidths.length === 0 || containerWidth === 0) return false;
7905
- var totalWidth = slideWidths.reduce(function (acc, w) {
7906
- return acc + w;
7907
- }, 0);
7908
- var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
7909
- return acc + w;
7910
- }, 0);
7911
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
7912
- var remainingToRight = totalWidth - widthsBefore - visibleSpace;
7913
- var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
7914
- var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
7915
- var nextIndex = lastVisibleIndex + 1;
7916
- if (nextIndex >= slideWidths.length) return false;
7917
- var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
7918
- if (nextSlideWidth === 0) return false;
7919
- var EPS = 1; // pixel tolerance
7920
- // full next slide fits
7921
- if (remainingToRight + EPS >= nextSlideWidth) return true;
7922
- return remainingToRight > 0;
7923
- };
7924
- var handleTransitionEnd = function handleTransitionEnd() {
7925
- setTransitioning(false);
7926
- if (!infinite) return;
7927
- if (currentIndex >= children.length + clonesCount) {
7928
- setCurrentIndex(clonesCount);
7929
- } else if (currentIndex < clonesCount) {
7930
- setCurrentIndex(children.length + currentIndex);
7931
- }
7932
- };
7933
- var goToPrev = function goToPrev() {
7934
- if (transitioning) return;
7935
- setIsActive();
7936
- setTransitioning(true);
7937
- setCurrentIndex(function (prev) {
7938
- var target = infinite ? prev - 1 : Math.max(0, prev - 1);
7939
- if (!infinite) {
7940
- currentTranslate.current = getTranslateForIndex(target);
7941
- setDragTranslateX(null);
7942
- }
7943
- return target;
7944
- });
7945
- };
7946
- var goToNext = function goToNext() {
7947
- if (transitioning || !canMoveNext()) return;
7948
- setIsActive();
7949
- setTransitioning(true);
7950
- setCurrentIndex(function (prev) {
7951
- var target = infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
7952
- if (!infinite) {
7953
- currentTranslate.current = getTranslateForIndex(target);
7954
- setDragTranslateX(null);
7955
- }
7956
- return target;
7957
- });
8173
+
8174
+ var _excluded$l = ["text"];
8175
+ var useResponsiveVideo = function useResponsiveVideo(video, poster) {
8176
+ var mobileVideo = video.mobile || video.desktop;
8177
+ var desktopVideo = video.desktop || video.mobile;
8178
+ var mobilePoster = poster.mobile || poster.desktop;
8179
+ var desktopPoster = poster.desktop || poster.mobile;
8180
+ var _useState = React.useState(desktopPoster),
8181
+ posterUrl = _useState[0],
8182
+ setPoster = _useState[1];
8183
+ var _useState2 = React.useState(desktopVideo),
8184
+ videoUrl = _useState2[0],
8185
+ setVideoUrl = _useState2[1];
8186
+ var isMobile = useMobile();
8187
+ React.useEffect(function () {
8188
+ setPoster(isMobile ? mobilePoster : desktopPoster);
8189
+ setVideoUrl(isMobile ? mobileVideo : desktopVideo);
8190
+ }, [isMobile]);
8191
+ return {
8192
+ posterUrl: posterUrl,
8193
+ videoUrl: videoUrl
7958
8194
  };
7959
- React.useImperativeHandle(ref, function () {
7960
- return {
7961
- nextSlide: goToNext,
7962
- prevSlide: goToPrev,
7963
- hasOverflow: function hasOverflow() {
7964
- var totalWidth = slideWidths.reduce(function (acc, w) {
7965
- return acc + w;
7966
- }, 0);
7967
- var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
7968
- return totalWidth > Math.max(0, visibleSpace);
7969
- },
7970
- hasNext: function hasNext() {
7971
- return canMoveNext();
7972
- }
7973
- };
8195
+ };
8196
+ var VideoWithControls = function VideoWithControls(_ref) {
8197
+ var video = _ref.video,
8198
+ poster = _ref.poster;
8199
+ var _useResponsiveVideo = useResponsiveVideo(video, poster),
8200
+ posterUrl = _useResponsiveVideo.posterUrl,
8201
+ videoUrl = _useResponsiveVideo.videoUrl;
8202
+ var isIOS = useIOS();
8203
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("video", {
8204
+ id: video.elementId,
8205
+ width: "100%",
8206
+ height: "100%",
8207
+ muted: true,
8208
+ poster: posterUrl,
8209
+ src: videoUrl,
8210
+ "data-testid": "compact-video",
8211
+ playsInline: true
8212
+ }, /*#__PURE__*/React__default.createElement("source", {
8213
+ src: videoUrl
8214
+ }), /*#__PURE__*/React__default.createElement("img", {
8215
+ src: posterUrl,
8216
+ alt: poster.alt,
8217
+ "data-testid": "compact-image"
8218
+ })), /*#__PURE__*/React__default.createElement(VideoControls, {
8219
+ loop: true,
8220
+ videoElementId: video.elementId,
8221
+ muted: true,
8222
+ autoPlay: false,
8223
+ soundControl: !isIOS
8224
+ }));
8225
+ };
8226
+ var CompactHeaderImage = function CompactHeaderImage(_ref2) {
8227
+ var mobile = _ref2.mobile,
8228
+ desktop = _ref2.desktop,
8229
+ alt = _ref2.alt;
8230
+ return /*#__PURE__*/React__default.createElement("picture", {
8231
+ "data-testid": "compact-picture"
8232
+ }, mobile && /*#__PURE__*/React__default.createElement("source", {
8233
+ srcSet: mobile,
8234
+ media: "" + devices.mobile,
8235
+ "data-testid": "compact-mobile-image-source"
8236
+ }), /*#__PURE__*/React__default.createElement("source", {
8237
+ srcSet: desktop,
8238
+ media: "" + devices.desktop,
8239
+ "data-testid": "compact-desktop-image-source"
8240
+ }), /*#__PURE__*/React__default.createElement("img", {
8241
+ src: desktop,
8242
+ alt: alt,
8243
+ "data-testid": "compact-image"
8244
+ }));
8245
+ };
8246
+ var CompactHeaderVideo = function CompactHeaderVideo(_ref3) {
8247
+ var video = _ref3.video,
8248
+ poster = _ref3.poster;
8249
+ if (!video.desktop && !video.mobile) {
8250
+ return /*#__PURE__*/React__default.createElement(CompactHeaderImage, Object.assign({}, poster));
8251
+ }
8252
+ return /*#__PURE__*/React__default.createElement(VideoWithControls, {
8253
+ video: video,
8254
+ poster: poster
7974
8255
  });
7975
- var handleTouchStart = function handleTouchStart(e) {
7976
- setIsActive();
7977
- startX.current = e.touches[0].clientX;
7978
- isDragging.current = true;
7979
- isClickPrevented.current = false;
7980
- setTransitioning(false);
7981
- };
7982
- var handleTouchMove = function handleTouchMove(e) {
7983
- if (!isDragging.current) return;
7984
- var deltaX = e.touches[0].clientX - startX.current;
7985
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
7986
- isClickPrevented.current = true;
7987
- }
7988
- var visualOffset = getTranslateX() + deltaX;
7989
- currentTranslate.current = visualOffset;
7990
- setDragTranslateX(visualOffset);
7991
- };
7992
- var handleTouchEnd = function handleTouchEnd() {
7993
- isDragging.current = false;
7994
- if (isClickPrevented.current) {
7995
- navigateOnSwipeEnd();
7996
- } else {
7997
- setDragTranslateX(null);
7998
- }
7999
- };
8000
- var handleMouseMove = function handleMouseMove(e) {
8001
- if (!isDragging.current || !isMouseDown.current || transitioning) return;
8002
- var deltaX = e.clientX - startX.current;
8003
- if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
8004
- isClickPrevented.current = true;
8005
- }
8006
- var visualOffset = getTranslateX() + deltaX;
8007
- currentTranslate.current = visualOffset;
8008
- setDragTranslateX(visualOffset);
8009
- };
8010
- var _handleMouseUp = function handleMouseUp() {
8011
- if (!isMouseDown.current) return;
8012
- isMouseDown.current = false;
8013
- isDragging.current = false;
8014
- if (isClickPrevented.current) {
8015
- navigateOnSwipeEnd();
8016
- } else {
8017
- setDragTranslateX(null);
8018
- }
8019
- window.removeEventListener('mousemove', handleMouseMove);
8020
- window.removeEventListener('mouseup', _handleMouseUp);
8021
- };
8022
- var handleMouseDown = function handleMouseDown(e) {
8023
- if (transitioning || e.button !== 0) return;
8024
- e.preventDefault();
8025
- setIsActive();
8026
- startX.current = e.clientX;
8027
- isDragging.current = true;
8028
- isMouseDown.current = true;
8029
- isClickPrevented.current = false;
8030
- setTransitioning(false);
8031
- window.addEventListener('mousemove', handleMouseMove);
8032
- window.addEventListener('mouseup', _handleMouseUp);
8256
+ };
8257
+ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
8258
+ var title = _ref4.title,
8259
+ link = _ref4.link,
8260
+ _ref4$sponsor = _ref4.sponsor,
8261
+ sponsor = _ref4$sponsor === void 0 ? true : _ref4$sponsor,
8262
+ customSponsorImage = _ref4.customSponsorImage,
8263
+ bgUrlDesktop = _ref4.bgUrlDesktop,
8264
+ bgUrlDevice = _ref4.bgUrlDevice,
8265
+ videoUrlDesktop = _ref4.videoUrlDesktop,
8266
+ videoUrlMobile = _ref4.videoUrlMobile,
8267
+ _ref4$bgImageAltText = _ref4.bgImageAltText,
8268
+ bgImageAltText = _ref4$bgImageAltText === void 0 ? '' : _ref4$bgImageAltText,
8269
+ _ref4$invert = _ref4.invert,
8270
+ invert = _ref4$invert === void 0 ? false : _ref4$invert,
8271
+ _ref4$brandingStyle = _ref4.brandingStyle,
8272
+ brandingStyle = _ref4$brandingStyle === void 0 ? 'BlockText' : _ref4$brandingStyle,
8273
+ brandingText = _ref4.brandingText,
8274
+ brandingLink = _ref4.brandingLink,
8275
+ _ref4$showCopy = _ref4.showCopy,
8276
+ showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
8277
+ var _ref5 = link || {},
8278
+ linkText = _ref5.text,
8279
+ restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$l);
8280
+ // const titleSize = title && title.length > 20 ? 4 : 3;
8281
+ var video = {
8282
+ elementId: 'compact-header-video',
8283
+ desktop: videoUrlDesktop,
8284
+ mobile: videoUrlMobile
8033
8285
  };
8034
- var onSlideFocus = function onSlideFocus(isVisible, index) {
8035
- if (!isVisible) {
8036
- setCurrentIndex(index);
8037
- }
8286
+ var poster = {
8287
+ desktop: bgUrlDesktop,
8288
+ mobile: bgUrlDevice,
8289
+ alt: bgImageAltText
8038
8290
  };
8039
- var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
8040
- return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
8041
- ref: containerRef,
8042
- className: "swipe",
8043
- onTouchStart: handleTouchStart,
8044
- onTouchMove: handleTouchMove,
8045
- onTouchEnd: handleTouchEnd,
8046
- onMouseDown: handleMouseDown,
8047
- "aria-roledescription": "carousel",
8048
- role: "list"
8049
- }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
8050
- className: "swipe-track-wrapper",
8051
- translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
8052
- transitioning: transitioning && dragTranslateX === null,
8053
- onTransitionEnd: handleTransitionEnd
8054
- }, slides.map(function (child, index) {
8055
- var isVisible = visibleIndexes.includes(index);
8056
- var isClone = isCloneSlide(index, clonesCount, children.length, infinite);
8057
- return /*#__PURE__*/React__default.createElement("div", {
8058
- key: "swipe-slide-" + uniqueIdRef.current + "-" + index,
8059
- className: SWIPE_SLIDE_CLASS_NAME,
8060
- "aria-hidden": slidesAriaHidden || isClone,
8061
- "aria-roledescription": "slide",
8062
- role: "listitem",
8063
- ref: function ref(el) {
8064
- childRefs.current[index] = el;
8065
- disableTabbingInside(el, isClone);
8066
- },
8067
- onFocus: function onFocus() {
8068
- return onSlideFocus(isVisible, index);
8069
- }
8070
- }, child);
8071
- })));
8072
- });
8073
- Swipe.displayName = 'Swipe';
8291
+ return /*#__PURE__*/React__default.createElement(ComapctHeaderWrapper, null, sponsor ? (/*#__PURE__*/React__default.createElement(SponsorWrapper, {
8292
+ "data-testid": "compact-sponsor"
8293
+ }, customSponsorImage ? (/*#__PURE__*/React__default.createElement(Sponsorship, Object.assign({
8294
+ "data-testid": "compact-custom-sponsor"
8295
+ }, customSponsorImage))) : (/*#__PURE__*/React__default.createElement(Sponsorship, null)))) : null, /*#__PURE__*/React__default.createElement(CompactHeaderAssetWrapper, null, /*#__PURE__*/React__default.createElement(CompactHeaderVideo, {
8296
+ video: video,
8297
+ poster: poster
8298
+ })), showCopy && (/*#__PURE__*/React__default.createElement(CompactHeaderCopyWrapper, {
8299
+ className: "page-heading-compact__background",
8300
+ invert: invert
8301
+ }, /*#__PURE__*/React__default.createElement(CompactHeaderBranding, {
8302
+ brandingStyle: brandingStyle,
8303
+ brandingText: brandingText,
8304
+ brandingLink: brandingLink,
8305
+ invert: invert
8306
+ }), /*#__PURE__*/React__default.createElement(CompactHeaderTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8307
+ size: "large",
8308
+ hierarchy: "h1"
8309
+ }, title && truncate(title, 40))), link && (/*#__PURE__*/React__default.createElement(CompactHeaderCTAWrapper, null, /*#__PURE__*/React__default.createElement(PrimaryButtonWithInversion, Object.assign({}, restLink, {
8310
+ invert: invert,
8311
+ className: "page-heading-compact__button"
8312
+ }), linkText))))));
8313
+ };
8074
8314
 
8075
- var _templateObject$V, _templateObject2$J, _templateObject3$x, _templateObject4$s, _templateObject5$n, _templateObject6$g, _templateObject7$c;
8076
- var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$V || (_templateObject$V = /*#__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 @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
8077
- var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
8078
- var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
8079
- var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\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: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
8315
+ var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject4$t, _templateObject5$o, _templateObject6$h, _templateObject7$d;
8316
+ var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$W || (_templateObject$W = /*#__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 @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
8317
+ var HighlightTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n h1 {\n margin: 0 0 8px 0;\n }\n p {\n text-transform: uppercase;\n }\n"])));
8318
+ var HighlightTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobile);
8319
+ var HighlightsInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\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: ", ";\n width: 100%;\n padding: 20px;\n }\n }\n"])), function (_ref) {
8080
8320
  var hasImages = _ref.hasImages;
8081
8321
  return hasImages ? '1 / 1 / 3 / 7' : '1 / 1 / 3 / 12';
8082
8322
  }, devices.mobile, function (_ref2) {
8083
8323
  var hasImages = _ref2.hasImages;
8084
8324
  return hasImages ? '3 / 1 / 4 / 15' : '1 / 1 / 3 / 15';
8085
8325
  });
8086
- var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
8326
+ var HighlightsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 7 / 3 / 17;\n position: relative;\n height: 100%;\n width: 100%;\n background-color: var(--color-base-black);\n\n .swipe-slide {\n ", "\n }\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 3 / 15;\n\n .swiper-slide {\n width: 100%;\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n }\n"])), function (_ref3) {
8087
8327
  var hasMultipleImages = _ref3.hasMultipleImages;
8088
8328
  return hasMultipleImages ? 'width: calc(100% - 50px - var(--rotator-button-width)); -webkit-transform: translate3d(0, 0, 0);' : 'width: 100%';
8089
8329
  }, devices.mobile);
8090
- var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
8091
- var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__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);
8330
+ var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin-top: 8px;\n margin-bottom: 8px;\n\n @media ", " {\n div {\n background-color: var(--color-base-black);\n }\n svg path {\n fill: var(--color-base-white) !important;\n }\n\n & {\n display: flex;\n margin-left: 100px;\n align-self: center;\n justify-content: flex-end;\n }\n }\n"])), devices.mobile);
8331
+ var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__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);
8092
8332
 
8093
8333
  /* eslint-disable react/no-danger */
8094
8334
  var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
@@ -8131,7 +8371,7 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8131
8371
  }
8132
8372
  })))) : null), hasImages && (/*#__PURE__*/React__default.createElement(HighlightsCarouselWrapper, {
8133
8373
  hasMultipleImages: hasMultipleImages
8134
- }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper, {
8374
+ }, hasMultipleImages && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
8135
8375
  "data-testid": "rotator-buttons"
8136
8376
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
8137
8377
  onClickNext: onNext,
@@ -8151,14 +8391,14 @@ var PageHeadingHighlightCarousel = function PageHeadingHighlightCarousel(_ref) {
8151
8391
  }))))));
8152
8392
  };
8153
8393
 
8154
- var _templateObject$W, _templateObject2$K, _templateObject3$y, _templateObject5$o, _templateObject6$h, _templateObject7$d, _templateObject8$8;
8155
- var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
8156
- var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8157
- var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8158
- var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
8159
- var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8160
- var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8161
- var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
8394
+ var _templateObject$X, _templateObject2$L, _templateObject3$z, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9;
8395
+ var linkButtonStyles = /*#__PURE__*/styled.css(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n background: none;\n border: none;\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n span {\n height: 1.5em;\n width: 1.5em;\n\n svg > path {\n fill: var(--color-base-black);\n }\n }\n\n &:hover {\n outline: none;\n }\n"])));
8396
+ var PageNav = /*#__PURE__*/styled__default.a(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8397
+ var PaginationLink = /*#__PURE__*/styled__default.a(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), linkButtonStyles);
8398
+ var PageNumberWrapper = /*#__PURE__*/styled__default.ol(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n min-width: fit-content;\n align-items: center;\n justify-content: center;\n flex-wrap: nowrap;\n flex-direction: row;\n list-style: none;\n padding: 0;\n max-width: fit-content;\n margin: 0 auto;\n\n li {\n margin-left: 24px;\n color: var(--color-base-black);\n display: flex;\n justify-content: flex-start;\n align-items: center;\n }\n\n li:first-child {\n margin-left: 0px;\n }\n"])));
8399
+ var LastPageItem = /*#__PURE__*/styled__default.li(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8400
+ var PreviousPageItem = /*#__PURE__*/styled__default.li(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-left: 12px;\n }\n"])));
8401
+ var TextLinkPagination = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: ", ";\n border-bottom: ", ";\n }\n\n :hover {\n cursor: pointer;\n color: var(--color-primary-red);\n border-bottom: 1px solid var(--color-primary-red);\n svg > path {\n fill: var(--color-base-black);\n }\n }\n"])), function (_ref) {
8162
8402
  var active = _ref.active;
8163
8403
  return active ? "var(--color-primary-red)" : 'inherit';
8164
8404
  }, function (_ref2) {
@@ -8310,16 +8550,16 @@ var Pagination = function Pagination(_ref) {
8310
8550
  }))))));
8311
8551
  };
8312
8552
 
8313
- var _templateObject$X;
8314
- var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\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);
8315
-
8316
- var _templateObject$Y, _templateObject2$L;
8317
- var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
8318
- var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
8553
+ var _templateObject$Y;
8554
+ var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 40px 36px;\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);
8319
8555
 
8320
8556
  var _templateObject$Z, _templateObject2$M;
8321
- var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
8322
- var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8557
+ var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n }\n grid-area: role-person;\n break-inside: avoid;\n"])));
8558
+ var RoleContent = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-base-dark-grey);\n }\n overflow-wrap: break-word;\n padding-bottom: 4px;\n"])));
8559
+
8560
+ var _templateObject$_, _templateObject2$N;
8561
+ var PersonLink = /*#__PURE__*/styled__default.a(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: underline;\n text-underline-offset: 6px;\n\n && {\n color: var(--color-primary-black);\n\n :hover {\n color: var(--color-rbo-black-hovered);\n :after {\n color: var(--color-primary-black);\n }\n }\n\n :visited {\n color: var(--color-primary-black);\n }\n }\n"])));
8562
+ var ReplacementContent = /*#__PURE__*/styled__default.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--base-color-dark-grey);\n }\n"])));
8323
8563
 
8324
8564
  var Person = function Person(_ref) {
8325
8565
  var person = _ref.person,
@@ -8358,9 +8598,9 @@ var PersonDetails = function PersonDetails(_ref) {
8358
8598
  })));
8359
8599
  };
8360
8600
 
8361
- var _templateObject$_, _templateObject2$N;
8362
- var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8363
- var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8601
+ var _templateObject$$, _templateObject2$O;
8602
+ var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8603
+ var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8364
8604
 
8365
8605
  var PersonCard = function PersonCard(_ref) {
8366
8606
  var role = _ref.role,
@@ -8370,7 +8610,7 @@ var PersonCard = function PersonCard(_ref) {
8370
8610
  var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
8371
8611
  return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
8372
8612
  }, [role]);
8373
- if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper, {
8613
+ if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
8374
8614
  className: className
8375
8615
  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
8376
8616
  src: role.people[0].headshot,
@@ -8398,14 +8638,14 @@ var PeopleListing = function PeopleListing(_ref) {
8398
8638
  }));
8399
8639
  };
8400
8640
 
8401
- var _templateObject$$, _templateObject2$O, _templateObject3$z, _templateObject4$t;
8402
- var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8403
- var CreditListingWrapper = /*#__PURE__*/styled__default(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) {
8641
+ var _templateObject$10, _templateObject2$P, _templateObject3$A, _templateObject4$u;
8642
+ var ReplacementWrapper = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
8643
+ var CreditListingWrapper = /*#__PURE__*/styled__default(PeopleListingGrid)(_templateObject2$P || (_templateObject2$P = /*#__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) {
8404
8644
  var columnCount = _ref.columnCount;
8405
8645
  return "repeat(" + columnCount + ", 1fr)";
8406
8646
  }, devices.mobile, devices.tablet);
8407
- var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8408
- var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8647
+ var DescriptionWrapper = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 25px;\n margin-bottom: 3px;\n }\n"])));
8648
+ var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n min-height: 1.5em;\n"])));
8409
8649
 
8410
8650
  // Get the total character length of a property in an array of objects
8411
8651
  var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -8532,8 +8772,8 @@ var CreditListing = function CreditListing(_ref) {
8532
8772
  }, creditEntries);
8533
8773
  };
8534
8774
 
8535
- var _templateObject$10;
8536
- var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$10 || (_templateObject$10 = /*#__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: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
8775
+ var _templateObject$11;
8776
+ var PolicyLinksTextLinkWrapper = /*#__PURE__*/styled__default(TextLink)(_templateObject$11 || (_templateObject$11 = /*#__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: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
8537
8777
 
8538
8778
  var PolicyLinks = function PolicyLinks(_ref) {
8539
8779
  var items = _ref.items;
@@ -8551,14 +8791,14 @@ var PolicyLinks = function PolicyLinks(_ref) {
8551
8791
  }));
8552
8792
  };
8553
8793
 
8554
- var _templateObject$11, _templateObject3$A, _templateObject4$u, _templateObject5$p, _templateObject6$i, _templateObject7$e, _templateObject8$9, _templateObject9$5, _templateObject0$5, _templateObject1$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
8794
+ var _templateObject$12, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
8555
8795
  var LENGTH_TEXT = 28;
8556
8796
  var LENGTH_TEXT_TABLET$1 = 12;
8557
8797
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
8558
8798
  var GridTemplateImageToRight = "'. . left left left left left . right right right right right right right right'";
8559
8799
  var GridTemplateAsCard = "'. . left left left left left right right right right right right right . . '";
8560
8800
  var GridTemplateAsCardTablet = "'. . left left left left left left left right right right right right . . '";
8561
- var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 || (_templateObject$11 = /*#__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) {
8801
+ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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) {
8562
8802
  var imageToLeft = _ref.imageToLeft;
8563
8803
  return imageToLeft ? GridTemplateImageToLeft : GridTemplateImageToRight;
8564
8804
  }, devices.tablet, function (_ref2) {
@@ -8568,7 +8808,7 @@ var PromoWithTagsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$11 ||
8568
8808
  var asCard = _ref3.asCard;
8569
8809
  return asCard ? "\n grid-template-areas: " + GridTemplateAsCard + ";\n @media " + devices.tablet + " {\n grid-template-areas: " + GridTemplateAsCardTablet + ";\n }\n " : "";
8570
8810
  });
8571
- var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__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) {
8811
+ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__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) {
8572
8812
  var hasTextLinks = _ref4.hasTextLinks;
8573
8813
  return "margin-top: " + (hasTextLinks ? '0' : '24px') + ";";
8574
8814
  }, function (_ref5) {
@@ -8592,21 +8832,21 @@ var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$A ||
8592
8832
  }
8593
8833
  return '';
8594
8834
  });
8595
- var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8835
+ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", ";\n\n ", "\n"])), function (_ref7) {
8596
8836
  var marginBottom = _ref7.marginBottom;
8597
8837
  return marginBottom + "px";
8598
8838
  }, function (_ref8) {
8599
8839
  var mobileMarginBottom = _ref8.mobileMarginBottom;
8600
8840
  return mobileMarginBottom && "\n @media " + devices.mobile + " {\n margin-bottom: " + mobileMarginBottom + "px;\n }\n ";
8601
8841
  });
8602
- var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8603
- var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8604
- var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__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);
8605
- var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__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);
8606
- var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8607
- var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__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);
8608
- var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$3 || (_templateObject1$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
8609
- var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__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 (_ref9) {
8842
+ var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
8843
+ var TextLinkWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
8844
+ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__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);
8845
+ var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__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);
8846
+ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
8847
+ var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject0$6 || (_templateObject0$6 = /*#__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);
8848
+ var asCardOverrides = /*#__PURE__*/styled.css(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", " {\n flex-direction: row;\n @media ", " {\n flex-direction: row;\n }\n }\n"])), ButtonsContainer$2, devices.tablet);
8849
+ var PromoWithTagsExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__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 (_ref9) {
8610
8850
  var imageToLeft = _ref9.imageToLeft;
8611
8851
  return imageToLeft ? 'left' : 'right';
8612
8852
  }, devices.mobile);
@@ -8627,7 +8867,7 @@ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_te
8627
8867
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject16 || (_templateObject16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\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 @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
8628
8868
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject17 || (_templateObject17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8629
8869
 
8630
- var _excluded$l = ["text"],
8870
+ var _excluded$m = ["text"],
8631
8871
  _excluded2$2 = ["text"],
8632
8872
  _excluded3$1 = ["text"];
8633
8873
  var _buttonTypeToButton$1;
@@ -8695,7 +8935,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
8695
8935
  var _ref2 = firstButton || {},
8696
8936
  _ref2$text = _ref2.text,
8697
8937
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
8698
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
8938
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
8699
8939
  var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
8700
8940
  var secondButton = links == null ? void 0 : links[1];
8701
8941
  var _ref3 = secondButton || {},
@@ -8823,28 +9063,28 @@ var PromoWithTags = function PromoWithTags(_ref) {
8823
9063
  }))));
8824
9064
  };
8825
9065
 
8826
- var _templateObject$12, _templateObject2$P, _templateObject3$B, _templateObject4$v, _templateObject5$q, _templateObject6$j, _templateObject7$f;
9066
+ var _templateObject$13, _templateObject2$Q, _templateObject3$C, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g;
8827
9067
  var LENGTH_TEXT$2 = 28;
8828
9068
  var LENGTH_TEXT_TABLET$2 = 10;
8829
- var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$12 || (_templateObject$12 = /*#__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) {
9069
+ var PromoWithTitleGrid = /*#__PURE__*/styled__default(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"])), function (_ref) {
8830
9070
  var imageToLeft = _ref.imageToLeft;
8831
9071
  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'";
8832
9072
  }, devices.tablet, function (_ref2) {
8833
9073
  var imageToLeft = _ref2.imageToLeft;
8834
9074
  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'";
8835
9075
  }, devices.mobile);
8836
- var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), function (_ref3) {
9076
+ var PromoWithTitleImageWrapper = /*#__PURE__*/styled__default.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) {
8837
9077
  var imageToLeft = _ref3.imageToLeft;
8838
9078
  return imageToLeft ? 'left' : 'right';
8839
9079
  }, devices.mobile);
8840
- var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
9080
+ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: ", ";\n align-self: center;\n\n @media ", " {\n & {\n grid-area: row2;\n align-self: start;\n }\n }\n"])), function (_ref4) {
8841
9081
  var imageToLeft = _ref4.imageToLeft;
8842
9082
  return imageToLeft ? 'right' : 'left';
8843
9083
  }, devices.mobile);
8844
- var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
8845
- var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
8846
- var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\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 @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
8847
- var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__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) {
9084
+ var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
9085
+ var HarmonicSubtitleWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
9086
+ var BodyCopyHarmonicWithWrapper$2 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\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 @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
9087
+ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__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) {
8848
9088
  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
8849
9089
  primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
8850
9090
  _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
@@ -8866,8 +9106,8 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$f ||
8866
9106
  return '';
8867
9107
  });
8868
9108
 
8869
- var _templateObject$13;
8870
- var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__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) {
9109
+ var _templateObject$14;
9110
+ var VideoContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__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) {
8871
9111
  var _ref$aspectRatio = _ref.aspectRatio,
8872
9112
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
8873
9113
  return aspectRatio;
@@ -8979,7 +9219,7 @@ var PromoChild = function PromoChild(_ref) {
8979
9219
  }));
8980
9220
  };
8981
9221
 
8982
- var _excluded$m = ["text"],
9222
+ var _excluded$n = ["text"],
8983
9223
  _excluded2$3 = ["text"];
8984
9224
  var LENGTH_TEXT$3 = 28;
8985
9225
  var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -9006,7 +9246,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9006
9246
  var _ref2 = primaryButton || {},
9007
9247
  _ref2$text = _ref2.text,
9008
9248
  primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
9009
- restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
9249
+ restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9010
9250
  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
9011
9251
  var tertiaryButton = links == null ? void 0 : links[1];
9012
9252
  var _ref3 = tertiaryButton || {},
@@ -9049,8 +9289,8 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
9049
9289
  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
9050
9290
  };
9051
9291
 
9052
- var _templateObject$14;
9053
- var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9292
+ var _templateObject$15;
9293
+ var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 30px;\n"])));
9054
9294
 
9055
9295
  /**
9056
9296
  * DEPRECATED. Use RadioGroup2 instead
@@ -9105,9 +9345,9 @@ var RadioGroup = function RadioGroup(_ref) {
9105
9345
  })));
9106
9346
  };
9107
9347
 
9108
- var _templateObject$15, _templateObject2$Q, _templateObject3$C;
9109
- var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9110
- var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n flex-direction: ", ";\n gap: ", ";\n"])), function (_ref) {
9348
+ var _templateObject$16, _templateObject2$R, _templateObject3$D;
9349
+ var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
9350
+ var RadioGroup$1 = /*#__PURE__*/styled__default.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) {
9111
9351
  var horizontalMode = _ref.horizontalMode;
9112
9352
  if (horizontalMode) return 'row';
9113
9353
  return 'column';
@@ -9115,7 +9355,7 @@ var RadioGroup$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_temp
9115
9355
  var gap = _ref2.gap;
9116
9356
  return gap + "px";
9117
9357
  });
9118
- var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9358
+ var ErrorLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: ", ";\n"])), function (_ref3) {
9119
9359
  var darkMode = _ref3.darkMode;
9120
9360
  if (darkMode) return 'var(--base-color-white)';
9121
9361
  return 'var(--base-color-errorstate)';
@@ -9192,10 +9432,10 @@ var RadioGroup2 = function RadioGroup2(_ref) {
9192
9432
  }, error))));
9193
9433
  };
9194
9434
 
9195
- var _templateObject$16, _templateObject2$R, _templateObject3$D;
9196
- var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__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);
9197
- var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__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"])));
9198
- var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__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);
9435
+ var _templateObject$17, _templateObject2$S, _templateObject3$E;
9436
+ var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__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);
9437
+ var ContentContainer$3 = /*#__PURE__*/styled__default.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"])));
9438
+ var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__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);
9199
9439
 
9200
9440
  /* eslint-disable react/no-danger */
9201
9441
  var StatusBanner = function StatusBanner(_ref) {
@@ -9251,8 +9491,8 @@ var StatusBanner = function StatusBanner(_ref) {
9251
9491
  return null;
9252
9492
  };
9253
9493
 
9254
- var _templateObject$17;
9255
- var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__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 margin-block-start: 0;\n }\n"])), devices.mobile);
9494
+ var _templateObject$18;
9495
+ var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__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 margin-block-start: 0;\n }\n"])), devices.mobile);
9256
9496
 
9257
9497
  /* ~~~~~~~ new harmonic types ~~~~~~~ */
9258
9498
  var HarmonicSize = {
@@ -9294,8 +9534,8 @@ var SectionTitle = function SectionTitle(_ref) {
9294
9534
  }, description)))));
9295
9535
  };
9296
9536
 
9297
- var _templateObject$18, _templateObject2$S, _templateObject3$E, _templateObject4$w, _templateObject5$r, _templateObject6$k, _templateObject7$g, _templateObject8$a, _templateObject9$6, _templateObject0$6, _templateObject1$4;
9298
- var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject$18 = /*#__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) {
9537
+ var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7, _templateObject0$7, _templateObject1$5;
9538
+ var stateStyles = /*#__PURE__*/styled.css(_templateObject$19 || (_templateObject$19 = /*#__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) {
9299
9539
  var theme = _ref.theme;
9300
9540
  return "3px solid " + theme.colors.lapisLazuli;
9301
9541
  }, function (_ref2) {
@@ -9305,12 +9545,12 @@ var stateStyles = /*#__PURE__*/styled.css(_templateObject$18 || (_templateObject
9305
9545
  var theme = _ref3.theme;
9306
9546
  return theme.colors.lightgrey;
9307
9547
  });
9308
- var borderStyles = /*#__PURE__*/styled.css(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9548
+ var borderStyles = /*#__PURE__*/styled.css(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
9309
9549
  var theme = _ref4.theme;
9310
9550
  return theme.colors.darkgrey;
9311
9551
  });
9312
- var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9313
- var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9552
+ var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
9553
+ var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
9314
9554
  var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
9315
9555
  var theme = _ref5.theme;
9316
9556
  return {
@@ -9318,11 +9558,11 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
9318
9558
  color: theme.colors.black,
9319
9559
  title: 'Select Arrow'
9320
9560
  };
9321
- })(_templateObject5$r || (_templateObject5$r = /*#__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"])));
9322
- var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$k || (_templateObject6$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9323
- var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9324
- var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9325
- var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9561
+ })(_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"])));
9562
+ var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
9563
+ var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
9564
+ var Options = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
9565
+ var Option = /*#__PURE__*/styled__default.li(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
9326
9566
  var theme = _ref6.theme,
9327
9567
  hover = _ref6.hover;
9328
9568
  var _theme$colors = theme.colors,
@@ -9332,9 +9572,9 @@ var Option = /*#__PURE__*/styled__default.li(_templateObject9$6 || (_templateObj
9332
9572
  return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
9333
9573
  });
9334
9574
  var selectStyles = function selectStyles(width, height) {
9335
- return styled.css(_templateObject0$6 || (_templateObject0$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);
9575
+ return styled.css(_templateObject0$7 || (_templateObject0$7 = _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);
9336
9576
  };
9337
- var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
9577
+ var SelectList = /*#__PURE__*/styled__default.ul(_templateObject1$5 || (_templateObject1$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) {
9338
9578
  var width = _ref7.width,
9339
9579
  height = _ref7.height;
9340
9580
  return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
@@ -9675,9 +9915,9 @@ function Select(_ref3) {
9675
9915
  })))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
9676
9916
  }
9677
9917
 
9678
- var _templateObject$19, _templateObject2$T, _templateObject3$F, _templateObject4$x;
9679
- var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9680
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__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) {
9918
+ var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
9919
+ var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
9920
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.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) {
9681
9921
  var width = _ref.width;
9682
9922
  if (!width) return 'none';
9683
9923
  return width + "px";
@@ -9694,18 +9934,18 @@ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$T || (_t
9694
9934
  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
9695
9935
  return "0 0 0 3px var(--base-color-lapislazuli)";
9696
9936
  });
9697
- var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9937
+ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
9698
9938
  var darkMode = _ref5.darkMode;
9699
9939
  if (darkMode) return "var(--base-color-white)";
9700
9940
  return "var(--base-color-black)";
9701
9941
  });
9702
- var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9942
+ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
9703
9943
  var darkMode = _ref6.darkMode;
9704
9944
  if (darkMode) return "var(--base-color-white)";
9705
9945
  return "var(--base-color-errorstate)";
9706
9946
  });
9707
9947
 
9708
- var _excluded$n = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9948
+ var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
9709
9949
  var DropdownIndicator = function DropdownIndicator(props) {
9710
9950
  return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
9711
9951
  iconName: "DropdownArrow"
@@ -9756,7 +9996,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9756
9996
  _ref2$isSearchable = _ref2.isSearchable,
9757
9997
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
9758
9998
  components = _ref2.components,
9759
- selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
9999
+ selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
9760
10000
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9761
10001
  label: label,
9762
10002
  error: error,
@@ -9774,7 +10014,7 @@ var SelectComponent = function SelectComponent(_ref2) {
9774
10014
  })));
9775
10015
  };
9776
10016
 
9777
- var _excluded$o = ["label", "error", "width", "darkMode", "components"];
10017
+ var _excluded$p = ["label", "error", "width", "darkMode", "components"];
9778
10018
  /**
9779
10019
  * The Select2Async component is similar to Select 2, but uses react-select async
9780
10020
  * component for select instead of regular react-select component. This can be used
@@ -9796,7 +10036,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9796
10036
  _ref$darkMode = _ref.darkMode,
9797
10037
  darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
9798
10038
  components = _ref.components,
9799
- selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$o);
10039
+ selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
9800
10040
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
9801
10041
  label: label,
9802
10042
  error: error,
@@ -9813,24 +10053,24 @@ var SelectComponent$1 = function SelectComponent(_ref) {
9813
10053
  })));
9814
10054
  };
9815
10055
 
9816
- var _templateObject$1a, _templateObject3$G, _templateObject4$y, _templateObject5$s, _templateObject6$l, _templateObject7$h, _templateObject8$b, _templateObject9$7;
9817
- var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
9818
- var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-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\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
9819
- var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
10056
+ var _templateObject$1b, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i, _templateObject8$c, _templateObject9$8;
10057
+ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-light-grey);\n padding: 40px 20px;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 20px;\n align-items: stretch;\n"])));
10058
+ var PromoLabel = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: var(--upsell-border-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\n && {\n color: var(--color-base-white);\n }\n\n font-feature-settings:\n 'tnum' on,\n 'lnum' on,\n 'liga' off,\n 'calt' off;\n text-align: center;\n"])));
10059
+ var ButtonContainer = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: auto;\n padding-top: 10px;\n width: fit-content;\n display: flex;\n flex-direction: row;\n gap: 20px;\n\n @media ", " {\n width: 100%;\n flex-direction: column;\n gap: 16px;\n }\n\n ", "\n\n @media ", ", ", " {\n a {\n text-align: center;\n }\n }\n"])), function (_ref) {
9820
10060
  var stackCtasEarly = _ref.stackCtasEarly;
9821
10061
  return stackCtasEarly ? devices.smallDesktop + ", " + devices.mobileAndTablet : devices.mobile;
9822
10062
  }, function (_ref2) {
9823
10063
  var stackCtasEarly = _ref2.stackCtasEarly;
9824
10064
  return stackCtasEarly && "\n @media " + devices.smallDesktop + ", " + devices.mobileAndTablet + " {\n * {\n width: 100%;\n }\n }\n ";
9825
10065
  }, devices.smallDesktop, devices.mobileAndTablet);
9826
- var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
10066
+ var TitleContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-primary-black);\n display: flex;\n flex-direction: column;\n gap: ", ";\n align-items: stretch;\n"])), function (_ref3) {
9827
10067
  var singleChild = _ref3.singleChild;
9828
10068
  return singleChild ? '0' : '10px';
9829
10069
  });
9830
- var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$l || (_templateObject6$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
9831
- var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
9832
- var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
9833
- var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
10070
+ var DescriptionWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && p {\n margin: 0;\n padding: 0;\n }\n"])));
10071
+ var PriceRow = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 6px 12px;\n"])));
10072
+ var LineThrough = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration-line: line-through;\n color: var(--color-base-dark-grey);\n"])));
10073
+ var VisuallyHidden = /*#__PURE__*/styled__default.span(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n white-space: nowrap !important;\n"])));
9834
10074
 
9835
10075
  // Set max. character length
9836
10076
  var setMaxCharLength = function setMaxCharLength(value, maxLength) {
@@ -9919,8 +10159,8 @@ var UpsellCard = function UpsellCard(_ref) {
9919
10159
  }, /*#__PURE__*/React__default.createElement(SecondaryButton, Object.assign({}, secondaryLink), truncate(secondaryLink.text, LENGTH_SMALL_TEXT$2))))))));
9920
10160
  };
9921
10161
 
9922
- var _templateObject$1b, _templateObject2$U, _templateObject3$H;
9923
- var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
10162
+ var _templateObject$1c, _templateObject2$V, _templateObject3$I;
10163
+ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table;\n width: auto;\n margin: 0;\n\n ", " {\n width: 100%;\n\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), StyledImageAspectRatioWrapper, function (_ref) {
9924
10164
  var _ref$aspectRatio = _ref.aspectRatio,
9925
10165
  aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
9926
10166
  return aspectRatio;
@@ -9930,10 +10170,10 @@ var Wrapper$7 = /*#__PURE__*/styled__default.figure(_templateObject$1b || (_temp
9930
10170
  height = _ref2.height;
9931
10171
  return height ? "calc(" + height + "px * " + AspectRatioWidth[aspectRatio] + ")" : 'auto';
9932
10172
  });
9933
- var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
9934
- var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
10173
+ var CaptionWrapper = /*#__PURE__*/styled__default.figcaption(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: table-caption;\n caption-side: bottom;\n margin-top: var(--carousel-image-caption-margin);\n"])));
10174
+ var CaptionContext = /*#__PURE__*/styled__default(Caption)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n line-clamp: 2;\n max-height: 46px;\n white-space: normal;\n word-break: break-word;\n font-feature-settings: var(--font-feature-settings-body);\n text-transform: var(--text-transform-body);\n"])));
9935
10175
 
9936
- var _excluded$p = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
10176
+ var _excluded$q = ["caption", "altText", "src", "srcSet", "sizes", "loading", "aspectRatio", "className"];
9937
10177
  var ImageWithCaption = function ImageWithCaption(_ref) {
9938
10178
  var caption = _ref.caption,
9939
10179
  altText = _ref.altText,
@@ -9943,7 +10183,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
9943
10183
  loading = _ref.loading,
9944
10184
  aspectRatio = _ref.aspectRatio,
9945
10185
  className = _ref.className,
9946
- restProps = _objectWithoutPropertiesLoose(_ref, _excluded$p);
10186
+ restProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
9947
10187
  return /*#__PURE__*/React__default.createElement(Wrapper$7, Object.assign({
9948
10188
  aspectRatio: aspectRatio,
9949
10189
  className: className
@@ -9964,13 +10204,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
9964
10204
  }, caption))));
9965
10205
  };
9966
10206
 
9967
- var _templateObject$1c, _templateObject2$V, _templateObject3$I, _templateObject4$z, _templateObject5$t, _templateObject6$m;
9968
- var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__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"])));
9969
- var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
9970
- var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
9971
- var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
9972
- var IconWrapper$3 = /*#__PURE__*/styled__default.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);
9973
- var TitleWrapper$4 = /*#__PURE__*/styled__default.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);
10207
+ var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u, _templateObject6$n;
10208
+ var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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"])));
10209
+ var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
10210
+ var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
10211
+ var ImageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
10212
+ var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$u || (_templateObject5$u = /*#__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);
10213
+ var TitleWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__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);
9974
10214
 
9975
10215
  var MiniCard = function MiniCard(_ref) {
9976
10216
  var _ref$title = _ref.title,
@@ -10008,18 +10248,18 @@ var MiniCard = function MiniCard(_ref) {
10008
10248
  }, title)))));
10009
10249
  };
10010
10250
 
10011
- var _templateObject$1d, _templateObject2$W, _templateObject3$J, _templateObject4$A, _templateObject5$u;
10012
- var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__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"])));
10013
- var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__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"])));
10014
- var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10251
+ var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10252
+ var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1e || (_templateObject$1e = /*#__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"])));
10253
+ var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__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"])));
10254
+ var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: visible;\n }\n"])), function (_ref) {
10015
10255
  var isVisible = _ref.isVisible;
10016
10256
  return isVisible ? 'visible' : 'hidden';
10017
10257
  });
10018
- var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10258
+ var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n visibility: ", ";\n\n @media print {\n visibility: hidden;\n }\n"])), function (_ref2) {
10019
10259
  var isVisible = _ref2.isVisible;
10020
10260
  return isVisible ? 'visible' : 'hidden';
10021
10261
  });
10022
- var ContentContainer$5 = /*#__PURE__*/styled__default.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"])));
10262
+ var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$v || (_templateObject5$v = /*#__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"])));
10023
10263
 
10024
10264
  var keyDown = function keyDown(e, toggleFunction) {
10025
10265
  if (e.key === 'Enter' || e.key === 'Space') {
@@ -10100,15 +10340,15 @@ var ReadMore = function ReadMore(_ref) {
10100
10340
  }, isFullTextOpen ? "" + hideText : "" + showMoreText))));
10101
10341
  };
10102
10342
 
10103
- var _templateObject$1e, _templateObject2$X, _templateObject3$K, _templateObject4$B, _templateObject5$v;
10104
- var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10105
- var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$X || (_templateObject2$X = /*#__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"])), exports.Colors.LightGrey);
10106
- var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$K || (_templateObject3$K = /*#__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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
10107
- var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n 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"])), exports.Colors.Black, function (_ref) {
10343
+ var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w;
10344
+ var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
10345
+ var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$Y || (_templateObject2$Y = /*#__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"])), exports.Colors.LightGrey);
10346
+ var MobileButton = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
10347
+ var MenuItem$1 = /*#__PURE__*/styled__default.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"])), exports.Colors.Black, function (_ref) {
10108
10348
  var isActive = _ref.isActive;
10109
10349
  return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
10110
10350
  }, exports.Colors.MidGrey);
10111
- var MobileMenuList = /*#__PURE__*/styled__default.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) {
10351
+ var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$w || (_templateObject5$w = /*#__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) {
10112
10352
  var isOpen = _ref2.isOpen;
10113
10353
  return isOpen ? 'block' : 'none';
10114
10354
  }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10264,19 +10504,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
10264
10504
  });
10265
10505
  };
10266
10506
 
10267
- var _templateObject$1f, _templateObject2$Y, _templateObject3$L, _templateObject4$C, _templateObject5$w, _templateObject6$n;
10268
- var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10269
- var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10270
- var Section = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10507
+ var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o;
10508
+ var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
10509
+ var Sections = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
10510
+ var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
10271
10511
  var color = _ref.color;
10272
10512
  return "var(--base-color-" + color + ")";
10273
10513
  });
10274
- var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
10275
- var Text = /*#__PURE__*/styled__default.div(_templateObject5$w || (_templateObject5$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10514
+ var BottomLine = /*#__PURE__*/styled__default.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"])));
10515
+ var Text = /*#__PURE__*/styled__default.div(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
10276
10516
  var color = _ref2.color;
10277
10517
  return "var(--base-color-" + color + ")";
10278
10518
  });
10279
- var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10519
+ var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
10280
10520
  var color = _ref3.color;
10281
10521
  return "var(--base-color-" + color + ")";
10282
10522
  });
@@ -10358,19 +10598,19 @@ var PasswordStrength = function PasswordStrength(_ref) {
10358
10598
  }, strengthLabel))));
10359
10599
  };
10360
10600
 
10361
- var _templateObject$1g, _templateObject2$Z, _templateObject3$M, _templateObject4$D, _templateObject5$x, _templateObject6$o, _templateObject7$i, _templateObject8$c;
10362
- var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10363
- var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10364
- var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10365
- var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10601
+ var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d;
10602
+ var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
10603
+ var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
10604
+ var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
10605
+ var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n text-transform: capitalize;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n\n &:last-child {\n white-space: normal;\n }\n }\n"])), function (props) {
10366
10606
  return "calc(100% / " + (props.columns - 1) + ")";
10367
10607
  }, devices.tablet, devices.mobile);
10368
- var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$x || (_templateObject5$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n }\n"])), function (props) {
10608
+ var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$y || (_templateObject5$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 12px;\n text-align: left;\n vertical-align: middle;\n border: 1px solid var(--color-primary-black);\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 min-width: 150px;\n }\n"])), function (props) {
10369
10609
  return "calc(100% / " + (props.columns - 1) + ")";
10370
10610
  }, devices.mobile);
10371
- var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
10372
- var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
10373
- var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10611
+ var PaginationWrapper = /*#__PURE__*/styled__default(Pagination)(_templateObject6$p || (_templateObject6$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 40px;\n padding-bottom: 80px;\n\n @media ", " {\n padding-top: 24px;\n padding-bottom: 60px;\n }\n"])), devices.mobile);
10612
+ var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 60px 0 24px 0;\n\n div:hover {\n background-color: var(--color-base-light-grey);\n }\n\n > div > div {\n background-color: var(--color-base-light-grey);\n }\n\n svg path {\n fill: var(--color-base-black) !important;\n }\n"])));
10613
+ var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
10374
10614
 
10375
10615
  /* eslint-disable react/no-danger */
10376
10616
  var Content = function Content(_ref) {
@@ -10573,25 +10813,25 @@ var Table = function Table(_ref) {
10573
10813
  }))));
10574
10814
  };
10575
10815
 
10576
- var _templateObject$1h, _templateObject2$_, _templateObject3$N, _templateObject4$E, _templateObject5$y, _templateObject6$p, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10577
- var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10816
+ var _templateObject$1i, _templateObject2$$, _templateObject3$O, _templateObject4$F, _templateObject5$z, _templateObject6$q, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$8, _templateObject1$6, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$2;
10817
+ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
10578
10818
  var theme = _ref.theme;
10579
10819
  return "var(--color-" + theme + ")";
10580
10820
  }, function (_ref2) {
10581
10821
  var theme = _ref2.theme;
10582
10822
  return "var(--color-" + theme + ")";
10583
10823
  });
10584
- var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
10585
- var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-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);
10586
- var Error = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
10587
- var Form = /*#__PURE__*/styled__default.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);
10588
- var FormFooterWrapper = /*#__PURE__*/styled__default.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);
10589
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10590
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10591
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10592
- var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__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);
10593
- var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$5 || (_templateObject1$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10594
- var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$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"])));
10824
+ var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
10825
+ var SignUpTitleWrapper = /*#__PURE__*/styled__default('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(--color-base-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);
10826
+ var Error = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
10827
+ var Form = /*#__PURE__*/styled__default.form(_templateObject5$z || (_templateObject5$z = /*#__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);
10828
+ var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$q || (_templateObject6$q = /*#__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);
10829
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
10830
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
10831
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
10832
+ var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$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);
10833
+ var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
10834
+ var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$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"])));
10595
10835
  var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject11$3 || (_templateObject11$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(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
10596
10836
  var _ref3$isOpen = _ref3.isOpen,
10597
10837
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
@@ -10998,13 +11238,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
10998
11238
  }))))));
10999
11239
  };
11000
11240
 
11001
- var _templateObject$1i, _templateObject2$$, _templateObject4$F, _templateObject5$z;
11002
- var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
11241
+ var _templateObject$1j, _templateObject2$10, _templateObject4$G, _templateObject5$A;
11242
+ var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n min-height: 70px;\n background: var(--color-base-white);\n z-index: ", ";\n align-content: center;\n border-bottom: 1px solid var(--color-base-light-grey);\n\n ", "\n\n @media ", " {\n min-height: 60px;\n }\n"])), zIndexes.anchor, function (_ref) {
11003
11243
  var withShadow = _ref.withShadow;
11004
- return withShadow && styled.css(_templateObject2$$ || (_templateObject2$$ = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11244
+ return withShadow && styled.css(_templateObject2$10 || (_templateObject2$10 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11005
11245
  }, devices.mobile);
11006
- var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
11007
- var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$z || (_templateObject5$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11246
+ var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 24px;\n min-width: 24px;\n max-height: 24px;\n max-width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n\n @media ", " {\n min-height: 12px;\n min-width: 12px;\n max-height: 12px;\n max-width: 12px;\n }\n"])), devices.mobile);
11247
+ var ContentWrapper$2 = /*#__PURE__*/styled__default.a(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11008
11248
 
11009
11249
  var defaultGrid = {
11010
11250
  columnStartDesktop: 2,
@@ -11062,12 +11302,12 @@ var AnchorBar = function AnchorBar(_ref) {
11062
11302
  return null;
11063
11303
  };
11064
11304
 
11065
- var _templateObject$1j, _templateObject2$10;
11066
- var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
11305
+ var _templateObject$1k, _templateObject2$11;
11306
+ var FocusableTab = /*#__PURE__*/styled__default(Tab)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n &:not(:active):not(:focus) {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n\n @media ", " {\n position: absolute;\n left: 10px;\n top: 10px;\n width: 80px;\n height: 44px;\n margin: 0;\n padding: 0;\n overflow: hidden;\n clip: auto;\n color: transparent;\n background: transparent;\n opacity: 0;\n border: 0;\n white-space: nowrap;\n user-select: none;\n }\n"])), function (_ref) {
11067
11307
  var hide = _ref.hide;
11068
11308
  return hide && "display: none;";
11069
11309
  }, devices.mobileAndTablet);
11070
- var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
11310
+ var HiddenBlock = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 29px 50px;\n display: inline-block;\n width: 100%;\n height: fit-content;\n border-bottom: solid 2px var(--color-base-light-grey);\n overflow: hidden;\n &:not(:has(div:focus)) {\n position: absolute;\n border-bottom: 0;\n padding: 0;\n }\n @media ", " {\n border-bottom: 0;\n position: absolute;\n padding: 0;\n }\n"])), devices.mobileAndTablet);
11071
11311
 
11072
11312
  /**
11073
11313
  * An accessible component which allows Assistive Technology users to move the focus
@@ -11159,8 +11399,8 @@ var SkipToMain = function SkipToMain(_ref) {
11159
11399
  }));
11160
11400
  };
11161
11401
 
11162
- var _templateObject$1k;
11163
- var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11402
+ var _templateObject$1l;
11403
+ var TextContainer$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-black);\n font-feature-settings: var(--font-feature-settings-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-feature-settings: var(--font-feature-settings-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-feature-settings: var(--font-feature-settings-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 60px 0 16px;\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: var(--color-base-black);\n text-decoration: underline;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n cursor: pointer;\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n\n &:hover {\n color: var(--color-rbo-black-hovered);\n }\n\n &:active {\n color: var(--color-rbo-black-pressed);\n }\n }\n\n p {\n margin: 30px 0;\n }\n\n p:has(+ ul),\n p:has(+ ol) {\n margin-bottom: 12px;\n }\n\n & ul,\n & ol {\n padding: 0;\n list-style: none;\n margin-block-start: 0;\n margin-block-end: 0;\n }\n\n & ul li,\n & ol li {\n position: relative;\n padding-left: 32px;\n padding-top: 6px;\n padding-bottom: 6px;\n\n @media ", " {\n padding-left: 28px;\n padding-top: 4px;\n padding-bottom: 4px;\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n position: absolute;\n left: 0;\n width: 20px;\n text-align: right;\n margin-right: 12px;\n\n @media ", " {\n width: 16px;\n margin-right: 12px;\n }\n }\n\n & ol {\n counter-reset: custom-ol;\n }\n\n & ol > li {\n counter-increment: custom-ol;\n }\n\n & ol > li::before {\n content: counter(custom-ol, decimal-leading-zero) '';\n position: absolute;\n left: 0;\n min-width: 20px;\n text-align: right;\n margin-right: 12px;\n display: inline-block;\n\n @media ", " {\n min-width: 16px;\n margin-right: 12px;\n }\n }\n"])), devices.mobile, devices.mobile, devices.mobile);
11164
11404
 
11165
11405
  var addTypographyClasses = function addTypographyClasses(html) {
11166
11406
  return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");
@@ -11220,27 +11460,27 @@ var BodyContent = function BodyContent(_ref2) {
11220
11460
  }, gridItemOrContent);
11221
11461
  };
11222
11462
 
11223
- var _templateObject$1l, _templateObject2$11, _templateObject3$O, _templateObject4$G, _templateObject5$A, _templateObject6$q, _templateObject7$k;
11463
+ var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11224
11464
  var color = 'primary-black';
11225
11465
  var Button$2 = /*#__PURE__*/styled__default(SecondaryButton).attrs({
11226
11466
  borderColor: color,
11227
11467
  hoveredColor: color,
11228
11468
  pressedColor: color,
11229
11469
  textColor: color
11230
- })(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11231
- var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
11232
- var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
11470
+ })(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 35px;\n margin-top: 33px;\n width: fit-content;\n\n @media ", " {\n margin-bottom: 33px;\n margin-top: 31px;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11471
+ var Container$7 = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--color-", ");\n padding: 60px 59px 59px;\n\n @media ", " {\n padding: 35px 20px 34px;\n }\n"])), color, devices.mobile);
11472
+ var Description = /*#__PURE__*/styled__default(BodyContentTextContainer)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n margin: 27px 0;\n\n @media ", " {\n margin: 20px 0;\n }\n }\n"])), devices.mobile);
11233
11473
  var Heading = /*#__PURE__*/styled__default(HarmonicHeader).attrs({
11234
11474
  serif: true,
11235
11475
  size: 'medium'
11236
- })(_templateObject4$G || (_templateObject4$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11476
+ })(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n letter-spacing: -0.5px;\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11237
11477
  var Intro = /*#__PURE__*/styled__default(HarmonicSubtitle).attrs({
11238
11478
  size: 'large'
11239
- })(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11240
- var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$q || (_templateObject6$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
11479
+ })(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n margin-bottom: 27px;\n\n @media ", " {\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
11480
+ var SignInLink = /*#__PURE__*/styled__default.a(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--primary-black);\n cursor: pointer;\n text-decoration: underline;\n text-decoration-skip: none;\n"])));
11241
11481
  var SignInPrompt = /*#__PURE__*/styled__default(BodyCopyHarmonic).attrs({
11242
11482
  size: 'large'
11243
- })(_templateObject7$k || (_templateObject7$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11483
+ })(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11244
11484
 
11245
11485
  var Paywall = function Paywall(_ref) {
11246
11486
  var className = _ref.className,
@@ -11433,14 +11673,14 @@ var Navigation = function Navigation(_ref) {
11433
11673
  })))))));
11434
11674
  };
11435
11675
 
11436
- var _templateObject$1m, _templateObject2$12, _templateObject3$P, _templateObject4$H, _templateObject5$B, _templateObject6$r, _templateObject7$l;
11437
- var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
11438
- var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
11439
- var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
11440
- var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$H || (_templateObject4$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11441
- var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$B || (_templateObject5$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11442
- var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$r || (_templateObject6$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11443
- var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$l || (_templateObject7$l = /*#__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: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
11676
+ var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject6$s, _templateObject7$m;
11677
+ var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n padding: 44px 0px;\n grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n @media ", " {\n padding: 40px 0px;\n gap: 24px;\n }\n\n @media ", " {\n padding: 20px 0px;\n row-gap: 40px;\n grid-template-areas:\n '. social social social social social social social social social social social social .'\n '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n }\n"])), devices.tablet, devices.mobile);
11678
+ var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: policy;\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n @media ", " {\n gap: 20px;\n }\n\n @media ", " {\n gap: 12px;\n }\n"])), devices.tablet, devices.mobile);
11679
+ var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: social;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 20px;\n\n @media ", " {\n gap: 40px;\n }\n"])), devices.mobile);
11680
+ var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11681
+ var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n @media ", " {\n gap: 24px;\n }\n"])), devices.mobile);
11682
+ var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n max-width: 290px;\n\n @media ", " {\n max-width: unset;\n }\n"])), devices.mobile);
11683
+ var TextLinkWrapper$3 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$m || (_templateObject7$m = /*#__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: var(--harmonic-text-link-underline-offset);\n margin-bottom: 0;\n padding-bottom: 0;\n"])));
11444
11684
 
11445
11685
  var SPONSOR_IMAGE_SOURCE = 'https://s3.eu-west-1.amazonaws.com/static.roh.org.uk/sponsorlogos/arts-council-england-invert.svg';
11446
11686
  var Footer = function Footer(_ref) {
@@ -11498,18 +11738,18 @@ var Footer = function Footer(_ref) {
11498
11738
  }, additionalInfo))));
11499
11739
  };
11500
11740
 
11501
- var _templateObject$1n, _templateObject2$13, _templateObject3$Q, _templateObject4$I, _templateObject5$C, _templateObject8$e, _templateObject9$9, _templateObject0$8;
11741
+ var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject5$D, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11502
11742
  var LIST_ITEM_GAP = 32;
11503
- var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
11743
+ var AnchorTabbarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n width: 100%;\n top: 0;\n border-bottom: ", ";\n background-color: var(--color-base-white);\n z-index: ", ";\n\n ", "\n"])), function (_ref) {
11504
11744
  var bottomBorder = _ref.bottomBorder;
11505
11745
  return bottomBorder ? '1px solid var(--color-base-light-grey)' : 'none';
11506
11746
  }, zIndexes.anchor, function (_ref2) {
11507
11747
  var withShadow = _ref2.withShadow;
11508
- return withShadow && styled.css(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11748
+ return withShadow && styled.css(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11509
11749
  });
11510
- var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11511
- var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11512
- var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
11750
+ var TabsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--anchor-tabs-height);\n"])));
11751
+ var TabsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n"])));
11752
+ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: ", ";\n display: flex;\n gap: ", "px;\n justify-content: ", ";\n align-items: center;\n list-style: none;\n padding: 0;\n margin: 0;\n height: var(--anchor-tabs-height);\n white-space: nowrap;\n overflow: scroll;\n scrollbar-width: none;\n ::-webkit-scrollbar {\n display: none;\n }\n scroll-behavior: smooth;\n\n @media ", " {\n & {\n width: ", ";\n }\n }\n"])), function (_ref3) {
11513
11753
  var tabsOverflow = _ref3.tabsOverflow;
11514
11754
  return tabsOverflow ? 'calc(100% - 74px)' : '100%';
11515
11755
  }, LIST_ITEM_GAP, function (_ref4) {
@@ -11520,11 +11760,11 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject5$C || (_templateO
11520
11760
  hasTwoArrows = _ref5.hasTwoArrows;
11521
11761
  return tabsOverflow && hasTwoArrows ? 'calc(100% - 50px)' : '100%';
11522
11762
  });
11523
- var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
11763
+ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 74px;\n height: var(--anchor-tabs-height);\n background-color: var(--color-base-white);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n\n ", "\n"])), function (_ref7) {
11524
11764
  var withShadow = _ref7.withShadow;
11525
- return withShadow && styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11765
+ return withShadow && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n box-shadow: var(--shadow-floating);\n "])));
11526
11766
  });
11527
- var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_templateObject0$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
11767
+ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: ", ";\n pinter-events: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n && svg path {\n fill: ", ";\n }\n"])), function (_ref8) {
11528
11768
  var disabled = _ref8.disabled;
11529
11769
  return disabled ? 'not-allowed' : 'pointer';
11530
11770
  }, function (_ref9) {
@@ -11535,7 +11775,7 @@ var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject0$8 || (_temp
11535
11775
  return disabled ? 'var(--color-state-disabled)' : 'var(--button-anchor-tab-color)';
11536
11776
  });
11537
11777
 
11538
- var _excluded$q = ["id", "text"];
11778
+ var _excluded$r = ["id", "text"];
11539
11779
  var AnchorTabBar = function AnchorTabBar(_ref) {
11540
11780
  var tabs = _ref.tabs,
11541
11781
  onTabClick = _ref.onTabClick,
@@ -11746,7 +11986,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11746
11986
  }, tabs.map(function (_ref4) {
11747
11987
  var id = _ref4.id,
11748
11988
  text = _ref4.text,
11749
- rest = _objectWithoutPropertiesLoose(_ref4, _excluded$q);
11989
+ rest = _objectWithoutPropertiesLoose(_ref4, _excluded$r);
11750
11990
  return /*#__PURE__*/React__default.createElement("li", {
11751
11991
  key: id
11752
11992
  }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -11779,20 +12019,20 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
11779
12019
  })))) : null))));
11780
12020
  };
11781
12021
 
11782
- var _templateObject$1o, _templateObject2$14, _templateObject3$R, _templateObject4$J, _templateObject6$s, _templateObject7$m, _templateObject8$f, _templateObject9$a, _templateObject0$9;
11783
- var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
12022
+ var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b, _templateObject0$a;
12023
+ var TitleCTAGridWrapper = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: ", ";\n top: -1px;\n background-color: var(--base-color-white);\n z-index: ", ";\n"])), function (_ref) {
11784
12024
  var sticky = _ref.sticky;
11785
12025
  return sticky ? 'sticky' : 'initial';
11786
12026
  }, zIndexes.anchor);
11787
- var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
11788
- var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
12027
+ var TitleCTAGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: solid 2px var(--base-color-light-grey);\n"])));
12028
+ var TitleCTAGridItem = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 2 / span 15;\n display: flex;\n align-items: center;\n flex-direction: ", ";\n gap: 40px;\n justify-content: space-between;\n\n @media ", " {\n & {\n grid-column: 2 / span 13;\n gap: 20px;\n }\n }\n\n @media ", " {\n & {\n grid-column: 2 / span 12;\n }\n }\n"])), function (_ref2) {
11789
12029
  var title = _ref2.title;
11790
12030
  return title ? 'row' : 'row-reverse';
11791
12031
  }, devices.tablet, devices.mobile);
11792
- var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$J || (_templateObject4$J = /*#__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);
11793
- var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__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);
11794
- var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$m || (_templateObject7$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
11795
- var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
12032
+ var AnchorTitle = /*#__PURE__*/styled__default.div(_templateObject4$K || (_templateObject4$K = /*#__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);
12033
+ var ButtonsDesktopWrapper = /*#__PURE__*/styled__default.div(_templateObject6$t || (_templateObject6$t = /*#__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);
12034
+ var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n\n @media ", " {\n & {\n display: block;\n }\n }\n"])), devices.mobile);
12035
+ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_ref3) {
11796
12036
  var theme = _ref3.theme;
11797
12037
  return theme.colors.primaryButtonReverseBg;
11798
12038
  }, function (_ref4) {
@@ -11805,10 +12045,10 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
11805
12045
  var theme = _ref6.theme;
11806
12046
  return theme.colors.primaryButtonReverse;
11807
12047
  });
11808
- var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
11809
- var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$9 || (_templateObject0$9 = /*#__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);
12048
+ var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
12049
+ var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__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);
11810
12050
 
11811
- var _excluded$r = ["text"],
12051
+ var _excluded$s = ["text"],
11812
12052
  _excluded2$4 = ["text"];
11813
12053
  var TitleWithCTA = function TitleWithCTA(_ref) {
11814
12054
  var title = _ref.title,
@@ -11818,7 +12058,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11818
12058
  message = _ref.message;
11819
12059
  var _ref2 = (links == null ? void 0 : links[0]) || {},
11820
12060
  primaryButtonText = _ref2.text,
11821
- primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$r);
12061
+ primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$s);
11822
12062
  var _ref3 = (links == null ? void 0 : links[1]) || {},
11823
12063
  secondaryButtonText = _ref3.text,
11824
12064
  secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$4);
@@ -11839,14 +12079,14 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
11839
12079
  }, message))));
11840
12080
  };
11841
12081
 
11842
- var _templateObject$1p, _templateObject2$15, _templateObject3$S, _templateObject4$K;
11843
- var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
11844
- var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
11845
- var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
11846
- var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$K || (_templateObject4$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
12082
+ var _templateObject$1q, _templateObject2$16, _templateObject3$T, _templateObject4$L;
12083
+ var UpsellBorderBox = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: solid 4px;\n border-color: var(--upsell-border-color);\n padding: 66px 74px 70px;\n\n @media ", " {\n & {\n border-left: none;\n border-right: none;\n padding: 40px 0px;\n }\n }\n"])), devices.mobile);
12084
+ var TitleContent = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n color: var(--color-primary-black);\n\n @media ", " {\n margin-left: 20px;\n margin-right: 20px;\n }\n }\n"])), devices.mobile);
12085
+ var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 60px;\n\n @media ", " {\n margin-bottom: 40px;\n margin-left: 20px;\n margin-right: 20px;\n }\n"])), devices.mobile);
12086
+ var TextContent = /*#__PURE__*/styled__default(BodyContent)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child {\n margin: 35px 0 10px;\n\n @media ", " {\n margin-top: 24px;\n }\n }\n\n && :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child {\n margin-bottom: 0;\n }\n"])), devices.mobile);
11847
12087
 
11848
- var _templateObject$1q;
11849
- var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
12088
+ var _templateObject$1r;
12089
+ var Wrapper$a = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n gap: 60px 74px;\n grid-template-columns: repeat(2, 1fr);\n width: 100%;\n\n @media ", " {\n gap: 40px 74px;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n grid-template-columns: 1fr;\n }\n"])), devices.mobile);
11850
12090
 
11851
12091
  var UpsellCards = function UpsellCards(_ref) {
11852
12092
  var upsellCards = _ref.upsellCards;
@@ -11908,9 +12148,9 @@ var UpsellSection = function UpsellSection(_ref) {
11908
12148
  })))));
11909
12149
  };
11910
12150
 
11911
- var _templateObject$1r, _templateObject2$16;
11912
- var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
11913
- var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
12151
+ var _templateObject$1s, _templateObject2$17;
12152
+ var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--color-base-white);\n"])), zIndexes.anchor);
12153
+ var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
11914
12154
  var bottomBorder = _ref.bottomBorder;
11915
12155
  return bottomBorder && 'border-bottom: 1px solid var(--color-base-light-grey);';
11916
12156
  }, devices.mobileAndTablet, devices.mobile);
@@ -11941,13 +12181,13 @@ var StickyBar = function StickyBar(_ref) {
11941
12181
  }, children)));
11942
12182
  };
11943
12183
 
11944
- var _templateObject$1s, _templateObject2$17, _templateObject3$T, _templateObject4$L;
11945
- var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
11946
- var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
11947
- var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
11948
- var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$L || (_templateObject4$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
12184
+ var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M;
12185
+ var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
12186
+ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
12187
+ var ContentWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
12188
+ var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
11949
12189
 
11950
- var _excluded$s = ["isOpen", "setIsOpen", "children", "appElementId"];
12190
+ var _excluded$t = ["isOpen", "setIsOpen", "children", "appElementId"];
11951
12191
  var MAX_Z_INDEX = 9999999999;
11952
12192
  if (Modal.defaultStyles.content) {
11953
12193
  Modal.defaultStyles.content.position = 'static';
@@ -12021,7 +12261,7 @@ var ModalWindow = function ModalWindow(_ref) {
12021
12261
  setIsOpen = _ref.setIsOpen,
12022
12262
  children = _ref.children,
12023
12263
  appElementId = _ref.appElementId,
12024
- modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$s);
12264
+ modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$t);
12025
12265
  var isMobile = useMobile();
12026
12266
  var customStyles = {
12027
12267
  overlay: {
@@ -12149,29 +12389,29 @@ var getCardSlideMobileStyles = function getCardSlideMobileStyles(type) {
12149
12389
  return "\n width: " + ("calc((" + columnsPerSlide + " * " + gridColumnWidth + ") + (" + gapsPerSlide + " * " + GRID_COLUMN_GAP + "))") + ";\n margin-right: " + ("calc(" + gridColumnWidth + " + (" + GRID_COLUMN_GAP + " * 2))") + ";\n ";
12150
12390
  };
12151
12391
 
12152
- var _templateObject$1t, _templateObject2$18, _templateObject3$U, _templateObject4$M, _templateObject5$D, _templateObject6$t, _templateObject7$n, _templateObject8$g, _templateObject9$b;
12153
- var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
12392
+ var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c;
12393
+ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n @media ", " {\n ", "\n }}\n\n &:fullscreen {\n background: var(--color-base-white);\n padding-top: 44px;\n padding-bottom: 84px;\n\n .swipe-slide > figure {\n height: var(--fullscreen-figure-height);\n\n > div {\n height: var(--fullscreen-figure-height);\n }\n }\n }\n"])), function (_ref) {
12154
12394
  var imagesHeightDesktop = _ref.imagesHeightDesktop;
12155
12395
  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\n > div {\n height: " + imagesHeightDesktop + "px;\n }\n }\n }\n }";
12156
12396
  }, devices.mobile, function (_ref2) {
12157
12397
  var imagesHeightDevice = _ref2.imagesHeightDevice;
12158
12398
  return "&&& {\n .swipe-slide > figure {\n > div {\n height: " + imagesHeightDevice + "px;\n }\n }\n }";
12159
12399
  });
12160
- var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12400
+ var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n}"])), function (_ref3) {
12161
12401
  var type = _ref3.type,
12162
12402
  isActive = _ref3.isActive;
12163
12403
  return "\n & {\n .swipe-slide {\n " + getCardSlideDesktopStyles(type, isActive) + "\n }\n }\n\n @media " + devices.tablet + " {\n & {\n .swipe-slide {\n " + getCardSlideTabletStyles(type) + "\n }\n }\n }\n\n @media " + devices.mobile + " {\n && {\n .swipe-slide {\n " + getCardSlideMobileStyles(type) + "\n }\n }\n }\n ";
12164
12404
  });
12165
- var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$U || (_templateObject3$U = /*#__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);
12166
- var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$M || (_templateObject4$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
12167
- var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$D || (_templateObject5$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12405
+ var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$V || (_templateObject3$V = /*#__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);
12406
+ var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n user-select: text;\n"])));
12407
+ var TitleWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
12168
12408
  var isDescriptionPresent = _ref4.isDescriptionPresent;
12169
12409
  return isDescriptionPresent && 'margin: 20px 0';
12170
12410
  });
12171
- var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$t || (_templateObject6$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
12172
- var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$n || (_templateObject7$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12173
- var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$g || (_templateObject8$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12174
- var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
12411
+ var TitleText$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n && {\n line-height: 42px;\n }\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n padding-bottom: 4px;\n box-sizing: border-box;\n /* max-height = 2 * 40px (two lines): 40px is the design line-height for header--medium (matches font-size/optical metrics), +4px provides extra descender room so glyphs like g/y aren't clipped \u2014 non\u2011WebKit fallback */\n max-height: calc(2 * 40px + 4px);\n"])));
12412
+ var ButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n align-items: start;\n"])));
12413
+ var TitleGridItem = /*#__PURE__*/styled__default(GridItem)(_templateObject8$h || (_templateObject8$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n grid-column: 2 / span 10;\n }\n"])), devices.tablet);
12414
+ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject9$c || (_templateObject9$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n .swipe {\n padding-inline-start: 2px;\n padding-block-start: 2px;\n }\n\n ", ";\n\n @media ", " {\n grid-column: ", ";\n }\n\n @media ", " {\n grid-column: 2 / span 13;\n }\n"])), function (_ref5) {
12175
12415
  var active = _ref5.active;
12176
12416
  return active ? 'grid-column: 1 / span 16' : '';
12177
12417
  }, devices.tablet, function (_ref6) {
@@ -12414,19 +12654,19 @@ var Carousel = function Carousel(_ref) {
12414
12654
  }, children))));
12415
12655
  };
12416
12656
 
12417
- var _templateObject$1u, _templateObject2$19, _templateObject3$V, _templateObject4$N, _templateObject5$E, _templateObject6$u, _templateObject7$o, _templateObject8$h, _templateObject9$c, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
12418
- var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1u || (_templateObject$1u = /*#__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 user-select: none;\n\n .highlight-carousel-text {\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);
12419
- var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__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);
12420
- var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12421
- var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$N || (_templateObject4$N = /*#__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 a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\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);
12422
- var InfoLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject5$E || (_templateObject5$E = /*#__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);
12423
- var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$u || (_templateObject6$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12424
- var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$o || (_templateObject7$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
12425
- var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$h || (_templateObject8$h = /*#__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);
12426
- var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$c || (_templateObject9$c = /*#__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);
12427
- var RotatorButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$a = /*#__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);
12428
- var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__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);
12429
- var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12657
+ var _templateObject$1v, _templateObject2$1a, _templateObject3$W, _templateObject4$O, _templateObject5$F, _templateObject6$v, _templateObject7$p, _templateObject8$i, _templateObject9$d, _templateObject0$b, _templateObject1$7, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$1, _templateObject15$1, _templateObject16$1;
12658
+ var HighlightsGrid$1 = /*#__PURE__*/styled__default(Grid)(_templateObject$1v || (_templateObject$1v = /*#__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 user-select: none;\n\n .highlight-carousel-text {\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);
12659
+ var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__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);
12660
+ var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
12661
+ var InfoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$O || (_templateObject4$O = /*#__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 a {\n text-underline-offset: var(--harmonic-text-link-underline-offset);\n }\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);
12662
+ var InfoLogoWrapper = /*#__PURE__*/styled__default.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);
12663
+ var InfoTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject6$v || (_templateObject6$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: text;\n\n h1,\n h2,\n h3 {\n margin-bottom: 8px;\n }\n"])));
12664
+ var InfoTextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$p || (_templateObject7$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 24px;\n user-select: text;\n\n @media ", " {\n & {\n margin-top: 20px;\n }\n }\n"])), devices.mobileAndTablet);
12665
+ var InfoLinkWrapper = /*#__PURE__*/styled__default.div(_templateObject8$i || (_templateObject8$i = /*#__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);
12666
+ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject9$d || (_templateObject9$d = /*#__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);
12667
+ var RotatorButtonsWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$b || (_templateObject0$b = /*#__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);
12668
+ var RotatorButtonsWrapperMobile$1 = /*#__PURE__*/styled__default.div(_templateObject1$7 || (_templateObject1$7 = /*#__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);
12669
+ var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n"])));
12430
12670
  var FirstButtonComponentWrapper = /*#__PURE__*/styled__default.div(_templateObject11$4 || (_templateObject11$4 = /*#__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);
12431
12671
  var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobileAndTablet);
12432
12672
  var AdditionalInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject13$3 || (_templateObject13$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n @media ", " {\n margin-top: 16px;\n }\n"])), devices.mobileAndTablet);
@@ -12437,7 +12677,7 @@ var VideoWithControlsWrapper = /*#__PURE__*/styled__default.div(_templateObject1
12437
12677
  }, devices.mobile);
12438
12678
  var ProgressContainer$1 = /*#__PURE__*/styled__default.div(_templateObject16$1 || (_templateObject16$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n\n p {\n margin-bottom: 16px;\n }\n\n @media ", " {\n margin-top: 20px;\n\n p {\n margin-bottom: 12px;\n }\n }\n"])), devices.mobileAndTablet);
12439
12679
 
12440
- var _excluded$t = ["text"],
12680
+ var _excluded$u = ["text"],
12441
12681
  _excluded2$5 = ["text"];
12442
12682
  var _buttonTypeToButton$2;
12443
12683
  var buttonTypeToButton$2 = (_buttonTypeToButton$2 = {}, _buttonTypeToButton$2[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$2[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$2[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$2);
@@ -12448,7 +12688,7 @@ var Buttons = function Buttons(_ref) {
12448
12688
  var _ref2 = firstButton || {},
12449
12689
  _ref2$text = _ref2.text,
12450
12690
  firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
12451
- restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$t);
12691
+ restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$u);
12452
12692
  var secondButton = links == null ? void 0 : links[1];
12453
12693
  var _ref3 = secondButton || {},
12454
12694
  _ref3$text = _ref3.text,
@@ -12663,7 +12903,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12663
12903
  auxiliaryCTA: auxiliaryCTA
12664
12904
  })), /*#__PURE__*/React__default.createElement(CarouselWrapper, {
12665
12905
  "data-testid": "carousel-wrapper"
12666
- }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$1, {
12906
+ }, hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapper$2, {
12667
12907
  "data-testid": "rotator-buttons"
12668
12908
  }, /*#__PURE__*/React__default.createElement(RotatorButtons, {
12669
12909
  onClickNext: onNext,
@@ -12680,11 +12920,11 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12680
12920
  })));
12681
12921
  };
12682
12922
 
12683
- var _excluded$u = ["logo", "slides"];
12923
+ var _excluded$v = ["logo", "slides"];
12684
12924
  var HighlightsCinema = function HighlightsCinema(_ref) {
12685
12925
  var logo = _ref.logo,
12686
12926
  slides = _ref.slides,
12687
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
12927
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12688
12928
  var slidesWithLinks = slides.map(function (slide) {
12689
12929
  var links = processSlideLinks(slide.links);
12690
12930
  return _extends({}, slide, {
@@ -12701,10 +12941,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
12701
12941
  })));
12702
12942
  };
12703
12943
 
12704
- var _excluded$v = ["slides"];
12944
+ var _excluded$w = ["slides"];
12705
12945
  var HighlightsCore = function HighlightsCore(_ref) {
12706
12946
  var slides = _ref.slides,
12707
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
12947
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12708
12948
  var slidesWithLinks = slides.map(function (slide) {
12709
12949
  var links = processSlideLinks(slide.links);
12710
12950
  return _extends({}, slide, {
@@ -12718,11 +12958,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
12718
12958
  })));
12719
12959
  };
12720
12960
 
12721
- var _excluded$w = ["logo", "slides"];
12961
+ var _excluded$x = ["logo", "slides"];
12722
12962
  var HighlightsStream = function HighlightsStream(_ref) {
12723
12963
  var logo = _ref.logo,
12724
12964
  slides = _ref.slides,
12725
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
12965
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
12726
12966
  var slidesWithLinks = slides.map(function (slide) {
12727
12967
  var links = processSlideLinks(slide.links);
12728
12968
  return _extends({}, slide, {
@@ -12739,9 +12979,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
12739
12979
  })));
12740
12980
  };
12741
12981
 
12742
- var _templateObject$1v, _templateObject3$W;
12743
- var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12744
- var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12982
+ var _templateObject$1w, _templateObject3$X;
12983
+ var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n user-select: none;\n display: flex;\n\n .swipe-slide {\n width: 100%;\n }\n"])));
12984
+ var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 6px;\n"])));
12745
12985
 
12746
12986
  var MinimalCarousel = function MinimalCarousel(_ref) {
12747
12987
  var children = _ref.children;
@@ -13336,8 +13576,8 @@ var Theme = function Theme(_ref) {
13336
13576
  }, children);
13337
13577
  };
13338
13578
 
13339
- var _templateObject$1w;
13340
- var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1w || (_templateObject$1w = /*#__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: 4px;\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) {
13579
+ var _templateObject$1x;
13580
+ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1x || (_templateObject$1x = /*#__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: 4px;\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) {
13341
13581
  var theme = _ref.theme;
13342
13582
  return theme.colors.primary;
13343
13583
  }, function (_ref2) {
@@ -14284,10 +14524,10 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1w || (
14284
14524
  return theme.footer.tablet.paddingBottom;
14285
14525
  }, devices.desktop, devices.largeDesktop);
14286
14526
 
14287
- var _templateObject$1x, _templateObject2$1a, _templateObject3$X;
14288
- var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14289
- var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14290
- var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
14527
+ var _templateObject$1y, _templateObject2$1b, _templateObject3$Y;
14528
+ var FigureBlock = /*#__PURE__*/styled__default.figure(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14529
+ var BlockquoteBlock = /*#__PURE__*/styled__default.blockquote(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n"])));
14530
+ var AttributionBlock = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 32px 0;\n\n & cite {\n font-style: normal;\n }\n\n @media ", " {\n padding: 24px 0;\n }\n"])), devices.mobile);
14291
14531
 
14292
14532
  /* eslint-disable react/no-danger */
14293
14533
  var Quote = function Quote(_ref) {
@@ -14333,6 +14573,7 @@ exports.Caption = Caption;
14333
14573
  exports.Card = Card;
14334
14574
  exports.Cards = Cards;
14335
14575
  exports.Carousel = Carousel;
14576
+ exports.CastFilter = CastFilters;
14336
14577
  exports.CinemaBadge = CinemaBadge;
14337
14578
  exports.ContactCard = ContactCard;
14338
14579
  exports.ContentSummary = ContentSummary;